From 08343cdd5a7608d8be7e949fbc5ff1a203d93a97 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Mon, 18 Apr 2022 16:30:35 +0200
Subject: [PATCH] update calendar

---
 assets/js/components/Calendar.vue | 66 ++++++++++++++++++-------------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/assets/js/components/Calendar.vue b/assets/js/components/Calendar.vue
index 3d06e35..1225ed1 100644
--- a/assets/js/components/Calendar.vue
+++ b/assets/js/components/Calendar.vue
@@ -1,40 +1,46 @@
 <template>
     <div>
-        <div class="row">
-            <div class="col-md-4">
-                <div class="pr-4">
-                    <label for="projects">Période</label>
-                    <div class="row">
-                        <div class="col-6">
-                            <select class="form-control mr-2" v-model="month">
-                                <option v-for="value, key in months" v-bind:value="key">{{ value }}</option>
+        <details>
+            <summary>Filtres</summary>
+
+            <div class="bg-light border mt-3 mb-3 p-3">
+                <div class="row">
+                    <div class="col-md-2">
+                        <div class="pr-4">
+                            <label for="projects">Période</label>
+                            <div class="row">
+                                <div class="col-6">
+                                    <select class="form-control mr-2" v-model="month">
+                                        <option v-for="value, key in months" v-bind:value="key">{{ value }}</option>
+                                    </select>
+                                </div>
+                                <div class="col-6">
+                                    <select class="form-control ml-2" v-model="year">
+                                        <option v-for="value, key in years" v-bind:value="key">{{ value }}</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="pr-2">
+                            <label for="projects">Intervenant⋅e⋅s</label>
+                            <select class="form-control" v-model="selectedSpeakers" id="speakers" multiple>
+                                <option v-for="item in speakers" v-bind:value="item.id">{{ item.name }}</option>
                             </select>
                         </div>
-                        <div class="col-6">
-                            <select class="form-control ml-2" v-model="year">
-                                <option v-for="value, key in years" v-bind:value="key">{{ value }}</option>
+                    </div>
+                    <div class="col-md-6">
+                        <div>
+                            <label for="projects">Projets</label>
+                            <select class="form-control" v-model="selectedProjects" id="projects" multiple>
+                                <option v-for="item in projects" v-bind:value="item.id">{{ item.label }}</option>
                             </select>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="col-md-4">
-                <div class="pr-2">
-                    <label for="projects">Intervenant⋅e⋅s</label>
-                    <select class="form-control" v-model="selectedSpeakers" id="speakers" multiple>
-                        <option v-for="item in speakers" v-bind:value="item.id">{{ item.name }}</option>
-                    </select>
-                </div>
-            </div>
-            <div class="col-md-4">
-                <div>
-                    <label for="projects">Projets</label>
-                    <select class="form-control" v-model="selectedProjects" id="projects" multiple>
-                        <option v-for="item in projects" v-bind:value="item.id">{{ item.label }}</option>
-                    </select>
-                </div>
-            </div>
-        </div>
+        </details>
 
         <div class="row" v-if="weeks.length > 0">
             <div class="col-md-12">
@@ -50,6 +56,10 @@
 table {
   font-size: 12px;
 }
+
+.bg-light {
+  background: #e9ecef !important;
+}
 </style>
 
 <script>