Move 'more' indicator to new row.
This commit is contained in:
parent
2ac5282248
commit
22bb934bb3
1 changed files with 31 additions and 10 deletions
41
index.html
41
index.html
|
|
@ -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,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue