mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-18 21:54:09 +00:00
Claude
be2226a38f
Bring both drawers onto the list and field patterns already used by the settings panel, rather than each carrying its own treatment. Navigation menu - Rows adopt the PanelList styling: neutral idle colour with blue reserved for the current view, which previously competed with a dozen other blue rows - Group the list under named headings instead of bare separators - Display options become toggle rows with a switch matching the Switch component, replacing the inconsistent "Active" text notes - Leading icons on a fixed box so labels line up, and an icon for Rename Client - Swap :focus for :focus-visible so clicking no longer leaves an outline - Show the client name in the header, next to the action that renames it View params editor - Compact fields (booleans, colours) sit beside their label instead of below it, which removes a third of the scroll height and pairs control with label - Restore the type hierarchy: option titles were dimmer than their section header. Titles now read as primary with descriptions muted underneath - Sections become cards with hairline separated rows - Section headers are keyboard reachable and mark sections holding custom values - Sticky header and footer with borders, so content no longer scrolls visibly underneath the Apply button, dropping the 10vh padding workaround - Give the presets block a heading and a tinted applied state Collapsed and hidden fields stay mounted and hidden with CSS: the form reads its values from the DOM, so unmounting them would drop them on Apply. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014L7R2LgjMSH2WQbiSP4uRn
119 lines
2.0 KiB
SCSS
119 lines
2.0 KiB
SCSS
.section {
|
|
color: $ui-white;
|
|
font-size: 1rem;
|
|
background-color: $white-2;
|
|
border: 1px solid $gray-1100;
|
|
border-radius: $panel-border-radius;
|
|
}
|
|
|
|
.sectionHeader {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
min-height: 2.75rem;
|
|
padding: 0.5rem 1rem;
|
|
|
|
font-size: $aux-text-size;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: $gray-300;
|
|
|
|
&.collapsible {
|
|
cursor: pointer;
|
|
border-radius: $panel-border-radius;
|
|
transition-property: color, background-color;
|
|
transition-duration: $transition-time-action;
|
|
|
|
&:hover {
|
|
background-color: $white-3;
|
|
color: $ui-white;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid $blue-500;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sectionTitle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/** marks a section which holds values coming from the URL */
|
|
.customised {
|
|
width: 0.4rem;
|
|
height: 0.4rem;
|
|
border-radius: 50%;
|
|
background-color: $active-indicator;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.chevron {
|
|
flex-shrink: 0;
|
|
rotate: 180deg;
|
|
transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
|
|
|
|
&.closed {
|
|
rotate: 0deg;
|
|
}
|
|
}
|
|
|
|
.options {
|
|
padding-inline: 1rem;
|
|
border-top: 1px solid $white-7;
|
|
}
|
|
|
|
.label {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
row-gap: 0.25rem;
|
|
padding: 0.75rem 0;
|
|
font-size: $inner-section-text-size;
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid $white-7;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Compact controls sit beside their label instead of below it.
|
|
* Placement is done with grid areas so that the markup stays flat.
|
|
*/
|
|
.inline {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
column-gap: 1rem;
|
|
|
|
> .title {
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
> .description {
|
|
grid-area: 2 / 1;
|
|
}
|
|
|
|
> *:last-child {
|
|
grid-area: 1 / 2 / span 2;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
color: $ui-white;
|
|
}
|
|
|
|
.description {
|
|
color: $gray-400;
|
|
font-size: $aux-text-size;
|
|
line-height: 1.4;
|
|
max-width: 60ch;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|