[REF] change css flexboxes for css grid

front/public/stylesheets/style.css

@@ -11,11 +11,7 @@
     font-family: Roboto, Arial;
 }
 html {
-  height: 100%
+  min-width: 1133px;
 }
 body {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    width:100vw;
 }

front/src/App.vue

@@ -7,14 +7,14 @@
     </p>
   </div>
   <Header></Header>
-  <main id="main-flexbox">
+  <main id="main-container">
     <SinglePage :page="displayed_single_page" v-show="display_single_page"></SinglePage>
     <div class="scenarios" v-show="display_scenarios">
       <Scenario ref="scenario0" id=0 title="Scenario A"></Scenario>
       <Scenario ref="scenario1" id=1 title="Scenario B"></Scenario>
       <Scenario ref="scenario2" id=2 title="Scenario C"></Scenario>
     </div>
-    <ResultsDetailledView :selectedView="results_detailled_view_choice" class="scenarios" v-show="!display_scenarios" :key="re_render_results_detailled_view" />
+    <ResultsDetailledView :selectedView="results_detailled_view_choice" v-show="!display_scenarios" :key="re_render_results_detailled_view" />
     <Results />
   </main>
 </div>
@@ -85,8 +85,6 @@ export default {
 
 <style>
 #app {
-  height: 100%;
-  flex-direction: column;
 }
 
 @media only screen and (min-width: 800px) {
@@ -116,10 +114,9 @@ export default {
   font-weight: bold;
 }
 
-#main-flexbox {
-  flex-basis: 90%;
-  display: flex;
-  width: 100%;
+#main-container {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
 }
 
 main {
@@ -127,7 +124,7 @@ main {
 }
 
 .scenarios {
-  display: flex;
-  flex-basis: 75%;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 </style>

front/src/components/Header.vue

@@ -27,7 +27,6 @@ header {
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
   background-color: #3c3c3c;
   color: #ffffff;
-  flex-basis:10%;
 }
 header .header-logo {
   display: inline-block;

front/src/components/IncrementButton.vue

@@ -109,6 +109,10 @@ export default {
 </script>
 
 <style>
+.increment-button {
+  min-width: 60px
+}
+
 .increment-button input {
   width: 30px;
   text-align: center;

front/src/components/Results.vue

@@ -219,8 +219,8 @@ export default {
 <style>
 .results {
   background-color: #f1f1f1;
-  flex-basis: 25%;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
+  min-height: 100vh;
 }
 
 /*

front/src/components/ResultsDetailledView.vue

@@ -111,8 +111,6 @@ export default {
 
 <style>
 .results-detailled-view {
-  display: flex;
-  flex-direction: column;
   padding: 60px;
   background: repeating-linear-gradient(
     -45deg,
@@ -121,6 +119,7 @@ export default {
     rgba(0, 0, 0, 0.02) 10px,
     rgba(0, 0, 0, 0.02) 20px
   );
+  overflow: hidden;
 }
 
 /*
@@ -139,10 +138,6 @@ export default {
  * CONTENT
  */
 
-.results-detailled-view-content {
-  display: block;
-  position: relative;
-}
 .results-detailled-view-content p {
   line-height: 25px;
 }

front/src/components/Scenario.vue

@@ -94,10 +94,9 @@
               <IncrementButton
                 v-model="j.distance"
                 :max="99"
-                class="flex-item"
               />
-              <p class="flex-item">km en</p>
-              <select v-model="j.mean" class="select-journey flex-item">
+              <p>km en</p>
+              <select v-model="j.mean" class="select-journey">
                 <option disabled value="">Choisissez</option>
                 <option
                   v-for="journey_option in journey_options"
@@ -108,7 +107,7 @@
                 </option>
               </select>
               <button
-                class="delete-journey-btn flex-item"
+                class="delete-journey-btn"
                 @click.prevent="deleteJourney(j)"
               >
                 -
@@ -298,13 +297,11 @@ export default {
 
 <style>
 .scenarios {
-  display: flex;
 }
 
 .scenario {
   margin: 0 10px;
-  flex-basis: 75%;
-  max-width: 33%;
+  min-width: 250px;
 }
 
 /*
@@ -315,7 +312,6 @@ export default {
   height: auto;
   min-height: 80%;
   margin: 30px 10px;
-  flex: 1 1 auto;
   border-radius: 15px;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
   /* padding-bottom:25px; */
@@ -409,8 +405,9 @@ export default {
 }
 
 .scenario-line {
-  margin: 10px;
-  margin-left: 25px;
+  padding-left: 25px;
+  padding-right: 10px;
+  padding-bottom: 10px;
 }
 
 .scenario-line-caption p {
@@ -426,15 +423,13 @@ export default {
 }
 
 .scenario-line.journey {
-  display: flex;
-}
-.flex-item {
-  flex: 1 0.5 auto;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
 }
+
 .scenario-line-caption .helper {
 }
 .select-journey {
-  max-width: 40%;
 }
 /*
  *    BUTTONS
@@ -447,7 +442,7 @@ export default {
   margin-right: -6px;
 }
 .scenario-line select {
-  max-width: 35%;
+  width: 80px;
   border-width: 1px;
   border-style: solid;
   border-color: #bcbcbc;
@@ -483,9 +478,9 @@ export default {
 }
 .scenario-empty {
   /* height: 80%; */
+  min-width: 230px;
   min-height: 80%;
   margin: 30px 10px;
-  flex: 1 1 auto;
   border-radius: 15px;
   box-sizing: border-box;
   border: 1px dashed #000000;