1
0
mirror of https://github.com/immich-app/immich.git synced 2025-07-13 07:00:55 +02:00

fix(web): user management responsive design (#5698)

* fix: user management tailwind

* use top instead of inset-y-0

* add types to createEventDispatcher
This commit is contained in:
martin
2023-12-14 17:55:15 +01:00
committed by GitHub
parent 8e39d389b5
commit f2270ad757
36 changed files with 257 additions and 135 deletions

View File

@ -6,8 +6,9 @@
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
import { handleError } from '../../utils/handle-error';
import Icon from '$lib/components/elements/icon.svelte';
import { mdiAccountEditOutline } from '@mdi/js';
import { mdiAccountEditOutline, mdiClose } from '@mdi/js';
import { AppRoute } from '$lib/constants';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
export let user: UserResponseDto;
export let canResetPassword = true;
@ -17,7 +18,11 @@
let isShowResetPasswordConfirmation = false;
const dispatch = createEventDispatcher();
const dispatch = createEventDispatcher<{
close: void;
resetPasswordSuccess: void;
editSuccess: void;
}>();
const editUser = async () => {
try {
@ -33,7 +38,7 @@
});
if (status === 200) {
dispatch('edit-success');
dispatch('editSuccess');
}
} catch (error) {
handleError(error, 'Unable to update user');
@ -53,7 +58,7 @@
});
if (status == 200) {
dispatch('reset-password-success');
dispatch('resetPasswordSuccess');
}
} catch (e) {
console.error('Error reseting user password', e);
@ -68,8 +73,12 @@
</script>
<div
class="max-h-screen w-[500px] max-w-[95vw] overflow-y-auto rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
class="relative max-h-screen w-[500px] max-w-[95vw] overflow-y-auto rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
>
<div class="absolute top-0 right-0 px-2 py-2 h-fit">
<CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
</div>
<div
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
>