- Finalisation des corrections relatives au problème de disposition d…

…u footer
abes-esr · Aug 1, 2024 · 258d5d3 · 258d5d3
1 parent 8dbdc60
commit 258d5d3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 25 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-app>
+  <v-app class="h-100 overflow-hidden">
     <Header @logout-success="onLogout" @toggle-drawer="toggleDrawer"/>
     <Navbar :drawer="drawer" @close="drawer = false"/>
-    <v-main>
+    <v-main class="d-flex flex-column overflow-auto">
       <div class="error-stack">
         <v-alert
           v-for="(error, index) in errorStack"
@@ -19,15 +19,17 @@
           {{ error.description }}
         </v-alert>
       </div>
-      <router-view v-slot="{ Component }">
-        <component
-          :is="Component"
-          @backendError="addError"
-          @backendSuccess="clearErrors"
-        />
-      </router-view>
+      <div style="flex-grow: 10;">
+        <router-view v-slot="{ Component }">
+          <component
+            :is="Component"
+            @backendError="addError"
+            @backendSuccess="clearErrors"
+          />
+        </router-view>
+      </div>
+      <Footer style="flex-basis: 0;" />
     </v-main>
-    <Footer />
   </v-app>
 </template>
 

diff --git a/src/components/Structure/Footer.vue b/src/components/Structure/Footer.vue
@@ -1,27 +1,29 @@
 <template>
-  <v-footer style="background-color: white" height="40">
-    <div class="d-flex flex-wrap align-center">
-      <div class="ml-auto d-flex flex-wrap align-center text-caption">
+  <v-footer style="background-color: #252c61; color: white; bottom: 0px; left: 0px; width: 100%; height: auto" class="mt-auto py-0">
+    <div class="d-flex flex-wrap justify-center align-center mt-0 mb-0" style="width: 100%">
+      <div class="d-flex flex-wrap justify-center align-center text-body-2">
         <v-tooltip location="top">
           <template v-slot:activator="{ props }">
-            <a class="ma-2 text-disabled" v-bind="props" @mouseenter="getHealthOfServices">Etat des serveurs</a>
+            <a class="ma-2 text-white" v-bind="props" @mouseenter="getHealthOfServices" style="cursor: pointer;">Etat des serveurs</a>
           </template>
-              <v-chip class="ma-1" :color="healthServices['STATUT CBS'] ? 'green' : 'red'" variant="text"><v-icon icon="mdi-server" start></v-icon>CBS</v-chip>
-              <v-chip class="ma-1" :color="healthServices['STATUT BASE_XML'] ? 'green' : 'red'" variant="text"><v-icon icon="mdi-server" start></v-icon>XML</v-chip>
-              <v-chip class="ma-1" :color="healthServices['STATUT BASE_ITEM'] ? 'green' : 'red'" variant="text"><v-icon icon="mdi-server" start></v-icon>ITEM</v-chip>
+          <v-chip class="ma-1" :color="healthServices['STATUT CBS'] ? 'green' : 'red'" variant="text"><v-icon icon="mdi-server" start></v-icon>CBS</v-chip>
+          <v-chip class="ma-1" :color="healthServices['STATUT BASE_XML'] ? 'green' : 'red'" variant="text"><v-icon icon="mdi-server" start></v-icon>XML</v-chip>
+          <v-chip class="ma-1" :color="healthServices['STATUT BASE_ITEM'] ? 'green' : 'red'" variant="text"><v-icon icon="mdi-server" start></v-icon>ITEM</v-chip>
         </v-tooltip>
         <v-tooltip location="top">
           <template v-slot:activator="{ props }">
-            <a class="ma-2 text-disabled" v-bind="props">Détail de l'application</a>
+            <a class="ma-2 text-white" v-bind="props" style="cursor: pointer;">Détail de l'application</a>
           </template>
-              <v-chip class="ma-1" variant="text">Interface Version : {{ packageVersion }}</v-chip>
-              <v-chip class="ma-1" variant="text">Serveur Version : {{ backVersion }}</v-chip>
+          <v-chip class="ma-1 text-white" variant="text">Interface Version : {{ packageVersion }}</v-chip>
+          <v-chip class="ma-1 text-white" variant="text">Serveur Version : {{ backVersion }}</v-chip>
         </v-tooltip>
-        <a class="ma-2 text-disabled" href="http://item-dev.sudoc.fr">Données personnelles</a>
-        <a class="ma-2 text-disabled" href="https://abes.fr/pages-cgu/conditions-generales-utilisation-sites-abes.html">Conditions générales d'utilisation (CGU)</a>
-        <a class="ma-2 text-disabled" href="http://item-dev.sudoc.fr">Mentions légales</a>
-        <a class="ma-2 text-disabled" href="https://abes.fr/pages-accessibilite/item.sudoc.html">Accessibilité Numérique</a>
-        <span class="ma-2 d-none d-sm-inline-block">{{ currentYear }} - ABES</span>
+        <a class="ma-2 text-white" href="http://item-dev.sudoc.fr">Données personnelles</a>
+        <a class="ma-2 text-white" href="https://abes.fr/pages-cgu/conditions-generales-utilisation-sites-abes.html">Conditions générales d'utilisation (CGU)</a>
+        <a class="ma-2 text-white" href="http://item-dev.sudoc.fr">Mentions légales</a>
+        <a class="ma-2 text-white" href="https://abes.fr/pages-accessibilite/item.sudoc.html">Accessibilité Numérique</a>
+        <div style="flex-grow: 5">
+          <span class="ma-2 d-none d-sm-inline-block text-white">{{ currentYear }} - ABES</span>
+        </div>
       </div>
     </div>
   </v-footer>