{#if count > 0}
diff --git a/plugins/card-resources/src/components/EditCardNew.svelte b/plugins/card-resources/src/components/EditCardNew.svelte
index 49dc2eb5160..8f2e8861dfa 100644
--- a/plugins/card-resources/src/components/EditCardNew.svelte
+++ b/plugins/card-resources/src/components/EditCardNew.svelte
@@ -109,7 +109,7 @@
let element: HTMLElement
let titleEl: HTMLElement | null = null
let extraEl: HTMLElement | null = null
- let showParents: boolean = !$deviceInfo.isMobile
+ let expandedParents: boolean = !$deviceInfo.isMobile
let dropdownTags: boolean = false
const shrinkElement = (el: 'title' | 'extra'): void => {
@@ -135,8 +135,8 @@
} else if (headerWidth >= DROPDOWN_POINT && !extraEl.classList.contains('flex-shrink-15')) {
shrinkElement('extra')
}
- if (headerWidth < NO_PARENTS_POINT && showParents) showParents = false
- else if (headerWidth >= NO_PARENTS_POINT && !showParents) showParents = !$deviceInfo.isMobile
+ if (headerWidth < NO_PARENTS_POINT && expandedParents) expandedParents = false
+ else if (headerWidth >= NO_PARENTS_POINT && !expandedParents) expandedParents = !$deviceInfo.isMobile
}
afterUpdate(() => {
@@ -172,9 +172,7 @@
- {#if showParents}
-
- {/if}
+
{#if !_readonly}
-{#if value && Array.isArray(value.parentInfo) && (value.parentInfo.length > 0 || $$slots.default)}
+{#if value != null && Array.isArray(value.parentInfo) && (value.parentInfo.length > 0 || $$slots.default)}
- {#each value.parentInfo as parentInfo}
-
-
+ {#if !compact}
+ {#each value.parentInfo as parentInfo}
+ 100 ? 2 : 1}
+ colorInherit
+ >
+ {parentInfo.title}
+
+ ›
+ {/each}
+ {:else}
+ {@const parentInfo = value.parentInfo[0]}
+ {@const shortTitle = (parentInfo.title?.charAt(0) ?? '') + '...'}
100 ? 2 : 1}
colorInherit
>
- {parentInfo.title}
+ {shortTitle}
- ›
- {/each}
+ ›
+ {/if}
{:else if $$slots.default}
@@ -66,17 +80,23 @@
display: inline-flex;
flex-shrink: 1;
margin-left: 0;
- min-width: 0;
min-width: calc(
(var(--cards-container-card-min-width, 2rem) + 1.26rem) * var(--cards-container-parents, 1) +
var(--cards-container-card-min-width, 2rem)
);
color: var(--theme-darker-color);
+ &.compact {
+ min-width: 1rem;
+ }
+
.separator {
flex-shrink: 0;
padding: 0 0.5rem;
color: var(--theme-content-color);
+ &.compact {
+ padding: 0 0.5rem 0 0;
+ }
}
:global(a:hover) {
color: var(--theme-caption-color);