Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 230 Wiki Activity

style: swap date and status in queue card footer
Windows CI / verify (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Sucukdeluxe
2026-09-06 13:17:20 +02:00
parent ea708c0461
commit cb85e08eec
7 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/smoke-test-queue-cards.js
+5 -2
View File
@@ -51,11 +51,14 @@ async function main() {
const rect = (selector) => item.querySelector(selector).getBoundingClientRect();
const date = rect('.queue-date');
const bar = rect('.queue-progress-wrap');
const status = rect('.queue-status-badge');
const toggle = rect('.queue-details-toggle');
const remove = rect('.remove');
return {
id: item.dataset.id,
dateBelow: date.top >= bar.bottom,
dateRight: Math.abs(date.right - bar.right) <= 1,
dateLeft: date.left >= toggle.right && date.right < status.left,
statusRight: Math.abs(status.right - bar.right) <= 1,
dateSize: parseFloat(getComputedStyle(item.querySelector('.queue-date')).fontSize),
removeSize: Math.min(remove.width, remove.height),
overflow: item.scrollWidth - item.clientWidth,
@@ -63,7 +66,7 @@ async function main() {
};
}));
for (const card of layout) {
assert(card.dateBelow && card.dateRight, `Date placement: ${JSON.stringify(card)}`);
assert(card.dateBelow && card.dateLeft && card.statusRight, `Footer placement: ${JSON.stringify(card)}`);
assert(card.dateSize >= 12 && card.removeSize >= 32 && card.tinyText === 0, `Readability: ${JSON.stringify(card)}`);
assert(card.overflow <= 1, `Card overflow: ${JSON.stringify(card)}`);
}
scripts/smoke-test-workspace-ui.js
+4 -4
View File
@@ -1222,7 +1222,7 @@ async function run() {
const remove = downloading?.querySelector('.remove');
const statusRect = statusLabel?.getBoundingClientRect();
const removeRect = remove?.getBoundingClientRect();
const statusLeftEdges = leftEdges('.status');
const statusRightEdges = alignedRows.map((row) => row?.querySelector('.queue-status-badge')?.getBoundingClientRect().right || 0);
const titleLeftEdges = leftEdges('.title');
const dateLeftEdges = leftEdges('.queue-date');
const successProbe = document.createElement('span');
@@ -1258,7 +1258,7 @@ async function run() {
startingAnimated: starting?.querySelector('.queue-progress-status')?.classList.contains('is-starting') === true,
resumedProgress: paused?.querySelector('.queue-progress-wrap')?.getAttribute('aria-valuenow') || '',
resumedBarWidth: paused?.querySelector('.queue-progress-bar')?.style.width || '',
statusLeftEdges,
statusRightEdges,
titleLeftEdges,
dateLeftEdges,
dateText: starting?.querySelector('.queue-date')?.textContent || '',
@@ -1283,8 +1283,8 @@ async function run() {
check(dynamicQueue.startingStatusCount === 1, `Starting queue status is rendered ${dynamicQueue.startingStatusCount} times instead of once`);
check(dynamicQueue.startingStatusText === dynamicQueue.expectedStartingStatusText && dynamicQueue.startingAnimated, `Queue start state is not visibly active: ${dynamicQueue.startingStatusText}`);
check(dynamicQueue.resumedProgress === '42' && dynamicQueue.resumedBarWidth === '42%', `Resuming queue item loses its paused progress: value=${dynamicQueue.resumedProgress}, width=${dynamicQueue.resumedBarWidth}`);
check(dynamicQueue.statusLeftEdges.every((value) => value > 0) && dynamicQueue.titleLeftEdges.every((value) => value > 0) && dynamicQueue.dateLeftEdges.every((value) => value > 0), 'Queue alignment fixture was measured while hidden');
check(Math.max(...dynamicQueue.statusLeftEdges) - Math.min(...dynamicQueue.statusLeftEdges) <= 1, `Queue status columns are offset: ${dynamicQueue.statusLeftEdges.join(', ')}`);
check(dynamicQueue.statusRightEdges.every((value) => value > 0) && dynamicQueue.titleLeftEdges.every((value) => value > 0) && dynamicQueue.dateLeftEdges.every((value) => value > 0), 'Queue alignment fixture was measured while hidden');
check(Math.max(...dynamicQueue.statusRightEdges) - Math.min(...dynamicQueue.statusRightEdges) <= 1, `Queue status columns are offset: ${dynamicQueue.statusRightEdges.join(', ')}`);
check(Math.max(...dynamicQueue.titleLeftEdges) - Math.min(...dynamicQueue.titleLeftEdges) <= 1, `Queue title columns are offset: ${dynamicQueue.titleLeftEdges.join(', ')}`);
check(Math.max(...dynamicQueue.dateLeftEdges) - Math.min(...dynamicQueue.dateLeftEdges) <= 1, `Queue date columns are offset: ${dynamicQueue.dateLeftEdges.join(', ')}`);
check(dynamicQueue.dateText === '10.08.2026', `Queue VOD date is missing or incorrectly formatted: ${dynamicQueue.dateText}`);