Merge chartes/dev + FIX

src/assets/css/endp_utils.css

@@ -8,7 +8,7 @@ html {
 
   --brown: #7B0C12;
   --dark-grey: #343434;
-  --light-brown: #D74A52;
+  --light-brown: #ad464b;
   --light-brown-alt: #CC3E46;
   --panel-bg-color: #F7F7F7;
   --link-over-color: #CC3E46;

src/components/PersonSearchBox.vue

@@ -237,6 +237,43 @@ input[type="text"]::placeholder {
   font-style: italic;
 }
 
+/* augment a little bit the size of the slider */
+.slider {
+  width: 100px;
+  height: 2px;
+}
+
+/* Chrome, Safari, et d'autres navigateurs WebKit */
+.slider::-webkit-slider-thumb {
+  /* remove border color */
+  border: none;
+}
+
+.slider::-webkit-slider-thumb:hover {
+  box-shadow: 0 0 2px 13px rgba(231, 101, 101, 0.3);
+  transition: box-shadow 0.3s;
+}
+
+.slider::-webkit-slider-thumb:active {
+  box-shadow: 0 0 2px 19px rgba(231, 101, 101, 0.3);
+  transition: box-shadow 0.3s;
+}
+
+/* Firefox */
+.slider::-moz-range-thumb {
+  border: none;
+}
+
+.slider::-moz-range-thumb:hover {
+  box-shadow: 0 0 2px 13px rgba(231, 101, 101, 0.3);
+  transition: box-shadow 0.3s;
+}
+
+.slider::-moz-range-thumb:active {
+  box-shadow: 0 0 2px 19px rgba(231, 101, 101, 0.3);
+  transition: box-shadow 0.3s;
+}
+
 @media screen and (max-width: 1024px) {
 
   .container-search {
@@ -266,7 +303,6 @@ input[type="text"]::placeholder {
     left: 50%;
     transform: translateX(-50%);
   }
-
 }
 
 </style>

src/components/RegisterHistogramChartBox.vue

@@ -73,36 +73,97 @@ export default {
      * @returns {void}
      */
     plotHistogram() {
+      const finalYValues = Object.values(this.pagesByYear);
+
       const trace = {
         x: Object.keys(this.pagesByYear),
-        y: Object.values(this.pagesByYear),
+        y: finalYValues,
         type: 'bar',
-        marker: {color: '#8d1919'}
+        text: "",
+        hoverinfo: 'text',
+        marker: {color: '#ad464b'}
       };
 
       const layout = {
         title: '',
+
         xaxis: {
           title: '',
           tickmode: 'linear',
           dtick: 10,
-          showline: false
+          showline: false,
+          fixedrange: true,
         },
         yaxis: {
-          title: 'Pages'
+          title: '',
+          autoRange: true,
+          fixedrange: true,
         },
+        font: {
+          size: 13,
+          family: 'Libre Baskerville, sans-serif',
+
+        },
+        annotations: [{
+          xref: 'paper',
+          yref: 'paper',
+          x: 0,
+          xanchor: 'right',
+          y: 1,
+          yanchor: 'bottom',
+          text: 'Pages',
+          showarrow: false,
+          font: {
+            size: 14,
+            family: 'Libre Baskerville, sans-serif',
+            weight: 'bold',
+          }
+        }],
         uirevision: false,
         displayModeBar: false
       };
 
       const graph = document.getElementById('histogram');
-      Plotly.newPlot(graph, [trace], layout, {responsive: true, displayModeBar: true});
+      Plotly.newPlot(graph, [trace], layout, {responsive: true, displayModeBar: false});
+
+      // Initial configuration for the animation : set all values of the y-axis to 0
+      const animationStart = {
+        data: [{y: finalYValues.map(() => 0)}], // All values set to 0 for the initial state
+      };
+
+      const animationEnd = {
+        data: [{y: finalYValues}],
+        traces: [0],
+        layout: {}
+      };
+
+      const animationOptions = {
+        transition: {
+          duration: 1000,
+          easing: "cubic-in-out"
+        },
+        frame: {
+          duration: 1000
+        }
+      };
+
+      Plotly.animate(graph, animationStart, {transition: {duration: 0}})
+          .then(() => Plotly.animate(graph, animationEnd, animationOptions))
+          .then(() => {
+            const text = Object.entries(this.pagesByYear).map(([year, pages]) => `${pages} page(s) pour ${year}`);
+            Plotly.restyle(graph, {
+              text: [text],
+              hoverinfo: ['text']
+            });
+          });
+
       graph.on('plotly_relayout', () => {
         const xaxis = graph.layout.xaxis;
         if (xaxis.range) {
           this.startYear = Math.max(this.minYear, Math.min(this.maxYear, Math.floor(xaxis.range[0])));
           this.endYear = Math.max(this.minYear, Math.min(this.maxYear, Math.floor(xaxis.range[1])));
         }
+
       });
 
     },
@@ -115,10 +176,10 @@ export default {
       const years = Object.keys(this.pagesByYear);
       const graph = document.getElementById('histogram');
       const colors = years.map(year => {
-        return (year >= this.startYear && year <= this.endYear) ? '#8d1919' : 'lightgrey';
+        return (year >= this.startYear && year <= this.endYear) ? '#ad464b' : 'lightgrey';
       });
       if (graph) {
-        Plotly.restyle(graph, 'marker.color', [colors], [0], {duration: 500, easing: "linear"});
+        Plotly.restyle(graph, 'marker.color', [colors], [0], {duration: 500, easing: "cubic-in-out"});
       }
     }
   }
@@ -127,26 +188,36 @@ export default {
 
 <style scoped>
 #histogram {
-  max-width: 445px;
-}
-
-.box-histogram {
-  width: 100%;
-  padding: 0;
+  max-width: 580px;
+  margin: -50px -50px 0 -40px;
+  padding: 0 0.1px 0 10px;
 }
 
 :deep(.main-svg) {
   background-color: transparent !important;
 }
 
-
-@media screen and (max-width: 1024px) {
-
+@media screen and (max-width: 1015px) {
   #histogram {
-    max-width: 100%;
+    margin: 0 -50px;
+    max-width: 150%;
+    padding: 0 1px 0 1px;
   }
-
 }
 
+@media screen and (max-width: 970px) {
+  #histogram {
+    margin: 0 0 0 -50px;
+    max-width: 160%;
+    padding: 0 1px 0 1px;
+  }
+}
 
+@media screen and (max-width: 850px) {
+  #histogram {
+    margin: 0 0 0 -50px;
+    width: 120%;
+    padding: 0 1px 0 1px;
+  }
+}
 </style>

