various style improvements on sm screens

components/Layout/AlertBar.vue

@@ -6,28 +6,72 @@ Contient les différentes barres d'alertes qui s'affichent dans certains cas
 
 <template>
   <main>
-    <LayoutAlertBarEnv />
+    <v-expand-transition>
+      <div v-if="showAlertBars">
+        <LayoutAlertBarEnv style="z-index: 1010"/>
 
-    <LayoutAlertBarSwitchUser />
+        <LayoutAlertBarSwitchUser style="z-index: 1009" />
 
-    <client-only>
-      <LayoutAlertBarCotisation
-        v-if="organizationProfile.isCmf && ability.can('manage', 'cotisation')"
-      />
-    </client-only>
+        <client-only>
+          <LayoutAlertBarCotisation
+            v-if="organizationProfile.isCmf && ability.can('manage', 'cotisation')"
+            style="z-index: 1008"
+          />
+        </client-only>
 
-    <LayoutAlertBarSwitchYear />
-    <LayoutAlertBarSuperAdmin />
-    <LayoutAlertBarRegistrationStatus
-      v-if="organizationProfile.hasModule('IEL')"
-    />
+        <LayoutAlertBarSwitchYear style="z-index: 1007"/>
+        <LayoutAlertBarSuperAdmin style="z-index: 1006"/>
+        <LayoutAlertBarRegistrationStatus
+          v-if="organizationProfile.hasModule('IEL')"
+          style="z-index: 1005"
+        />
+      </div>
+    </v-expand-transition>
+
+    <div v-if="smAndDown">
+      <div
+        class="folded-bar theme-warning"
+        style="z-index: 1004"
+        @click="onFoldedWarningClick"
+      >
+        <v-icon small icon="fas fa-exclamation-triangle mx-1" />
+        <span>{{ $t("show_warnings") }}</span>
+        <v-icon small :icon="'fas mx-1' + (unfoldWarnings ? ' fa-chevron-up' : ' fa-chevron-down')" />
+      </div>
+    </div>
   </main>
 </template>
 
 <script setup lang="ts">
 import { useOrganizationProfileStore } from '~/stores/organizationProfile'
 import { useAbility } from '@casl/vue'
+import {useDisplay} from 'vuetify';
+import {StencilPreview} from 'vue-advanced-cropper';
 
 const organizationProfile = useOrganizationProfileStore()
 const ability = useAbility()
+const { mdAndUp, smAndDown } = useDisplay()
+
+const unfoldWarnings = ref(false)
+
+const onFoldedWarningClick = () => {
+  unfoldWarnings.value = !unfoldWarnings.value
+}
+
+const showAlertBars = computed(() => mdAndUp.value || unfoldWarnings.value)
+
 </script>
+
+<style scoped lang="scss">
+.folded-bar {
+  position: relative;
+  font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 12px;
+  cursor: pointer;
+}
+</style>

components/Layout/AlertBar/Env.vue

@@ -10,7 +10,6 @@ Barre d'alerte qui s'affiche lorsque l'utilisateur n'est pas dans un environneme
     :text="$t('not_production_environment', { env: env })"
     icon="fas fa-exclamation-triangle"
     class="theme-warning"
-    style="z-index: 1005"
   />
   <!--
   Le z-index est précisé pour éviter cette erreur : https://github.com/vuetifyjs/nuxt-module/issues/205

components/Layout/ParametersMenu.vue → components/Layout/Parameters/Menu.vue

@@ -3,7 +3,6 @@
     v-if="displayMenu"
     v-model="isOpened"
     mobile-breakpoint="sm"
-    style="z-index: 1005"
   >
     <!--
     Le z-index est précisé pour éviter cette erreur : https://github.com/vuetifyjs/nuxt-module/issues/205
@@ -22,6 +21,7 @@
         :title="$t(item.label)"
         :prepend-icon="item.icon ? item.icon.name : ''"
         :to="(item as MenuItem).to"
+        @click="closeMenu"
       >
       </v-list-item>
     </v-list>
@@ -59,6 +59,10 @@ const displayMenu = computed(() => {
 
 const isOpened = computed(() => isMenuOpened('Parameters'))
 
+const closeMenu = () => {
+  setMenuState('Parameters', false)
+}
+
 const unwatch = watch(mdAndUp, () => {
   // Par défaut si l'écran est trop petit au chargement de la page, le menu doit rester fermé.
   if (process.client && menu !== null) {

components/Ui/DatePicker.vue

@@ -25,7 +25,6 @@ Sélecteur de dates
         :select-text="$t('select')"
         :cancel-text="$t('cancel')"
         input-class-name="date-picker-input"
-        :style="style"
         @update:model-value="$emit('update:modelValue', $event)"
       />
   </div>

components/Ui/SystemBar.vue

@@ -3,21 +3,20 @@ System bars
 -->
 
 <template>
-  <v-system-bar
-    height="50"
-    :class="
-      'd-flex flex-row justify-center align-center text-center ' + classes
-    "
+  <div
+    :class="'alert-bar ' + (onClick ? 'clickable' : '')"
     @click="onClick !== undefined ? onClick() : null"
   >
     <slot>
       <v-icon v-if="icon" small :icon="icon" />
       {{ text }}
     </slot>
-  </v-system-bar>
+  </div>
 </template>
 
 <script setup lang="ts">
+import {useDisplay} from 'vuetify';
+
 const props = defineProps({
   text: {
     type: String,
@@ -29,34 +28,26 @@ const props = defineProps({
     required: false,
     default: undefined,
   },
-  backgroundColor: {
-    type: String,
-    required: false,
-    default: 'neutral-soft',
-  },
-  textColor: {
-    type: String,
-    required: false,
-    default: 'on-neutral-soft',
-  },
   onClick: {
     type: Function,
     required: false,
     default: undefined,
   },
 })
-
-// TODO: voir si possible d'utiliser les variables sass à la place?
-const classes = [
-  'bg-' + props.backgroundColor,
-  'text-' + props.textColor,
-  props.onClick !== undefined ? 'clickable' : '',
-].join(' ')
 </script>
 
+
 <style scoped lang="scss">
-.v-system-bar {
+.alert-bar {
+  position: relative;
   font-size: 14px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 12px;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
 }
 
 .v-icon {

i18n/lang/fr.json

@@ -712,6 +712,7 @@
   "id": "Id",
   "missing_name": "Nom manquant",
   "warning": "Avertissement",
+  "show_warnings": "Afficher les avertissements",
   "please_enter_a_value_for_the_sms_sender_name": "Le nom d'expediteur ne doit pas comporter plus de 11 caractères, et être composé uniquement de chiffres et/ou de lettres.",
   "associated_email": "Adresse Email associée"
 }

layouts/default.vue

@@ -13,7 +13,7 @@
       <v-main class="main">
         <LayoutSubheader />
 
-        <LayoutAlertBar class="mt-1" />
+        <LayoutAlertBar />
 
         <!-- Page will be rendered here-->
         <slot />

layouts/parameters.vue

@@ -13,7 +13,7 @@
       <v-main class="main">
         <LayoutSubheader />
 
-        <LayoutAlertBar class="mt-1" />
+        <LayoutAlertBar />
 
         <!-- Page will be rendered here-->
         <v-card class="parameters-page-card">