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 7

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 128 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

9
web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
View file

@ -7,7 +7,6 @@
export let title: string;
export let logo: typeof Icon;
export let isSelected: boolean;
export let isCollapsed: boolean;
let showMoreInformation = false;
@ -22,18 +21,18 @@
{isSelected
? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-[#adcbfa] hover:bg-immich-primary/25'
: ''}
{isCollapsed ? 'pl-5' : 'px-5'}
pl-5 group-hover:sm:px-5 md:px-5
"
>
<div class="flex gap-4 place-items-center w-full overflow-hidden">
<div class="flex gap-4 place-items-center w-full overflow-hidden truncate">
<svelte:component this={logo} size="1.5em" class="shrink-0" />
<p class="font-medium text-sm">{title}</p>
</div>
<div
class="transition-[height] duration-100 delay-200 {isCollapsed ? 'height-0' : 'height-auto'}"
class="transition-[height] group-hover:sm:overflow-visible md:overflow-visible overflow-hidden duration-100 delay-1000 sm:group-hover:h-auto md:h-auto h-0"
>
{#if $$slots.moreInformation && !isCollapsed}
{#if $$slots.moreInformation}
<div
class="relative flex justify-center select-none cursor-default"
on:mouseenter={() => (showMoreInformation = true)}