mirror of
https://github.com/sussy-code/smov.git
synced 2026-05-06 10:09:25 +00:00
make settings page look nicer
2 columns for preferences make section spacing smaller
This commit is contained in:
Ivan Evans
parent
899a3040ba
commit
439c48bcaa
2 changed files with 90 additions and 80 deletions
|
|
@ -303,7 +303,7 @@ export function SettingsPage() {
|
|||
<div className="mt-10">
|
||||
<AdminPanelPart />
|
||||
</div>
|
||||
<div id="settings-preferences" className="mt-48">
|
||||
<div id="settings-preferences" className="mt-28">
|
||||
<PreferencesPart
|
||||
language={state.appLanguage.state}
|
||||
setLanguage={state.appLanguage.set}
|
||||
|
|
@ -315,20 +315,20 @@ export function SettingsPage() {
|
|||
setSourceOrder={state.sourceOrder.set}
|
||||
/>
|
||||
</div>
|
||||
<div id="settings-appearance" className="mt-48">
|
||||
<div id="settings-appearance" className="mt-28">
|
||||
<ThemePart
|
||||
active={previewTheme ?? "default"}
|
||||
inUse={activeTheme ?? "default"}
|
||||
setTheme={setThemeWithPreview}
|
||||
/>
|
||||
</div>
|
||||
<div id="settings-captions" className="mt-48">
|
||||
<div id="settings-captions" className="mt-28">
|
||||
<CaptionsPart
|
||||
styling={state.subtitleStyling.state}
|
||||
setStyling={state.subtitleStyling.set}
|
||||
/>
|
||||
</div>
|
||||
<div id="settings-connection" className="mt-48">
|
||||
<div id="settings-connection" className="mt-28">
|
||||
<ConnectionsPart
|
||||
backendUrl={state.backendUrl.state}
|
||||
setBackendUrl={state.backendUrl.set}
|
||||
|
|
|
|||
|
|
@ -54,86 +54,96 @@ export function PreferencesPart(props: {
|
|||
return (
|
||||
<div className="space-y-12">
|
||||
<Heading1 border>{t("settings.preferences.title")}</Heading1>
|
||||
<div>
|
||||
<p className="text-white font-bold mb-3">
|
||||
{t("settings.preferences.language")}
|
||||
</p>
|
||||
<p className="max-w-[20rem] font-medium">
|
||||
{t("settings.preferences.languageDescription")}
|
||||
</p>
|
||||
<Dropdown
|
||||
options={options}
|
||||
selectedItem={selected || options[0]}
|
||||
setSelectedItem={(opt) => props.setLanguage(opt.id)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* Column */}
|
||||
<div className="space-y-8">
|
||||
{/* Language Preference */}
|
||||
<div>
|
||||
<p className="text-white font-bold mb-3">
|
||||
{t("settings.preferences.language")}
|
||||
</p>
|
||||
<p className="max-w-[20rem] font-medium">
|
||||
{t("settings.preferences.languageDescription")}
|
||||
</p>
|
||||
<Dropdown
|
||||
options={options}
|
||||
selectedItem={selected || options[0]}
|
||||
setSelectedItem={(opt) => props.setLanguage(opt.id)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white font-bold mb-3">
|
||||
{t("settings.preferences.thumbnail")}
|
||||
</p>
|
||||
<p className="max-w-[25rem] font-medium">
|
||||
{t("settings.preferences.thumbnailDescription")}
|
||||
</p>
|
||||
<div
|
||||
onClick={() => props.setEnableThumbnails(!props.enableThumbnails)}
|
||||
className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg"
|
||||
>
|
||||
<Toggle enabled={props.enableThumbnails} />
|
||||
<p className="flex-1 text-white font-bold">
|
||||
{t("settings.preferences.thumbnailLabel")}
|
||||
</p>
|
||||
{/* Thumbnail Preference */}
|
||||
<div>
|
||||
<p className="text-white font-bold mb-3">
|
||||
{t("settings.preferences.thumbnail")}
|
||||
</p>
|
||||
<p className="max-w-[25rem] font-medium">
|
||||
{t("settings.preferences.thumbnailDescription")}
|
||||
</p>
|
||||
<div
|
||||
onClick={() => props.setEnableThumbnails(!props.enableThumbnails)}
|
||||
className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg"
|
||||
>
|
||||
<Toggle enabled={props.enableThumbnails} />
|
||||
<p className="flex-1 text-white font-bold">
|
||||
{t("settings.preferences.thumbnailLabel")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Autoplay Preference */}
|
||||
<div>
|
||||
<p className="text-white font-bold mb-3">
|
||||
{t("settings.preferences.autoplay")}
|
||||
</p>
|
||||
<p className="max-w-[25rem] font-medium">
|
||||
{t("settings.preferences.autoplayDescription")}
|
||||
</p>
|
||||
<div
|
||||
onClick={() =>
|
||||
allowAutoplay
|
||||
? props.setEnableAutoplay(!props.enableAutoplay)
|
||||
: null
|
||||
}
|
||||
className={classNames(
|
||||
"bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg",
|
||||
allowAutoplay
|
||||
? "cursor-pointer opacity-100 pointer-events-auto"
|
||||
: "cursor-not-allowed opacity-50 pointer-events-none",
|
||||
)}
|
||||
>
|
||||
<Toggle enabled={props.enableAutoplay && allowAutoplay} />
|
||||
<p className="flex-1 text-white font-bold">
|
||||
{t("settings.preferences.autoplayLabel")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white font-bold mb-3">
|
||||
{t("settings.preferences.autoplay")}
|
||||
</p>
|
||||
<p className="max-w-[25rem] font-medium">
|
||||
{t("settings.preferences.autoplayDescription")}
|
||||
</p>
|
||||
<div
|
||||
onClick={() =>
|
||||
allowAutoplay
|
||||
? props.setEnableAutoplay(!props.enableAutoplay)
|
||||
: null
|
||||
}
|
||||
className={classNames(
|
||||
"bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg",
|
||||
allowAutoplay
|
||||
? "cursor-pointer opacity-100 pointer-events-auto"
|
||||
: "cursor-not-allowed opacity-50 pointer-events-none",
|
||||
)}
|
||||
>
|
||||
<Toggle enabled={props.enableAutoplay && allowAutoplay} />
|
||||
<p className="flex-1 text-white font-bold">
|
||||
{t("settings.preferences.autoplayLabel")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="source-order" className="mt-4">
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-white font-bold">
|
||||
{t("settings.preferences.sourceOrder")}
|
||||
</p>
|
||||
<p className="max-w-[25rem] font-medium">
|
||||
{t("settings.preferences.sourceOrderDescription")}
|
||||
</p>
|
||||
{/* Column */}
|
||||
<div id="source-order" className="space-y-8">
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-white font-bold">
|
||||
{t("settings.preferences.sourceOrder")}
|
||||
</p>
|
||||
<p className="max-w-[25rem] font-medium">
|
||||
{t("settings.preferences.sourceOrderDescription")}
|
||||
</p>
|
||||
|
||||
<SortableList
|
||||
items={sourceItems}
|
||||
setItems={(items) =>
|
||||
props.setSourceOrder(items.map((item) => item.id))
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
className="max-w-[25rem]"
|
||||
theme="secondary"
|
||||
onClick={() => props.setSourceOrder(allSources.map((s) => s.id))}
|
||||
>
|
||||
{t("settings.reset")}
|
||||
</Button>
|
||||
<SortableList
|
||||
items={sourceItems}
|
||||
setItems={(items) =>
|
||||
props.setSourceOrder(items.map((item) => item.id))
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
className="max-w-[25rem]"
|
||||
theme="secondary"
|
||||
onClick={() => props.setSourceOrder(allSources.map((s) => s.id))}
|
||||
>
|
||||
{t("settings.reset")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue