Move frame name/mode into the page header; Calendar gets its own tab
Frame name (pencil-icon inline edit) and the Photos/Calendar mode
selector now live in the page header, shared across all four per-frame
pages instead of being buried in the Configuration form -- so renaming
a frame or flipping its mode no longer requires navigating to a
specific tab first.
Calendar settings move out of a conditionally-hidden card on the
Configuration tab into their own dedicated tab (new /frames/{id}/
calendar route), visually greyed out when the frame is in Photos mode
but still fully usable so calendar settings can be configured ahead of
switching modes. Also wires the week-start setting into the UI for the
first time (the column/backend support landed earlier but had no
control anywhere).
This commit is contained in:
@@ -468,6 +468,35 @@ code {
|
||||
}
|
||||
.tabs a:hover { color: var(--text); }
|
||||
.tabs a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
|
||||
.tabs a.tab-disabled { opacity: 0.45; }
|
||||
.tabs a.tab-disabled:hover { opacity: 0.7; }
|
||||
|
||||
.frame-name-view { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.frame-name-pencil {
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
margin: 0;
|
||||
opacity: 0.55;
|
||||
color: var(--text);
|
||||
transition: opacity .12s ease, background-color .12s ease;
|
||||
}
|
||||
.frame-name-pencil:hover { opacity: 1; background: var(--surface-alt); border-radius: 6px; }
|
||||
.frame-name-edit { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.frame-name-edit input {
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
padding: 5px 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.frame-name-edit button { margin-top: 0; }
|
||||
|
||||
.frame-mode-select { width: auto; margin-top: 0; padding: 7px 10px; font-size: 13px; font-weight: 600; }
|
||||
|
||||
.control-banner {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user