Commit 19d4abac authored by Matt Glorion's avatar Matt Glorion
Browse files

[UPD] 馃Ч massive css+js cleanup

parent 702b5783
/*noinspection ALL,CssUnknownTarget,CssUnknownTarget*/
@font-face {
font-family: 'Roboto';
font-style: normal;
......
......@@ -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;
......
......@@ -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;
......
<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%;
}
......
......@@ -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; */
}
......
......@@ -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 {
......
......@@ -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);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment