Master css : responsive Registres et Personnes

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 {

src/assets/css/endp_utils.css

@@ -164,6 +164,11 @@ body {
     z-index: 1;
   }
 
+  .column .columns {
+    z-index: 1;
+    position: relative;
+  }
+
 }
 
 

src/components/AppMenuAside.vue

@@ -183,12 +183,18 @@ ul.menu-list > li:not(:last-child)::after {
   .menu {
     position: absolute;
     z-index: 2;
-    top: 50px;
+    top: 100px;
+    left: 5%;
     width: 90%;
     margin: 0 auto;
     background-color: #4B080BF2;
   }
 
+  .menu.is-home {
+    top: 50px;
+  }
+
+
   .menu.is-flex {
     display: none !important;
   }

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>

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: "";
 }
 

src/components/FacSimileNavigation.vue

@@ -387,10 +387,19 @@ nav menu, nav ul {
     justify-content: space-between;
   }
 
+  .is-opened .main__title__toc {
+    background: #A53605;
+  }
+
   .fac-simile__toc ul {
     display: none;
   }
 
+  .fac-simile__toc > ul {
+    max-height: unset;
+    overflow-y: unset;
+  }
+
   .fac-simile__toc.is-opened ul {
     display: block;
   }

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;
 }
 

src/components/PersonPagination.vue

@@ -231,11 +231,66 @@ nav.pagination {
   display: inline-block;
   width: 28px;
   height: 23px;
-  background-image: url("@/assets/images/b_fleche.svg");
+  background: url("@/assets/images/b_fleche.svg") center / cover no-repeat;
 }
 
 .pagination-previous:before {
   transform: scaleX(-1);
 }
 
+
+
+@media screen and (max-width: 1024px) {
+
+  .pagination-link {
+    min-width: 51px;
+    height: 58px;
+    font-size: 26px;
+  }
+
+  nav.pagination {
+    margin-top: 1px;
+  }
+
+  .pagination-previous,
+  .pagination-next {
+    position: absolute;
+    top: 45px;
+    right: 0;
+    width: 53px;
+    height: 45px;
+    padding: 0;
+  }
+
+  .pagination-previous {
+    transform: translateX(-82px);
+  }
+
+  .pagination-previous:before,
+  .pagination-next:before {
+    display: inline-block;
+    width: 53px;
+    height: 45px;
+  }
+
+  .pagination-panel .label,
+  .pagination-panel .items-by-page-input {
+    display: none;
+  }
+
+  .pagination-box {
+    margin-top: 0;
+  }
+
+  .pagination-list {
+    margin-left: 0;
+  }
+
+  .pagination-ellipsis {
+    font-size: 2em;
+    padding-left: 0.2em;
+    padding-right: 0.2em;
+  }
+}
+
 </style>

src/components/PersonResultCard.vue

@@ -153,4 +153,13 @@ header {
   background-image: url('~@/assets/images/b_Close_liste.svg');
 }
 
+@media screen and (max-width: 1024px) {
+
+  header,
+  .li--person:first-child header.card-header {
+    min-height: 90px;
+  }
+
+}
+
 </style>

src/components/PersonSearchBox.vue

@@ -15,7 +15,7 @@
               @keyup.enter="launchSearch"
               v-model="personQuery">
         </p>
-        <p class="control">
+        <p class="control control-button">
           <button class="button is-info" @click="launchSearch">
             <span>Recherche</span>
           </button>
@@ -274,4 +274,35 @@ input[type="text"]::placeholder {
   transition: box-shadow 0.3s;
 }
 
+@media screen and (max-width: 1024px) {
+
+  .container-search {
+    padding-bottom: 150px;
+  }
+
+  .container-search > .control {
+    margin-bottom: 0;
+  }
+
+  .field.has-addons {
+    position: unset;
+  }
+
+  .field.has-addons > :not(:last-child) {
+    margin-right: 0;
+  }
+
+  .control-slider {
+    justify-content: center;
+    padding: 0;
+  }
+
+  .control-button {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
 </style>

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;