Don't show notes in the entry list, show a popup on hover instead.
This commit is contained in:
parent
d792726902
commit
a71d5c4658
88
dist/index.html
vendored
88
dist/index.html
vendored
@ -6267,8 +6267,10 @@ var root_3$4 = /* @__PURE__ */ from_html(`<div class="empty-state svelte-13s7gu4
|
||||
var root_6$2 = /* @__PURE__ */ from_html(`matching "<strong> </strong>"`, 1);
|
||||
var root_7$4 = /* @__PURE__ */ from_html(`<th style="width: 60px" class="svelte-13s7gu4"></th>`);
|
||||
var root_9$1 = /* @__PURE__ */ from_html(`<span class="drag-handle svelte-13s7gu4" aria-hidden="true">⠿</span>`);
|
||||
var root_10$1 = /* @__PURE__ */ from_html(`<td class="svelte-13s7gu4"><button class="btn btn-ghost btn-sm restore-btn svelte-13s7gu4" title="Restore entry">↩️</button></td>`);
|
||||
var root_8$3 = /* @__PURE__ */ from_html(`<tr><td class="svelte-13s7gu4"><!> <span class="entry-title svelte-13s7gu4"> </span></td><td class="svelte-13s7gu4"><span class="entry-username svelte-13s7gu4"> </span></td><td class="svelte-13s7gu4"><span class="entry-url truncate svelte-13s7gu4"> </span></td><td class="svelte-13s7gu4"><span class="entry-notes truncate svelte-13s7gu4"> </span></td><!></tr>`);
|
||||
var root_10$1 = /* @__PURE__ */ from_html(`<div class="notes-tooltip svelte-13s7gu4"><span class="notes-icon svelte-13s7gu4">🔍</span> <div class="tooltip-popup svelte-13s7gu4"> </div></div>`);
|
||||
var root_11$1 = /* @__PURE__ */ from_html(`<span>—</span>`);
|
||||
var root_12$1 = /* @__PURE__ */ from_html(`<td class="svelte-13s7gu4"><button class="btn btn-ghost btn-sm restore-btn svelte-13s7gu4" title="Restore entry">↩️</button></td>`);
|
||||
var root_8$3 = /* @__PURE__ */ from_html(`<tr><td class="svelte-13s7gu4"><!> <span class="entry-title svelte-13s7gu4"> </span></td><td class="svelte-13s7gu4"><span class="entry-username svelte-13s7gu4"> </span></td><td class="svelte-13s7gu4"><span class="entry-url truncate svelte-13s7gu4"> </span></td><td class="svelte-13s7gu4"><!></td><!></tr>`);
|
||||
var root_5$4 = /* @__PURE__ */ from_html(`<div class="results-info svelte-13s7gu4"><span class="text-sm text-muted"> <!></span></div> <table class="entries-table svelte-13s7gu4"><thead><tr><th class="svelte-13s7gu4">Title</th><th class="svelte-13s7gu4">Username</th><th class="svelte-13s7gu4">URL</th><th class="svelte-13s7gu4">Notes</th><!></tr></thead><tbody></tbody></table>`, 1);
|
||||
var root$5 = /* @__PURE__ */ from_html(`<div class="entry-list"><!></div>`);
|
||||
function EntryList($$anchor, $$props) {
|
||||
@ -6351,7 +6353,7 @@ function EntryList($$anchor, $$props) {
|
||||
});
|
||||
append($$anchor, div_3);
|
||||
};
|
||||
var alternate = ($$anchor) => {
|
||||
var alternate_1 = ($$anchor) => {
|
||||
var fragment = root_5$4();
|
||||
var div_4 = first_child(fragment);
|
||||
var span = child(div_4);
|
||||
@ -6409,13 +6411,31 @@ function EntryList($$anchor, $$props) {
|
||||
reset(span_4);
|
||||
reset(td_2);
|
||||
var td_3 = sibling(td_2);
|
||||
var span_5 = child(td_3);
|
||||
var text_9 = child(span_5, true);
|
||||
reset(span_5);
|
||||
reset(td_3);
|
||||
var node_5 = sibling(td_3);
|
||||
var node_5 = child(td_3);
|
||||
var consequent_7 = ($$anchor) => {
|
||||
var td_4 = root_10$1();
|
||||
var div_5 = root_10$1();
|
||||
var span_5 = child(div_5);
|
||||
var div_6 = sibling(span_5, 2);
|
||||
var text_9 = child(div_6, true);
|
||||
reset(div_6);
|
||||
reset(div_5);
|
||||
template_effect(() => {
|
||||
set_attribute(span_5, "title", get(entry).notes);
|
||||
set_text(text_9, get(entry).notes);
|
||||
});
|
||||
append($$anchor, div_5);
|
||||
};
|
||||
var alternate = ($$anchor) => {
|
||||
append($$anchor, root_11$1());
|
||||
};
|
||||
if_block(node_5, ($$render) => {
|
||||
if (get(entry).notes) $$render(consequent_7);
|
||||
else $$render(alternate, -1);
|
||||
});
|
||||
reset(td_3);
|
||||
var node_6 = sibling(td_3);
|
||||
var consequent_8 = ($$anchor) => {
|
||||
var td_4 = root_12$1();
|
||||
var button_1 = child(td_4);
|
||||
reset(td_4);
|
||||
delegated("click", button_1, (e) => {
|
||||
@ -6424,8 +6444,8 @@ function EntryList($$anchor, $$props) {
|
||||
});
|
||||
append($$anchor, td_4);
|
||||
};
|
||||
if_block(node_5, ($$render) => {
|
||||
if (get(isTrashView)) $$render(consequent_7);
|
||||
if_block(node_6, ($$render) => {
|
||||
if (get(isTrashView)) $$render(consequent_8);
|
||||
});
|
||||
reset(tr_1);
|
||||
template_effect(() => {
|
||||
@ -6434,7 +6454,6 @@ function EntryList($$anchor, $$props) {
|
||||
set_text(text_6, get(entry).title);
|
||||
set_text(text_7, get(entry).username || "—");
|
||||
set_text(text_8, get(entry).url || "—");
|
||||
set_text(text_9, get(entry).notes || "—");
|
||||
});
|
||||
delegated("click", tr_1, () => $$props.onSelect(get(entry).id));
|
||||
event("dragstart", tr_1, (e) => {
|
||||
@ -6458,7 +6477,7 @@ function EntryList($$anchor, $$props) {
|
||||
if (get(loading)) $$render(consequent);
|
||||
else if (get(error)) $$render(consequent_1, 1);
|
||||
else if (get(entries).length === 0) $$render(consequent_3, 2);
|
||||
else $$render(alternate, -1);
|
||||
else $$render(alternate_1, -1);
|
||||
});
|
||||
reset(div);
|
||||
append($$anchor, div);
|
||||
@ -8187,9 +8206,48 @@ label {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.entry-notes.svelte-13s7gu4 {
|
||||
.notes-icon.svelte-13s7gu4 {
|
||||
color: var(--color-text-muted);
|
||||
max-width: 200px;
|
||||
cursor: help;
|
||||
font-size: 0.95rem;
|
||||
opacity: 0.5;
|
||||
transition: opacity 150ms;
|
||||
}
|
||||
|
||||
.notes-icon.svelte-13s7gu4:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.notes-tooltip.svelte-13s7gu4 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip-popup.svelte-13s7gu4 {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background: var(--color-surface, #1e1e2e);
|
||||
color: var(--color-text, #cdd6f4);
|
||||
border: 1px solid var(--color-border, #45475a);
|
||||
border-radius: var(--radius-md, 8px);
|
||||
padding: 8px 12px;
|
||||
font-size: 0.8rem;
|
||||
min-width: 150px;
|
||||
max-width: 300px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
pointer-events: none;
|
||||
transition: opacity 150ms, visibility 150ms;
|
||||
}
|
||||
|
||||
.notes-tooltip.svelte-13s7gu4:hover .tooltip-popup:where(.svelte-13s7gu4) {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
@ -121,7 +121,14 @@
|
||||
<span class="entry-url truncate">{entry.url || '—'}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="entry-notes truncate">{entry.notes || '—'}</span>
|
||||
{#if entry.notes}
|
||||
<div class="notes-tooltip">
|
||||
<span class="notes-icon" title="{entry.notes}">🔍</span>
|
||||
<div class="tooltip-popup">{entry.notes}</div>
|
||||
</div>
|
||||
{:else}
|
||||
<span>—</span>
|
||||
{/if}
|
||||
</td>
|
||||
{#if isTrashView}
|
||||
<td>
|
||||
@ -242,9 +249,48 @@
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.entry-notes {
|
||||
.notes-icon {
|
||||
color: var(--color-text-muted);
|
||||
max-width: 200px;
|
||||
cursor: help;
|
||||
font-size: 0.95rem;
|
||||
opacity: 0.5;
|
||||
transition: opacity 150ms;
|
||||
}
|
||||
|
||||
.notes-icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.notes-tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip-popup {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background: var(--color-surface, #1e1e2e);
|
||||
color: var(--color-text, #cdd6f4);
|
||||
border: 1px solid var(--color-border, #45475a);
|
||||
border-radius: var(--radius-md, 8px);
|
||||
padding: 8px 12px;
|
||||
font-size: 0.8rem;
|
||||
min-width: 150px;
|
||||
max-width: 300px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
pointer-events: none;
|
||||
transition: opacity 150ms, visibility 150ms;
|
||||
}
|
||||
|
||||
.notes-tooltip:hover .tooltip-popup {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user