fix universal creation responsiveness

components/Layout/AlertBar.vue

@@ -8,22 +8,22 @@ Contient les différentes barres d'alertes qui s'affichent dans certains cas
   <main>
     <v-expand-transition>
       <div v-if="showAlertBars">
-        <LayoutAlertBarEnv style="z-index: 1010"/>
+        <LayoutAlertBarEnv style="z-index: 510"/>
 
-        <LayoutAlertBarSwitchUser style="z-index: 1009" />
+        <LayoutAlertBarSwitchUser style="z-index: 509" />
 
         <client-only>
           <LayoutAlertBarCotisation
             v-if="organizationProfile.isCmf && ability.can('manage', 'cotisation')"
-            style="z-index: 1008"
+            style="z-index: 508"
           />
         </client-only>
 
-        <LayoutAlertBarSwitchYear style="z-index: 1007"/>
-        <LayoutAlertBarSuperAdmin style="z-index: 1006"/>
+        <LayoutAlertBarSwitchYear style="z-index: 507"/>
+        <LayoutAlertBarSuperAdmin style="z-index: 506"/>
         <LayoutAlertBarRegistrationStatus
           v-if="organizationProfile.hasModule('IEL')"
-          style="z-index: 1005"
+          style="z-index: 505"
         />
       </div>
     </v-expand-transition>
@@ -31,7 +31,7 @@ Contient les différentes barres d'alertes qui s'affichent dans certains cas
     <div v-if="smAndDown">
       <div
         class="folded-bar theme-warning"
-        style="z-index: 1004"
+        style="z-index: 504"
         @click="onFoldedWarningClick"
       >
         <v-icon small icon="fas fa-exclamation-triangle mx-1" />

components/Layout/Header/UniversalCreation/Card.vue

@@ -16,7 +16,7 @@
     border="solid 1px"
     @click="onClick"
   >
-    <v-row :no-gutters="true" style="height: 100px">
+    <v-row :no-gutters="true" :style="mdAndUp ? 'height: 100px' : ''">
       <v-col cols="3" class="flex-grow-0 flex-shrink-0 d-flex justify-center">
         <v-icon
           :icon="icon"
@@ -24,12 +24,16 @@
           class="ma-2 pa-2 align-self-center text-neutral-strong"
         />
       </v-col>
+
       <v-col
         cols="9"
         align-self="center"
         class="pl-2 infos-container flex-grow-1 flex-shrink-1"
       >
-        <h4 class="text-primary">{{ $t(title) }}</h4>
+        <h4 class="text-primary">
+          {{ $t(title) }}
+        </h4>
+
         <p class="text-neutral-strong">
           {{ $t(textContent) }}
         </p>
@@ -43,6 +47,7 @@ import type { PropType } from '@vue/runtime-core'
 import { MENU_LINK_TYPE } from '~/types/enum/layout'
 import { useAdminUrl } from '~/composables/utils/useAdminUrl'
 import UrlUtils from '~/services/utils/urlUtils'
