lafrite
/
Sousmargot
1
0
Fork 0
Code Issues Pull Requests Packages Releases Wiki Activity

Feat: styling for months

This commit is contained in:
Bertrand Benjamin 2021-07-08 20:24:32 +02:00
parent c8f58cc20d
commit dd997d569a
4 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/CreateMonth.vue
View File

@ -46,9 +46,10 @@ export default {
.month-presentation {
display: inline-flex;
flex-direction: row;
background-color: darkgray;
background-color: palegreen;
align-items: center;
justify-content: space-between;
border-radius: 10px;
width: 100%;
}
.month-presentation > * {

4
src/components/MonthForm.vue
View File

@ -14,7 +14,7 @@
<input type="number" id="ca-react">
</li>
<li>
<label for="nbr-seance">Nombre de séances</label>
<label for="nbr-seance">Nombre de séances effectuées</label>
<input type="number" id="nbr-seance">
</li>
<li>
@ -52,7 +52,7 @@ ul {
flex-flow: row wrap;
}
li {
margin: 0px;
margin: 3px;
width: 30%;
display: flex;
flex-direction: column-reverse;

36
src/components/MonthPresentation.vue
View File

@ -5,12 +5,12 @@
</div>
<div class="infos">
<ul>
<li> CA théorique {{ month.ca_theo ?? "∅"}}</li>
<li> CA à la rétrocession {{ month.ca_retro ?? "∅"}}</li>
<li> CA réactualisé {{ month.ca_react ?? "∅"}}</li>
<li> Nombre de séances {{ month.nbr_seances ?? "∅"}}</li>
<li> Montant de la rétrocession {{ month.retro ?? "∅"}}</li>
<li> Rémunération effectuée {{ month.remumeration ?? "∅"}}</li>
<li> <span class="label"> CA théorique </span> <span class="value">{{ month.ca_theo ?? "∅"}}€</span></li>
<li> <span class="label"> CA à la rétrocession </span> <span class="value">{{ month.ca_retro ?? "∅"}}€</span></li>
<li> <span class="label"> CA réactualisé </span> <span class="value">{{ month.ca_react ?? "∅"}}€</span></li>
<li> <span class="label"> Nombre de séances effectuée</span> <span class="value">{{ month.nbr_seances ?? "∅"}}</span></li>
<li> <span class="label"> Montant de la rétrocession </span> <span class="value">{{ month.retro ?? "∅"}}€</span></li>
<li> <span class="label"> Rémunération effectuée </span> <span class="value">{{ month.remumeration ?? "∅"}}€</span></li>
</ul>
</div>
<div class="actions">
@ -37,14 +37,36 @@ export default {
.month-presentation {
display: inline-flex;
flex-direction: row;
background-color: grey;
background-color: mintcream;
align-items: center;
justify-content: space-between;
width: 100%;
border-radius: 10px;
}
.month-presentation > * {
margin: 20px;
}
.date {
font-size: 1.5em;
font-weight: bold;
}
ul {
list-style-type: none;
padding: 0;
display: flex;
flex-flow: row wrap;
}
li {
margin: 3px;
width: 30%;
display: flex;
flex-direction: column-reverse;
}
.value {
font-size: 1.5em;
font-weight: bold;
}
</style>

1
src/style.css
View File

@ -13,6 +13,7 @@ button {
display: inline-block;
width: 100%;
font-size: 16px;
border-radius: 5px;
}
.validate {
background-color: green;