Ajustements 2 : sticky + legende carousel (desktop)

chartes · Mar 25, 2024 · ba6241b · ba6241b
1 parent 8c0709e
commit ba6241b
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 57 deletions.
diff --git a/src/assets/css/endp_utils.css b/src/assets/css/endp_utils.css
@@ -45,22 +45,29 @@ body {
 
 #banner-image::before {
   content: "";
-  background-color : #320205;
-  background-size: var(--desktop-content-width) auto;
-  background-position: center;
-  background-repeat: no-repeat;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
 
-#banner-image h1 {
-  position: absolute;
-  left: 0;
-  bottom: 0;
+.page-title,
+#banner-image::before {
+  background-color : #320205;
+  background-size: var(--desktop-content-width) auto;
+  background-position: bottom center;
+  background-repeat: no-repeat;
+}
+
+.page-title {
+  position: sticky;
   z-index: 2;
+  top: 0;
+  margin-top:-52px;
+}
+
+.page-title h1 {
 
   display: block;
   width: var(--desktop-content-width);
@@ -127,7 +134,7 @@ body {
     padding: 0;
   }
 
-  #banner-image h1 {
+  .page-title h1 {
     width: calc(100% - 2* var(--tablet-side-padding));
     margin: 0 var(--tablet-side-padding);
   }
@@ -145,7 +152,11 @@ body {
     padding: 0;
   }
 
-  #banner-image h1 {
+  .page-title {
+    top: 50px;
+  }
+
+  .page-title h1 {
     width: 100%;
     position: relative;
     margin: 0;

diff --git a/src/components/PersonDataCarousel.vue b/src/components/PersonDataCarousel.vue
@@ -21,6 +21,7 @@
           <Pagination v-if="ItemsGreaterThanOne"/>
         </template>
       </Carousel>
+      <div class="active-slide-caption">Légende</div>
     </div>
   </div>
 </template>
@@ -101,7 +102,7 @@ export default {
 
 .box-iconography-collecta.is-opened .box-content {
   background-color: var(--panel-bg-color);
-  padding-bottom: var(--right-column-bottom-padding-desktop);
+  margin-bottom: var(--right-column-bottom-padding-desktop);
 }
 
 .box-header {
@@ -144,6 +145,21 @@ export default {
 
 .is-opened .box-content {
   display: block;
+  position: relative;
+}
+
+.box-content .active-slide-caption {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  z-index: 2;
+
+  font-family: var(--font-secondary);
+  font-size: 18px;
+  font-weight: 400;
+  color: #FFFFFF;
+  padding-bottom: 20px;
+  text-align: center;
 }
 
 /* Carrousel */
@@ -212,11 +228,11 @@ li.carousel__slide a::after {
 }
 
 :deep .carousel__prev {
-  transform: translate(-75%, 46px) scaleX(-1);
+  transform: translate(-175%, 46px) scaleX(-1);
 }
 
 :deep .carousel__next {
-  transform: translate(+75%, 46px);
+  transform: translate(-5%, 46px);
 }
 
 :deep .carousel__prev,
@@ -251,6 +267,20 @@ li.carousel__slide a::after {
 }
 
 
+@media (max-width: 1380px) {
+  .box-iconography-collecta .box-header {
+    padding: 0 var(--tablet-side-padding);
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .box-iconography-collecta .box-header {
+    padding: 0 var(--mobile-side-padding) var(--right-column-bottom-padding-mobile) !important;
+  }
+
+}
+
+
 
 
 /*

diff --git a/src/components/RegisterBaseLegend.vue b/src/components/RegisterBaseLegend.vue
@@ -20,7 +20,6 @@ export default {
 
 <style scoped>
 .result-container-legend {
-  margin-bottom: 20px;
   position: relative;
 }
 

diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue
@@ -1,9 +1,12 @@
 <template>
   <!-- Banner -->
-  <div id="banner-image" class="container is-fluid">
-    <h1 class="title">Contact</h1>
-  </div>
+  <div id="banner-image" class="container is-fluid"></div>
   <!-- end banner -->
+
+  <div class="page-title">
+    <h1>Contact</h1>
+  </div>
+
   <div class="columns">
     <div class="column">
       <p>Le travail sur le site et le corpus est toujours en cours d'évolution. Pour toute remarque, suggestion ou
@@ -30,7 +33,7 @@ export default {
 <style scoped>
 
 /* Set image banner */
-#banner-image::before {
+.page-title, #banner-image::before {
   background-image: url("@/assets/banners/band_Ressources.png");
 }
 
@@ -46,6 +49,14 @@ p, ul, li, a {
   font-size: 22px;
 }
 
+a {
+  color: var(--light-brown-alt);
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
 p {
   margin-bottom: 20px;
 }

diff --git a/src/views/FacSimileView.vue b/src/views/FacSimileView.vue
@@ -1,9 +1,12 @@
 <template>
   <!-- Banner -->
-  <div id="banner-image" class="container is-fluid">
-    <h1 class="title">Registres</h1>
-  </div>
+  <div id="banner-image" class="container is-fluid"></div>
   <!-- end banner -->
+
+  <div class="page-title">
+    <h1>Registres</h1>
+  </div>
+
   <!-- Main grid  -->
   <div class="columns facsimile-columns" :class="{ 'is-collapsed': isNavOpen }">
 
@@ -406,7 +409,7 @@ export default {
 @import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@100&display=swap');
 
 /* Set image banner */
-#banner-image::before {
+.page-title, #banner-image::before {
   background-image: url("@/assets/banners/banner-registers.png");
 }
 

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- banner -->
-  <div id="banner-image" class="container is-fluid">
-  </div>
+  <div id="banner-image" class="container is-fluid"></div>
+
   <div class="columns">
     <div class="column">
       <h1 class="title">

diff --git a/src/views/PersonDataView.vue b/src/views/PersonDataView.vue
@@ -1,6 +1,8 @@
 <template>
-  <div id="banner-image" class="container is-fluid">
-    <h1 class="title">Personnes</h1>
+  <div id="banner-image" class="container is-fluid"></div>
+
+  <div class="page-title">
+    <h1>Personnes</h1>
   </div>
 
   <div class="columns person-name-columns is-multiline">
@@ -164,7 +166,7 @@ export default {
 <style scoped>
 
 /* Set image banner */
-#banner-image::before {
+.page-title, #banner-image::before {
   background-image: url("@/assets/banners/band_Personnes.png");
 }
 

diff --git a/src/views/PersonView.vue b/src/views/PersonView.vue
@@ -1,7 +1,10 @@
 <template>
-  <div id="banner-image" class="container is-fluid">
-    <h1 class="title">Personnes</h1>
+  <div id="banner-image" class="container is-fluid"></div>
+
+  <div class="page-title">
+    <h1>Personnes</h1>
   </div>
+
   <div class="columns is-multiline">
     <div class="column is-12-mobile is-5-tablet is-5-desktop">
       <div class="box box-search-person-facets">
@@ -21,7 +24,7 @@
       </div>
     </div>
     <div class="column column-result is-12-mobile is-7-tablet is-7-desktop">
-      <div class="column-result-header">
+      <div class="column-results-header">
         <h2 class="subtitle is-4">
           <span class="results-count">{{ total }}</span> Résultats
         </h2>
@@ -184,7 +187,7 @@ export default {
 
 <style scoped>
 /* Set image banner */
-#banner-image::before {
+.page-title, #banner-image::before {
   background-image: url("@/assets/banners/band_Personnes.png");
 }
 
@@ -194,18 +197,18 @@ export default {
 
 .columns .column:first-child {
   width: 465px;
-  padding: 110px 0 23px;
+  padding: 10px 0 23px;
 }
 
 .columns .column:last-child {
   width: calc(100% - 50px - 465px);
-  padding: 85px 30px var(--right-column-bottom-padding-desktop) 30px;
+  padding: 65px 30px var(--right-column-bottom-padding-desktop) 30px;
 }
 
 .box-search-person-facets {
   position: sticky;
   top: 0;
-  padding: 0;
+  padding: 100px 0 0;
 }
 
 .box-search-person-facets .box {
@@ -249,8 +252,8 @@ export default {
   height: 100px;
 }
 
-.li--person {
-  justify-content: space-between;
+:deep .li--person:first-child header.card-header {
+  min-height: 110px;
 }
 
 .is-active {
@@ -262,6 +265,16 @@ export default {
   background-color: var(--panel-bg-color);
 }
 
+.column-results-header {
+  position: sticky;
+  top:52px;
+  z-index: 1;
+  width: 100%;
+  height: 232px;
+  padding-top: 20px;
+  background-color: var(--panel-bg-color);
+}
+
 .results-count {
   display: inline-block;
   width: 74px;