Merge branch 'dev-front'

frontend/src/components/SearchBar.vue

@@ -100,19 +100,38 @@ onMounted(() => {
         <input v-model="searchQuery" type="text" placeholder="Exemple : Cars">
         <button>Rechercher</button>
     </form>
-    <p>Date :</p>
-    <Range v-model="dateRange" :rangeHighlight="true" :min="1895" :max="2035" :renderTop="(data) => h('div', data)" />
-    <p>Styles</p>
-    <Multiselect v-model="chosenStyles" :options="stylesList" placeholder="Choisissez un style" label="nom" track-by="idGen"
-        :multiple="true"></Multiselect>
-    <p>Acteurs, réalisateurs...</p>
-    <Multiselect v-model="chosenPersons" :options="personsList" :searchable="true" placeholder="Entrez un nom" label="nom"
-        track-by="nconst" :multiple="true" @search-change="searchPerson" :loading="isLoading"></Multiselect>
-    <p>Trier par</p>
-    <Multiselect v-model="chosenOrder" :options="listOrder" placeholder="Trier par" label="nom"></Multiselect>
+    <div class="critere">
+        <div>
+            <p>Date :</p>
+            <Range v-model="dateRange" :rangeHighlight="true" :min="1895" :max="2035"
+                :renderTop="(data) => h('div', data)" />
+            <p>Styles</p>
+            <Multiselect v-model="chosenStyles" :options="stylesList" placeholder="Choisissez un style" label="nom"
+                track-by="idGen" :multiple="true"></Multiselect>
+        </div>
+        <div>
+            <p>Acteurs, réalisateurs...</p>
+            <Multiselect v-model="chosenPersons" :options="personsList" :searchable="true" placeholder="Entrez un nom"
+                label="nom" track-by="nconst" :multiple="true" @search-change="searchPerson" :loading="isLoading">
+            </Multiselect>
+            <p>Trier par</p>
+            <Multiselect v-model="chosenOrder" :options="listOrder" placeholder="Trier par" label="nom"></Multiselect>
+        </div>
+
+    </div>
 </template>
 
 <style scoped>
+div.critere {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+}
+
+div {
+    flex-basis: 48%;
+}
+
 input {
     display: block;
     padding: 10px;
@@ -160,6 +179,11 @@ button {
     /* stop's fill color */
     --c-fill-thumb: #fff;
     /* thumb's fill color */
+    margin-top: 25px;
+    margin-bottom: 10px;
+    margin-left: 15px;
+    margin-right: 15px;
+
 }
 </style>
 

frontend/src/views/SearchResults.vue

 <script setup>
-import { ref, onMounted , watch} from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Header from '../components/Header.vue';
 import SearchBar from '../components/SearchBar.vue';
 import FilmRow from '../components/FilmRow.vue';
@@ -39,7 +39,7 @@ async function fetchSearchResults() {
 }
 
 async function fetchCriteriaSearchResults() {
-    let { title, dateMin, dateMax, genres, personnes, order, croissant} = route.query;
+    let { title, dateMin, dateMax, genres, personnes, order, croissant } = route.query;
     let query = route.query
     console.log(query);
 
@@ -69,9 +69,16 @@ async function fetchCriteriaSearchResults() {
 <template>
     <Header>
     </Header>
-    <SearchBar>
-    </SearchBar>
-    <FilmRow :films="films"></FilmRow>
+    <div>
+        <SearchBar>
+        </SearchBar>
+        <FilmRow :films="films"></FilmRow>
+    </div>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+div {
+  margin: 20px;
+  padding: 5px;
+}
+</style>
\ No newline at end of file