Commit ae4f4ccd authored by Elouan Le Bars's avatar Elouan Le Bars

[FIX] CSS for journey field

parent 67cb88d3
......@@ -13,7 +13,7 @@
<header>
<div class="header-logo">
<h1>Impactomètre</h1>
<p>Comparaison d'impact environnemental des réunions.</p>
<b>Comparaison d'impact environnemental des réunions.</b>
</div>
<div class="header-about">
<a href="#" onclick="showAbout()">A propos</a>
......
......@@ -9,18 +9,18 @@
font-family: Roboto;
}
html {
height: 100vh
height: 100%
}
body {
height: 100vh;
height: 100%;
display: flex;
flex-direction: column;
width:100vw;
}
header {
position:relative;
z-index: 3;
flex-basis: 60px;
width: 100%;
box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
background-color: #3C3C3C;
color: #FFFFFF;
......@@ -33,8 +33,9 @@ header .header-logo h1 {
font-size: 24px;
line-height: 30px;
}
header .header-logo p {
font-size: 12px;
header .header-logo b {
font-size: 16px;
font-weight: normal;
line-height: 20px;
}
header .header-about a {
......
......@@ -58,7 +58,6 @@ export default {
<style>
#app {
display: flex;
height: 100vh;
}
.scenarios {
display: flex;
......
......@@ -2,35 +2,39 @@
<div id="about">
<div class="about-body">
<div class="about-text">
<button class="close-btn" @click.prevent="hideAbout">
&#10006;
</button>
<p>
L’impactomètre est un outil ayant été produit dans le cadre d’un projet de
l’UTC encadré par Yacine Baouch. Il est le fruit d’un travail réalisé par
plusieurs groupes d’étudiants que sont Jules Farjas, William Boffy,
Aurélien Béranger, Clément Brizard, Valentin Le Gauche, Maria Idrissi,
Elouan Le Bars, Matthieu Glorion et Edmond Giraud.
</p>
<p>
Cet outil a pour
vocation d’évaluer l’impact environnemental d’une réunion afin que
l’utilisateur puisse optimiser au mieux sa réunion dans une démarche
écologique. Cette évaluation est réalisée selon une méthode très inspirée
de la méthode ACV (Analyse Cycle de Vie d’un produit).
</p>
<p>
En effet ici
l’impact environnemental d’une réunion est calculé comme étant la somme
des impacts environnementaux dues aux matériels utilisés, transports
engendrés et le logiciel de visioconférence. L’utilisateur doit donc juste
renseigner les informations de ces différents critères pour que
l’Impactomètre puisse évaluer l’impact environnemental de la réunion selon
4 catégories : l’impact sur la santé humaine, l’impact sur la qualité de
l’écosystème, l’impact sur le changement climatique et l’impact sur les
ressources.
</p>
</div>
<button class="close-btn" @click.prevent="hideAbout">
&#10006;
</button>
<p>
L’impactomètre est un outil ayant été produit dans le cadre d’un
projet de l’UTC encadré par Yacine Baouch. Il est le fruit d’un
travail réalisé par plusieurs groupes d’étudiants que sont Jules
Farjas, William Boffy, Aurélien Béranger, Clément Brizard, Valentin Le
Gauche, Maria Idrissi, Elouan Le Bars, Matthieu Glorion et Edmond
Giraud.
</p>
<p>
Cet outil a pour vocation d’évaluer l’impact environnemental d’une
réunion afin que l’utilisateur puisse optimiser au mieux sa réunion
dans une démarche écologique. Cette évaluation est réalisée selon une
méthode inspirée de la méthode ACV (Analyse Cycle de Vie d’un
produit).
</p>
<p>
L’impact environnemental d’une réunion est calculé comme étant la
somme des impacts environnementaux dues aux matériels utilisés,
transports engendrés et le logiciel de visioconférence. L’utilisateur
doit donc juste renseigner les informations de ces différents critères
pour que l’Impactomètre puisse évaluer l’impact environnemental de la
réunion selon 4 catégories : l’impact sur la santé humaine, l’impact
sur la qualité de l’écosystème, l’impact sur le changement climatique
et l’impact sur les ressources.
</p>
<p>
Vous pouvez retrouver l'article sur lequel se basent les calculs
effectués dans le code <a href="#">à cette adresse</a>
</p>
</div>
</div>
</div>
</template>
......@@ -56,19 +60,18 @@ export default {
right: 0;
bottom: 0;
z-index: 4;
background-color: rgba(255, 255, 255, 0.6);
}
.about-body {
position: absolute;
padding: 8%;
padding: 6%;
color: black;
font-size: 120%;
}
.about-text {
padding: 4% 2% 2% 2%;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 53px -18px rgba(0,0,0,0.75);
box-shadow: 0px 0px 53px -18px rgba(0, 0, 0, 0.75);
border-radius: 8px;
}
.about-text p {
......
......@@ -79,45 +79,38 @@
<div class="scenario-section journey">
<div class="scenario-section-header">
Trajets véhiculés
<button
class="add-journey-btn align-right"
@click.prevent="addJourney"
>
<button class="add-journey-btn" @click.prevent="addJourney">
+
</button>
</div>
<div class="scenario-section-body">
<div
class="scenario-line"
class="scenario-line journey"
v-for="j in scenario.journey"
:key="j.length"
>
<span class="scenario-line-caption">
<IncrementButton
v-model="j.distance"
:max="99"
class="scenario-line-button-journey"
/>
<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"
:key="journey_option.name"
:value="journey_option.name"
>
{{ journey_option.french }}
</option>
</select>
<button
class="delete-journey-btn"
@click.prevent="deleteJourney(j)"
<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">
<option disabled value="">Choisissez</option>
<option
v-for="journey_option in journey_options"
:key="journey_option.name"
:value="journey_option.name"
>
-
</button>
<br />
<hr />
</span>
{{ journey_option.french }}
</option>
</select>
<button
class="delete-journey-btn flex-item"
@click.prevent="deleteJourney(j)"
>
-
</button>
</div>
</div>
</div>
......@@ -250,7 +243,7 @@ export default {
.scenario {
margin: 0 10px;
flex-basis: 75%;
flex-shrink: auto;
max-width: 33%;
}
/*
......@@ -316,14 +309,12 @@ export default {
.delete-journey-btn {
display: inline;
position: relative;
float: right;
top: -46px;
left: -12px;
padding-left: 10px;
padding-right: 20px;
border: none;
color: black;
padding: 3px 12px;
border-radius: 15px;
color: gray;
background-color: transparent;
text-align: center;
text-decoration: none;
......@@ -335,19 +326,21 @@ export default {
}
.delete-journey-btn:hover {
background-color: rgba(0, 0, 0, 0.1);
color: black;
cursor: pointer;
}
/*
* SCENARIO-SECTIONS AND SCENARIO-LINES
*/
.scenario-section {
margin-bottom: 20px;
}
.scenario-section-header {
font-weight: bold;
font-size: 20px;
line-height: 23px;
margin: 15px;
margin-left: 20px;
margin: 15px 15px 20px 20px;
}
.scenario-section.journey {
......@@ -368,19 +361,23 @@ export default {
line-height: 16px;
color: #363636;
}
.scenario-section.journey {
}
.scenario-line.journey {
display: flex;
}
.flex-item {
flex: 1 0.5 auto;
}
.scenario-line-caption .helper {
}
.select-journey {
margin-left: 10px;
max-width: 40%;
}
/*
* BUTTONS
*/
.scenario-line-button-journey {
margin-right: 10px;
}
.align-right {
float: right;
margin-right: 15px;
......@@ -408,6 +405,7 @@ export default {
border-radius: 15px;
color: #676767;
padding: 5px 10px;
margin-left: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
......
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