Creepso/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2026-05-22 01:12:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

make settings page look nicer

Browse source 
2 columns for preferences
make section spacing smaller
This commit is contained in:
Ivan Evans 2024-12-30 13:20:59 -07:00
parent 899a3040ba
commit 439c48bcaa
2 changed files with 90 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/pages/Settings.tsx
View file

@ -303,7 +303,7 @@ export function SettingsPage() {
<div className="mt-10"> <div className="mt-10">
<AdminPanelPart /> <AdminPanelPart />
</div> </div>
<div id="settings-preferences" className="mt-48"> <div id="settings-preferences" className="mt-28">
<PreferencesPart <PreferencesPart
language={state.appLanguage.state} language={state.appLanguage.state}
setLanguage={state.appLanguage.set} setLanguage={state.appLanguage.set}
@ -315,20 +315,20 @@ export function SettingsPage() {
setSourceOrder={state.sourceOrder.set} setSourceOrder={state.sourceOrder.set}
/> />
</div> </div>
<div id="settings-appearance" className="mt-48"> <div id="settings-appearance" className="mt-28">
<ThemePart <ThemePart
active={previewTheme ?? "default"} active={previewTheme ?? "default"}
inUse={activeTheme ?? "default"} inUse={activeTheme ?? "default"}
setTheme={setThemeWithPreview} setTheme={setThemeWithPreview}
/> />
</div> </div>
<div id="settings-captions" className="mt-48"> <div id="settings-captions" className="mt-28">
<CaptionsPart <CaptionsPart
styling={state.subtitleStyling.state} styling={state.subtitleStyling.state}
setStyling={state.subtitleStyling.set} setStyling={state.subtitleStyling.set}
/> />
</div> </div>
<div id="settings-connection" className="mt-48"> <div id="settings-connection" className="mt-28">
<ConnectionsPart <ConnectionsPart
backendUrl={state.backendUrl.state} backendUrl={state.backendUrl.state}
setBackendUrl={state.backendUrl.set} setBackendUrl={state.backendUrl.set}

162
src/pages/parts/settings/PreferencesPart.tsx
View file

@ -54,86 +54,96 @@ export function PreferencesPart(props: {
return ( return (
<div className="space-y-12"> <div className="space-y-12">
<Heading1 border>{t("settings.preferences.title")}</Heading1> <Heading1 border>{t("settings.preferences.title")}</Heading1>
<div> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<p className="text-white font-bold mb-3"> {/* Column */}
{t("settings.preferences.language")} <div className="space-y-8">
</p> {/* Language Preference */}
<p className="max-w-[20rem] font-medium"> <div>
{t("settings.preferences.languageDescription")} <p className="text-white font-bold mb-3">
</p> {t("settings.preferences.language")}
<Dropdown </p>
options={options} <p className="max-w-[20rem] font-medium">
selectedItem={selected || options[0]} {t("settings.preferences.languageDescription")}
setSelectedItem={(opt) => props.setLanguage(opt.id)} </p>
/> <Dropdown
</div> options={options}
selectedItem={selected || options[0]}
setSelectedItem={(opt) => props.setLanguage(opt.id)}
/>
</div>
<div> {/* Thumbnail Preference */}
<p className="text-white font-bold mb-3"> <div>
{t("settings.preferences.thumbnail")} <p className="text-white font-bold mb-3">
</p> {t("settings.preferences.thumbnail")}
<p className="max-w-[25rem] font-medium"> </p>
{t("settings.preferences.thumbnailDescription")} <p className="max-w-[25rem] font-medium">
</p> {t("settings.preferences.thumbnailDescription")}
<div </p>
onClick={() => props.setEnableThumbnails(!props.enableThumbnails)} <div
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" 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"> <Toggle enabled={props.enableThumbnails} />
{t("settings.preferences.thumbnailLabel")} <p className="flex-1 text-white font-bold">
</p> {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>
<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"> {/* Column */}
<div className="flex flex-col gap-3"> <div id="source-order" className="space-y-8">
<p className="text-white font-bold"> <div className="flex flex-col gap-3">
{t("settings.preferences.sourceOrder")} <p className="text-white font-bold">
</p> {t("settings.preferences.sourceOrder")}
<p className="max-w-[25rem] font-medium"> </p>
{t("settings.preferences.sourceOrderDescription")} <p className="max-w-[25rem] font-medium">
</p> {t("settings.preferences.sourceOrderDescription")}
</p>
<SortableList <SortableList
items={sourceItems} items={sourceItems}
setItems={(items) => setItems={(items) =>
props.setSourceOrder(items.map((item) => item.id)) props.setSourceOrder(items.map((item) => item.id))
} }
/> />
<Button <Button
className="max-w-[25rem]" className="max-w-[25rem]"
theme="secondary" theme="secondary"
onClick={() => props.setSourceOrder(allSources.map((s) => s.id))} onClick={() => props.setSourceOrder(allSources.map((s) => s.id))}
> >
{t("settings.reset")} {t("settings.reset")}
</Button> </Button>
</div>
</div> </div>
</div> </div>
</div> </div>