helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): improve UI/UX for settings pages (#12626)

Browse source 
* fix(web): local date time for buckets

* feat(web): improve UI/UX for setting pages

* search admin settings and icon

* clean up

* fix translation file

* Update web/src/routes/admin/system-settings/+page.svelte

Co-authored-by: Ben <45583362+ben-basten@users.noreply.github.com>

* Update web/src/lib/components/shared-components/settings/setting-accordion.svelte

Co-authored-by: Ben <45583362+ben-basten@users.noreply.github.com>

* better search bar on smaller screen

* lint

* template syntax

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>
Co-authored-by: Ben <45583362+ben-basten@users.noreply.github.com>
This commit is contained in:
Alex 2024-09-16 15:51:03 -05:00 • committed by GitHub
parent b74b20824a
commit 186b4e1333
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 126 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

22
web/src/lib/components/shared-components/settings/setting-accordion.svelte
View file

@ -2,6 +2,7 @@
import { slide } from 'svelte/transition';
import { getAccordionState } from './setting-accordion-state.svelte';
import { onDestroy } from 'svelte';
import Icon from '$lib/components/elements/icon.svelte';
const accordionState = getAccordionState();
@ -10,6 +11,7 @@
export let key: string;
export let isOpen = $accordionState.has(key);
export let autoScrollTo = false;
export let icon = '';
let accordionElement: HTMLDivElement;
@ -38,7 +40,12 @@
});
</script>
<div class="border-b-[1px] border-gray-200 py-4 dark:border-gray-700" bind:this={accordionElement}>
<div
class="border rounded-2xl my-4 px-6 py-4 transition-all {isOpen
? 'border-immich-primary/40 dark:border-immich-dark-primary/50 shadow-md'
: 'dark:border-gray-800'}"
bind:this={accordionElement}
>
<button
type="button"
aria-expanded={isOpen}
@ -46,12 +53,17 @@
class="flex w-full place-items-center justify-between text-left"
>
<div>
<h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
{title}
</h2>
<div class="flex gap-2 place-items-center">
{#if icon}
<Icon path={icon} class="text-immich-primary dark:text-immich-dark-primary" size="24" ariaHidden />
{/if}
<h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
{title}
</h2>
</div>
<slot name="subtitle">
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
<p class="text-sm dark:text-immich-dark-fg mt-1">{subtitle}</p>
</slot>
</div>