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

chore(web): sort tailwindcss class automatically (#3330)

Browse source
This commit is contained in:
Alex 2023-07-18 13:19:39 -05:00 • committed by GitHub
parent f28fc8fa5c
commit 7316ad5a72
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
117 changed files with 638 additions and 555 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
View file

@ -79,7 +79,7 @@
{#await getConfigs() then}
<div in:fade={{ duration: 500 }}>
<form autocomplete="off" on:submit|preventDefault>
<div class="flex flex-col gap-4 ml-4 mt-4">
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingInputField
inputType={SettingInputFieldType.NUMBER}
label="CONSTANT RATE FACTOR (-crf)"

2
web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
View file

@ -75,7 +75,7 @@
<div in:fade={{ duration: 500 }}>
<form autocomplete="off" on:submit|preventDefault>
{#each jobNames as jobName}
<div class="flex flex-col gap-4 ml-4 mt-4">
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingInputField
inputType={SettingInputFieldType.NUMBER}
label="{api.getJobName(jobName)} Concurrency"

2
web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte
View file

@ -107,7 +107,7 @@
<div class="mt-2">
{#await getConfigs() then}
<div in:fade={{ duration: 500 }}>
<form autocomplete="off" on:submit|preventDefault class="flex flex-col mx-4 gap-4 py-4">
<form autocomplete="off" on:submit|preventDefault class="mx-4 flex flex-col gap-4 py-4">
<p class="text-sm dark:text-immich-dark-fg">
For more details about this feature, refer to the <a
href="http://immich.app/docs/administration/oauth#mobile-redirect-uri"

2
web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte
View file

@ -96,7 +96,7 @@
{#await getConfigs() then}
<div in:fade={{ duration: 500 }}>
<form autocomplete="off" on:submit|preventDefault>
<div class="flex flex-col gap-4 ml-4 mt-4">
<div class="ml-4 mt-4 flex flex-col gap-4">
<div class="ml-4">
<SettingSwitch
title="ENABLED"

6
web/src/lib/components/admin-page/settings/setting-accordion.svelte
View file

@ -7,8 +7,8 @@
const toggle = () => (isOpen = !isOpen);
</script>
<div class="border-b-[1px] border-gray-200 dark:border-gray-700 py-4">
<div class="flex justify-between place-items-center">
<div class="border-b-[1px] border-gray-200 py-4 dark:border-gray-700">
<div class="flex place-items-center justify-between">
<div>
<h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
{title}
@ -20,7 +20,7 @@
<button
on:click={toggle}
aria-expanded={isOpen}
class="immich-circle-icon-button hover:bg-immich-primary/10 dark:text-immich-dark-fg hover:dark:bg-immich-dark-primary/20 rounded-full p-3 flex place-items-center place-content-center transition-all"
class="immich-circle-icon-button flex place-content-center place-items-center rounded-full p-3 transition-all hover:bg-immich-primary/10 dark:text-immich-dark-fg hover:dark:bg-immich-dark-primary/20"
>
<svg
style="tran"

4
web/src/lib/components/admin-page/settings/setting-buttons-row.svelte
View file

@ -7,12 +7,12 @@
export let showResetToDefault = true;
</script>
<div class="flex justify-between gap-2 mt-8">
<div class="mt-8 flex justify-between gap-2">
<div class="left">
{#if showResetToDefault}
<button
on:click={() => dispatch('reset-to-default')}
class="text-sm dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75 text-immich-primary hover:text-immich-primary/75 font-medium bg-none"
class="bg-none text-sm font-medium text-immich-primary hover:text-immich-primary/75 dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75"
>
Reset to default
</button>

8
web/src/lib/components/admin-page/settings/setting-input-field.svelte
View file

@ -28,7 +28,7 @@
</script>
<div class="w-full">
<div class={`flex place-items-center gap-1 h-[26px]`}>
<div class={`flex h-[26px] place-items-center gap-1`}>
<label class={`immich-form-label text-sm`} for={label}>{label}</label>
{#if required}
<div class="text-red-400">*</div>
@ -37,7 +37,7 @@
{#if isEdited}
<div
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
>
Unsaved change
</div>
@ -45,13 +45,13 @@
</div>
{#if desc}
<p class="immich-form-label text-xs pb-2" id="{label}-desc">
<p class="immich-form-label pb-2 text-xs" id="{label}-desc">
{desc}
</p>
{/if}
<input
class="immich-form-input pb-2 w-full"
class="immich-form-input w-full pb-2"
aria-describedby={desc ? `${label}-desc` : undefined}
aria-labelledby="{label}-label"
id={label}

8
web/src/lib/components/admin-page/settings/setting-select.svelte
View file

@ -15,13 +15,13 @@
</script>
<div class="w-full">
<div class={`flex place-items-center gap-1 h-[26px]`}>
<div class={`flex h-[26px] place-items-center gap-1`}>
<label class={`immich-form-label text-sm`} for="{name}-select">{label}</label>
{#if isEdited}
<div
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
>
Unsaved change
</div>
@ -29,13 +29,13 @@
</div>
{#if desc}
<p class="immich-form-label text-xs pb-2" id="{name}-desc">
<p class="immich-form-label pb-2 text-xs" id="{name}-desc">
{desc}
</p>
{/if}
<select
class="immich-form-input pb-2 w-full"
class="immich-form-input w-full pb-2"
aria-describedby={desc ? `${name}-desc` : undefined}
{name}
id="{name}-select"

10
web/src/lib/components/admin-page/settings/setting-switch.svelte
View file

@ -9,16 +9,16 @@
export let isEdited = false;
</script>
<div class="flex justify-between place-items-center">
<div class="flex place-items-center justify-between">
<div>
<div class="flex place-items-center gap-1 h-[26px]">
<div class="flex h-[26px] place-items-center gap-1">
<label class="immich-form-label text-sm" for={title}>
{title}
</label>
{#if isEdited}
<div
transition:fly={{ x: 10, duration: 200, easing: quintOut }}
class="bg-orange-100 px-2 rounded-full text-orange-900 text-[10px]"
class="rounded-full bg-orange-100 px-2 text-[10px] text-orange-900"
>
Unsaved change
</div>
@ -28,8 +28,8 @@
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
</div>
<label class="relative inline-block flex-none w-[36px] h-[10px]">
<input class="opacity-0 w-0 h-0 disabled::cursor-not-allowed" type="checkbox" bind:checked on:click {disabled} />
<label class="relative inline-block h-[10px] w-[36px] flex-none">
<input class="disabled::cursor-not-allowed h-0 w-0 opacity-0" type="checkbox" bind:checked on:click {disabled} />
{#if disabled}
<span class="slider-disable" />

14
web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
View file

@ -133,7 +133,7 @@
<section class="dark:text-immich-dark-fg">
{#await getConfigs() then}
<div id="directory-path-builder" class="m-4">
<h3 class="font-medium text-immich-primary dark:text-immich-dark-primary text-base">Variables</h3>
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Variables</h3>
<section class="support-date">
{#await getSupportDateTimeFormat()}
@ -150,9 +150,9 @@
</section>
<div class="mt-4 flex flex-col">
<h3 class="font-medium text-immich-primary dark:text-immich-dark-primary text-base">Template</h3>
<h3 class="text-base font-medium text-immich-primary dark:text-immich-dark-primary">Template</h3>
<div class="text-xs my-2">
<div class="my-2 text-xs">
<h4>PREVIEW</h4>
</div>
@ -167,17 +167,17 @@
<code>{user.storageLabel || user.id}</code> is the user's Storage Label
</p>
<p class="text-xs p-4 bg-gray-200 dark:bg-gray-700 dark:text-immich-dark-fg py-2 rounded-lg mt-2">
<p class="mt-2 rounded-lg bg-gray-200 p-4 py-2 text-xs dark:bg-gray-700 dark:text-immich-dark-fg">
<span class="text-immich-fg/25 dark:text-immich-dark-fg/50"
>UPLOAD_LOCATION/{user.storageLabel || user.id}</span
>/{parsedTemplate()}.jpg
</p>
<form autocomplete="off" class="flex flex-col" on:submit|preventDefault>
<div class="flex flex-col my-2">
<div class="my-2 flex flex-col">
<label class="text-xs" for="presets">PRESET</label>
<select
class="text-sm bg-slate-200 p-2 rounded-lg mt-2 dark:bg-gray-600 hover:cursor-pointer"
class="mt-2 rounded-lg bg-slate-200 p-2 text-sm hover:cursor-pointer dark:bg-gray-600"
name="presets"
id="preset-select"
bind:value={selectedPreset}
@ -202,7 +202,7 @@
</div>
</div>
<div id="migration-info" class="text-sm mt-4">
<div id="migration-info" class="mt-4 text-sm">
<p>
Template changes will only apply to new assets. To retroactively apply the template to previously uploaded
assets, run the <a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary"

16
web/src/lib/components/admin-page/settings/storage-template/supported-datetime-panel.svelte
View file

@ -9,18 +9,18 @@
};
</script>
<div class="text-xs mt-2">
<div class="mt-2 text-xs">
<h4>DATE & TIME</h4>
</div>
<div class="text-xs bg-gray-200 dark:bg-gray-700 dark:text-immich-dark-fg p-4 mt-2 rounded-lg">
<div class="mt-2 rounded-lg bg-gray-200 p-4 text-xs dark:bg-gray-700 dark:text-immich-dark-fg">
<div class="mb-2 text-gray-600 dark:text-immich-dark-fg">
<p>Asset's creation timestamp is used for the datetime information</p>
<p>Sample time 2022-09-04T20:03:05.250</p>
</div>
<div class="flex gap-[50px]">
<div>
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">YEAR</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">YEAR</p>
<ul>
{#each options.yearOptions as yearFormat}
<li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li>
@ -29,7 +29,7 @@
</div>
<div>
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">MONTH</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">MONTH</p>
<ul>
{#each options.monthOptions as monthFormat}
<li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li>
@ -38,7 +38,7 @@
</div>
<div>
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">DAY</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">DAY</p>
<ul>
{#each options.dayOptions as dayFormat}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@ -47,7 +47,7 @@
</div>
<div>
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">HOUR</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">HOUR</p>
<ul>
{#each options.hourOptions as dayFormat}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@ -56,7 +56,7 @@
</div>
<div>
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">MINUTE</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">MINUTE</p>
<ul>
{#each options.minuteOptions as dayFormat}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
@ -65,7 +65,7 @@
</div>
<div>
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">SECOND</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">SECOND</p>
<ul>
{#each options.secondOptions as dayFormat}
<li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>

10
web/src/lib/components/admin-page/settings/storage-template/supported-variables-panel.svelte
View file

@ -1,25 +1,25 @@
<div class="text-xs mt-4">
<div class="mt-4 text-xs">
<h4>OTHER VARIABLES</h4>
</div>
<div class="text-xs bg-gray-200 dark:bg-gray-700 dark:text-immich-dark-fg p-4 mt-2 rounded-lg">
<div class="mt-2 rounded-lg bg-gray-200 p-4 text-xs dark:bg-gray-700 dark:text-immich-dark-fg">
<div class="flex gap-[50px]">
<div>
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE NAME</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">FILE NAME</p>
<ul>
<li>{`{{filename}}`}</li>
</ul>
</div>
<div>
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE EXTENSION</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">FILE EXTENSION</p>
<ul>
<li>{`{{ext}}`}</li>
</ul>
</div>
<div>
<p class="text-immich-primary font-medium dark:text-immich-dark-primary">FILE TYPE</p>
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">FILE TYPE</p>
<ul>
<li>{`{{filetype}}`} - VID or IMG</li>
<li>{`{{filetypefull}}`} - VIDEO or IMAGE</li>