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 @@
font-family: Roboto, Arial;
}
html {
height: 100%
min-width: 1133px;
}
body {
height: 100%;
display: flex;
flex-direction: column;
width:100vw;
}
......@@ -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>
......@@ -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;
......
......@@ -109,6 +109,10 @@ export default {
</script>
<style>
.increment-button {
min-width: 60px
}
.increment-button input {
width: 30px;
text-align: center;
......
......@@ -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;
}
/*
......
......@@ -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;
}
......
......@@ -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;
......
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