KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): small responsivness improvements regarding mobile use (#2255)

Browse Source 
* make sidebar load more fluid
use css before js kicks in
added xs breakpoint in tailwind config

* fix sidebar hr still showing if opened

* make share tab not overflow on mobile

* make user management tab responsive

* make jobs panel responsive

* fix format in tailwind config

* fix full width on large screens
use md breakpoint for w-[800px]

* show accessible name for all screens

* replace grid with flex-col

* replace all xs with sm

* remove isCollapsed completly
using only tailwinds group feature and sm and md breakpoints

* remove leftovers of isCollapsed
and make the settings content less stretched

* remove isCollapsed in layout and side-bar

* fix code style

---------

Co-authored-by: faupau03 <paul.paffe@gmx.net>
Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
faupau
2023-04-17 18:18:49 +02:00
committed by GitHub
parent 1e32a5fffd
commit b970a40b4e
10 changed files with 128 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/routes/(user)/sharing/+page.svelte
View File

@@ -36,25 +36,25 @@
<UserPageLayout user={data.user} title={data.meta.title}>
<div class="flex" slot="buttons">
<LinkButton on:click={createSharedAlbum}>
<div class="flex place-items-center gap-1 text-sm">
<PlusBoxOutline size="18" />
Create shared album
<div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
<PlusBoxOutline size="18" class="shrink-0" />
<span class="max-sm:text-xs leading-none">Create shared album</span>
</div>
</LinkButton>
<LinkButton on:click={() => goto('/sharing/sharedlinks')}>
<div class="flex place-items-center gap-1 text-sm">
<Link size="18" />
Shared links
<div class="flex place-items-center gap-x-1 text-sm flex-wrap justify-center">
<Link size="18" class="shrink-0" />
<span class="max-sm:text-xs leading-none">Shared links</span>
</div>
</LinkButton>
</div>
<section>
<!-- Share Album List -->
<div class="w-full flex flex-col place-items-center">
<div class="md:w-full flex flex-col place-items-center">
{#each data.sharedAlbums as album}
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
<a class="max-md:w-full" data-sveltekit-preload-data="hover" href={`albums/${album.id}`}>
<SharedAlbumListTile {album} user={data.user} />
</a>
{/each}
@@ -63,7 +63,7 @@
<!-- Empty List -->
{#if data.sharedAlbums.length === 0}
<div
class="border dark:border-immich-dark-gray p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
class="border dark:border-immich-dark-gray p-5 md:w-[500px] w-2/3 m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center dark:text-immich-dark-fg"
>
<img src={empty2Url} alt="Empty shared album" width="500" draggable="false" />
<p class="text-center text-immich-text-gray-500">