mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
feat(web): mobile job cards (#2688)
This commit is contained in:
parent
d08535e7f6
commit
b7d42e7e8e
2 changed files with 27 additions and 20 deletions
|
|
@ -23,14 +23,18 @@
|
|||
export let allText: string;
|
||||
export let missingText: string;
|
||||
|
||||
const slots = $$props.$$slots;
|
||||
|
||||
$: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
|
||||
$: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
|
||||
|
||||
const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pr-4 pl-6';
|
||||
|
||||
const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-[35px] overflow-hidden"
|
||||
class="flex sm:flex-row flex-col bg-gray-100 dark:bg-immich-dark-gray rounded-2xl sm:rounded-[35px] overflow-hidden"
|
||||
>
|
||||
<div class="flex flex-col w-full">
|
||||
{#if queueStatus.isPaused}
|
||||
|
|
@ -38,7 +42,7 @@
|
|||
{:else if queueStatus.isActive}
|
||||
<JobTileStatus color="success">Active</JobTileStatus>
|
||||
{/if}
|
||||
<div class="flex flex-col gap-2 p-9">
|
||||
<div class="flex flex-col gap-2 p-5 sm:p-7 md:p-9">
|
||||
<div
|
||||
class="flex items-center gap-4 text-xl font-semibold text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
|
|
@ -63,13 +67,16 @@
|
|||
{#if subtitle}
|
||||
<div class="text-sm dark:text-white whitespace-pre-line">{subtitle}</div>
|
||||
{/if}
|
||||
<div class="text-sm dark:text-white">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div class="flex w-full max-w-md mt-2">
|
||||
{#if slots?.description}
|
||||
<div class="text-sm dark:text-white">
|
||||
<slot name="description" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex w-full max-w-md mt-2 flex-col sm:flex-row">
|
||||
<div
|
||||
class="flex place-items-center justify-between bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray w-full rounded-tl-lg rounded-bl-lg py-4 pl-4 pr-6"
|
||||
class="{commonClasses} bg-immich-primary dark:bg-immich-dark-primary text-white dark:text-immich-dark-gray rounded-t-lg sm:rounded-l-lg sm:rounded-r-none"
|
||||
>
|
||||
<p>Active</p>
|
||||
<p class="text-2xl">
|
||||
|
|
@ -78,7 +85,7 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="flex place-items-center justify-between bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray w-full rounded-tr-lg rounded-br-lg py-4 pr-4 pl-6"
|
||||
class="{commonClasses} bg-gray-200 text-immich-dark-bg dark:bg-gray-700 dark:text-immich-gray rounded-b-lg sm:rounded-r-lg sm:rounded-l-none flex-row-reverse"
|
||||
>
|
||||
<p class="text-2xl">
|
||||
{waitingCount.toLocaleString($locale)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue