[UPD] 🧹 massive css+js cleanup

front/public/stylesheets/style.css

+/*noinspection ALL,CssUnknownTarget,CssUnknownTarget*/
 @font-face {
     font-family: 'Roboto';
     font-style: normal;

front/src/components/Header.vue

@@ -24,7 +24,7 @@ export default {
 <style>
 header {
   z-index: 3;
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
   background-color: #3c3c3c;
   color: #ffffff;
   min-height: 8vh;

front/src/components/Results.vue

@@ -216,7 +216,7 @@ export default {
 <style>
 .results {
   background-color: #f1f1f1;
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
   height: 100%;
   display: flex;
   flex-direction: column;

front/src/components/ResultsDetailledView.vue

 <template>
-  <div class="results-detailled-view">
-    <div class="results-detailled-view-header">
+  <div class="results-detailed-view">
+    <div class="results-detailed-view-header">
       <h1>{{ title }}</h1>
       <button class="close-btn" @click.prevent="hideView">&#10006;</button>
     </div>
-    <div class="results-detailled-view-content">
-      <div class="results-chart-detailled" v-if="selectedView">
+    <div class="results-detailed-view-content">
+      <div class="results-chart-detailed" v-if="selectedView">
         <ResultsChart
           :key="re_render_results"
           :chart-data="chartData(selectedView)"
@@ -14,7 +14,7 @@
         ></ResultsChart>
       </div>
       <p>
-        {{ detailled_results_text }}
+        {{ detailed_results_text }}
       </p>
       <br/>
       <p>
@@ -30,7 +30,7 @@
 <script>
 import ResultsChart from "./ResultsChart.js";
 import store from "../store/MainStore.js";
-import { detailled_results_text } from "../options/detailled_results_text.js";
+import { detailed_results_text } from "../options/detailed_results_text";
 
 //register custom tooltip positioner for chart
 Chart.Tooltip.positioners.custom = function(elements, position) {
@@ -47,7 +47,7 @@ export default {
   components: { ResultsChart },
   methods: {
     hideView() {
-      this.$root.$emit("hide_results_detailled_view");
+      this.$root.$emit("hide_results_detailed_view");
     },
   },
   data() {
@@ -86,7 +86,7 @@ export default {
   },
   computed: {
     chartData: function () {
-      return (sphere) => store.state.impact_on_spheres_detailled[sphere];
+      return (sphere) => store.state.impact_on_spheres_detailed[sphere];
     },
     title: function () {
       //TODO: clean this function (code redundancy)
@@ -97,15 +97,15 @@ export default {
         case "RESOURCES": return "Impact sur les ressources"
       }
     },
-    detailled_results_text: function () {
-      return detailled_results_text[this.selectedView];
+    detailed_results_text: function () {
+      return detailed_results_text[this.selectedView];
     },
     equivalents: function () {
       if(store.state.equivalents.hasOwnProperty(this.selectedView)){
         const ret = [];
         const eqs = store.state.equivalents[this.selectedView]["ONE_KM_CAR"]
         for (const equivalent in eqs) {
-          if (eqs[equivalent] !== null) {
+          if (eqs.hasOwnProperty(equivalent) && eqs[equivalent] !== null) {
             ret.push({ text: "Le "+equivalent+" équivaut à l'impact de "+eqs[equivalent]+" km réalisés dans une voiture thermique."});
           }
         }
@@ -114,7 +114,7 @@ export default {
     }
   },
   mounted() {
-    this.$root.$on("re_render_results_detailled", () => {
+    this.$root.$on("re_render_results_detailed", () => {
       // We re-render the component as a workaround to force chart to update
       this.re_render_results = !this.re_render_results;
     });
@@ -123,7 +123,7 @@ export default {
 </script>
 
 <style>
-.results-detailled-view {
+.results-detailed-view {
   padding: 60px;
   background: repeating-linear-gradient(
     -45deg,
@@ -139,10 +139,10 @@ export default {
  * HEADER
  */
 
-.results-detailled-view-header {
+.results-detailed-view-header {
   width: 100%;
 }
-.results-detailled-view-header .close {
+.results-detailed-view-header .close {
   top: -30px;
   padding-left: 30px;
 }
@@ -151,14 +151,14 @@ export default {
  * CONTENT
  */
 
-.results-detailled-view-content p {
+.results-detailed-view-content p {
   line-height: 25px;
 }
 
 /*
  * CHARTS
  */
-.results-chart-detailled {
+.results-chart-detailed {
   margin-bottom: 25px;
   width: 100%;
 }

front/src/components/Scenario.vue

@@ -308,7 +308,7 @@ export default {
   min-height: 90%;
   margin: 30px 0;
   border-radius: 15px;
-  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
   /* padding-bottom:25px; */
 }
 

front/src/components/SinglePage.vue

@@ -107,7 +107,7 @@ export default {
 .single-page-text {
   padding: 2%;
   background-color: rgba(255, 255, 255, 1);
-  box-shadow: 0px 0px 53px -18px rgba(0, 0, 0, 0.75);
+  box-shadow: 0 0 53px -18px rgba(0, 0, 0, 0.75);
   border-radius: 8px;
 }
 .single-page-text p {

front/template_a_componentiser.css

@@ -18,7 +18,7 @@ header {
     z-index: 100;
     flex-basis: 60px;
     width: 100%;
-    box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
+    box-shadow: 0 0 20px rgba(0,0,0,0.4);
 
     background-color: #3C3C3C;
     color: #FFFFFF;
@@ -56,7 +56,7 @@ main {
     margin: 45px 10px;
     flex: 1;
     border-radius: 15px;
-    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
 }
 .scenario-full .scenario-header {
     border-radius: 15px 15px 0 0;
@@ -154,20 +154,20 @@ main {
 
     transition-timing-function: ease;
     width: 50px;
-    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
 }
 .scenario-empty .scenario-body img:hover {
     transition-timing-function: ease;
 
     transform: scale(1.02);
     cursor: pointer;
-    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
 }
 
 .results {
     flex-basis: 25%;
     /* background-color: #BCBCBC; */
-    box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
+    box-shadow: 0 0 20px rgba(0,0,0,0.4);
 }