Move 'more' indicator to new row.

This commit is contained in:
Chris McCormick 2026-01-03 22:04:31 +08:00
parent 2ac5282248
commit 22bb934bb3

View file

@ -270,7 +270,7 @@
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: flex-start; flex-direction: column;
gap: 0.5em; gap: 0.5em;
} }
@ -288,6 +288,12 @@
cursor: grabbing; cursor: grabbing;
} }
.card-header {
display: flex;
align-items: flex-start;
gap: 0.5em;
}
.card-text { .card-text {
flex-grow: 1; flex-grow: 1;
} }
@ -296,11 +302,17 @@
text-decoration: line-through; text-decoration: line-through;
} }
.card-footer {
display: flex;
align-items: center;
font-size: 0.85em;
color: var(--shade);
}
.card-expand-indicator { .card-expand-indicator {
color: var(--shade); color: var(--shade);
font-size: 1.2em; font-size: 1.2em;
line-height: 1; line-height: 1;
margin-left: 0.25em;
} }
.card-menu-btn { .card-menu-btn {
@ -1829,15 +1841,12 @@ chmod 755 kbtd
} }
}); });
const expandIndicator = hasNestedContent ? const cardHeader = h('div', { className: 'card-header' });
h('span', {
className: 'card-expand-indicator',
textContent: '+'
}) : null;
const cardText = h('span', { const cardText = h('span', {
className: 'card-text' className: 'card-text',
}, card.text, expandIndicator); textContent: card.text
});
const menuBtn = h('button', { const menuBtn = h('button', {
className: 'card-menu-btn', className: 'card-menu-btn',
@ -1853,6 +1862,8 @@ chmod 755 kbtd
} }
}); });
cardHeader.append(cardText, menuBtn);
const checkbox = h('div', { const checkbox = h('div', {
className: `card-menu-checkbox ${card.completed ? 'checked' : ''}` className: `card-menu-checkbox ${card.completed ? 'checked' : ''}`
}); });
@ -1890,7 +1901,17 @@ chmod 755 kbtd
className: 'card-menu' className: 'card-menu'
}, completeItem, moveItem); }, completeItem, moveItem);
cardDiv.append(cardText, menuBtn, menu); cardDiv.append(cardHeader, menu);
if (hasNestedContent) {
const cardFooter = h('div', { className: 'card-footer' });
const expandIndicator = h('span', {
className: 'card-expand-indicator',
textContent: '+'
});
cardFooter.append(expandIndicator);
cardDiv.append(cardFooter);
}
cardElements.push( cardElements.push(
cardDiv, cardDiv,