fix: admin user details responsive layout (#30114)
This commit is contained in:
@@ -55,34 +55,36 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<div class="grid grid-flow-col grid-rows-7 gap-0.5">
|
<div class="overflow-x-auto pb-1">
|
||||||
<div class="row-span-7 grid grid-rows-subgrid">
|
<div class="grid grid-flow-col grid-rows-7 gap-0.5">
|
||||||
{#if Info.getStartOfWeek({ locale: $locale }) === 7}
|
<div class="row-span-7 grid grid-rows-subgrid">
|
||||||
<div></div>
|
{#if Info.getStartOfWeek({ locale: $locale }) === 7}
|
||||||
{/if}
|
<div></div>
|
||||||
<div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[0]}</Text></div>
|
{/if}
|
||||||
<div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[1]}</Text></div>
|
<div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[0]}</Text></div>
|
||||||
<div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[2]}</Text></div>
|
<div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[1]}</Text></div>
|
||||||
{#if Info.getStartOfWeek({ locale: $locale }) === 1}
|
<div class="row-span-2 -mt-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[2]}</Text></div>
|
||||||
<div class="-my-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[3]}</Text></div>
|
{#if Info.getStartOfWeek({ locale: $locale }) === 1}
|
||||||
{/if}
|
<div class="-my-1"><Text size="tiny" class="mr-0.5 font-mono">{weekdays[3]}</Text></div>
|
||||||
</div>
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
{#each data.series as day, idx (day.date)}
|
{#each data.series as day, idx (day.date)}
|
||||||
{@const date = DateTime.fromISO(day.date, { zone: 'utc' }).toLocaleString(
|
{@const date = DateTime.fromISO(day.date, { zone: 'utc' }).toLocaleString(
|
||||||
{ month: 'short', day: 'numeric' },
|
{ month: 'short', day: 'numeric' },
|
||||||
{ locale: $locale },
|
{ locale: $locale },
|
||||||
)}
|
)}
|
||||||
<div
|
<div
|
||||||
class="aspect-square size-full rounded-sm {itemColors(day.count)} row-start-(--heatmap-row-start)"
|
class="aspect-square size-full rounded-sm {itemColors(day.count)} row-start-(--heatmap-row-start)"
|
||||||
style:--heatmap-row-start={idx === 0 ? padding + 1 : undefined}
|
style:--heatmap-row-start={idx === 0 ? padding + 1 : undefined}
|
||||||
title={itemLabel({ date, count: day.count })}
|
title={itemLabel({ date, count: day.count })}
|
||||||
aria-label={itemLabel({ date, count: day.count })}
|
aria-label={itemLabel({ date, count: day.count })}
|
||||||
></div>
|
></div>
|
||||||
{/each}
|
{/each}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-2 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
|
<div class="mt-2 flex flex-wrap items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
|
||||||
<span>{$t('less')}</span>
|
<span>{$t('less')}</span>
|
||||||
<span class="size-3 rounded-sm bg-gray-200 dark:bg-gray-700"></span>
|
<span class="size-3 rounded-sm bg-gray-200 dark:bg-gray-700"></span>
|
||||||
<span class="size-3 rounded-sm bg-immich-primary/30"></span>
|
<span class="size-3 rounded-sm bg-immich-primary/30"></span>
|
||||||
|
|||||||
@@ -213,7 +213,7 @@
|
|||||||
</Stack>
|
</Stack>
|
||||||
</AdminCard>
|
</AdminCard>
|
||||||
|
|
||||||
<div class="col-span-2 px-4 py-2">
|
<div class="col-span-full px-4 py-2">
|
||||||
<div class="flex gap-2 text-primary">
|
<div class="flex gap-2 text-primary">
|
||||||
<Icon icon={mdiCloudUploadOutline} size="1.5rem" />
|
<Icon icon={mdiCloudUploadOutline} size="1.5rem" />
|
||||||
<CardTitle>{$t('uploads')}</CardTitle>
|
<CardTitle>{$t('uploads')}</CardTitle>
|
||||||
|
|||||||
Reference in New Issue
Block a user