update on the pickup and edit slot in the dispatch page
This commit is contained in:
@@ -544,6 +544,330 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Slot-time-field dropdown — picks which timestamp column drives slot
|
||||
bucketing. Styled to match the location-pill dropdown in the header so
|
||||
both feel like the same kind of filter control. */
|
||||
.testing-container .time-field-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.testing-container .time-field-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 8px 5px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(123, 31, 162, 0.08);
|
||||
border: 1px solid rgba(123, 31, 162, 0.25);
|
||||
color: #7b1fa2;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.testing-container .time-field-btn:hover {
|
||||
background: rgba(123, 31, 162, 0.14);
|
||||
border-color: rgba(123, 31, 162, 0.45);
|
||||
}
|
||||
|
||||
.testing-container .time-field-btn.open {
|
||||
background: rgba(123, 31, 162, 0.18);
|
||||
border-color: rgba(123, 31, 162, 0.55);
|
||||
box-shadow: 0 4px 12px rgba(123, 31, 162, 0.18);
|
||||
}
|
||||
|
||||
.testing-container .time-field-btn svg {
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.testing-container .time-field-caret {
|
||||
font-size: 15px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.testing-container .time-field-btn.open .time-field-caret {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.testing-container .time-field-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.testing-container .time-field-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
min-width: 180px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(123, 31, 162, 0.18);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
|
||||
padding: 6px;
|
||||
z-index: 1000;
|
||||
animation: logo-city-menu-in 0.14s ease-out;
|
||||
}
|
||||
|
||||
.testing-container .time-field-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
transition: background 0.12s ease;
|
||||
}
|
||||
|
||||
.testing-container .time-field-option:hover {
|
||||
background: rgba(123, 31, 162, 0.06);
|
||||
}
|
||||
|
||||
.testing-container .time-field-option.active {
|
||||
background: rgba(123, 31, 162, 0.1);
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
.testing-container .time-field-option-icon {
|
||||
font-size: 14px;
|
||||
color: #7b1fa2;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.testing-container .time-field-option-check {
|
||||
margin-left: auto;
|
||||
color: #7b1fa2;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* Slot timings editor — popover anchored to a small "Edit slots" button in
|
||||
the batch row. Lets the operator tweak start/end hours, add new slots,
|
||||
delete existing ones, or reset to the default 5-slot layout. */
|
||||
.testing-container .slot-edit-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.04);
|
||||
border: 1px dashed rgba(15, 23, 42, 0.18);
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-btn:hover {
|
||||
background: rgba(15, 23, 42, 0.08);
|
||||
border-color: rgba(15, 23, 42, 0.32);
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-btn.open {
|
||||
background: rgba(123, 31, 162, 0.1);
|
||||
border-color: rgba(123, 31, 162, 0.5);
|
||||
border-style: solid;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-btn svg {
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
min-width: 340px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(123, 31, 162, 0.18);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 20px 44px rgba(15, 23, 42, 0.2);
|
||||
padding: 12px;
|
||||
z-index: 1000;
|
||||
animation: logo-city-menu-in 0.14s ease-out;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-head {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-title {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-sub {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-height: 260px;
|
||||
overflow-y: auto;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-row {
|
||||
display: grid;
|
||||
grid-template-columns: 22px 70px 70px 1fr 28px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-idx {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 6px;
|
||||
background: rgba(123, 31, 162, 0.12);
|
||||
color: #7b1fa2;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-field-label {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-field input {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(15, 23, 42, 0.16);
|
||||
border-radius: 8px;
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
font-family: inherit;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-field input:focus {
|
||||
outline: none;
|
||||
border-color: #7b1fa2;
|
||||
box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.18);
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-preview {
|
||||
font-size: 11px;
|
||||
color: #475569;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-remove {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(220, 38, 38, 0.32);
|
||||
background: rgba(220, 38, 38, 0.06);
|
||||
color: #dc2626;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-remove:hover:not(:disabled) {
|
||||
background: rgba(220, 38, 38, 0.14);
|
||||
border-color: rgba(220, 38, 38, 0.55);
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-remove:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed rgba(15, 23, 42, 0.1);
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-add,
|
||||
.testing-container .slot-edit-reset {
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
padding: 7px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-add {
|
||||
background: #7b1fa2;
|
||||
color: #fff;
|
||||
border-color: #7b1fa2;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-add:hover {
|
||||
background: #6a1591;
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-reset {
|
||||
background: #fff;
|
||||
color: #475569;
|
||||
border-color: rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
|
||||
.testing-container .slot-edit-reset:hover {
|
||||
background: rgba(15, 23, 42, 0.04);
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.testing-container .batch-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -738,6 +1062,60 @@
|
||||
50% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 8px rgba(255, 255, 255, 0.15); }
|
||||
}
|
||||
|
||||
/* Live rider pin (from /partners/getriderlogs/) — colored teardrop with a
|
||||
floating label showing the rider's username + current order. Status drives
|
||||
the color: green for active, red otherwise. Lives next to the synthetic
|
||||
bike markers but uses a distinct visual so the operator can tell that this
|
||||
one is real-GPS, not route-progress estimate. */
|
||||
.testing-container .live-rider-pin {
|
||||
--pin-color: #16a34a;
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
.testing-container .live-rider-pin-marker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--pin-color);
|
||||
border: 3px solid #fff;
|
||||
border-radius: 50% 50% 50% 0;
|
||||
transform: rotate(-45deg);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.testing-container .live-rider-pin-marker::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 4px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.testing-container .live-rider-pin-label {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 2px;
|
||||
background: var(--pin-color);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.testing-container .live-rider-pin-label span {
|
||||
font-weight: 500;
|
||||
opacity: 0.85;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* Body layout */
|
||||
.testing-container #body {
|
||||
flex: 1;
|
||||
@@ -2136,15 +2514,24 @@
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
margin-top: 3px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
/* Force a single-line, ellipsised row — long unstructured addresses used to
|
||||
wrap to 2-3 lines and made cards look noisy. Full address still surfaces
|
||||
on hover via the `title` attribute. */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.testing-container .zone-order-notes {
|
||||
font-style: italic;
|
||||
color: #475569;
|
||||
/* Notes can be longer; let them breathe over 2 lines and override the
|
||||
single-line ellipsis applied to .zone-order-line above. */
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: initial;
|
||||
}
|
||||
|
||||
/* Footer stat chips */
|
||||
@@ -3557,6 +3944,27 @@
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* Permanent banner sitting above the rider's GPS pin in the Rider Info map.
|
||||
Shows the suburb/area name reverse-geocoded from lat/lon so the operator
|
||||
can read the location without opening the popup. Styled to override the
|
||||
default leaflet tooltip chrome (rounded chip, brand purple). */
|
||||
.testing-container .ri-map .leaflet-tooltip.ri-area-banner {
|
||||
background: #7b1fa2;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
|
||||
}
|
||||
|
||||
.testing-container .ri-map .leaflet-tooltip.ri-area-banner::before {
|
||||
border-top-color: #7b1fa2;
|
||||
}
|
||||
|
||||
/* Mobile — collapse the sidebar above the main panel, single-column stats */
|
||||
@media (max-width: 600px) {
|
||||
.testing-container .rider-info-mode {
|
||||
|
||||
Reference in New Issue
Block a user