Commit aa6060e2 authored by Elouan Le Bars's avatar Elouan Le Bars
Browse files

[REF] change css flexboxes for css grid

parent 6aeb7fed
...@@ -11,11 +11,7 @@ ...@@ -11,11 +11,7 @@
font-family: Roboto, Arial; font-family: Roboto, Arial;
} }
html { html {
height: 100% min-width: 1133px;
} }
body { body {
height: 100%;
display: flex;
flex-direction: column;
width:100vw;
} }
...@@ -7,14 +7,14 @@ ...@@ -7,14 +7,14 @@
</p> </p>
</div> </div>
<Header></Header> <Header></Header>
<main id="main-flexbox"> <main id="main-container">
<SinglePage :page="displayed_single_page" v-show="display_single_page"></SinglePage> <SinglePage :page="displayed_single_page" v-show="display_single_page"></SinglePage>
<div class="scenarios" v-show="display_scenarios"> <div class="scenarios" v-show="display_scenarios">
<Scenario ref="scenario0" id=0 title="Scenario A"></Scenario> <Scenario ref="scenario0" id=0 title="Scenario A"></Scenario>
<Scenario ref="scenario1" id=1 title="Scenario B"></Scenario> <Scenario ref="scenario1" id=1 title="Scenario B"></Scenario>
<Scenario ref="scenario2" id=2 title="Scenario C"></Scenario> <Scenario ref="scenario2" id=2 title="Scenario C"></Scenario>
</div> </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 /> <Results />
</main> </main>
</div> </div>
...@@ -85,8 +85,6 @@ export default { ...@@ -85,8 +85,6 @@ export default {
<style> <style>
#app { #app {
height: 100%;
flex-direction: column;
} }
@media only screen and (min-width: 800px) { @media only screen and (min-width: 800px) {
...@@ -116,10 +114,9 @@ export default { ...@@ -116,10 +114,9 @@ export default {
font-weight: bold; font-weight: bold;
} }
#main-flexbox { #main-container {
flex-basis: 90%; display: grid;
display: flex; grid-template-columns: 3fr 1fr;
width: 100%;
} }
main { main {
...@@ -127,7 +124,7 @@ main { ...@@ -127,7 +124,7 @@ main {
} }
.scenarios { .scenarios {
display: flex; display: grid;
flex-basis: 75%; grid-template-columns: 1fr 1fr 1fr;
} }
</style> </style>
...@@ -27,7 +27,6 @@ header { ...@@ -27,7 +27,6 @@ header {
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
background-color: #3c3c3c; background-color: #3c3c3c;
color: #ffffff; color: #ffffff;
flex-basis:10%;
} }
header .header-logo { header .header-logo {
display: inline-block; display: inline-block;
......
...@@ -109,6 +109,10 @@ export default { ...@@ -109,6 +109,10 @@ export default {
</script> </script>
<style> <style>
.increment-button {
min-width: 60px
}
.increment-button input { .increment-button input {
width: 30px; width: 30px;
text-align: center; text-align: center;
......
...@@ -219,8 +219,8 @@ export default { ...@@ -219,8 +219,8 @@ export default {
<style> <style>
.results { .results {
background-color: #f1f1f1; background-color: #f1f1f1;
flex-basis: 25%;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
min-height: 100vh;
} }
/* /*
......
...@@ -111,8 +111,6 @@ export default { ...@@ -111,8 +111,6 @@ export default {
<style> <style>
.results-detailled-view { .results-detailled-view {
display: flex;
flex-direction: column;
padding: 60px; padding: 60px;
background: repeating-linear-gradient( background: repeating-linear-gradient(
-45deg, -45deg,
...@@ -121,6 +119,7 @@ export default { ...@@ -121,6 +119,7 @@ export default {
rgba(0, 0, 0, 0.02) 10px, rgba(0, 0, 0, 0.02) 10px,
rgba(0, 0, 0, 0.02) 20px rgba(0, 0, 0, 0.02) 20px
); );
overflow: hidden;
} }
/* /*
...@@ -139,10 +138,6 @@ export default { ...@@ -139,10 +138,6 @@ export default {
* CONTENT * CONTENT
*/ */
.results-detailled-view-content {
display: block;
position: relative;
}
.results-detailled-view-content p { .results-detailled-view-content p {
line-height: 25px; line-height: 25px;
} }
......
...@@ -94,10 +94,9 @@ ...@@ -94,10 +94,9 @@
<IncrementButton <IncrementButton
v-model="j.distance" v-model="j.distance"
:max="99" :max="99"
class="flex-item"
/> />
<p class="flex-item">km en</p> <p>km en</p>
<select v-model="j.mean" class="select-journey flex-item"> <select v-model="j.mean" class="select-journey">
<option disabled value="">Choisissez</option> <option disabled value="">Choisissez</option>
<option <option
v-for="journey_option in journey_options" v-for="journey_option in journey_options"
...@@ -108,7 +107,7 @@ ...@@ -108,7 +107,7 @@
</option> </option>
</select> </select>
<button <button
class="delete-journey-btn flex-item" class="delete-journey-btn"
@click.prevent="deleteJourney(j)" @click.prevent="deleteJourney(j)"
> >
- -
...@@ -298,13 +297,11 @@ export default { ...@@ -298,13 +297,11 @@ export default {
<style> <style>
.scenarios { .scenarios {
display: flex;
} }
.scenario { .scenario {
margin: 0 10px; margin: 0 10px;
flex-basis: 75%; min-width: 250px;
max-width: 33%;
} }
/* /*
...@@ -315,7 +312,6 @@ export default { ...@@ -315,7 +312,6 @@ export default {
height: auto; height: auto;
min-height: 80%; min-height: 80%;
margin: 30px 10px; margin: 30px 10px;
flex: 1 1 auto;
border-radius: 15px; border-radius: 15px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
/* padding-bottom:25px; */ /* padding-bottom:25px; */
...@@ -409,8 +405,9 @@ export default { ...@@ -409,8 +405,9 @@ export default {
} }
.scenario-line { .scenario-line {
margin: 10px; padding-left: 25px;
margin-left: 25px; padding-right: 10px;
padding-bottom: 10px;
} }
.scenario-line-caption p { .scenario-line-caption p {
...@@ -426,15 +423,13 @@ export default { ...@@ -426,15 +423,13 @@ export default {
} }
.scenario-line.journey { .scenario-line.journey {
display: flex; display: grid;
} grid-template-columns: repeat(4, 1fr);
.flex-item {
flex: 1 0.5 auto;
} }
.scenario-line-caption .helper { .scenario-line-caption .helper {
} }
.select-journey { .select-journey {
max-width: 40%;
} }
/* /*
* BUTTONS * BUTTONS
...@@ -447,7 +442,7 @@ export default { ...@@ -447,7 +442,7 @@ export default {
margin-right: -6px; margin-right: -6px;
} }
.scenario-line select { .scenario-line select {
max-width: 35%; width: 80px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: #bcbcbc; border-color: #bcbcbc;
...@@ -483,9 +478,9 @@ export default { ...@@ -483,9 +478,9 @@ export default {
} }
.scenario-empty { .scenario-empty {
/* height: 80%; */ /* height: 80%; */
min-width: 230px;
min-height: 80%; min-height: 80%;
margin: 30px 10px; margin: 30px 10px;
flex: 1 1 auto;
border-radius: 15px; border-radius: 15px;
box-sizing: border-box; box-sizing: border-box;
border: 1px dashed #000000; border: 1px dashed #000000;
......
Supports Markdown
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