updated the fix on the slots and some ui fixes
This commit is contained in:
@@ -2052,6 +2052,37 @@
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
/* Empty slot state — shown in the sidebar list when no orders match the selected batch */
|
||||
.testing-container .empty-slot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 48px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testing-container .empty-slot-icon {
|
||||
font-size: 36px;
|
||||
color: var(--border);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.testing-container .empty-slot-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.testing-container .empty-slot-sub {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--border);
|
||||
max-width: 220px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.testing-container #desc {
|
||||
padding: 16px 20px;
|
||||
font-size: 12px;
|
||||
@@ -2059,4 +2090,238 @@
|
||||
color: var(--text-muted);
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
/* ── Responsive breakpoints ─────────────────────────────────────
|
||||
Targets: laptop 1280px, compact laptop 1100px, small 960px.
|
||||
The sidebar is the primary layout element to shrink — the map
|
||||
takes the freed space automatically (it's flex: 1).
|
||||
────────────────────────────────────────────────────────────────── */
|
||||
|
||||
/* Large laptop — subtle sidebar reduction */
|
||||
@media (max-width: 1280px) {
|
||||
.testing-container #sidebar {
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Compact laptop (common 1366×768 screens) */
|
||||
@media (max-width: 1180px) {
|
||||
.testing-container #sidebar {
|
||||
width: 320px;
|
||||
}
|
||||
.testing-container .rd-rider-name {
|
||||
font-size: 24px;
|
||||
}
|
||||
.testing-container .rd-stat-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
.testing-container .sb-tile-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
.testing-container #hdr {
|
||||
padding: 0 16px;
|
||||
}
|
||||
.testing-container #strat-row {
|
||||
padding: 0 16px;
|
||||
gap: 6px;
|
||||
}
|
||||
.testing-container #batch-row {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.testing-container .sbt {
|
||||
padding: 7px 11px;
|
||||
font-size: 12px;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small laptop / 1024px */
|
||||
@media (max-width: 1080px) {
|
||||
.testing-container #sidebar {
|
||||
width: 290px;
|
||||
}
|
||||
|
||||
/* Header — hide decorative city pill, tighten spacing */
|
||||
.testing-container .logo-city {
|
||||
display: none;
|
||||
}
|
||||
.testing-container .logo-name {
|
||||
font-size: 16px;
|
||||
}
|
||||
.testing-container #clock {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.testing-container .hdr-stats {
|
||||
gap: 6px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.testing-container .strat-stat {
|
||||
padding: 5px 9px;
|
||||
font-size: 11px;
|
||||
gap: 4px;
|
||||
}
|
||||
/* Hide the verbose "Profit / Loss" text label; keep icon + value */
|
||||
.testing-container .strat-stat-label {
|
||||
display: none;
|
||||
}
|
||||
.testing-container .live-status {
|
||||
font-size: 11px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
/* Hide the "/ N today" sub-text to keep status compact */
|
||||
.testing-container .live-status-sub {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Tabs — smaller */
|
||||
.testing-container .sbt {
|
||||
padding: 7px 10px;
|
||||
font-size: 12px;
|
||||
gap: 5px;
|
||||
}
|
||||
.testing-container .sbt .sbt-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Batch slots — smaller pills */
|
||||
.testing-container .batch-btn {
|
||||
padding: 5px 9px;
|
||||
font-size: 11px;
|
||||
gap: 4px;
|
||||
}
|
||||
.testing-container .batch-btn-count {
|
||||
min-width: 18px;
|
||||
height: 16px;
|
||||
font-size: 9px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
/* Sidebar content */
|
||||
.testing-container .sb-header {
|
||||
padding: 14px 14px 12px;
|
||||
}
|
||||
.testing-container .sb-tile-value {
|
||||
font-size: 18px;
|
||||
}
|
||||
.testing-container .sb-tile {
|
||||
padding: 8px 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
.testing-container .sb-tile-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.testing-container .rcard {
|
||||
padding: 12px;
|
||||
}
|
||||
.testing-container .rcard-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
.testing-container .rcard-zone {
|
||||
font-size: 11px;
|
||||
}
|
||||
.testing-container .step-wrap {
|
||||
padding: 12px;
|
||||
}
|
||||
.testing-container #route-detail {
|
||||
padding: 16px;
|
||||
}
|
||||
.testing-container .rd-rider-name {
|
||||
font-size: 20px;
|
||||
}
|
||||
.testing-container .rd-stat-value {
|
||||
font-size: 17px;
|
||||
}
|
||||
.testing-container .rd-stat {
|
||||
padding: 12px 8px 10px;
|
||||
}
|
||||
|
||||
/* Map overlay chips — narrower */
|
||||
.testing-container #ov-tr {
|
||||
width: 160px;
|
||||
}
|
||||
.testing-container .rchip {
|
||||
padding: 6px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Very small laptop / tablet landscape — 960px */
|
||||
@media (max-width: 960px) {
|
||||
.testing-container #sidebar {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
/* Make strat-row horizontally scrollable if buttons overflow */
|
||||
.testing-container #strat-row {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.testing-container #strat-row::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* Keep buttons from shrinking inside the scroll container */
|
||||
.testing-container .sbt {
|
||||
flex-shrink: 0;
|
||||
padding: 7px 9px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Zone stat pills — drop the text label, keep icon + value */
|
||||
.testing-container .zone-stat-label {
|
||||
display: none;
|
||||
}
|
||||
.testing-container .zone-stat-pill {
|
||||
padding: 3px 7px;
|
||||
gap: 3px;
|
||||
}
|
||||
.testing-container .zone-stat-value {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Focused-rider stat tiles */
|
||||
.testing-container .rd-stats-grid {
|
||||
gap: 6px;
|
||||
}
|
||||
.testing-container .rd-stat {
|
||||
padding: 10px 6px 8px;
|
||||
}
|
||||
.testing-container .rd-stat-value {
|
||||
font-size: 15px;
|
||||
}
|
||||
.testing-container .rd-stat-label {
|
||||
font-size: 9px;
|
||||
}
|
||||
.testing-container .rd-stat-icon {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* Hide map overlay rider/kitchen chip list — not enough space */
|
||||
.testing-container #ov-tr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Zone card adjustments */
|
||||
.testing-container .zone-card-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
.testing-container .zone-card-sub {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* Trim padding in various panels */
|
||||
.testing-container #riders-panel {
|
||||
padding: 12px;
|
||||
}
|
||||
.testing-container .trip-header {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user