+import {useDisplay} from 'vuetify';
 
 const props = defineProps({
   /**
@@ -96,6 +101,8 @@ const emit = defineEmits(['click'])
 
 const { makeAdminUrl } = useAdminUrl()
 
+const { mdAndUp } = useDisplay()
+
 let url: string | null = null
 
 if (props.href !== null) {

components/Layout/Header/UniversalCreation/GenerateCardsSteps.vue

@@ -11,7 +11,7 @@
         <v-container v-if="location === 'home'">
           <v-row>
             <!-- Une personne -->
-            <v-col cols="6" v-if="ability.can('manage', 'users')">
+            <v-col cols="12" md="6" v-if="ability.can('manage', 'users')">
               <LayoutHeaderUniversalCreationCard
                 @click="onCardClick('access')"
                 title="a_person"
@@ -20,7 +20,8 @@
               />
             </v-col>
             <v-col
-              cols="6"
+              cols="12"
+              md="6"
               v-if="
                 ability.can('display', 'agenda_page') &&
                 (ability.can('display', 'course_page') ||
@@ -39,7 +40,8 @@
 
             <!-- Autre évènement -->
             <v-col
-              cols="6"
+              cols="12"
+              md="6"
               v-else-if="
                 ability.can('display', 'agenda_page') &&
                 ability.can('manage', 'events')
@@ -57,7 +59,8 @@
 
             <!-- Une correspondance -->
             <v-col
-              cols="6"
+              cols="12"
+              md="6"
               v-if="
                 ability.can('display', 'message_send_page') &&
                 (ability.can('manage', 'emails') ||
@@ -74,7 +77,11 @@
             </v-col>
 
             <!-- Un matériel (direct link) -->
-            <v-col cols="6" v-if="ability.can('manage', 'equipments')">
+            <v-col
+              cols="12"
+              md="6"
+              v-if="ability.can('manage', 'equipments')"
+            >
               <LayoutHeaderUniversalCreationCard
                 title="a_materiel"
                 text-content="add_any_type_material"
@@ -92,7 +99,11 @@
         <v-container v-if="location === 'access'">
           <v-row>
             <!-- Un adhérent -->
-            <v-col cols="6" v-if="isLaw1901">
+            <v-col
+              cols="12"
+              md="6"
+              v-if="isLaw1901"
+            >
               <LayoutHeaderUniversalCreationCard
                 title="an_adherent"
                 text-content="adherent_text_creation_card"
@@ -103,7 +114,11 @@
             </v-col>
 
             <!-- Un membre du CA -->
-            <v-col cols="6" v-if="isLaw1901">
+            <v-col
+              cols="12"
+              md="6"
+              v-if="isLaw1901"
+            >
               <LayoutHeaderUniversalCreationCard
                 title="a_ca_member"
                 text-content="ca_member_text_creation_card"
@@ -114,7 +129,7 @@
             </v-col>
 
             <!-- Un élève -->
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <LayoutHeaderUniversalCreationCard
                 title="a_student"
                 text-content="student_text_creation_card"
@@ -125,7 +140,7 @@
             </v-col>
 
             <!-- Un tuteur -->
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <LayoutHeaderUniversalCreationCard
                 title="a_guardian"
                 text-content="guardian_text_creation_card"
@@ -136,7 +151,7 @@
             </v-col>
 
             <!-- Un professeur -->
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <LayoutHeaderUniversalCreationCard
                 title="a_teacher"
                 text-content="teacher_text_creation_card"
@@ -147,7 +162,7 @@
             </v-col>
 
             <!-- Un membre du personnel -->
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <LayoutHeaderUniversalCreationCard
                 title="a_member_of_staff"
                 text-content="personnel_text_creation_card"
@@ -158,7 +173,7 @@
             </v-col>
 
             <!-- Une entité légale -->
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <LayoutHeaderUniversalCreationCard
                 title="a_legal_entity"
                 text-content="moral_text_creation_card"
@@ -169,7 +184,7 @@
             </v-col>
 
             <!-- Une inscription en ligne -->
-            <v-col cols="6" v-if="hasOnlineRegistrationModule">
+            <v-col cols="12" md="6" v-if="hasOnlineRegistrationModule">
               <LayoutHeaderUniversalCreationCard
                 title="online_registration"
                 text-content="online_registration_text_creation_card"
@@ -180,7 +195,7 @@
             </v-col>
 
             <!-- Un autre type de contact -->
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <LayoutHeaderUniversalCreationCard
                 title="another_type_of_contact"
                 text-content="other_contact_text_creation_card"
@@ -196,7 +211,7 @@
         <v-container v-if="location === 'event'">
           <v-row>
             <!-- Un cours -->
-            <v-col cols="6" v-if="ability.can('display', 'course_page')">
+            <v-col cols="12" md="6" v-if="ability.can('display', 'course_page')">
               <LayoutHeaderUniversalCreationCard
                 title="course"
                 text-content="course_text_creation_card"
@@ -207,7 +222,7 @@
             </v-col>
 
             <!-- Un examen -->
-            <v-col cols="6" v-if="ability.can('display', 'exam_page')">
+            <v-col cols="12" md="6" v-if="ability.can('display', 'exam_page')">
               <LayoutHeaderUniversalCreationCard
                 title="exam"
                 text-content="exam_text_creation_card"
@@ -219,7 +234,7 @@
 
             <!-- Un projet pédagogique -->
             <v-col
-              cols="6"
+              cols="12" md="6"
               v-if="ability.can('display', 'pedagogics_project_page')"
             >
               <LayoutHeaderUniversalCreationCard
@@ -232,7 +247,7 @@
             </v-col>
 
             <!-- Un autre évènement -->
-            <v-col cols="6" v-if="ability.can('manage', 'events')">
+            <v-col cols="12" md="6" v-if="ability.can('manage', 'events')">
               <LayoutHeaderUniversalCreationCard
                 to="event-params"
                 href="/calendar/create/events"
@@ -249,7 +264,7 @@
         <v-container v-if="location === 'message'">
           <v-row>
             <!-- Un email -->
-            <v-col cols="6" v-if="ability.can('manage', 'emails')">
+            <v-col cols="12" md="6" v-if="ability.can('manage', 'emails')">
               <LayoutHeaderUniversalCreationCard
                 title="an_email"
                 text-content="email_text_creation_card"
@@ -260,7 +275,7 @@
             </v-col>
 
             <!-- Un courrier -->
-            <v-col cols="6" v-if="ability.can('manage', 'mails')">
+            <v-col cols="12" md="6" v-if="ability.can('manage', 'mails')">
               <LayoutHeaderUniversalCreationCard
                 title="a_letter"
                 text-content="letter_text_creation_card"
@@ -271,7 +286,7 @@
             </v-col>
 
             <!-- Un SMS -->
-            <v-col cols="6" v-if="ability.can('manage', 'texto')">
+            <v-col cols="12" md="6" v-if="ability.can('manage', 'texto')">
               <LayoutHeaderUniversalCreationCard
                 title="a_sms"
                 text-content="sms_text_creation_card"

components/Layout/Subheader.vue

@@ -101,6 +101,7 @@ main {
 }
 
 :deep(#subheader .v-card) {
+  min-height: 36px;
   max-height: 36px;
   background-color: transparent !important;
 }