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

Feat: styling for months

Browse Source
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 { .month-presentation {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
background-color: darkgray; background-color: palegreen;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-radius: 10px;
width: 100%; width: 100%;
} }
.month-presentation > * { .month-presentation > * {

4
src/components/MonthForm.vue
View File

@ -14,7 +14,7 @@
<input type="number" id="ca-react"> <input type="number" id="ca-react">
</li> </li>
<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"> <input type="number" id="nbr-seance">
</li> </li>
<li> <li>
@ -52,7 +52,7 @@ ul {
flex-flow: row wrap; flex-flow: row wrap;
} }
li { li {
margin: 0px; margin: 3px;
width: 30%; width: 30%;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;

36
src/components/MonthPresentation.vue
View File

@ -5,12 +5,12 @@
</div> </div>
<div class="infos"> <div class="infos">
<ul> <ul>
<li> CA théorique {{ month.ca_theo ?? "∅"}}</li> <li> <span class="label"> CA théorique </span> <span class="value">{{ month.ca_theo ?? "∅"}}€</span></li>
<li> CA à la rétrocession {{ month.ca_retro ?? "∅"}}</li> <li> <span class="label"> CA à la rétrocession </span> <span class="value">{{ month.ca_retro ?? "∅"}}€</span></li>
<li> CA réactualisé {{ month.ca_react ?? "∅"}}</li> <li> <span class="label"> CA réactualisé </span> <span class="value">{{ month.ca_react ?? "∅"}}€</span></li>
<li> Nombre de séances {{ month.nbr_seances ?? "∅"}}</li> <li> <span class="label"> Nombre de séances effectuée</span> <span class="value">{{ month.nbr_seances ?? "∅"}}</span></li>
<li> Montant de la rétrocession {{ month.retro ?? "∅"}}</li> <li> <span class="label"> Montant de la rétrocession </span> <span class="value">{{ month.retro ?? "∅"}}€</span></li>
<li> Rémunération effectuée {{ month.remumeration ?? "∅"}}</li> <li> <span class="label"> Rémunération effectuée </span> <span class="value">{{ month.remumeration ?? "∅"}}€</span></li>
</ul> </ul>
</div> </div>
<div class="actions"> <div class="actions">
@ -37,14 +37,36 @@ export default {
.month-presentation { .month-presentation {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
background-color: grey; background-color: mintcream;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
border-radius: 10px;
} }
.month-presentation > * { .month-presentation > * {
margin: 20px; 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> </style>

1
src/style.css
View File

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