Adds scroll to overflowing dialog

This commit is contained in:
2025-02-19 14:07:42 -05:00
parent 2d0de59187
commit c2b2a6fcef
11 changed files with 23 additions and 18 deletions

View File

@@ -46,26 +46,31 @@
} }
div.dialog { div.dialog {
@apply max-h-[90vh];
@apply place-self-center; @apply place-self-center;
} }
div.card { div.card {
@apply w-full max-w-[1024px]; @apply w-full max-w-[1024px];
@apply rounded-xl p-4; @apply rounded-xl p-4;
@apply flex flex-col gap-4;
@apply bg-hSurface text-hOnSurface; @apply bg-hSurface text-hOnSurface;
} }
div.card-title { div.card-title {
@apply font-sans font-bold text-2xl; @apply font-sans font-bold text-2xl;
@apply mb-8; @apply p-2;
} }
div.card-entry { div.card-content {
@apply mb-4; @apply flex flex-col gap-4;
@apply p-2;
@apply overflow-y-auto;
} }
div.card-actions { div.card-actions {
@apply flex flex-row gap-6 justify-end; @apply p-2;
@apply flex flex-row gap-4 justify-end;
} }
div.card-actions > * { div.card-actions > * {

View File

@@ -4,7 +4,7 @@
Bannière Bannière
</div> </div>
<div class="card-entry"> <div class="card-content">
<img <img
:src="fileUrl || fallbackUrl" :src="fileUrl || fallbackUrl"
alt="Aperçu de la bannière" alt="Aperçu de la bannière"

View File

@@ -55,7 +55,7 @@ async function createAccount() {
Créez votre Hutopy. Créez votre Hutopy.
</div> </div>
<div class="card-entry"> <div class="card-content">
<name-editor <name-editor
v-model:name="creatorName" v-model:name="creatorName"
creator-name-reservation-id="creatorNameDirty" creator-name-reservation-id="creatorNameDirty"

View File

@@ -4,7 +4,7 @@
Logo Logo
</div> </div>
<div class="card-entry flex flex-col items-center"> <div class="card-content flex flex-col items-center">
<img <img
:src="fileUrl || fallbackUrl" :src="fileUrl || fallbackUrl"
alt="Aperçu du logo" alt="Aperçu du logo"

View File

@@ -12,7 +12,7 @@
{{ $t('isupportbtn.isupport') }} {{ $t('isupportbtn.isupport') }}
</div> </div>
<div class="card-entry"> <div class="card-content">
<v-text-field <v-text-field
v-model="tipAmountInDollars" v-model="tipAmountInDollars"
type="number" type="number"

View File

@@ -6,7 +6,7 @@
{{ $t('personnalinformation.alias') }} {{ $t('personnalinformation.alias') }}
</div> </div>
<div class="card-entry"> <div class="card-content">
<v-text-field <v-text-field
variant="outlined" variant="outlined"
v-model="alias" v-model="alias"

View File

@@ -4,7 +4,7 @@
Courriel Courriel
</div> </div>
<div class="card-entry"> <div class="card-content">
<v-text-field <v-text-field
v-model="email" v-model="email"
label="Votre courriel" label="Votre courriel"

View File

@@ -19,7 +19,7 @@ const requestSave = () => emit('save', firstname.value, lastname.value)
{{ $t('personnalinformation.fullname') }} {{ $t('personnalinformation.fullname') }}
</div> </div>
<div class="card-entry"> <div class="card-content">
<v-text-field <v-text-field
variant="outlined" variant="outlined"
v-model="firstname" v-model="firstname"
@@ -27,7 +27,7 @@ const requestSave = () => emit('save', firstname.value, lastname.value)
></v-text-field> ></v-text-field>
</div> </div>
<div class="card-entry"> <div class="card-content">
<v-text-field <v-text-field
variant="outlined" variant="outlined"
v-model="lastname" v-model="lastname"

View File

@@ -38,7 +38,7 @@ const cancel = () => {
Modifier le Stripe ID Modifier le Stripe ID
</div> </div>
<div class="card-entry"> <div class="card-content">
<v-text-field <v-text-field
v-model="stripeId" v-model="stripeId"
label="Stripe Id" label="Stripe Id"

View File

@@ -42,7 +42,7 @@ const cancel = () => {
Modifier le Titre Modifier le Titre
</div> </div>
<div class="card-entry"> <div class="card-content">
<v-text-field <v-text-field
v-model="title" v-model="title"
label="Titre" label="Titre"

View File

@@ -72,7 +72,7 @@ const cancel = () => {
Reseaux Sociaux Reseaux Sociaux
</div> </div>
<div class="card-entry"> <div class="card-content">
<div class="editor-line"> <div class="editor-line">
<facebook class="social-icon"></facebook> <facebook class="social-icon"></facebook>
@@ -174,9 +174,8 @@ const cancel = () => {
<style scoped> <style scoped>
.editor-line { .editor-line {
@apply flex flex-row gap-6; @apply flex flex-row gap-4;
@apply items-center; @apply items-center;
@apply mb-4;
} }
.social-icon { .social-icon {
@@ -184,10 +183,11 @@ const cancel = () => {
} }
.input-field { .input-field {
@apply w-full p-4; @apply w-full p-[10px];
@apply rounded-sm; @apply rounded-sm;
@apply transition duration-200; @apply transition duration-200;
@apply ring-1 ring-[#6D6C70] focus:outline-none focus:ring-hutopySecondary; @apply ring-1 ring-[#6D6C70] focus:outline-none focus:ring-hutopySecondary;
@apply hover:ring-hutopyPrimary;
@apply placeholder:text-[#6D6C70] @apply placeholder:text-[#6D6C70]
} }