Ajustements 1 desktop/mobile

chartes · Apr 4, 2024 · d5b5f8a · d5b5f8a
1 parent ac9bea5
commit d5b5f8a
Show file tree

Hide file tree

Showing 14 changed files with 184 additions and 49 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -30,6 +30,7 @@ const toggleMobileMenu = function($event) {
 const route = useRoute();
 watch(route, () => {
   isMobileMenuOpen.value = false;
+  window.scrollTo(0,0);
 });
 
 const isHome = computed(() => {

diff --git a/src/assets/css/endp_utils.css b/src/assets/css/endp_utils.css
@@ -26,6 +26,11 @@ body {
   font-family: var(--font-primary);
 }
 
+button:focus {
+  outline: none;
+  box-shadow: none !important;
+}
+
 .input:focus {
   border: none;
   border-bottom: solid 1px var(--light-brown)

diff --git a/src/assets/images/b_Copier_over.svg b/src/assets/images/b_Copier_over.svg
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
@@ -32,7 +32,7 @@
         </ul>
       </div>
       <div class="column">
-        <div class="logos-container is-flex is-justify-content-center">
+        <div class="logos-container is-flex">
 
           <a href="https://www.chartes.psl.eu/fr/rubrique-centre-jean-mabillon/centre-jean-mabillon" target="_blank">
             <img src="@/assets/partners_logo/Logo-CMJ.png" alt="Logo Centre Jean Mabillon" class="logo logo-cmj"/>
@@ -71,7 +71,7 @@
           </a>
 
           <a href="https://www.bibliotheque-mazarine.fr/fr/" target="_blank">
-            <img src="@/assets/partners_logo/Logo_mazarine_sansfond 6B6B6B.svg" alt="Logo Bibliothèque Mazarine" class="logo mazarine"/>
+            <img src="@/assets/partners_logo/Logo_mazarine_sansfond 6B6B6B.svg" alt="Logo Bibliothèque Mazarine" class="logo logo-mazarine"/>
           </a>
 
         </div>
@@ -107,7 +107,7 @@ footer .columns {
 }
 
 footer .columns .column {
-  padding: 55px 40px 8px;
+  padding: 55px 40px 30px;
   background-color: #4C4949;
 }
 
@@ -124,7 +124,7 @@ footer .columns .column:nth-child(2) {
 
 footer .columns .column:last-child {
   padding-left: 0;
-  padding-top: 40px;
+  padding-top: 45px;
 }
 
 
@@ -165,8 +165,13 @@ footer .columns .column:last-child {
   text-align: justify;
 }
 
-.footer-links{
-  display: flex;
+.footer-links {
+  display: inline-block;
+}
+
+.footer-links li {
+  position: relative;
+  display: inline;
 }
 
 .footer-links li,
@@ -175,13 +180,20 @@ footer .columns .column:last-child {
   line-height: 1;
 }
 
+.footer-links li:not(:last-child) {
+  margin-right: 10px;
+  padding-right: 10px;
+}
+
 .footer-links li:not(:last-child):after {
   content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
   display: inline-block;
   width: 1px;
   height: 80%;
   border-right: solid #ffffff 1px;
-  margin: 0 10px;
   transform: translateY(2px);
 }
 
@@ -195,16 +207,25 @@ footer .columns .column:last-child {
 .footer-links li a:hover {
   text-decoration: underline;
   text-underline-offset: 3px;
-  color: var(--light-brown-alt);
 }
 
-
-
 .logos-container {
+  justify-content: flex-start;
   align-items: center;
   gap: 40px;
   display: flex;
   flex-wrap: wrap;
+
+  --logo-scale: 0.75;
+}
+
+.logos-container a {
+  transform-origin: 50% 50%;
+  transition: transform ease-in-out 0.35s;
+}
+
+.logos-container a:hover {
+  transform: scale(1.25);
 }
 
 .logo {
@@ -213,43 +234,43 @@ footer .columns .column:last-child {
 }
 
 .logo-cmj {
-  width: 178px;
+  width: calc( 178px * var(--logo-scale));
 }
 
 .logo-enc {
-  width: 256px;
+  width: calc( 256px * var(--logo-scale));
 }
 
 .logo-anr {
-  width: 183px;
+  width: calc( 183px * var(--logo-scale));
 }
 
 .logo-lamop {
-  width: 145px;
+  width: calc( 145px * var(--logo-scale));
 }
 
 .logo-paris1 {
-  width: 74px;
+  width: calc( 74px * var(--logo-scale));
 }
 
 .logo-cnrs {
-  width: 82px;
+  width: calc( 82px * var(--logo-scale));
 }
 
 .logo-pariscite {
-  width: 177px;
+  width: calc( 177px * var(--logo-scale));
 }
 
 .logo-an {
-  width: 223px;
+  width: calc( 223px * var(--logo-scale));
 }
 
 .logo-bnf {
-  width: 160px;
+  width: calc( 160px * var(--logo-scale));
 }
 
 .logo-mazarine {
-  width: 110px;
+  width: calc( 110px * var(--logo-scale));
 }
 
 

diff --git a/src/components/PersonDataCarousel.vue b/src/components/PersonDataCarousel.vue
@@ -55,11 +55,11 @@ export default {
         },
         700: {
           itemsToShow: 2,
-          itemsToScroll: 2
+          itemsToScroll: 1
         },
         1024: {
           itemsToShow: 3,
-          itemsToScroll: 3
+          itemsToScroll: 1
         },
       },
     }
@@ -166,6 +166,8 @@ export default {
 }
 
 .box-content .active-slide-caption {
+  display: none;
+
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -233,12 +235,12 @@ li.carousel__slide a::after {
   position: relative;
 }
 
-:deep(.carousel__slide--active:after) {
+:deep(.carousel__slide--active::after) {
   content:"";
   position: absolute;
   bottom: 76px;
   display: block;
-  border: 7px solid white;
+  border: 7px solid var(--light-brown);
   width: 100%;
   transform:  scale(0.7);
   z-index: 6;
@@ -300,6 +302,10 @@ li.carousel__slide a::after {
     padding: 0 var(--mobile-side-padding) 0 !important;
   }
 
+  :deep(.carousel__slide--active::after) {
+    display: none;
+  }
+
 }
 
 

diff --git a/src/components/PersonDataTimeline.vue b/src/components/PersonDataTimeline.vue
@@ -391,12 +391,14 @@ export default {
 
 .timeline-scroll-container {
   max-height: 30rem;
-  overflow-y: auto;
+  overflow-y: hidden;
   border-top: 1px solid #A7A7A7;
   border-bottom: 1px solid #A7A7A7;
 
+  /*
   scrollbar-width: thin;
   scrollbar-color: var(--light-brown-alt) #DFDEDE;
+   */
 }
 
 .timeline-scroll-container::-webkit-scrollbar {
@@ -459,7 +461,7 @@ export default {
 }
 
 .button.btn-scroll[disabled] {
-  opacity: 1;
+  opacity: 0.25;
 }
 
 .popup-group {

diff --git a/src/components/PersonPagination.vue b/src/components/PersonPagination.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pagination-box box">
+  <div class="pagination-box box" :class="{ 'top-pagination' : topPagination }">
     <nav class="pagination">
       <a class="pagination-previous" :class="{ 'disabled': currentPage === 1 }"
          @click="handleChangePage(currentPage - 1)">
@@ -52,7 +52,7 @@
         </span>
       </a>
     </nav>
-    <div class="pagination-panel">
+    <div class="pagination-panel" :class="{ 'results-by-page-control' : resultsByPageControl }">
       <input id="limit-results" class="input items-by-page-input" type="number" placeholder="50"
              :min="itemsByPageMinDisplay" :max="itemsByPageMaxDisplay" step="10"
              v-model="itemsByPageDisplay" @change="handleItemsPerPageChange">
@@ -71,6 +71,8 @@ export default {
     itemsByPageDefault: Number,
     itemsByPageMax: Number,
     itemsByPageMin: Number,
+    topPagination: Boolean,
+    resultsByPageControl: Boolean
   },
   data() {
     return {
@@ -141,6 +143,10 @@ nav.pagination {
 }
 
 .pagination-panel {
+  display: none;
+}
+
+.pagination-panel.results-by-page-control {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -184,7 +190,7 @@ nav.pagination {
 
 .disabled {
   pointer-events: none;
-  opacity: 0.5;
+  opacity: 0.15;
 }
 
 .pagination-list {
@@ -225,6 +231,11 @@ nav.pagination {
   display: none;
 }
 
+.pagination-previous:active,
+.pagination-next:active {
+  box-shadow: none;
+}
+
 .pagination-previous:before,
 .pagination-next:before {
   content: "";
@@ -255,16 +266,8 @@ nav.pagination {
 
   .pagination-previous,
   .pagination-next {
-    position: absolute;
-    top: 45px;
-    right: 0;
     width: 53px;
     height: 45px;
-    padding: 0;
-  }
-
-  .pagination-previous {
-    transform: translateX(-82px);
   }
 
   .pagination-previous:before,
@@ -274,6 +277,18 @@ nav.pagination {
     height: 45px;
   }
 
+  .top-pagination .pagination-previous,
+  .top-pagination .pagination-next {
+    position: absolute;
+    top: 45px;
+    right: 0;
+    padding: 0;
+  }
+
+  .top-pagination .pagination-previous {
+    transform: translateX(-82px);
+  }
+
   .pagination-panel .label,
   .pagination-panel .items-by-page-input {
     display: none;