style: add article overview cards and filters
This commit is contained in:
Masterluke77
@@ -0,0 +1,497 @@
|
||||
/* Vendoo Article Overview UX 1.44.0
|
||||
* Aufgabenorientierte Filter, adaptive Kartenansicht und reduzierte Mehrfachaktionen.
|
||||
*/
|
||||
|
||||
#history.ux-article-overview-ready {
|
||||
--ux-article-card-min: 340px;
|
||||
}
|
||||
|
||||
.ux-article-toolbar {
|
||||
align-items: center;
|
||||
background: var(--vd-surface-raised);
|
||||
border: 1px solid var(--vd-line);
|
||||
border-radius: var(--vd-radius-md);
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
grid-template-columns: minmax(180px, .7fr) minmax(320px, 1.4fr) auto;
|
||||
margin-bottom: 12px;
|
||||
padding: 14px 15px;
|
||||
}
|
||||
|
||||
.ux-article-summary strong,
|
||||
.ux-article-summary span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ux-article-summary strong {
|
||||
color: var(--vd-ink);
|
||||
font-size: 13px;
|
||||
letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
.ux-article-summary span {
|
||||
color: var(--vd-ink-muted);
|
||||
font-size: 9px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.ux-status-filters,
|
||||
.ux-article-view-switch {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.ux-status-filters {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ux-status-filter,
|
||||
.ux-view-choice {
|
||||
align-items: center;
|
||||
background: var(--vd-surface);
|
||||
border: 1px solid var(--vd-line);
|
||||
border-radius: 999px;
|
||||
color: var(--vd-ink-secondary);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font: inherit;
|
||||
font-size: 10px;
|
||||
font-weight: 680;
|
||||
justify-content: center;
|
||||
min-height: 32px;
|
||||
padding: 0 11px;
|
||||
}
|
||||
|
||||
.ux-status-filter:hover,
|
||||
.ux-view-choice:hover {
|
||||
border-color: var(--vd-line-strong);
|
||||
color: var(--vd-ink);
|
||||
}
|
||||
|
||||
.ux-status-filter.is-active,
|
||||
.ux-view-choice.is-active {
|
||||
background: var(--vd-brand-soft);
|
||||
border-color: color-mix(in srgb, var(--vd-brand) 38%, var(--vd-line));
|
||||
color: var(--vd-brand);
|
||||
}
|
||||
|
||||
.ux-article-view-switch {
|
||||
background: var(--vd-surface-muted);
|
||||
border-radius: 999px;
|
||||
justify-self: end;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.ux-view-choice {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
min-width: 62px;
|
||||
}
|
||||
|
||||
.ux-view-choice.is-active {
|
||||
background: var(--vd-surface-raised);
|
||||
border-color: var(--vd-line);
|
||||
box-shadow: var(--vd-shadow-sm);
|
||||
color: var(--vd-ink);
|
||||
}
|
||||
|
||||
.ux-active-filters {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin: -3px 0 13px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.ux-active-filters.is-empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ux-active-filters > strong {
|
||||
color: var(--vd-ink-muted);
|
||||
font-size: 9px;
|
||||
margin-right: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ux-filter-chip {
|
||||
align-items: center;
|
||||
background: var(--vd-surface-muted);
|
||||
border: 1px solid var(--vd-line);
|
||||
border-radius: 999px;
|
||||
color: var(--vd-ink-secondary);
|
||||
display: inline-flex;
|
||||
font-size: 9px;
|
||||
gap: 5px;
|
||||
min-height: 25px;
|
||||
padding: 0 4px 0 9px;
|
||||
}
|
||||
|
||||
.ux-filter-chip-clear {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
color: var(--vd-ink-muted);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-size: 15px;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.ux-filter-chip-clear:hover {
|
||||
background: var(--vd-surface-raised);
|
||||
color: var(--vd-danger);
|
||||
}
|
||||
|
||||
#history .history-batch-bar:not(.has-selection) .history-batch-actions,
|
||||
#history .history-batch-bar:not(.has-selection) .history-clear-selection {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#history .history-batch-bar:not(.has-selection) {
|
||||
min-height: 43px;
|
||||
}
|
||||
|
||||
#history .history-batch-bar.has-selection {
|
||||
position: sticky;
|
||||
top: calc(var(--vd-topbar-height) + 8px);
|
||||
z-index: 25;
|
||||
}
|
||||
|
||||
#history .history-batch-actions,
|
||||
.ux-batch-primary,
|
||||
.ux-batch-secondary {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ux-batch-more {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ux-batch-more > summary {
|
||||
align-items: center;
|
||||
border: 1px solid var(--vd-line);
|
||||
border-radius: 7px;
|
||||
color: var(--vd-ink-secondary);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
list-style: none;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.ux-batch-more > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ux-batch-more > summary::after {
|
||||
content: '⌄';
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.ux-batch-secondary {
|
||||
background: var(--vd-surface-raised);
|
||||
border: 1px solid var(--vd-line);
|
||||
border-radius: var(--vd-radius-sm);
|
||||
box-shadow: var(--vd-shadow-float);
|
||||
flex-direction: column;
|
||||
min-width: 190px;
|
||||
padding: 7px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 7px);
|
||||
z-index: 45;
|
||||
}
|
||||
|
||||
.ux-batch-secondary .vd-button {
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-table-shell {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-batch-bar,
|
||||
#history[data-article-view="cards"] .history-table-footer {
|
||||
background: var(--vd-surface-raised);
|
||||
border: 1px solid var(--vd-line);
|
||||
border-radius: var(--vd-radius-md);
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-batch-bar {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-table-footer {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-table {
|
||||
min-width: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-table-head {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(var(--ux-article-card-min), 1fr));
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-row {
|
||||
align-content: start;
|
||||
background: var(--vd-surface-raised);
|
||||
border: 1px solid var(--vd-line);
|
||||
border-radius: var(--vd-radius-md);
|
||||
box-shadow: none;
|
||||
display: grid;
|
||||
gap: 0 12px;
|
||||
grid-template-areas:
|
||||
"select article menu"
|
||||
". platform price"
|
||||
". status published"
|
||||
". location provider";
|
||||
grid-template-columns: 22px minmax(0, 1fr) minmax(118px, .7fr);
|
||||
min-height: 0;
|
||||
padding: 14px;
|
||||
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-row:hover {
|
||||
background: var(--vd-surface-raised);
|
||||
border-color: var(--vd-line-strong);
|
||||
box-shadow: var(--vd-shadow-sm);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-row.selected {
|
||||
background: color-mix(in srgb, var(--vd-brand-soft) 42%, var(--vd-surface-raised));
|
||||
border-color: color-mix(in srgb, var(--vd-brand) 45%, var(--vd-line));
|
||||
box-shadow: 0 0 0 2px var(--vd-focus);
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-cell {
|
||||
border-top: 1px solid var(--vd-line);
|
||||
min-width: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-cell::before {
|
||||
color: var(--vd-ink-muted);
|
||||
content: attr(data-ux-label);
|
||||
display: block;
|
||||
font-size: 7.5px;
|
||||
font-weight: 760;
|
||||
letter-spacing: .06em;
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-cell-select {
|
||||
align-self: start;
|
||||
border: 0;
|
||||
grid-area: select;
|
||||
padding: 3px 0 0;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-cell-article {
|
||||
align-items: center;
|
||||
border: 0;
|
||||
grid-area: article;
|
||||
padding: 0 0 13px;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-cell-article::before,
|
||||
#history[data-article-view="cards"] .history-cell-menu::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-cell-platform { grid-area: platform; }
|
||||
#history[data-article-view="cards"] .history-cell-provider { grid-area: provider; }
|
||||
#history[data-article-view="cards"] .history-cell-price { grid-area: price; }
|
||||
#history[data-article-view="cards"] .history-cell-status { grid-area: status; }
|
||||
#history[data-article-view="cards"] .history-cell-location { grid-area: location; }
|
||||
#history[data-article-view="cards"] .history-cell-published { grid-area: published; }
|
||||
|
||||
#history[data-article-view="cards"] .history-cell-menu {
|
||||
align-self: start;
|
||||
border: 0;
|
||||
grid-area: menu;
|
||||
justify-self: end;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-thumb {
|
||||
border-radius: 9px;
|
||||
height: 64px;
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-article-title {
|
||||
font-size: 12px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-article-sku {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-cell-provider,
|
||||
#history[data-article-view="cards"] .history-cell-location,
|
||||
#history[data-article-view="cards"] .history-cell-platform,
|
||||
#history[data-article-view="cards"] .history-cell-price,
|
||||
#history[data-article-view="cards"] .history-cell-status,
|
||||
#history[data-article-view="cards"] .history-cell-published {
|
||||
align-items: flex-start;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-status-select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-publish-badges {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-row[data-publish-state="none"] .history-cell-published {
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
#history[data-article-view="list"] .history-table-head {
|
||||
background: var(--vd-surface-raised);
|
||||
position: sticky;
|
||||
top: var(--vd-topbar-height);
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
#history[data-article-view="list"] .history-row:focus-visible,
|
||||
#history[data-article-view="cards"] .history-row:focus-visible,
|
||||
.ux-status-filter:focus-visible,
|
||||
.ux-view-choice:focus-visible,
|
||||
.ux-filter-chip-clear:focus-visible,
|
||||
.ux-batch-more > summary:focus-visible {
|
||||
outline: 3px solid var(--vd-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.ux-article-toolbar {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.ux-status-filters {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.ux-article-view-switch {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.ux-article-toolbar {
|
||||
align-items: stretch;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.ux-status-filters,
|
||||
.ux-article-view-switch {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.ux-status-filters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.ux-status-filter,
|
||||
.ux-view-choice {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ux-article-view-switch {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
#history .history-batch-bar.has-selection {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
position: static;
|
||||
}
|
||||
|
||||
#history .history-batch-actions,
|
||||
.ux-batch-primary {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ux-batch-primary .vd-button,
|
||||
.ux-batch-more,
|
||||
.ux-batch-more > summary {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ux-batch-secondary {
|
||||
left: 0;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] {
|
||||
--ux-article-card-min: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
#history[data-article-view="cards"] .history-list {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-row {
|
||||
grid-template-areas:
|
||||
"select article menu"
|
||||
". platform price"
|
||||
". status status"
|
||||
". published published"
|
||||
". location location"
|
||||
". provider provider";
|
||||
grid-template-columns: 20px minmax(0, 1fr) auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
#history[data-article-view="cards"] .history-thumb {
|
||||
height: 58px;
|
||||
width: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#history[data-article-view="cards"] .history-row {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user