Personnes (mobile)

src/components/AppMenuAside.vue

@@ -184,6 +184,7 @@ ul.menu-list > li:not(:last-child)::after {
     position: absolute;
     z-index: 2;
     top: 100px;
+    left: 5%;
     width: 90%;
     margin: 0 auto;
     background-color: #4B080BF2;

src/components/FacSimileNavigation.vue

@@ -387,6 +387,10 @@ nav menu, nav ul {
     justify-content: space-between;
   }
 
+  .is-opened .main__title__toc {
+    background: #A53605;
+  }
+
   .fac-simile__toc ul {
     display: none;
   }

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>
@@ -237,4 +237,36 @@ input[type="text"]::placeholder {
   font-style: italic;
 }
 
+@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/views/PersonDataView.vue

@@ -364,6 +364,14 @@ export default {
     background-image: none !important;
   }
 
+  .columns.person-name-columns {
+    padding: 0;
+  }
+
+  .person-data-container-header {
+    padding: 35px var(--mobile-side-padding) 12px;
+  }
+
   .columns {
     flex-direction: column;
   }
@@ -373,7 +381,39 @@ export default {
     display: block;
     width: 100%;
     max-width: 100% !important;
-    padding: 40px 0 0 0;
+    padding: 0;
+    background-color: transparent;
+  }
+
+  .columns.details-column > .column:first-child {
+    padding-bottom: 20px;
+  }
+
+  .columns.details-column {
+    position: relative;
+    padding-bottom: 100px;
+    margin-bottom: 100px;
+  }
+
+  .columns.details-column > .column {
+    position: unset;
+  }
+
+  .columns.details-column:not(.has-carousel) > .column:last-child {
+    padding-bottom: 0;
+  }
+
+  .person-name {
+    font-size: 30px;
+  }
+
+  .section-title {
+    margin-top: 0;
+  }
+
+  .wrapper-db-link {
+    border: none;
+    justify-content: center;
   }
 }