src/views/FacSimileView.vue

@@ -680,7 +680,7 @@ tspan {
 
 .loader {
   border: 4px solid rgba(0, 0, 0, 0.1);
-  border-left-color: #3273dc;
+  border-left-color: var(--light-brown) !important;
   width: 100px;
   height: 100px;
 }

src/views/HomeView.vue

@@ -28,21 +28,16 @@
       </nav>
     </div>
     <div class="column container is-fluid">
-      <p class="block lettrine">Le projet e-NDP est consacré à la publication numérique et à l'exploitation des 27
-        premiers registres du chapitre de l'Église de Paris, rédigés par ses notaires entre 1326 et 1504. Ces registres
-        contiennent les décisions prises collectivement par les chanoines pour l’administration du culte, des biens, des
-        droits, des personnes et collectivités dont le doyen et le chapitre de l'Église de Paris sont seigneurs,
-        employeurs ou propriétaires.</p>
-      <p class="block lettrine">Ces propriétés et biens concernent le territoire du cloître, ses bâtiments et ses
-        églises ― Notre-Dame et ses tours, Saint-Denis-du-Pas, Saint-Jean-le-Rond, Saint-Aignan ―, le parvis et
-        l'Hôtel-Dieu, les très nombreuses maisons, terres, bois, vignes, étangs et autres possessions hors du cloître,
-        hors de la Cité et hors de Paris. Le menu
-        <router-link to="/registres">registres</router-link>
-        donne accès aux 14605 pages numérisées des registres et à une transcription obtenue par processus de
-        reconnaissance de l'écriture manuscrite (« HTR » Handwritten Text Recognition). L’exploitation du contenu des
-        registres et de la transcription par « HTR » vise à la connaissance du cloître, de sa topographie et de son bâti,
-        de sa population, de son économie et de sa vie, des usages que l’on y fait du livre et de l’écrit.
-      </p>
+      <p class="block lettrine">Le projet e-NDP propose de renouveler la connaissance de Notre-Dame de Paris par
+        l'édition
+        collaborative numérique des registres du chapitre cathédral. 26 registres, établis entre 1326 et 1504,
+        donnent accès à toutes les décisions prises par les chanoines sur l'administration de la cathédrale, sur la
+        gestion de leurs droits et de leur patrimoine, et sur la société du cloître.</p>
+      <p class="block lettrine">Ces registres sont désormais accessibles grâce à la numérisation de leurs 14605 pages
+      et à l'utilisation de la reconnaissance automatique de l'écriture manuscrite (HTR), qui permet d'en fournir une
+      transcription. Celle-ci permet d'exhumer une source majeure pour l'histoire et la vie des hommes, des femmes et
+      des enfants qui ont composé la société active à l'ombre de la cathédrale Notre-Dame et ont fait de cette dernière
+      un modèle pour l'architecture, la liturgie, les arts et la vie intellectuelle et scientifique.</p>
     </div>
   </div>
   <!-- end banner -->
@@ -133,14 +128,15 @@ nav a:hover {
 }
 
 
-
 nav a .icon {
   display: none;
 }
 
 .container {
   padding: 70px 95px;
-  background: linear-gradient(#F7F7F7CC 0% ,#F7F7F7 11.94090256424186% ,#F7F7F7 100% ,#FCFCFC 100%);
+  background: linear-gradient(#F7F7F7CC 0%, #F7F7F7 11.94090256424186%, #F7F7F7 100%, #FCFCFC 100%);
+  /* justify text */
+  text-align: justify;
 }
 
 .container > *:last-child {
@@ -171,7 +167,7 @@ nav a .icon {
   font-weight: 700;
 
   margin-left: -7px;
-  margin-top: 5px;
+  margin-top: 18px;
   padding-right: 0.2em;
   float: left;
 }
@@ -192,7 +188,7 @@ nav a .icon {
   }
 
   .columns > .column:first-child {
-    background: linear-gradient(#F7F7F7CC 0% ,#F7F7F7 11.94090256424186% ,#F7F7F7 100% ,#FCFCFC 100%);
+    background: linear-gradient(#F7F7F7CC 0%, #F7F7F7 11.94090256424186%, #F7F7F7 100%, #FCFCFC 100%);
     transform: none;
   }
 

src/views/PersonView.vue

@@ -258,7 +258,7 @@ export default {
 
 .loader {
   border: 4px solid rgba(0, 0, 0, 0.1);
-  border-left-color: #3273dc;
+  border-left-color: var(--light-brown) !important;
   width: 100px;
   height: 100px;
 }