Registres : boutons filtres, sticky, tableau des pages (mobile)

chartes · Mar 25, 2024 · 97ba088 · 97ba088
1 parent ba6241b
commit 97ba088
Show file tree

Hide file tree

Showing 13 changed files with 277 additions and 93 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -2,7 +2,7 @@
   <div class="app-content">
     <div class="column is-align-items-center app-sidebar__menu">
       <AppNavBar/>
-      <AppMenuAside :class="{ 'is-opened': isMobileMenuOpen }" />
+      <AppMenuAside :class="{ 'is-opened': isMobileMenuOpen, 'is-home': isHome }" />
       <BurgerButton @click="toggleMobileMenu($event)" class="burger-button" :class="{ 'is-opened': isMobileMenuOpen }" />
     </div>
     <div class="column is-full app-main-content__area">
@@ -13,7 +13,7 @@
 </template>
 
 <script setup>
-import {ref, watch} from "vue";
+import {computed, ref, watch} from "vue";
 import {useRoute} from "vue-router";
 import AppNavBar from "@/components/AppNavbar.vue";
 import AppMenuAside from "@/components/AppMenuAside.vue";
@@ -32,6 +32,10 @@ watch(route, () => {
   isMobileMenuOpen.value = false;
 });
 
+const isHome = computed(() => {
+  return route.name === "home";
+});
+
 </script>
 
 <style>
