Release v1.1.3: playlist drag sorting, local SortableJS, and playlist UI updates

This commit is contained in:
2026-07-15 00:45:40 +01:00
parent b0649d838e
commit b7f1d800ef
9 changed files with 164 additions and 54 deletions
+106 -1
View File
@@ -1876,6 +1876,107 @@ table td .actions form {
align-items: center;
}
.playlist-order-cell {
width: 88px;
min-width: 88px;
white-space: nowrap;
vertical-align: middle;
}
.playlist-order-cell-inner {
display: flex;
align-items: center;
gap: 8px;
min-height: 100%;
}
.playlist-order-number {
min-width: 1.5em;
font-weight: 800;
color: var(--muted);
}
.playlist-drag-handle {
flex: 0 0 auto;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 0;
color: var(--muted);
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 4L8 8H16L12 4Z'/%3E%3Cpath d='M4 11H20V13H4V11Z'/%3E%3Cpath d='M4 15H20V17H4V15Z'/%3E%3Cpath d='M4 7H20V9H4V7Z'/%3E%3Cpath d='M12 20L8 16H16L12 20Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 4L8 8H16L12 4Z'/%3E%3Cpath d='M4 11H20V13H4V11Z'/%3E%3Cpath d='M4 15H20V17H4V15Z'/%3E%3Cpath d='M4 7H20V9H4V7Z'/%3E%3Cpath d='M12 20L8 16H16L12 20Z'/%3E%3C/svg%3E") center / contain no-repeat;
cursor: grab;
transition: color 160ms ease;
}
.playlist-drag-handle {
color: var(--muted);
}
.playlist-drag-handle:hover,
.playlist-drag-handle:focus-visible {
color: var(--primary);
}
html[data-theme='dark'] .playlist-drag-handle {
color: var(--sidebar-text);
}
html[data-theme='dark'] .playlist-drag-handle:hover,
html[data-theme='dark'] .playlist-drag-handle:focus-visible {
color: var(--primary);
}
.playlist-drag-handle:active,
tr.is-dragging .playlist-drag-handle {
cursor: grabbing;
}
tr.sortable-chosen {
opacity: 0.55;
}
tr.sortable-ghost {
opacity: 0.32;
background: var(--primary-soft);
}
tr.sortable-drag {
box-shadow: var(--shadow-md);
background: var(--surface);
}
@media (min-width: 721px) {
table.table-cards tr > td:nth-child(1),
table.table-cards tr > th:nth-child(1) {
width: 1%;
white-space: nowrap;
}
table.table-cards tr > td:nth-child(2),
table.table-cards tr > th:nth-child(2) {
width: 36%;
}
table.table-cards tr > td:nth-child(3),
table.table-cards tr > th:nth-child(3) {
width: 36%;
}
table.table-cards tr > td:nth-child(4),
table.table-cards tr > th:nth-child(4) {
width: 10%;
}
table.table-cards tr > td:nth-child(5),
table.table-cards tr > th:nth-child(5) {
width: 1%;
white-space: nowrap;
}
}
.actions form {
display: inline;
}
@@ -1911,6 +2012,11 @@ table td .actions form {
margin-left: 6px;
}
html[data-theme='dark'] .chip {
background: rgba(148, 163, 184, 0.16);
color: var(--sidebar-text);
}
.slide-editor-top {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
@@ -1993,7 +2099,6 @@ table td .actions form {
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(15, 23, 42, 0.2);
backdrop-filter: blur(1px);
}
.slide-preview-region h1,