bblaz/lonc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor stock filters into a responsive sidebar rail
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
Blaž Bregar
2026-04-12 13:37:45 +02:00
parent 569ef1804b
commit 1d23279819
2 changed files with 374 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/app.css
+193 -9
View File
@@ -314,6 +314,54 @@ body {
color: var(--lonc-primary);
}
.stock-filter-hub {
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(245, 250, 255, 0.88)),
linear-gradient(135deg, rgba(93, 169, 255, 0.1), rgba(31, 75, 153, 0.06));
}
.stock-workspace {
align-items: flex-start;
}
.stock-results-pane {
min-width: 0;
}
.stock-filter-summary {
padding: 0.85rem 0.95rem;
border-radius: 0.9rem;
border: 1px dashed rgba(31, 75, 153, 0.24);
background: rgba(255, 255, 255, 0.7);
min-height: 100%;
}
.stock-filter-rail .overview-list-locations {
max-height: 18rem;
}
.stock-filter-rail .location-overview-columns {
grid-template-columns: 1fr;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.stock-filter-panels {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.stock-filter-panels.stock-filter-panels-single-open {
grid-template-columns: 1fr;
}
}
@media (min-width: 1200px) {
.stock-filter-rail .stock-filter-hub {
position: sticky;
top: 1rem;
}
}
.stock-view-switch {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -383,6 +431,16 @@ body {
height: auto;
}
.stock-filter-panel-card {
border: 1px solid var(--lonc-border);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.84);
}
.stock-filter-panel-card[open] {
box-shadow: 0 10px 24px rgba(24, 42, 79, 0.08);
}
.overview-summary {
display: block;
cursor: pointer;
@@ -646,6 +704,19 @@ button.legend-card:focus-visible {
list-style: none;
}
.grouped-stock-summary-row {
min-height: 0;
}
.grouped-stock-summary-title {
font-size: 1.1rem;
line-height: 1.2;
}
.grouped-stock-summary-description {
margin: 0.12rem 0 0.35rem;
}
.grouped-stock-summary::-webkit-details-marker {
display: none;
}
@@ -655,6 +726,14 @@ button.legend-card:focus-visible {
row-gap: 0.35rem;
}
.grouped-stock-summary-status {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 0.4rem 0.75rem;
}
.grouped-stock-secondary-details {
border-top: 1px dashed rgba(31, 39, 64, 0.14);
padding-top: 0.75rem;
@@ -678,11 +757,13 @@ button.legend-card:focus-visible {
.grouped-stock-toggle-label {
color: var(--lonc-primary);
font-size: 0.8rem;
line-height: 1.1;
}
.grouped-stock-toggle-label::after {
content: 'Expand';
margin-left: 0.35rem;
margin-left: 0.25rem;
}
.grouped-stock-card[open] .grouped-stock-toggle-label::after {
@@ -709,14 +790,20 @@ button.legend-card:focus-visible {
border-left-color: #6c757d;
}
@media (min-width: 1200px) {
.grouped-stock-summary-status {
justify-content: flex-end;
}
}
.grouped-stock-items {
display: grid;
gap: 0.75rem;
gap: 0.55rem;
}
.grouped-stock-item {
display: block;
padding: 0.9rem 1rem;
padding: 0.65rem 0.8rem;
border-radius: 0.95rem;
border: 1px solid var(--lonc-border);
background: rgba(255, 255, 255, 0.72);
@@ -753,12 +840,56 @@ button.legend-card:focus-visible {
background: rgba(108, 117, 125, 0.08);
}
.grouped-stock-item-meta {
justify-content: flex-start;
.grouped-stock-item-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 0.75rem;
}
.grouped-stock-item-main {
min-width: 0;
}
.grouped-stock-item-title-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.6rem;
}
.grouped-stock-item-name {
font-size: 1rem;
line-height: 1.2;
}
.grouped-stock-item-id {
color: var(--lonc-muted);
font-size: 0.8rem;
}
.grouped-stock-item-aux {
display: grid;
gap: 0.2rem;
text-align: right;
justify-items: end;
white-space: nowrap;
}
.grouped-stock-item-actions {
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
.grouped-stock-item-link {
font-size: 0.8rem;
}
.grouped-stock-mark-gone {
align-self: center;
padding: 0.2rem 0.55rem;
line-height: 1.2;
white-space: nowrap;
}
@@ -784,9 +915,62 @@ button.legend-card:focus-visible {
font-weight: 700;
}
@media (min-width: 1200px) {
.grouped-stock-item-meta {
justify-content: flex-end;
.grouped-stock-close-row {
display: flex;
justify-content: flex-end;
margin-top: 0.2rem;
padding-top: 0.2rem;
border-top: 1px dashed rgba(31, 39, 64, 0.12);
}
.grouped-stock-close {
padding: 0.1rem 0.2rem;
font-size: 0.78rem;
color: rgba(31, 39, 64, 0.82);
line-height: 1.1;
}
.grouped-stock-close:hover {
color: var(--lonc-primary-dark);
}
@media (max-width: 991.98px) {
.grouped-stock-item-row {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
}
.grouped-stock-item-actions {
grid-column: 1 / -1;
justify-content: space-between;
padding-top: 0.15rem;
}
.grouped-stock-item-aux {
text-align: left;
justify-items: start;
}
}
@media (max-width: 575.98px) {
.grouped-stock-item {
padding: 0.6rem 0.7rem;
}
.grouped-stock-item-row {
grid-template-columns: 1fr;
gap: 0.4rem;
}
.grouped-stock-item-aux {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
text-align: left;
}
.grouped-stock-item-title-line {
gap: 0.45rem;
}
}