Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
tx-techno-num
impactometre
Commits
aa6060e2
Commit
aa6060e2
authored
Dec 01, 2020
by
Elouan Le Bars
Browse files
[REF] change css flexboxes for css grid
parent
6aeb7fed
Changes
7
Hide whitespace changes
Inline
Side-by-side
front/public/stylesheets/style.css
View file @
aa6060e2
...
...
@@ -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
View file @
aa6060e2
...
...
@@ -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
:
3
fr
1
fr
;
}
main
{
...
...
@@ -127,7 +124,7 @@ main {
}
.scenarios
{
display
:
flex
;
flex-basis
:
75%
;
display
:
grid
;
grid-template-columns
:
1
fr
1
fr
1
fr
;
}
</
style
>
front/src/components/Header.vue
View file @
aa6060e2
...
...
@@ -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
View file @
aa6060e2
...
...
@@ -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
View file @
aa6060e2
...
...
@@ -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
View file @
aa6060e2
...
...
@@ -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
View file @
aa6060e2
...
...
@@ -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
,
1
fr
);
}
.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
;
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment