mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-22 23:16:46 +00:00
fix(studio): fold the stops list and put a picture into the gallery it lands in
The stops list was the longest thing in the travel panel by a distance: a fortnight is fourteen rows, and it pushed the maps and the country tiles below the fold on every journey. It is a folding section now, closed to begin with, with the count of what still counts in its head, so the closed section answers the question anyone opens it for. The rows are one line each, the day loses its weekday, the country appears only on a journey with more than one, and the switch is a mark rather than a word, which is what lets the place name fit. A picture uploaded onto an entry also goes into the gallery, because that is where the row lives. The entry upload only answers with the entry's view of it, so the store derives the gallery row it did not get and the content browser shows a new picture without the journey being fetched again.
This commit is contained in:
@@ -36,18 +36,26 @@ import ToggleSwitch from '../Settings/ToggleSwitch'
|
||||
* remembered: coming back to an element and finding its panel folded up
|
||||
* differently from last time is worse than opening one group again.
|
||||
*/
|
||||
export function Section({ label, children, defaultOpen = true, hint }: {
|
||||
export function Section({ label, children, defaultOpen = true, hint, badge }: {
|
||||
label: string
|
||||
children: ReactNode
|
||||
defaultOpen?: boolean
|
||||
/** A line under the label, for a group whose name cannot carry the whole idea. */
|
||||
hint?: string
|
||||
/**
|
||||
* A figure beside the label, for a group worth reading while it is folded.
|
||||
* The stops list is the case: how many of them count is the thing you came
|
||||
* to check, and opening a section to read one number is a section that
|
||||
* cannot usefully be closed.
|
||||
*/
|
||||
badge?: string
|
||||
}) {
|
||||
const [open, setOpen] = useState(defaultOpen)
|
||||
return (
|
||||
<div className={`st-section is-fold ${open ? '' : 'is-folded'}`}>
|
||||
<button type="button" className="st-section-head" onClick={() => setOpen(!open)} aria-expanded={open}>
|
||||
<span className="st-section-label">{label}</span>
|
||||
{badge && <span className="st-section-badge">{badge}</span>}
|
||||
<ChevronDown size={13} className="st-section-caret" />
|
||||
</button>
|
||||
{open && (
|
||||
|
||||
Reference in New Issue
Block a user