Feat: css things

src/components/CreateMonth.vue

@@ -7,8 +7,8 @@
     <month-form></month-form>
   </div>
   <div class="actions">
-    <button> Valider </button>
+    <button class="validate"> Valider </button>
-    <button> Annuler </button>
+    <button class="cancel"> Annuler </button>
   </div>
 </div>
 </template>
@@ -43,5 +43,19 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.month-presentation {
+    display: inline-flex;
+    flex-direction: row;
+    background-color: darkgray;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    }
+.month-presentation > * {
+    margin: 20px;
+}
+.date > input {
+    width: 150px;
+}
 
 </style>

src/components/MonthForm.vue

@@ -6,7 +6,7 @@
     <input type="number" id="ca-theo">
     </li>
     <li>
-    <label for="ca-retro">CA au moment de la rétrocession</label>
+    <label for="ca-retro">CA rétrocession</label>
     <input type="number" id="ca-retro">
     </li>
     <li>
@@ -45,5 +45,24 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+ul {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-flow: row wrap;
+}
+li {
+    margin: 0px;
+    width: 30%;
+    display: flex;
+    flex-direction: column-reverse;
+}
+li > label {
+    font-size: 0.8em;
+}
+input {
+    width: 4em;
+    font-size: 1.5em;
+}
 
 </style>

src/components/MonthPresentation.vue

@@ -14,7 +14,7 @@
     </ul>
   </div>
   <div class="actions">
-    <button> Éditer </button>
+    <button class="edit"> Éditer </button>
   </div>
 </div>
 </template>
@@ -34,5 +34,17 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.month-presentation {
+    display: inline-flex;
+    flex-direction: row;
+    background-color: grey;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    }
+.month-presentation > * {
+    margin: 20px;
+}
+
 
 </style>

src/components/MonthsUl.vue

@@ -1,5 +1,5 @@
 <template>
-<ul id="months">
+<ul>
     <li v-for="month in months" :key="month.date">
          <month-presentation :month=month></month-presentation>
     </li>
@@ -25,7 +25,40 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+li {
+    padding-bottom: 10px;
+}
 
+li:last-of-type {
+    padding-bottom: 0;
+    }
+
+.action {
+    display: inline-flex;
+    flex-direction: column;
+}
+
+button {
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  display: inline-block;
+  width: 100%;
+  font-size: 16px;
+    }
+.validate {
+  background-color: green;
+}
+.cancel {
+  background-color: red;
+}
+.edit {
+  background-color: orange;
+}
 </style>

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from '@/App.vue'
 import router from '@/router'
 import store from '@/store'
+import '@/style.css'
 
 
 const app = createApp(App)

src/style.css

@@ -0,0 +1,25 @@
+
+.actions {
+    display: inline-flex;
+    flex-direction: column;
+    width: 120px;
+}
+
+button {
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  display: inline-block;
+  width: 100%;
+  font-size: 16px;
+    }
+.validate {
+  background-color: green;
+}
+.cancel {
+  background-color: red;
+}
+.edit {
+  background-color: orange;
+}

src/views/home.vue

@@ -1,6 +1,6 @@
 <template>
 <h1>Home</h1>
-<section>
+<section id="months">
     <h2> Mois </h2>
     <create-month></create-month>
     <months-list></months-list>
@@ -32,5 +32,8 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+#months {
+    width: 70%;
+}
 </style>