fix slider transition effect + fix histogram

chartes · Mar 25, 2024 · d2790a5 · d2790a5
1 parent e619503
commit d2790a5
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/src/assets/css/endp_utils.css b/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;

diff --git a/src/components/PersonSearchBox.vue b/src/components/PersonSearchBox.vue
@@ -237,4 +237,41 @@ 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;
+}
+
 </style>
diff --git a/src/components/RegisterHistogramChartBox.vue b/src/components/RegisterHistogramChartBox.vue
@@ -81,7 +81,7 @@ export default {
         type: 'bar',
         text: "",
         hoverinfo: 'text',
-        marker: {color: '#D74A52FF'}
+        marker: {color: '#ad464b'}
       };
 
       const layout = {
@@ -139,11 +139,11 @@ export default {
 
       const animationOptions = {
         transition: {
-          duration: 2000,
+          duration: 1000,
           easing: "cubic-in-out"
         },
         frame: {
-          duration: 2000
+          duration: 1000
         }
       };
 
@@ -176,7 +176,7 @@ 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) ? '#D74A52FF' : 'lightgrey';
+        return (year >= this.startYear && year <= this.endYear) ? '#ad464b' : 'lightgrey';
       });
       if (graph) {
         Plotly.restyle(graph, 'marker.color', [colors], [0], {duration: 500, easing: "cubic-in-out"});