fix household settings page visuals as well as connected components

This commit is contained in:
Kuchenpirat 2025-05-23 09:06:32 +00:00
commit f58c3dac37
5 changed files with 34 additions and 22 deletions

View file

@ -1,9 +1,8 @@
<template>
<div v-if="preferences">
<BaseCardSectionTitle class="mt-10" :title="$t('household.household-preferences')" />
<BaseCardSectionTitle :title="$t('household.household-preferences')" />
<div class="mb-6">
<v-checkbox v-model="preferences.privateHousehold" hide-details density="compact"
:label="$t('household.private-household')" />
<v-checkbox v-model="preferences.privateHousehold" hide-details density="compact" :label="$t('household.private-household')" color="primary" />
<div class="ml-8">
<p class="text-subtitle-2 my-0 py-0">
{{ $t("household.private-household-description") }}
@ -12,21 +11,28 @@
</div>
</div>
<div class="mb-6">
<v-checkbox v-model="preferences.lockRecipeEditsFromOtherHouseholds" hide-details density="compact"
:label="$t('household.lock-recipe-edits-from-other-households')" />
<v-checkbox v-model="preferences.lockRecipeEditsFromOtherHouseholds" hide-details density="compact" :label="$t('household.lock-recipe-edits-from-other-households')" color="primary" />
<div class="ml-8">
<p class="text-subtitle-2 my-0 py-0">
{{ $t("household.lock-recipe-edits-from-other-households-description") }}
</p>
</div>
</div>
<v-select v-model="preferences.firstDayOfWeek" :prepend-icon="$globals.icons.calendarWeekBegin" :items="allDays"
item-title="name" item-value="value" :label="$t('settings.first-day-of-week')" variant="solo-filled" flat />
<v-select
v-model="preferences.firstDayOfWeek"
:prepend-icon="$globals.icons.calendarWeekBegin"
:items="allDays"
item-title="name"
item-value="value"
:label="$t('settings.first-day-of-week')"
variant="underlined"
flat
/>
<BaseCardSectionTitle class="mt-5" :title="$t('household.household-recipe-preferences')" />
<div class="preference-container">
<div v-for="p in recipePreferences" :key="p.key">
<v-checkbox v-model="preferences[p.key]" hide-details density="compact" :label="p.label" />
<v-checkbox v-model="preferences[p.key]" hide-details density="compact" :label="p.label" color="primary" />
<p class="ml-8 text-subtitle-2 my-0 py-0">
{{ p.description }}
</p>

View file

@ -7,9 +7,9 @@
'mt-8': section,
}"
>
<v-card-title class="headline pl-0 py-0">
<v-card-title class="text-h5 pl-0 py-0" style="font-weight: normal;">
<v-icon
v-if="icon !== ''"
v-if="icon"
start
>
{{ icon }}

View file

@ -2,7 +2,7 @@
<div class="mt-4">
<section class="d-flex flex-column align-center">
<slot name="header" />
<h2 class="headline">
<h2 class="text-h5">
<slot name="title">
👋 Here's a Title
</slot>

View file

@ -16,21 +16,14 @@
</template>
{{ $t("profile.household-description") }}
</BasePageTitle>
<v-form ref="refHouseholdEditForm"
@submit.prevent="handleSubmit"
>
<v-card variant="outlined">
<v-form ref="refHouseholdEditForm" @submit.prevent="handleSubmit">
<v-card variant="outlined" style="border-color: lightgray;">
<v-card-text>
<HouseholdPreferencesEditor v-if="household.preferences"
v-model="household.preferences"
/>
<HouseholdPreferencesEditor v-if="household.preferences" v-model="household.preferences" />
</v-card-text>
</v-card>
<div class="d-flex pa-2">
<BaseButton type="submit"
edit
class="ml-auto"
>
<BaseButton type="submit" edit class="ml-auto">
{{ $t("general.update") }}
</BaseButton>
</div>

View file

@ -64,6 +64,7 @@
<v-card
tag="article"
variant="outlined"
style="border-color: lightgrey;"
>
<v-card-text class="pb-0">
<v-form ref="userUpdate">
@ -72,18 +73,24 @@
:label="$t('user.username')"
required
validate-on="blur"
density="comfortable"
variant="underlined"
/>
<v-text-field
v-model="userCopy.fullName"
:label="$t('user.full-name')"
required
validate-on="blur"
density="comfortable"
variant="underlined"
/>
<v-text-field
v-model="userCopy.email"
:label="$t('user.email')"
validate-on="blur"
required
density="comfortable"
variant="underlined"
/>
</v-form>
</v-card-text>
@ -115,6 +122,8 @@
:type="showPassword ? 'text' : 'password'"
:append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff"
:rules="[validators.minLength(1)]"
density="comfortable"
variant="underlined"
@click:append="showPassword = !showPassword"
/>
<v-text-field
@ -124,6 +133,8 @@
:type="showPassword ? 'text' : 'password'"
:append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff"
:rules="[validators.minLength(8)]"
density="comfortable"
variant="underlined"
@click:append="showPassword = !showPassword"
/>
<v-text-field
@ -134,6 +145,8 @@
validate-on="blur"
:type="showPassword ? 'text' : 'password'"
:append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff"
density="comfortable"
variant="underlined"
@click:append="showPassword = !showPassword"
/>
<UserPasswordStrength :value="password.newOne" />