self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-24 08:52:28 +02:00
Code Issues Releases Activity

chore(web): style tab button group and search bar (#8292)

Browse Source 
* chore(web): style tab button group and search bar

* responsive design
This commit is contained in:
Alex 2024-03-26 10:36:15 -05:00 committed by GitHub
parent 6295edcdb7
commit 3a94be0212
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/album-page/albums-controls.svelte
View File

@ -26,7 +26,7 @@
};
</script>
<div class="hidden xl:block">
<div class="hidden xl:block h-10">
<GroupTab
filters={Object.keys(AlbumFilter)}
selected={$albumViewSettings.filter}

4
web/src/lib/components/album-page/albums-list.svelte
View File

@ -263,8 +263,8 @@
{#if albums.length > 0}
<!-- Album Card -->
<div class=" block xl:hidden">
<div class="w-fit dark:text-immich-dark-fg py-2">
<div class="xl:hidden">
<div class="w-fit h-14 dark:text-immich-dark-fg py-2">
<GroupTab
filters={Object.keys(AlbumFilter)}
selected={$albumViewSettings.filter}

11
web/src/lib/components/elements/group-tab.svelte
View File

@ -4,13 +4,14 @@
export let onSelect: (selected: string) => void;
</script>
<div class=" flex bg-gray-100 dark:bg-gray-700 rounded-lg">
<div class="flex bg-gray-200 dark:bg-immich-dark-gray rounded-2xl h-full">
{#each filters as filter, index}
<button
class="flex py-2 px-4 {filter === selected
? 'dark:bg-gray-900 bg-gray-300'
: 'dark:hover:bg-gray-800 hover:bg-gray-200'} {index === 0 ? 'rounded-l-lg' : ''} {index === filters.length - 1
? 'rounded-r-lg'
class="text-sm px-4 {filter === selected
? 'dark:bg-gray-700 bg-gray-300'
: 'dark:hover:bg-gray-800 hover:bg-gray-300'} {index === 0 ? 'rounded-l-2xl' : ''} {index ===
filters.length - 1
? 'rounded-r-2xl'
: ''}"
on:click={() => onSelect(filter)}
>

6
web/src/lib/components/elements/search-bar.svelte
View File

@ -20,8 +20,8 @@
<div
class="flex items-center text-sm {roundedBottom
? 'rounded-lg'
: 'rounded-t-lg'} bg-gray-100 p-2 dark:bg-gray-700 gap-2 place-items-center h-full"
? 'rounded-2xl'
: 'rounded-t-lg'} bg-gray-200 p-2 dark:bg-immich-dark-gray gap-2 place-items-center h-full"
>
<button on:click={() => dispatch('search', { force: true })}>
<div class="w-fit">
@ -31,7 +31,7 @@
<!-- svelte-ignore a11y-autofocus -->
<input
autofocus
class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
class="w-full gap-2 bg-gray-200 dark:bg-immich-dark-gray dark:text-white"
type="text"
{placeholder}
bind:value={name}