beenull/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

layout

Browse source
This commit is contained in:
Alex Tran 2023-08-12 17:26:22 -05:00
parent 968fc77183
commit ac18f7515a
2 changed files with 19 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/app.css
View file

@ -57,6 +57,10 @@ input:focus-visible {
}
@layer utilities {
.immich-text-primary {
@apply text-immich-primary dark:text-immich-dark-primary;
}
.immich-form-input {
@apply rounded-xl bg-slate-200 p-4 text-sm focus:border-immich-primary disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-200 dark:bg-gray-600 dark:text-immich-dark-fg dark:disabled:bg-gray-800;
}

26
web/src/lib/components/album-page/rule-selection.svelte
View file

@ -1,8 +1,9 @@
<script lang="ts">
import BaseModal from '$lib/components/shared-components/base-modal.svelte';
import { createEventDispatcher } from 'svelte';
import { AlbumResponseDto } from '@api';
import type { AlbumResponseDto } from '@api';
import Plus from 'svelte-material-icons/Plus.svelte';
import Button from '../elements/buttons/button.svelte';
export let album: AlbumResponseDto;
const dispatch = createEventDispatcher<{ close: void }>();
@ -15,17 +16,17 @@
>
<svelte:fragment slot="title">
<div class="flex place-items-center gap-2">
<p class="font-medium text-immich-fg dark:text-immich-dark-fg">Automatically add photos</p>
<p class="text-immich-fg dark:text-immich-dark-fg font-medium">Automatically add photos</p>
</div>
</svelte:fragment>
<section class="px-5">
<section class="mb-5 px-5">
<!-- People Selection -->
<div id="people-selection">
<p class="text-sm">PEOPLE</p>
<div class="mt-4">
<button
class="flex h-20 w-20 place-content-center place-items-center rounded-lg border border-gray-300 text-immich-primary"
class="immich-text-primary border-1 flex h-20 w-20 place-content-center place-items-center rounded-lg border border-gray-300 hover:bg-gray-500/20 dark:border-gray-500"
>
<Plus size="24" />
</button>
@ -37,7 +38,7 @@
<p class="text-sm">LOCATION</p>
<div class="mt-4">
<button
class="flex h-20 w-20 place-content-center place-items-center rounded-lg border border-gray-300 text-immich-primary"
class="immich-text-primary border-1 flex w-full place-content-center place-items-center rounded-2xl border border-gray-300 py-2 hover:bg-gray-500/20 dark:border-gray-500"
>
<Plus size="24" />
</button>
@ -47,12 +48,15 @@
<!-- Date Selection -->
<div id="date-selection" class="mt-5">
<p class="text-sm">START DATE</p>
<div class="mt-4">
<button
class="flex h-20 w-20 place-content-center place-items-center rounded-lg border border-gray-300 text-immich-primary"
>
<Plus size="24" />
</button>
<div class="mt-2">
<div class="text-xs">
<p>Only include photos after the set date.</p>
<p>Include all by default</p>
</div>
<div class="mt-4">
<Button size="sm">Select</Button>
</div>
</div>
</div>
</section>