@@ -84,7 +88,7 @@ body {
   .column.app-sidebar__menu {
     position: sticky;
     top: 0;
-    z-index: 2;
+    z-index: 100;
   }
 
   .burger-button {

diff --git a/src/assets/css/endp_utils.css b/src/assets/css/endp_utils.css
@@ -164,6 +164,11 @@ body {
     z-index: 1;
   }
 
+  .column .columns {
+    z-index: 1;
+    position: relative;
+  }
+
 }
 
 

diff --git a/src/components/AppMenuAside.vue b/src/components/AppMenuAside.vue
@@ -183,12 +183,17 @@ ul.menu-list > li:not(:last-child)::after {
   .menu {
     position: absolute;
     z-index: 2;
-    top: 50px;
+    top: 100px;
     width: 90%;
     margin: 0 auto;
     background-color: #4B080BF2;
   }
 
+  .menu.is-home {
+    top: 50px;
+  }
+
+
   .menu.is-flex {
     display: none !important;
   }

diff --git a/src/components/AppNavbar.vue b/src/components/AppNavbar.vue
@@ -59,4 +59,15 @@ export default {
   margin: 8px auto 0;
 }
 
+
+@media screen and (max-width: 1024px) {
+
+  .app-navbar__item:not(:last-child) {
+    margin-right: 15px;
+  }
+
+}
+
+
+
 </style>
diff --git a/src/components/BurgerButton.vue b/src/components/BurgerButton.vue
@@ -49,6 +49,7 @@ export default {
   right: 0;
   height: 3px;
   background: #FFF;
+  border-radius: 2px;
 }
 
 .hamburger span::before,
@@ -59,6 +60,7 @@ export default {
   width: 100%;
   height: 3px;
   background: #FFF;
+  border-radius: 2px;
   content: "";
 }
 

diff --git a/src/components/PersonDataCarousel.vue b/src/components/PersonDataCarousel.vue
@@ -212,11 +212,11 @@ li.carousel__slide a::after {
   z-index: 2;
 }
 
-:deep .carousel__slide--active {
+:deep(.carousel__slide--active) {
   position: relative;
 }
 
-:deep .carousel__slide--active:after {
+:deep(.carousel__slide--active:after) {
   content:"";
   position: absolute;
   bottom: 76px;
@@ -227,16 +227,16 @@ li.carousel__slide a::after {
   z-index: 6;
 }
 
-:deep .carousel__prev {
+:deep(.carousel__prev) {
   transform: translate(-175%, 46px) scaleX(-1);
 }
 
-:deep .carousel__next {
+:deep(.carousel__next) {
   transform: translate(-5%, 46px);
 }
 
-:deep .carousel__prev,
-:deep .carousel__next {
+:deep(.carousel__prev),
+:deep(.carousel__next) {
   position: absolute;
   left:50%;
   bottom: 0;
@@ -252,17 +252,17 @@ li.carousel__slide a::after {
   opacity: 0.8;
 }
 
-:deep .carousel__prev > svg,
-:deep .carousel__next > svg {
+:deep(.carousel__prev svg),
+:deep(.carousel__next svg) {
   display: none;
 }
 
 
-:deep .carousel__pagination {
+:deep(.carousel__pagination) {
   display: none;
 }
 
-:deep .carousel__viewport {
+:deep(.carousel__viewport) {
   background-color: #555555;
 }
 

diff --git a/src/components/RegisterBaseTotalDisplay.vue b/src/components/RegisterBaseTotalDisplay.vue
@@ -31,6 +31,7 @@ export default {
 
 <style scoped>
 .result-container-total {
+  max-width: 100%;
   margin-bottom: 10px;
   padding-bottom: 10px;
   border-bottom: solid 6px #000000;

diff --git a/src/components/RegisterCardNavigation.vue b/src/components/RegisterCardNavigation.vue
@@ -29,29 +29,32 @@
         </p>
         <p>Lien vers facsimile : <router-link :to="`/facsimile/${volume}/0`" @click="navigateToFacSimile">ici</router-link></p>
       </div>
-      <div>
-        <table class="table-available-ressources">
-          <thead>
-          <tr>
-            <th></th>
-            <th>Première page</th>
-            <th>Dernière page</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr v-if="facSimile">
-            <td><span class="icon book-icon-card"><i class="fas fa-book"></i></span></td>
-            <td><router-link :to="`/facsimile/${volume}/${firstCanvasID}`" @click="navigateToFacSimile(firstCanvasID, volume, yearFirstPage)">{{ firstPage }}</router-link></td>
-            <td><router-link :to="`/facsimile/${volume}/${lastCanvasID}`" @click="navigateToFacSimile(lastCanvasID, volume, yearLastPage)">{{ lastPage }}</router-link></td>
-          </tr>
-          <tr v-if="isEdited">
-            <td><span class="icon book-icon-card"><i class="fas fa-book-open"></i></span></td>
-            <td>{{ firstPage }}</td>
-            <td>{{ lastPage }}</td>
-          </tr>
-          </tbody>
-        </table>
+
+      <div class="available-ressources">
+        <div>
+          <div>Première page</div>
+          <div v-if="facSimile">
+            <span class="icon book-icon-card"><i class="fas fa-book"></i></span>
+            <router-link :to="`/facsimile/${volume}/${firstCanvasID}`" @click="navigateToFacSimile(firstCanvasID, volume, yearFirstPage)">{{ firstPage }}</router-link>
+          </div>
+          <div v-if="isEdited">
+            <span class="icon book-icon-card"><i class="fas fa-book-open"></i></span>
+            <span class="edition-page">{{ firstPage }}</span>
+          </div>
+        </div>
+        <div>
+          <div>Dernière page</div>
+          <div v-if="facSimile">
+            <span class="icon book-icon-card"><i class="fas fa-book"></i></span>
+            <router-link :to="`/facsimile/${volume}/${lastCanvasID}`" @click="navigateToFacSimile(lastCanvasID, volume, yearLastPage)">{{ lastPage }}</router-link>
+          </div>
+          <div v-if="isEdited">
+            <span class="icon book-icon-card"><i class="fas fa-book-open"></i></span>
+            <span class="edition-page">{{ lastPage }}</span>
+          </div>
+        </div>
       </div>
+
     </div>
   </div>
 </template>
@@ -141,7 +144,7 @@ export default {
   font-family: var(--font-primary);
   font-size: 20px;
   font-weight: 400;
-  line-height: 1.25;
+  line-height: 1.35;
   color: #000000;
 }
 
@@ -161,7 +164,6 @@ export default {
 .book-icon-card {
   font-size: 24px;
   color: #000000;
-  margin-right: 10px;
 }
 
 .container-icons-services {
@@ -204,59 +206,65 @@ button.toggle-btn-wrapper {
   background-image: url('~@/assets/images/b_Close_liste.svg');
 }
 
+.book-icon-card {
+  color: #000;
+  margin-right: 10px;
+}
 
-.table-available-ressources {
-  width: 65%; /* Assurez-vous que le tableau utilise toute la largeur disponible */
-  border-collapse: separate; /* Sépare les bordures des cellules */
-  border-spacing: 4px 0; /* Espacement entre les colonnes et les lignes */
+.available-ressources {
+  display: flex;
+  gap: 25px;
   margin-bottom: 25px;
 }
 
-.table-available-ressources th {
+.available-ressources > div {
+  font-family: var(--font-secondary);
   font-size: 20px;
-  font-weight: 500;
+  color: #6E6E6E;
   padding-bottom: 5px;
 }
 
-.table-available-ressources > td, th {
-  text-align: left;
-  font-family: var(--font-secondary);
-  font-weight: 600;
-  color: #6E6E6E;
+.available-ressources > div span.edition-page,
+.available-ressources > div a {
+  line-height: 34px;
+  vertical-align: bottom;
 }
 
-.table-available-ressources td {
-  font-size: 20px;
-  padding-bottom: 5px;
+.available-ressources .icon {
+  display: inline-block;
+  font-weight: 400;
+  color: rgb(147, 147, 147);
+  padding-right: 45px;
+  padding-left: 5px;
 }
 
-
-.table-available-ressources td,
-.table-available-ressources td a {
-  font-family: var(--font-secondary);
-  color: #6E6E6E;
+.available-ressources > div:last-child .icon {
+  display: none;
 }
 
-.table-available-ressources td a {
-  text-decoration: none;
+.available-ressources > div > div:first-child {
+  font-weight: 500;
 }
 
-.table-available-ressources td a:hover {
-  text-decoration: underline;
+.available-ressources > div:first-child > div:first-child {
+  padding-left: 50px;
 }
 
-.card-content .content a:hover,
-.table-available-ressources td a:hover {
-  color: var(--light-brown-alt);
+.available-ressources a {
+  color: #6E6E6E;
 }
 
-.table-available-ressources td:first-child {
-  width: 30px;
+.available-ressources .book-icon-card {
+  color: #6E6E6E;
+  margin-right: 0;
 }
 
-.table-available-ressources .book-icon-card {
-  color: #939393;
-  margin-right: 20px;
+
+.available-ressources a:hover {
+  color: var(--light-brown-alt);
+}
+.card-content .content a:hover {
+  color: var(--light-brown-alt);
 }
 
 
@@ -304,6 +312,19 @@ hr,
     margin-bottom: 12px;
   }
 
+
+  .available-ressources {
+    flex-direction: column;
+  }
+
+  .available-ressources > div:first-child > div[data-v-572ca977]:first-child {
+    padding-left: 0;
+  }
+
+  .available-ressources > div:last-child .icon {
+    display: inline-block;
+  }
+
 }
 
 </style>
diff --git a/src/components/RegisterDateIntervalBox.vue b/src/components/RegisterDateIntervalBox.vue
@@ -166,6 +166,7 @@ export default {
 
   .box-date-interval__label {
     text-align: center;
+    margin-bottom: 5px;
   }
 
   .box-container-facets__date-interval > * {