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

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

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>

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

@ -14,8 +14,6 @@
import { locale } from '$lib/stores/preferences.store';
import SideBarSection from './side-bar-section.svelte';
let isCollapsed: boolean;
const getAssetCount = async () => {
const { data: allAssetCount } = await api.assetApi.getAssetCountByUserId();
const { data: archivedCount } = await api.assetApi.getArchivedAssetCountByUserId();
@ -74,7 +72,7 @@
};
</script>
<SideBarSection bind:isCollapsed>
<SideBarSection>
<a
data-sveltekit-preload-data="hover"
data-sveltekit-noscroll
@ -85,7 +83,6 @@
title="Photos"
logo={ImageOutline}
isSelected={$page.route.id === '/(user)/photos'}
{isCollapsed}
>
<svelte:fragment slot="moreInformation">
{#await getAssetCount()}
@ -109,7 +106,6 @@
title="Explore"
logo={Magnify}
isSelected={$page.route.id === '/(user)/explore'}
{isCollapsed}
/>
</a>
<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
@ -117,7 +113,6 @@
title="Sharing"
logo={AccountMultipleOutline}
isSelected={$page.route.id === '/(user)/sharing'}
{isCollapsed}
>
<svelte:fragment slot="moreInformation">
{#await getAlbumCount()}
@ -131,18 +126,15 @@
</SideBarButton>
</a>
<div
class="text-xs md:pb-2 md:p-5 p-6 pb-[1.2rem] dark:text-immich-dark-fg transition-all duration-200"
>
<p class={isCollapsed ? 'hidden' : 'block'}>LIBRARY</p>
<hr class={isCollapsed ? 'block mt-2 mb-[0.45rem]' : 'hidden'} />
<div class="text-xs dark:text-immich-dark-fg transition-all duration-200">
<p class="p-6 hidden md:block group-hover:sm:block">LIBRARY</p>
<hr class="mt-8 mb-[31px] mx-4 block md:hidden group-hover:sm:hidden" />
</div>
<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
<SideBarButton
title="Favorites"
logo={StarOutline}
isSelected={$page.route.id == '/(user)/favorites'}
{isCollapsed}
>
<svelte:fragment slot="moreInformation">
{#await getFavoriteCount()}
@ -160,7 +152,6 @@
title="Albums"
logo={ImageAlbum}
isSelected={$page.route.id === '/(user)/albums'}
{isCollapsed}
>
<svelte:fragment slot="moreInformation">
{#await getAlbumCount()}
@ -178,7 +169,6 @@
title="Archive"
logo={ArchiveArrowDownOutline}
isSelected={$page.route.id === '/(user)/archive'}
{isCollapsed}
>
<svelte:fragment slot="moreInformation">
{#await getArchivedAssetsCount()}
@ -195,6 +185,6 @@
<!-- Status Box -->
<div class="mb-6 mt-auto">
<StatusBox {isCollapsed} />
<StatusBox />
</div>
</SideBarSection>

84
web/src/lib/components/shared-components/status-box.svelte
View file

@ -12,8 +12,6 @@
let serverInfo: ServerInfoResponseDto;
let pingServerInterval: NodeJS.Timer;
export let isCollapsed: boolean;
onMount(async () => {
try {
const { data: version } = await api.serverInfoApi.getServerVersion();
@ -54,32 +52,28 @@
<div class="dark:text-immich-dark-fg">
<div class="storage-status grid grid-cols-[64px_auto]">
<div
class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary {isCollapsed
? 'pb-[2.15rem]'
: ''}"
class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-[2.15rem] group-hover:sm:pb-0 md:pb-0"
>
<Cloud size={'24'} />
</div>
<div>
{#if !isCollapsed}
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
{#if serverInfo}
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
<div
class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full"
style="width: {getStorageUsagePercentage()}%"
/>
</div>
<p class="text-xs">
{asByteUnitString(serverInfo?.diskUseRaw, $locale)} of
{asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used
</p>
{:else}
<div class="mt-2">
<LoadingSpinner />
</div>
{/if}
<div class="hidden md:block group-hover:sm:block">
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Storage</p>
{#if serverInfo}
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
<div
class="bg-immich-primary dark:bg-immich-dark-primary h-[7px] rounded-full"
style="width: {getStorageUsagePercentage()}%"
/>
</div>
<p class="text-xs">
{asByteUnitString(serverInfo?.diskUseRaw, $locale)} of
{asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used
</p>
{:else}
<div class="mt-2">
<LoadingSpinner />
</div>
{/if}
</div>
</div>
@ -88,34 +82,30 @@
</div>
<div class="server-status grid grid-cols-[64px_auto]">
<div
class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary {isCollapsed
? 'pb-11'
: ''}"
class="pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary pb-11 md:pb-0 group-hover:sm:pb-0"
>
<Dns size={'24'} />
</div>
{#if !isCollapsed}
<div class="text-xs ">
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
<div class="text-xs hidden md:block group-hover:sm:block">
<p class="text-sm font-medium text-immich-primary dark:text-immich-dark-primary">Server</p>
<div class="flex justify-items-center justify-between mt-2 ">
<p>Status</p>
<div class="flex justify-items-center justify-between mt-2 ">
<p>Status</p>
{#if isServerOk}
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p>
{:else}
<p class="font-medium text-red-500">Offline</p>
{/if}
</div>
<div class="flex justify-items-center justify-between mt-2 ">
<p>Version</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
{serverVersion}
</p>
</div>
{#if isServerOk}
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">Online</p>
{:else}
<p class="font-medium text-red-500">Offline</p>
{/if}
</div>
{/if}
<div class="flex justify-items-center justify-between mt-2 ">
<p>Version</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
{serverVersion}
</p>
</div>
</div>
</div>
<!-- <div>
<hr class="ml-5 my-4" />