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): 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

25
web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
View file

@ -1,32 +1,9 @@
<script lang="ts">
import { onMount } from 'svelte';
export let isCollapsed = true;
let innerWidth: number;
const handleResize = () => {
if (innerWidth > 768) {
isCollapsed = false;
} else {
isCollapsed = true;
}
};
onMount(() => {
handleResize();
});
</script>
<svelte:window on:resize={handleResize} bind:innerWidth />
<section
id="sidebar"
on:mouseover={() => (innerWidth >= 430 ? (isCollapsed = false) : null)}
on:focus={() => (innerWidth >= 430 ? (isCollapsed = false) : null)}
on:mouseleave={() => handleResize()}
class="flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-[width] duration-200 z-10 {isCollapsed
? 'w-[72px]'
: 'pr-6 w-64 shadow-2xl md:shadow-none md:border-none border-r dark:border-r-immich-dark-gray'}"
class="group flex flex-col gap-1 pt-8 bg-immich-bg dark:bg-immich-dark-bg transition-all duration-200 z-10 w-[72px] md:w-64 hover:sm:pr-6 md:pr-6 hover:sm:w-64 hover:sm:shadow-2xl hover:md:shadow-none hover:md:border-none hover:sm:border-r hover:sm:dark:border-r-immich-dark-gray"
>
<slot />
</section>