split cards on parameters page

components/Layout/Parameters/Table.vue

@@ -80,6 +80,7 @@ A data table for the parameters page
         </tr>
       </tbody>
     </v-table>
+
     <div v-if="actions.includes(TABLE_ACTION.ADD)" class="d-flex justify-center my-3">
       <v-btn
         prepend-icon="fa fa-plus"
@@ -89,7 +90,6 @@ A data table for the parameters page
         {{ i18n.t('add') }}
       </v-btn>
     </div>
-
   </div>
 </template>
 

layouts/parameters.vue

@@ -16,11 +16,9 @@
         <LayoutAlertBar />
 
         <!-- Page will be rendered here-->
-        <v-card class="parameters-page-card">
-          <div class="inner-container">
-            <slot />
-          </div>
-        </v-card>
+        <div class="inner-container">
+          <slot />
+        </div>
       </v-main>
 
       <LazyLayoutAlertContainer />
@@ -36,11 +34,11 @@ layoutStore.name = 'parameters'
 </script>
 
 <style scoped lang="scss">
-.parameters-page-card {
+:deep(.parameters-page-card) {
   background-color: rgb(var(--v-theme-neutral-very-soft));
   color: rgb(var(--v-theme-on-neutral-very-soft));
   padding: 24px;
-  margin: 2% auto;
+  margin: 28px auto;
   max-width: 1200px;
 }
 

pages/parameters/attendances.vue

@@ -1,54 +1,49 @@
 <template>
-  <h3>{{ $t("parameters_attendances_page")}}</h3>
+  <h3 class="my-8">{{ $t("parameters_attendances_page")}}</h3>
 
-  <LayoutContainer>
-    <div
-      v-if="organizationProfile.isSchool"
-      class="mt-6"
+  <v-card v-if="organizationProfile.isSchool" class="parameters-page-card">
+    <h4>{{ $t("alert_configuration") }}</h4>
+    <UiLoadingPanel v-if="pending" />
+    <UiForm
+      v-else-if="parameters !== null"
+      v-model="parameters"
     >
-      <h4>{{ $t("alert_configuration") }}</h4>
-      <UiLoadingPanel v-if="pending" />
-      <UiForm
-        v-else-if="parameters !== null"
-        v-model="parameters"
-      >
-        <v-row>
-          <v-col cols="12">
-            <UiInputCheckbox
-              v-model="parameters.sendAttendanceEmail"
-              field="sendAttendanceEmail"
-              label="sendAttendanceEmail"
-            />
+      <v-row>
+        <v-col cols="12">
+          <UiInputCheckbox
+            v-model="parameters.sendAttendanceEmail"
+            field="sendAttendanceEmail"
+            label="sendAttendanceEmail"
+          />
 
-            <UiInputCheckbox
-              v-model="parameters.sendAttendanceSms"
-              field="sendAttendanceSms"
-            />
+          <UiInputCheckbox
+            v-model="parameters.sendAttendanceSms"
+            field="sendAttendanceSms"
+          />
 
-            <UiInputCheckbox
-              v-model="parameters.notifyAdministrationAbsence"
-              field="notifyAdministrationAbsence"
-            />
+          <UiInputCheckbox
+            v-model="parameters.notifyAdministrationAbsence"
+            field="notifyAdministrationAbsence"
+          />
 
-            <UiInputNumber
-              v-if="parameters.notifyAdministrationAbsence"
-              v-model="parameters.numberConsecutiveAbsences"
-              field="numberConsecutiveAbsences"
-              :rules="rules()"
-            />
-          </v-col>
-        </v-row>
-      </UiForm>
-
-      <v-divider class="my-5" />
-    </div>
+          <UiInputNumber
+            v-if="parameters.notifyAdministrationAbsence"
+            v-model="parameters.numberConsecutiveAbsences"
+            field="numberConsecutiveAbsences"
+            :rules="rules()"
+          />
+        </v-col>
+      </v-row>
+    </UiForm>
+  </v-card>
 
+  <v-card class="parameters-page-card">
     <LayoutParametersEntityTable
       :model="AttendanceBookingReason"
       :title="$t('attendanceBookingReasons')"
       :columns-definitions="[{ property: 'reason' }]"
     />
-  </LayoutContainer>
+  </v-card>
 </template>
 <script setup lang="ts">
 import type { AsyncData } from '#app'

pages/parameters/bulletin.vue

@@ -1,73 +1,75 @@
 <template>
   <LayoutContainer>
-    <h3>{{ $t("parameters_bulletin_page")}}</h3>
-
-    <UiLoadingPanel v-if="pending" />
-    <UiForm
-      v-else
-      v-model="parameters"
-    >
-      <v-row>
-        <v-col cols="12">
-          <UiInputCheckbox
-            v-model="parameters.bulletinWithTeacher"
-            field="bulletinWithTeacher"
-          />
-
-          <UiInputCheckbox
-            v-model="parameters.bulletinSignatureDirector"
-            field="bulletinSignatureDirector"
-          />
-
-          <UiInputCheckbox
-            v-model="parameters.bulletinShowEducationWithoutEvaluation"
-            field="bulletinShowEducationWithoutEvaluation"
-          />
-
-          <UiInputCheckbox
-            v-model="parameters.bulletinShowAbsences"
-            field="bulletinShowAbsences"
-          />
-
-          <UiInputCheckbox
-            v-model="parameters.bulletinEditWithoutEvaluation"
-            field="bulletinEditWithoutEvaluation"
-          />
-
-          <UiInputCheckbox
-            v-model="parameters.bulletinPrintAddress"
-            field="bulletinPrintAddress"
-          />
-
-          <UiInputCheckbox
-            v-model="parameters.bulletinDisplayLevelAcquired"
-            field="bulletinDisplayLevelAcquired"
-          />
-
-          <UiInputCheckbox
-            v-model="parameters.bulletinViewTestResults"
-            field="bulletinViewTestResults"
-          />
-
-          <UiInputCheckbox
-            v-model="parameters.bulletinShowAverages"
-            field="bulletinShowAverages"
-          />
-
-          <UiInputAutocompleteWithEnum
-            v-model="parameters.bulletinCriteriaSort"
-            field="bulletinCriteriaSort"
-            enum-name="organization_bulletin_criteria_sort"
-          />
-
-          <UiInputAutocompleteWithEnum
-            v-model="parameters.bulletinReceiver"
-            field="bulletinReceiver"
-            enum-name="organization_bulletin_send_to"
-          />
-        </v-col>
-      </v-row>
-    </UiForm>
+    <h3 class="my-8">{{ $t("parameters_bulletin_page")}}</h3>
+
+    <v-card class="parameters-page-card">
+      <UiLoadingPanel v-if="pending" />
+      <UiForm
+        v-else
+        v-model="parameters"
+      >
+        <v-row>
+          <v-col cols="12">
+            <UiInputCheckbox
+              v-model="parameters.bulletinWithTeacher"
+              field="bulletinWithTeacher"
+            />
+
+            <UiInputCheckbox
+              v-model="parameters.bulletinSignatureDirector"
+              field="bulletinSignatureDirector"
+            />
+
+            <UiInputCheckbox
+              v-model="parameters.bulletinShowEducationWithoutEvaluation"
+              field="bulletinShowEducationWithoutEvaluation"
+            />
+
+            <UiInputCheckbox
+              v-model="parameters.bulletinShowAbsences"
+              field="bulletinShowAbsences"
+            />
+
+            <UiInputCheckbox
+              v-model="parameters.bulletinEditWithoutEvaluation"
+              field="bulletinEditWithoutEvaluation"
+            />
+
+            <UiInputCheckbox
+              v-model="parameters.bulletinPrintAddress"
+              field="bulletinPrintAddress"
+            />
+
+            <UiInputCheckbox
+              v-model="parameters.bulletinDisplayLevelAcquired"
+              field="bulletinDisplayLevelAcquired"
+            />
+
+            <UiInputCheckbox
+              v-model="parameters.bulletinViewTestResults"
+              field="bulletinViewTestResults"
+            />
+
+            <UiInputCheckbox
+              v-model="parameters.bulletinShowAverages"
+              field="bulletinShowAverages"
+            />
+
+            <UiInputAutocompleteWithEnum
+              v-model="parameters.bulletinCriteriaSort"
+              field="bulletinCriteriaSort"
+              enum-name="organization_bulletin_criteria_sort"
+            />
+
+            <UiInputAutocompleteWithEnum
+              v-model="parameters.bulletinReceiver"
+              field="bulletinReceiver"
+              enum-name="organization_bulletin_send_to"
+            />
+          </v-col>
+        </v-row>
+      </UiForm>
+    </v-card>
   </LayoutContainer>
 </template>
 

pages/parameters/education_notation.vue

@@ -1,57 +1,59 @@
 <template>
   <LayoutContainer>
-    <h3>{{ $t("parameters_education_notation_page")}}</h3>
+    <h3 class="my-8">{{ $t("parameters_education_notation_page")}}</h3>
 
-    <UiLoadingPanel v-if="pending" />
-    <UiForm
-      v-else
-      v-model="parameters"
-    >
-      <v-row>
-        <v-col cols="12">
-          <UiInputCheckbox
-            v-model="parameters.periodValidation"
-            field="periodValidation"
-            label="define_validation_periods_for_teachers"
-          />
+    <v-card class="parameters-page-card">
+      <UiLoadingPanel v-if="pending" />
+      <UiForm
+        v-else
+        v-model="parameters"
+      >
+        <v-row>
+          <v-col cols="12">
+            <UiInputCheckbox
+              v-model="parameters.periodValidation"
+              field="periodValidation"
+              label="define_validation_periods_for_teachers"
+            />
 
-          <UiInputCheckbox
-            v-model="parameters.editCriteriaNotationByAdminOnly"
-            field="editCriteriaNotationByAdminOnly"
-            label="evaluation_criterium_edition_is_admin_only"
-          />
+            <UiInputCheckbox
+              v-model="parameters.editCriteriaNotationByAdminOnly"
+              field="editCriteriaNotationByAdminOnly"
+              label="evaluation_criterium_edition_is_admin_only"
+            />
 
-          <UiInputCheckbox
-            v-model="parameters.requiredValidation"
-            field="requiredValidation"
-            label="mandatory_validation_for_evaluations"
-          />
+            <UiInputCheckbox
+              v-model="parameters.requiredValidation"
+              field="requiredValidation"
+              label="mandatory_validation_for_evaluations"
+            />
 
-          <UiInputAutocompleteWithEnum
-            v-if="organizationProfile.hasModule('AdvancedEducationNotation')"
-            v-model="parameters.advancedEducationNotationType"
-            enum-name="advanced_education_notation"
-            field="advancedEducationNotationType"
-          />
+            <UiInputAutocompleteWithEnum
+              v-if="organizationProfile.hasModule('AdvancedEducationNotation')"
+              v-model="parameters.advancedEducationNotationType"
+              enum-name="advanced_education_notation"
+              field="advancedEducationNotationType"
+            />
 
-          <UiInputAutocompleteWithEnum
-            v-model="parameters.educationPeriodicity"
-            enum-name="education_periodicity"
-            field="educationPeriodicity"
-          />
+            <UiInputAutocompleteWithEnum
+              v-model="parameters.educationPeriodicity"
+              enum-name="education_periodicity"
+              field="educationPeriodicity"
+            />
 
-          <UiInputNumber
-            v-model="parameters.average"
-            field="average"
-            label="max_note_for_pedagogical_followup"
-            :default="20"
-            :min="1"
-            :max="100"
-            class="mt-2"
-          />
-        </v-col>
-      </v-row>
-    </UiForm>
+            <UiInputNumber
+              v-model="parameters.average"
+              field="average"
+              label="max_note_for_pedagogical_followup"
+              :default="20"
+              :min="1"
+              :max="100"
+              class="mt-2"
+            />
+          </v-col>
+        </v-row>
+      </UiForm>
+    </v-card>
   </LayoutContainer>
 </template>
 

pages/parameters/education_timings/index.vue

@@ -1,11 +1,13 @@
 <template>
   <LayoutContainer>
-    <h3>{{ $t("parameters_education_timings_page")}}</h3>
+    <h3 class="my-8">{{ $t("parameters_education_timings_page")}}</h3>
 
-    <LayoutParametersEntityTable
-      :model="EducationTiming"
-      :columns-definitions="[{ property: 'timing' }]"
-    />
+      <v-card class="parameters-page-card">
+      <LayoutParametersEntityTable
+        :model="EducationTiming"
+        :columns-definitions="[{ property: 'timing' }]"
+      />
+    </v-card>
   </LayoutContainer>
 </template>
 

pages/parameters/general_parameters.vue

@@ -1,88 +1,90 @@
 <template>
   <LayoutContainer>
-    <h3>{{ $t("parameters_general_page")}}</h3>
+    <h3 class="my-8">{{ $t("parameters_general_page")}}</h3>
 
-    <UiLoadingPanel v-if="pending" />
-    <UiForm
-      v-else-if="parameters !== null"
-      v-model="parameters"
-    >
-      <v-row>
-        <v-col cols="12">
-          <UiInputDatePicker
-            v-if="organizationProfile.isSchool"
-            v-model="parameters.financialDate"
-            field="financialDate"
-            label="start_date_of_financial_season"
-            position="left"
-            class="my-2"
-          />
-
-          <UiInputDatePicker
-            v-if="organizationProfile.isSchool"
-            v-model="parameters.musicalDate"
-            field="musicalDate"
-            label="start_date_of_activity_season"
-            position="left"
-            class="my-2"
-          />
+    <v-card class="parameters-page-card">
+      <UiLoadingPanel v-if="pending" />
+      <UiForm
+        v-else-if="parameters !== null"
+        v-model="parameters"
+      >
+        <v-row>
+          <v-col cols="12">
+            <UiInputDatePicker
+              v-if="organizationProfile.isSchool"
+              v-model="parameters.financialDate"
+              field="financialDate"
+              label="start_date_of_financial_season"
+              position="left"
+              class="my-2"
+            />
 
-          <UiInputDatePicker
-            v-if="organizationProfile.isSchool"
-            v-model="parameters.startCourseDate"
-            field="startCourseDate"
-            label="start_date_of_courses"
-            position="left"
-            class="my-2"
-          />
+            <UiInputDatePicker
+              v-if="organizationProfile.isSchool"
+              v-model="parameters.musicalDate"
+              field="musicalDate"
+              label="start_date_of_activity_season"
+              position="left"
+              class="my-2"
+            />
 
-          <UiInputDatePicker
-            v-if="organizationProfile.isSchool"
-            v-model="parameters.endCourseDate"
-            field="endCourseDate"
-            label="end_date_of_courses"
-            position="left"
-            class="my-2"
-          />
+            <UiInputDatePicker
+              v-if="organizationProfile.isSchool"
+              v-model="parameters.startCourseDate"
+              field="startCourseDate"
+              label="start_date_of_courses"
+              position="left"
+              class="my-2"
+            />
 
-          <UiInputAutocompleteWithEnum
-            v-model="parameters.timezone"
-            enum-name="timezone"
-            field="timezone"
-          />
+            <UiInputDatePicker
+              v-if="organizationProfile.isSchool"
+              v-model="parameters.endCourseDate"
+              field="endCourseDate"
+              label="end_date_of_courses"
+              position="left"
+              class="my-2"
+            />
 
-          <UiInputCheckbox
-            v-model="parameters.showAdherentList"
-            field="showAdherentList"
-            label="show_adherents_list_and_their_coordinates"
-          />
+            <UiInputAutocompleteWithEnum
+              v-model="parameters.timezone"
+              enum-name="timezone"
+              field="timezone"
+            />
 
-          <UiInputCheckbox
-            v-if="
-              organizationProfile.isSchool && organizationProfile.isAssociation
-            "
-            v-model="parameters.studentsAreAdherents"
-            field="studentsAreAdherents"
-            label="students_are_also_association_members"
-          />
+            <UiInputCheckbox
+              v-model="parameters.showAdherentList"
+              field="showAdherentList"
+              label="show_adherents_list_and_their_coordinates"
+            />
 
-          <div
-            v-if="organizationProfile.isCMFCentralService"
-            class="d-flex flex-column"
-          >
-            <span class="mb-1 v-label" style="font-size: 12px"
-              >{{ $t('qrCode') }}
-            </span>
-            <UiInputImage
-              v-model="parameters.qrCode"
-              field="qrCode"
-              label="licenceQrCode"
-              :width="120"
+            <UiInputCheckbox
+              v-if="
+                organizationProfile.isSchool && organizationProfile.isAssociation
+              "
+              v-model="parameters.studentsAreAdherents"
+              field="studentsAreAdherents"
+              label="students_are_also_association_members"
             />
-          </div>
-        </v-col>
-      </v-row>
-    </UiForm>
+
+            <div
+              v-if="organizationProfile.isCMFCentralService"
+              class="d-flex flex-column"
+            >
+              <span class="mb-1 v-label" style="font-size: 12px"
+                >{{ $t('qrCode') }}
+              </span>
+              <UiInputImage
+                v-model="parameters.qrCode"
+                field="qrCode"
+                label="licenceQrCode"
+                :width="120"
+              />
+            </div>
+          </v-col>
+        </v-row>
+      </UiForm>
+    </v-card>
   </LayoutContainer>
 </template>
 

pages/parameters/intranet.vue

@@ -1,55 +1,57 @@
 <template>
   <LayoutContainer>
-    <h3>{{ $t("parameters_intranet_page")}}</h3>
+    <h3 class="my-8">{{ $t("parameters_intranet_page")}}</h3>
 
-    <UiLoadingPanel v-if="pending" />
-    <UiForm
-      v-else
-      v-model="parameters"
-    >
-      <v-row>
-        <v-col cols="12">
-          <h3 class="mb-4">{{ $t('teachers')}}</h3>
+    <v-card class="parameters-page-card">
+      <UiLoadingPanel v-if="pending" />
+      <UiForm
+        v-else
+        v-model="parameters"
+      >
+        <v-row>
+          <v-col cols="12">
+            <h3 class="mb-4">{{ $t('teachers')}}</h3>
 
-          <UiInputCheckbox
-            v-model="parameters.createCourse"
-            field="createCourse"
-            label="allow_teachers_to_create_courses"
-          />
+            <UiInputCheckbox
+              v-model="parameters.createCourse"
+              field="createCourse"
+              label="allow_teachers_to_create_courses"
+            />
 
-          <UiInputCheckbox
-            v-model="parameters.consultTeacherListing"
-            field="consultTeacherListing"
-            label="allow_teachers_to_consult_colleagues_informations"
-          />
+            <UiInputCheckbox
+              v-model="parameters.consultTeacherListing"
+              field="consultTeacherListing"
+              label="allow_teachers_to_consult_colleagues_informations"
+            />
 
-          <UiInputCheckbox
-            v-model="parameters.consultPedagogicResult"
-            field="showAdherentList"
-            label="allow_students_to_consult_their_pedagogical_followup"
-          />
+            <UiInputCheckbox
+              v-model="parameters.consultPedagogicResult"
+              field="showAdherentList"
+              label="allow_students_to_consult_their_pedagogical_followup"
+            />
 
-          <UiInputCheckbox
-            v-model="parameters.generateAttendanceReport"
-            field="generateAttendanceReport"
-            label="allow_teachers_to_generate_attendance_reports"
-          />
+            <UiInputCheckbox
+              v-model="parameters.generateAttendanceReport"
+              field="generateAttendanceReport"
+              label="allow_teachers_to_generate_attendance_reports"
+            />
 
-          <h3 class="mt-3 mb-4">{{ $t('pupils-members')}}</h3>
-          <UiInputCheckbox
-            v-model="parameters.administrationCc"
-            field="administrationCc"
-            label="send_teachers_mail_reports_copy_to_administration"
-          />
+            <h3 class="mt-3 mb-4">{{ $t('pupils-members')}}</h3>
+            <UiInputCheckbox
+              v-model="parameters.administrationCc"
+              field="administrationCc"
+              label="send_teachers_mail_reports_copy_to_administration"
+            />
 
-          <UiInputCheckbox
-            v-model="parameters.allowMembersToChangeGivenNameAndName"
-            field="allowMembersToChangeGivenNameAndName"
-            label="allow_members_to_change_their_names_and_firstnames"
-          />
-        </v-col>
-      </v-row>
-    </UiForm>
+            <UiInputCheckbox
+              v-model="parameters.allowMembersToChangeGivenNameAndName"
+              field="allowMembersToChangeGivenNameAndName"
+              label="allow_members_to_change_their_names_and_firstnames"
+            />
+          </v-col>
+        </v-row>
+      </UiForm>
+    </v-card>
   </LayoutContainer>
 </template>
 

pages/parameters/residence_areas/index.vue

@@ -1,12 +1,14 @@
 <template>
-  <h3>{{ $t("parameters_residence_areas_page")}}</h3>
+  <h3 class="my-8">{{ $t("parameters_residence_areas_page")}}</h3>
 
-  <LayoutContainer>
-    <LayoutParametersEntityTable
-      :model="ResidenceArea"
-      :columns-definitions="[{ property: 'label' }]"
-    />
-  </LayoutContainer>
+  <v-card class="parameters-page-card">
+    <LayoutContainer>
+      <LayoutParametersEntityTable
+        :model="ResidenceArea"
+        :columns-definitions="[{ property: 'label' }]"
+      />
+    </LayoutContainer>
+  </v-card>
 </template>
 
 <script setup lang="ts">

pages/parameters/sms.vue

@@ -1,33 +1,35 @@
 <template>
   <div>
-    <h3>{{ $t('parameters_sms_page') }}</h3>
+    <h3 class="my-8">{{ $t('parameters_sms_page') }}</h3>
 
-    <UiForm v-if="parameters" v-model="parameters">
-      <v-row>
-        <v-col cols="12">
-          <UiInputText
-            v-model="parameters.smsSenderName"
-            readonly
-            field="smsSenderName"
-            :rules="rules()"
-            class="readonly"
-          />
-        </v-col>
-        <v-col cols="12">
-          <UiInputText
-            v-model="parameters.usernameSMS"
-            field="usernameSMS"
-          />
-        </v-col>
-        <v-col cols="12">
-          <UiInputText
-            v-model="parameters.passwordSMS"
-            field="passwordSMS"
-            class="password"
-          />
-        </v-col>
-      </v-row>
-    </UiForm>
+    <v-card class="parameters-page-card">
+      <UiForm v-if="parameters" v-model="parameters">
+        <v-row>
+          <v-col cols="12">
+            <UiInputText
+              v-model="parameters.smsSenderName"
+              readonly
+              field="smsSenderName"
+              :rules="rules()"
+              class="readonly"
+            />
+          </v-col>
+          <v-col cols="12">
+            <UiInputText
+              v-model="parameters.usernameSMS"
+              field="usernameSMS"
+            />
+          </v-col>
+          <v-col cols="12">
+            <UiInputText
+              v-model="parameters.passwordSMS"
+              field="passwordSMS"
+              class="password"
+            />
+          </v-col>
+        </v-row>
+      </UiForm>
+    </v-card>
   </div>
 </template>
 <script setup lang="ts">

pages/parameters/super_admin.vue

@@ -1,40 +1,42 @@
 <template>
   <div>
-    <h3>{{ $t("parameters_super_admin_page")}}</h3>
+    <h3 class="my-8">{{ $t("parameters_super_admin_page")}}</h3>
 
-    <div class="explanation">
-      <div class="px-4 d-flex flex-row align-center justify-center py-2">
-        <v-icon class="theme-info">fa fa-info</v-icon>
+    <v-card class="parameters-page-card">
+      <div class="explanation">
+        <div class="px-4 d-flex flex-row align-center justify-center py-2">
+          <v-icon class="theme-info">fa fa-info</v-icon>
+        </div>
+        <div class="px-2 d-flex flex-row align-center justify-center">
+          {{ $t('super_admin_explanation_text') }}
+        </div>
       </div>
-      <div class="px-2 d-flex flex-row align-center justify-center">
-        {{ $t('super_admin_explanation_text') }}
-      </div>
-    </div>
 
-    <UiLoadingPanel v-if="pending" />
-    <UiForm
-      v-else-if="adminAccess"
-      ref="form"
-      v-model="adminAccess"
-      class="w-100"
-    >
-      <v-table class="mb-4">
-        <tbody>
-          <tr>
-            <td>{{ $t('username') }} :</td>
-            <td><b>{{ adminAccess.username }}</b></td>
-          </tr>
-        </tbody>
-      </v-table>
+      <UiLoadingPanel v-if="pending" />
+      <UiForm
+        v-else-if="adminAccess"
+        ref="form"
+        v-model="adminAccess"
+        class="w-100"
+      >
+        <v-table class="mb-4">
+          <tbody>
+            <tr>
+              <td>{{ $t('username') }} :</td>
+              <td><b>{{ adminAccess.username }}</b></td>
+            </tr>
+          </tbody>
+        </v-table>
 
-      <UiInputEmail
-        v-model="adminAccess.email"
-        field="email"
-        :label="$t('associated_email')"
-        class="mx-4"
-      />
-    </UiForm>
-    <span v-else>{{ $t('no_admin_access_recorded') }}</span>
+        <UiInputEmail
+          v-model="adminAccess.email"
+          field="email"
+          :label="$t('associated_email')"
+          class="mx-4"
+        />
+      </UiForm>
+      <span v-else>{{ $t('no_admin_access_recorded') }}</span>
+    </v-card>
   </div>
 </template>
 

pages/parameters/teaching.vue

@@ -1,31 +1,33 @@
 <template>
   <LayoutContainer>
-    <h3 class="mb-8">{{ $t("parameters_teaching_page")}}</h3>
-
-    <h4>{{ $t('configuration') }}</h4>
-
-    <UiLoadingPanel v-if="pending" />
-    <UiForm
-      v-else-if="parameters !== null"
-      v-model="parameters"
-    >
-      <UiInputCheckbox
-        v-model="parameters.showEducationIsACollectivePractice"
-        field="showEducationIsACollectivePractice"
-        label="allow_to_configure_teachings_with_played_instrument_choice"
+    <h3 class="my-8">{{ $t("parameters_teaching_page")}}</h3>
+
+    <v-card class="parameters-page-card">
+      <h4>{{ $t('configuration') }}</h4>
+
+      <UiLoadingPanel v-if="pending" />
+      <UiForm
+        v-else-if="parameters !== null"
+        v-model="parameters"
+      >
+        <UiInputCheckbox
+          v-model="parameters.showEducationIsACollectivePractice"
+          field="showEducationIsACollectivePractice"
+          label="allow_to_configure_teachings_with_played_instrument_choice"
+        />
+      </UiForm>
+    </v-card>
+
+    <v-card class="parameters-page-card">
+      <LayoutParametersTable
+        :items="tableItems"
+        :title="$t('teaching_cycles')"
+        :columns-definitions="[{ property: 'originalLabel' }, { property: 'effectiveLabel' }]"
+        identifier="value"
+        :actions="[TABLE_ACTION.EDIT]"
+        @editClicked="goToCycleEditPage"
       />
-    </UiForm>
-
-    <v-divider class="my-5" />
-
-    <LayoutParametersTable
-      :items="tableItems"
-      :title="$t('teaching_cycles')"
-      :columns-definitions="[{ property: 'originalLabel' }, { property: 'effectiveLabel' }]"
-      identifier="value"
-      :actions="[TABLE_ACTION.EDIT]"
-      @editClicked="goToCycleEditPage"
-    />
+    </v-card>
   </LayoutContainer>
 </template>
 

pages/parameters/website.vue

@@ -1,144 +1,139 @@
 <template>
   <LayoutContainer>
-    <h3>{{ $t("parameters_website_page")}}</h3>
-
-    <UiLoadingPanel v-if="pending" />
-    <UiForm
-      v-else-if="parameters !== null"
-      :model="Parameters"
-      v-model="parameters"
-    >
-      <v-row>
-        <v-col cols="12">
-          <h4 class="flex-grow-1 align-self-center">
-            {{ $t('your_website') }}
-          </h4>
-
-          <div class="section-header">
-            <div class="flex-grow-1 align-self-center">
-              <span>{{ $t('your_website_address_is') }} : </span>
-              <strong class="ml-2">
-                <a :href="organizationProfile.website ?? '#'" target="_blank">
-                  {{ organizationProfile.website }}
-                </a>
-              </strong>
-            </div>
+    <h3 class="my-8">{{ $t("parameters_website_page")}}</h3>
+
+    <v-card class="parameters-page-card">
+      <h4 class="flex-grow-1 align-self-center">
+        {{ $t('your_website') }}
+      </h4>
+
+      <UiLoadingPanel v-if="pending" />
+      <UiForm
+        v-else-if="parameters !== null"
+        :model="Parameters"
+        v-model="parameters"
+      >
+        <div class="section-header">
+          <div class="flex-grow-1 align-self-center">
+            <span>{{ $t('your_website_address_is') }} : </span>
+            <strong class="ml-2">
+              <a :href="organizationProfile.website ?? '#'" target="_blank">
+                {{ organizationProfile.website }}
+              </a>
+            </strong>
           </div>
-
-          <!-- les publicationDirectors sont des entités Access -->
-          <UiInputAutocompleteAccesses
+        </div>
+
+        <!-- les publicationDirectors sont des entités Access -->
+        <UiInputAutocompleteAccesses
+          v-if="!parameters.desactivateOpentalentSiteWeb"
+          v-model="parameters.publicationDirectors"
+          field="publicationDirectors"
+          multiple
+          chips
+          class="my-4"
+        />
+
+        <div
+          v-if="!organizationProfile.isCmf"
+          class="d-flex justify-center mt-3 mb-12"
+        >
+          <v-btn
             v-if="!parameters.desactivateOpentalentSiteWeb"
-            v-model="parameters.publicationDirectors"
-            field="publicationDirectors"
-            multiple
-            chips
-            class="my-4"
-          />
-
-          <div v-if="!organizationProfile.isCmf" class="mt-3 mb-12">
-            <v-btn
-              v-if="!parameters.desactivateOpentalentSiteWeb"
-              color="error"
-              @click="showWebsiteDeactivationDialog = true"
+            color="error"
+            @click="showWebsiteDeactivationDialog = true"
+          >
+            {{ $t('deactivateOpentalentSiteWeb') }}
+          </v-btn>
+          <v-btn v-else color="primary" @click="reactivateWebsite">
+            {{ $t('reactivateOpentalentSiteWeb') }}
+          </v-btn>
+
+          <LazyLayoutDialog :show="showWebsiteDeactivationDialog">
+            <template #dialogTitle>
+              {{ $t('please_confirm') }}
+            </template>
+            <template #dialogText>
+              <v-col>
+                <div>
+                  {{
+                    $t(
+                      'yourOpentalentWebsiteWillBeDeactivatedOnceYouLlHaveSaved',
+                    )
+                  }}.
+                </div>
+                <span>{{ $t('doYouWantToContinue') }} ?</span>
+              </v-col>
+            </template>
+            <template #dialogBtn>
+              <v-btn
+                class="theme-neutral-soft mr-4"
+                @click="showWebsiteDeactivationDialog = false"
+              >
+                {{ $t('cancel') }}
+              </v-btn>
+
+              <v-btn class="theme-primary" @click="onDialogYesBtnClick">
+                {{ $t('yes') }}
+              </v-btn>
+            </template>
+          </LazyLayoutDialog>
+        </div>
+
+        <UiInputText
+          v-model="parameters.otherWebsite"
+          field="otherWebsite"
+          class="my-4"
+        />
+      </UiForm>
+    </v-card>
+
+    <v-card v-if="!parameters.desactivateOpentalentSiteWeb" class="parameters-page-card">
+      <div class="section-header">
+        <h4 class="flex-grow-1 align-self-center">
+          {{ $t('your_subdomains') }}
+        </h4>
+      </div>
+
+      <UiLoadingPanel v-if="subdomainsPending" />
+      <div v-else>
+        <v-table v-if="subdomains!.items" class="subdomains-table my-2">
+          <tbody>
+            <tr
+              v-for="subdomain in subdomains!.items"
+              :key="subdomain.id"
+              :title="subdomain.subdomain"
+              :class="
+                'subdomainItem' + (subdomain.active ? ' active' : '')
+              "
+              @click="goToEditPage(subdomain.id)"
             >
-              {{ $t('deactivateOpentalentSiteWeb') }}
-            </v-btn>
-            <v-btn v-else color="primary" @click="reactivateWebsite">
-              {{ $t('reactivateOpentalentSiteWeb') }}
-            </v-btn>
-
-            <LazyLayoutDialog :show="showWebsiteDeactivationDialog">
-              <template #dialogTitle>
-                {{ $t('please_confirm') }}
-              </template>
-              <template #dialogText>
-                <v-col>
-                  <div>
-                    {{
-                      $t(
-                        'yourOpentalentWebsiteWillBeDeactivatedOnceYouLlHaveSaved',
-                      )
-                    }}.
-                  </div>
-                  <span>{{ $t('doYouWantToContinue') }} ?</span>
-                </v-col>
-              </template>
-              <template #dialogBtn>
-                <v-btn
-                  class="theme-neutral-soft mr-4"
-                  @click="showWebsiteDeactivationDialog = false"
-                >
-                  {{ $t('cancel') }}
-                </v-btn>
-
-                <v-btn class="theme-primary" @click="onDialogYesBtnClick">
-                  {{ $t('yes') }}
-                </v-btn>
-              </template>
-            </LazyLayoutDialog>
-          </div>
-
-          <div v-if="!parameters.desactivateOpentalentSiteWeb" class="mb-6">
-            <div class="section-header">
-              <h4 class="flex-grow-1 align-self-center">
-                {{ $t('your_subdomains') }}
-              </h4>
-            </div>
-
-            <UiLoadingPanel v-if="subdomainsPending" />
-            <div v-else>
-              <v-table v-if="subdomains!.items" class="subdomains-table my-2">
-                <tbody>
-                  <tr
-                    v-for="subdomain in subdomains!.items"
-                    :key="subdomain.id"
-                    :title="subdomain.subdomain"
-                    :class="
-                      'subdomainItem' + (subdomain.active ? ' active' : '')
-                    "
-                    @click="goToEditPage(subdomain.id)"
-                  >
-                    <td>{{ subdomain.subdomain }}</td>
-                    <td>
-                      <span v-if="subdomain.active">
-                        <v-icon class="text-success icon">
-                          fa-solid fa-check
-                        </v-icon>
-                        {{ $t('active') }}
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </v-table>
-              <span v-else>{{ $t('no_recorded_subdomain') }}</span>
-
-              <div>
-                <v-btn
-                  :disabled="!canAddNewSubdomain"
-                  prepend-icon="fa-solid fa-plus"
-                  class="my-5"
-                  @click="onAddSubdomainClick"
-                >
-                  {{ $t('record_a_new_subdomain') }}
-                </v-btn>
-              </div>
-            </div>
-          </div>
-
-          <div class="mt-6">
-            <h4 class="flex-grow-1 align-self-center">
-              {{ $t('other_website') }}
-            </h4>
-
-            <UiInputText
-              v-model="parameters.otherWebsite"
-              field="otherWebsite"
-              class="my-4"
-            />
-          </div>
-        </v-col>
-      </v-row>
-    </UiForm>
+              <td>{{ subdomain.subdomain }}</td>
+              <td>
+                <span v-if="subdomain.active">
+                  <v-icon class="text-success icon">
+                    fa-solid fa-check
+                  </v-icon>
+                  {{ $t('active') }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </v-table>
+        <span v-else>{{ $t('no_recorded_subdomain') }}</span>
+
+        <div class="d-flex justify-center">
+          <v-btn
+            :disabled="!canAddNewSubdomain"
+            prepend-icon="fa-solid fa-plus"
+            class="my-5"
+            @click="onAddSubdomainClick"
+          >
+            {{ $t('record_a_new_subdomain') }}
+          </v-btn>
+        </div>
+      </div>
+    </v-card>
   </LayoutContainer>
 </template>