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

Feat: boxed class and tweek button

Browse Source
This commit is contained in:
Bertrand Benjamin 2021-08-11 20:46:39 +02:00
parent e082bf7164
commit deb5a61add
4 changed files with 36 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/MonthPresentation.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="month-presentation"> <div class="boxed month-presentation">
<div class="date"> <div class="date">
<div class="month"> <div class="month">
{{ theMonth }} {{ theMonth }}
@ -114,10 +114,7 @@ export default {
display: grid; display: grid;
grid-template-columns: 140px 6fr; grid-template-columns: 140px 6fr;
box-shadow: 2px 2px 5px gray;
border-left: 1rem solid black;
width: 100%; width: 100%;
border-radius: 10px;
} }
.month-presentation > * { .month-presentation > * {
margin: 20px; margin: 20px;

27
src/components/hightlights.vue
View File

@ -1,70 +1,70 @@
<template> <template>
<div class="hightlights"> <div class="hightlights">
<div class="hightlight"> <div class="hightlight boxed">
<ul> <ul>
<li>{{ ca }} €</li> <li>{{ ca }} €</li>
<li>CA</li> <li>CA</li>
</ul> </ul>
</div> </div>
<div class="hightlight"> <div class="hightlight boxed">
<ul> <ul>
<li>{{ caMean }} €</li> <li>{{ caMean }} €</li>
<li>CA moyen</li> <li>CA moyen</li>
</ul> </ul>
</div> </div>
<!-- <!--
<div class="hightlight"> <div class="hightlight boxed">
<ul> <ul>
<li>{{ caTheo }}</li> <li>{{ caTheo }}</li>
<li>CA des séances effectuées</li> <li>CA des séances effectuées</li>
</ul> </ul>
</div> </div>
--> -->
<div class="hightlight"> <div class="hightlight boxed">
<ul> <ul>
<li>{{ caUnFactured }} €</li> <li>{{ caUnFactured }} €</li>
<li>Non facturé</li> <li>Non facturé</li>
</ul> </ul>
</div> </div>
<div class="hightlight"> <div class="hightlight boxed">
<ul> <ul>
<li>{{ remuneration }} €</li> <li>{{ remuneration }} €</li>
<li>Rémunération</li> <li>Rémunération</li>
</ul> </ul>
</div> </div>
<div class="hightlight"> <div class="hightlight boxed">
<ul> <ul>
<li>{{ remunerationMean }} €</li> <li>{{ remunerationMean }} €</li>
<li>Rémunération moyenne</li> <li>Rémunération moyenne</li>
</ul> </ul>
</div> </div>
<!-- <!--
<div class="hightlight"> <div class="hightlight boxed">
<ul> <ul>
<li>{{ retrocession }}</li> <li>{{ retrocession }}</li>
<li>Rétrocession</li> <li>Rétrocession</li>
</ul> </ul>
</div> </div>
<div class="hightlight"> <div class="hightlight boxed">
<ul> <ul>
<li>{{ retrocessionMean }}</li> <li>{{ retrocessionMean }}</li>
<li>Rétrocession moyenne</li> <li>Rétrocession moyenne</li>
</ul> </ul>
</div> </div>
<div class="hightlight"> <div class="hightlight boxed">
<ul> <ul>
<li>{{ caPro }}</li> <li>{{ caPro }}</li>
<li> CA pour la partie pro ({{ caProPercentage*100}}% du CA)</li> <li> CA pour la partie pro ({{ caProPercentage*100}}% du CA)</li>
</ul> </ul>
</div> </div>
<div class="hightlight"> <div class="hightlight boxed">
<ul> <ul>
<li>{{ caPerso }}</li> <li>{{ caPerso }}</li>
<li> CA pour la partie perso</li> <li> CA pour la partie perso</li>
</ul> </ul>
</div> </div>
--> -->
<div class="hightlight"> <div class="hightlight boxed">
<ul> <ul>
<li>{{ caPersoUntouch }} €</li> <li>{{ caPersoUntouch }} €</li>
<li> CA perso non utilisé pour se rémunérer</li> <li> CA perso non utilisé pour se rémunérer</li>
@ -131,13 +131,10 @@ export default {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-flow: column wrap; flex-flow: column wrap;
box-shadow: 2px 2px 5px gray;
border-left: 1rem solid black;
border-radius: 10px;
padding-inline-start: 0; padding-inline-start: 0;
} }
.hightlight > ul > li { .hightlight > ul > li {
margin: 3px; margin: 5px;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.hightlight > ul :first-child{ .hightlight > ul :first-child{

6
src/components/nav.vue
View File

@ -1,8 +1,11 @@
<template> <template>
<h1>Sous Margot</h1>
<!--
<nav> <nav>
<router-link to="/"> Home </router-link> <router-link to="/"> Home </router-link>
<router-link to="/config"> Config </router-link> <router-link to="/config"> Config </router-link>
</nav> </nav>
-->
</template> </template>
<script> <script>
@ -15,7 +18,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
nav {
background-color: green;
}
</style> </style>

17
src/style.css
View File

@ -1,3 +1,6 @@
body {
background-color: whitesmoke;
}
.actions { .actions {
display: inline-flex; display: inline-flex;
@ -14,8 +17,13 @@ button {
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
border-radius: 5px; border-radius: 5px;
color: white; background-color: white;
transition: all 0.2s ease-out;
} }
button:hover {
transition: all 0.2s ease-out;
}
.validate { .validate {
border: 2px solid green; border: 2px solid green;
color: green; color: green;
@ -40,3 +48,10 @@ button {
background-color: orange; background-color: orange;
color: white; color: white;
} }
.boxed {
box-shadow: 2px 2px 5px gray;
border-left: 1rem solid black;
border-radius: 10px;
background-color: white;
}