Feat: boxed class and tweek button

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

View File

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

View File

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

View File

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

View File

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