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 1

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

2
web/src/lib/components/admin-page/jobs/job-tile-button.svelte
View file

@ -12,7 +12,7 @@
</script>
<button
class="h-full flex gap-2 flex-col place-items-center place-content-center px-8 text-gray-600 transition-colors hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-xs dark:hover:text-black {colorClasses[
class="h-full w-full py-2 flex gap-2 flex-col place-items-center place-content-center px-8 text-gray-600 transition-colors hover:bg-immich-primary hover:text-white dark:text-gray-200 dark:hover:bg-immich-dark-primary text-xs dark:hover:text-black {colorClasses[
color
]}"
on:click

6
web/src/lib/components/admin-page/jobs/job-tile.svelte
View file

@ -24,7 +24,9 @@
const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
</script>
<div class="flex bg-gray-100 dark:bg-immich-dark-gray rounded-3xl overflow-hidden">
<div
class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-3xl overflow-hidden"
>
<div class="flex flex-col w-full">
{#if queueStatus.isPaused}
<JobTileStatus color="warning">Paused</JobTileStatus>
@ -78,7 +80,7 @@
</div>
</div>
</div>
<div class="flex flex-col w-32 overflow-hidden">
<div class="flex sm:flex-col flex-row sm:w-32 w-full overflow-hidden">
{#if !isIdle}
{#if waitingCount > 0}
<JobTileButton