Enhances service details with employees and addon sections
Adds new components for service employees and addons Introduces detailed views with selectable employees and add-ons Updates localization translations for new sections Implements time range slider functionality for availability
This commit is contained in:
Janus C. H. Knudsen
parent
5e3811347c
commit
7643a6ab82
20 changed files with 830 additions and 336 deletions
|
|
@ -4,7 +4,11 @@
|
|||
* For logged-in users to manage their subscription plan,
|
||||
* payment method, and view invoice history.
|
||||
*
|
||||
* Reuses: swp-btn, swp-plan-card, swp-plan-badge, swp-plan-action (components.css)
|
||||
* Reuses:
|
||||
* - swp-card (components.css)
|
||||
* - swp-btn (components.css)
|
||||
* - swp-plan-card, swp-plan-badge, swp-plan-action (components.css)
|
||||
* - swp-data-table (components.css)
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -65,20 +69,12 @@ swp-billing-grid {
|
|||
}
|
||||
|
||||
/* ===========================================
|
||||
PAYMENT CARD
|
||||
PAYMENT CARD (extends swp-card)
|
||||
=========================================== */
|
||||
swp-payment-card {
|
||||
swp-card.payment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--card-padding);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
padding: var(--card-padding);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: var(--spacing-5);
|
||||
}
|
||||
}
|
||||
|
||||
swp-payment-method {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
/**
|
||||
* Cash Register - Page Styling
|
||||
*
|
||||
* Filter bar, stats, table, forms, and difference box
|
||||
* Reuses: swp-sticky-header, swp-header-content (page.css)
|
||||
* Reuses: swp-btn, swp-status-badge, swp-card-footer (components.css)
|
||||
* Filter bar, table, forms, and difference box
|
||||
* Reuses:
|
||||
* - swp-sticky-header, swp-header-content (page.css)
|
||||
* - swp-stats-row, swp-stat-card (stats.css)
|
||||
* - swp-btn, swp-status-badge, swp-card-footer (components.css)
|
||||
*/
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -17,6 +19,7 @@ swp-filter-bar {
|
|||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-top: var(--spacing-10);
|
||||
margin-bottom: var(--spacing-10);
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
|
@ -51,58 +54,6 @@ swp-filter-spacer {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
KASSE STATS BAR
|
||||
=========================================== */
|
||||
swp-cash-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--spacing-8);
|
||||
max-width: var(--page-max-width);
|
||||
margin: 0 auto;
|
||||
|
||||
&:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
swp-cash-stat {
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-6) var(--spacing-8);
|
||||
|
||||
swp-cash-stat-value {
|
||||
display: block;
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-cash-stat-label {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
|
||||
&.highlight swp-cash-stat-value {
|
||||
color: var(--color-teal);
|
||||
}
|
||||
|
||||
&.warning swp-cash-stat-value {
|
||||
color: var(--color-amber);
|
||||
}
|
||||
|
||||
&.negative swp-cash-stat-value {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
&.user swp-cash-stat-value {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
ACTION BAR (Table Header)
|
||||
=========================================== */
|
||||
|
|
@ -340,7 +291,6 @@ swp-cash-grid {
|
|||
|
||||
swp-cash-column {
|
||||
display: grid;
|
||||
gap: var(--spacing-10);
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
|
|
@ -729,10 +679,6 @@ swp-system-note {
|
|||
RESPONSIVE
|
||||
=========================================== */
|
||||
@media (max-width: 1000px) {
|
||||
swp-cash-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
swp-cash-table {
|
||||
grid-template-columns: 50px 80px 1fr 100px 110px 120px 40px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -544,6 +544,7 @@ swp-card {
|
|||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--card-padding);
|
||||
margin-top: var(--section-gap);
|
||||
}
|
||||
|
||||
/* Section label - simple card header */
|
||||
|
|
@ -1295,7 +1296,6 @@ swp-detail-grid {
|
|||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-8);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1304,3 +1304,142 @@ swp-detail-grid {
|
|||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SELECTABLE LIST (Checkbox + Info pattern)
|
||||
Used for employee lists, addon lists, etc.
|
||||
=========================================== */
|
||||
swp-selectable-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-2);
|
||||
}
|
||||
|
||||
swp-selectable-item {
|
||||
display: grid;
|
||||
grid-template-columns: 24px auto 1fr auto;
|
||||
gap: var(--spacing-4);
|
||||
align-items: center;
|
||||
padding: var(--spacing-4);
|
||||
background: var(--color-background-alt);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: var(--bg-teal-subtle);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Variant without avatar (for addons) */
|
||||
&.no-avatar {
|
||||
grid-template-columns: 24px 1fr auto;
|
||||
}
|
||||
}
|
||||
|
||||
swp-selectable-checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: white;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.selected & {
|
||||
background: var(--color-teal);
|
||||
border-color: var(--color-teal);
|
||||
|
||||
svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swp-selectable-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
swp-selectable-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-selectable-warning {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-amber);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
swp-selectable-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
span {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
}
|
||||
|
||||
swp-selectable-type {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
|
||||
&.required {
|
||||
color: var(--color-amber);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
}
|
||||
|
||||
swp-selectable-override {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
swp-selectable-override-value {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* See all / Select all link */
|
||||
swp-see-all {
|
||||
display: block;
|
||||
margin-top: var(--spacing-4);
|
||||
padding-top: var(--spacing-4);
|
||||
border-top: 1px solid var(--color-border);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-teal);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -291,3 +291,105 @@ swp-color-dot {
|
|||
flex-shrink: 0;
|
||||
background: var(--b-primary);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
TIME RANGE SLIDER (Dual-handle range input)
|
||||
=========================================== */
|
||||
swp-time-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
swp-time-range-slider {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
swp-time-range-track {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: var(--color-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
swp-time-range-fill {
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
background: var(--color-teal);
|
||||
border-radius: 2px;
|
||||
cursor: grab;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
swp-time-range-slider input[type="range"] {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
margin: 0;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--color-teal);
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--color-teal);
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
swp-time-range-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
background: var(--color-background-alt);
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-time-range-times {
|
||||
font-size: 13px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
swp-time-range-duration {
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -855,104 +855,6 @@ swp-status-option {
|
|||
}
|
||||
}
|
||||
|
||||
/* Time range slider */
|
||||
swp-time-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
swp-time-range-slider {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
swp-time-range-track {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: var(--color-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
swp-time-range-fill {
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
background: var(--color-teal);
|
||||
border-radius: 2px;
|
||||
cursor: grab;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
swp-time-range-slider input[type="range"] {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
margin: 0;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--color-teal);
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: var(--color-teal);
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
swp-time-range-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
background: var(--color-background-alt);
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
swp-time-range-times {
|
||||
font-size: 13px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
swp-time-range-duration {
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* Schedule drawer employee display */
|
||||
swp-employee-display {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ swp-page-container {
|
|||
display: block;
|
||||
max-width: var(--page-max-width);
|
||||
margin: 0 auto;
|
||||
padding: var(--page-padding);
|
||||
padding-left: var(--page-padding);
|
||||
padding-right: var(--page-padding);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
|
|||
|
|
@ -426,3 +426,40 @@ swp-duration-delete {
|
|||
swp-duration-item:hover swp-duration-delete {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
AVAILABILITY LIST (Services - Tilgængelighed)
|
||||
=========================================== */
|
||||
swp-availability-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
swp-availability-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--spacing-2) var(--spacing-4);
|
||||
padding: var(--spacing-3) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&[data-enabled="false"] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
swp-availability-day {
|
||||
width: 100%;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
swp-availability-time {
|
||||
flex: 1;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ swp-stats-grid {
|
|||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--card-gap);
|
||||
margin-bottom: var(--section-gap);
|
||||
}
|
||||
|
||||
swp-stats-row {
|
||||
|
|
@ -20,6 +19,20 @@ swp-stats-row {
|
|||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--card-gap);
|
||||
margin-bottom: var(--section-gap);
|
||||
|
||||
&.cols-4 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
/* Reset margin when stat-card is inside stats-row */
|
||||
& swp-stat-card {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Tab-based visibility for multi-stat rows */
|
||||
&[data-for-tab]:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
|
|
@ -31,6 +44,7 @@ swp-stat-card {
|
|||
background: var(--color-surface);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--card-padding);
|
||||
margin-top: var(--section-gap);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
|
|
@ -238,7 +252,8 @@ swp-quick-stat swp-stat-label {
|
|||
=========================================== */
|
||||
@media (max-width: 1200px) {
|
||||
swp-stats-bar,
|
||||
swp-stats-grid {
|
||||
swp-stats-grid,
|
||||
swp-stats-row.cols-4 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue