mummert/wk-sync-bundle
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish the inbox, import and export views

Browse Source 
Action buttons are as wide as their label instead of the column, the
export button stays on one line, date and file columns no longer wrap
mid-word, the long preview message list scrolls in a box, and buttons
use the Contao colour variables so they fit the dark colour scheme.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Jürgen MummertandClaude Fable 5.1 committed 2026-09-26 16:59:33 +02:00
1 parent fb2bfa1ee8
commit ee9ef3a848
1 file changed
+11 -5
Download Patch File Download Diff File Expand all files Collapse all files
public/wk-sync-backend.css
+11 -5
View File
@@ -8,13 +8,16 @@
.wk-sync-upload .widget { margin-bottom: 1rem; }
.wk-sync-table { width: 100%; }
.wk-sync-table td { vertical-align: top; }
.wk-sync-table td:first-child, .wk-sync-table td:nth-child(2), .wk-sync-table .wk-sync-col-date { white-space: nowrap; }
.wk-sync-table .wk-sync-col-person, .wk-sync-table .wk-sync-col-data { overflow-wrap: anywhere; }
.wk-sync-col-id { width: 6rem; white-space: nowrap; }
.wk-sync-col-check { width: 2rem; }
.wk-sync-col-date { width: 9rem; }
.wk-sync-col-person { width: 22%; }
.wk-sync-col-actions { width: 11rem; }
.wk-sync-col-actions .wk-sync-action { display: block; width: 100%; margin-bottom: .25rem; padding: .2rem .4rem; text-align: left; font-size: .85em; border: 1px solid #ccc; border-radius: 3px; background: #f6f6f6; color: inherit; cursor: pointer; text-decoration: none; }
.wk-sync-col-actions .wk-sync-action:hover { background: #e8e8e8; }
.wk-sync-col-actions { width: 1%; white-space: nowrap; }
.wk-sync-col-actions .wk-sync-action { display: block; width: fit-content; margin-bottom: .25rem; padding: .2rem .5rem; text-align: left; font-size: .85em; line-height: 1.3; border: 1px solid var(--form-border, #ccc); border-radius: 3px; background: var(--form-bg, #f6f6f6); color: inherit; cursor: pointer; text-decoration: none; }
.wk-sync-col-actions .wk-sync-action:last-child { margin-bottom: 0; }
.wk-sync-col-actions .wk-sync-action:hover { background: var(--form-bg-hover, #e8e8e8); }
.wk-sync-summary { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.wk-sync-summary strong { font-size: 1.2em; }
.wk-sync-summary__errors strong { color: #c33; }
@@ -22,7 +25,8 @@
.wk-sync-actions { display: flex; gap: .75rem; align-items: center; margin: 1rem 0; }
.wk-sync-inline { display: inline; }
.wk-sync-primary { font-weight: bold; }
.wk-sync-messages { margin: 0 0 1rem; padding-left: 1.25rem; }
.wk-sync-messages { margin: 0 0 1rem; padding: .5rem .75rem .5rem 2rem; max-height: 22rem; overflow: auto; border: 1px solid var(--border, #ddd); border-radius: 3px; }
.wk-sync-messages li { margin: .15rem 0; }
.wk-sync-message--error { color: #c33; }
.wk-sync-message--warning { color: #b7791f; }
.wk-sync-message--info { color: #555; }
@@ -36,11 +40,13 @@
.wk-sync-muted { color: #888; }
.wk-sync-type { font-size: .85em; color: #888; }
.wk-sync-flag { display: inline-block; padding: 0 .35em; border-radius: 3px; background: #fdecc8; color: #7a4b00; font-size: .8em; }
.wk-sync-status, .wk-sync-flag { white-space: nowrap; }
.wk-sync-status { display: inline-block; padding: 0 .4em; border-radius: 3px; font-size: .85em; background: #eee; }
.wk-sync-status--applied, .wk-sync-status--done { background: #d7f5dd; color: #1f6b34; }
.wk-sync-status--preview { background: #fff2cc; color: #7a4b00; }
.wk-sync-status--failed { background: #fbd9d9; color: #8a1f1f; }
.wk-sync-export { margin: 0 0 1rem; display: flex; gap: .75rem; align-items: center; }
.wk-sync-export { margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.wk-sync-export .tl_submit, .wk-sync-actions .tl_submit, .wk-sync-folders .tl_submit { white-space: nowrap; flex: none; }
.wk-sync-bulk { display: flex; gap: .75rem; align-items: center; margin: .75rem 0; }
.wk-sync-hidden-form { display: none; }
.wk-sync-highlight td { background: #fff8e1; }