fix size and display in phone

index.html

@@ -11,3 +11,13 @@
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
+<style>
+    html {
+        background: url("public/background.jpg");
+        background-repeat: no-repeat;
+        background-size: 1000px auto;
+        background-position: center top;
+        background-attachment: fixed;
+        overflow-y: clip;
+    }
+</style>

src/App.vue

@@ -29,5 +29,38 @@
   margin-top: 8px;
   padding: 0 12px;
   overflow-y: scroll;
+  max-height: 620px !important;
 }
+
+body {
+  position: absolute;
+  width: 342px;
+  max-height: 620px !important;
+  top: 118px;
+  left: calc(50% - 174px);
+}
+.v-application__wrap {
+  width: 342px;
+  min-height: 708px !important;
+}
+
+.v-toolbar {
+  border-radius: 36px 36px 0 0 !important;
+  top: 118px !important;
+  left: calc(50% - 174px) !important;
+  width: 342px !important;
+}
+
+.v-application {
+  border-radius: 36px;
+}
+
+.recommandations {
+  position: fixed;
+  bottom: calc(100vh - 825px);
+  width: 342px;
+  left: calc(50% - 174px) !important;
+  border-radius: 0 0 36px 36px  !important;
+}
+
 </style>

src/components/Suggestion.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {onMounted, type Ref, ref, watch} from "vue";
+import {computed, onMounted, type Ref, ref, watch} from "vue";
 import {getBookRecommandations} from "@/services/bookApi";
 import type {Book} from "@/services/models/book";
 import BookLightCard from "@/components/book/BookLightCard.vue";
@@ -26,7 +26,7 @@ async function getSimilarBooks() {
     params.collection = true;
   }
 
-  return getBookRecommandations(book.id, params)
+  return getBookRecommandations(book!.id, params)
     .then(result => {
       books.value = result;
     })
@@ -41,13 +41,19 @@ const suggestionOptions = [
   {label: 'Dans la même collection', key:2}
 ]
 
+const availableOptions = computed(() => {
+  if(book.collection) {
+    return suggestionOptions;
+  }
+  return suggestionOptions.filter(({key}) => key !== 2)
+})
 const selectedOption = ref(0)
 
 watch(selectedOption, getSimilarBooks)
 </script>
 
 <template>
-  <v-sheet>
+  <v-sheet class="recommandation-books">
     <span class="d-flex ga-1 bg-white pa-2">
       <v-select
         v-model="selectedOption"
@@ -55,7 +61,7 @@ watch(selectedOption, getSimilarBooks)
         hide-details
         item-title="label"
         item-value="key"
-        :items="suggestionOptions"
+        :items="availableOptions"
       >
         <template #prepend-inner>
           <v-icon
@@ -92,7 +98,7 @@ watch(selectedOption, getSimilarBooks)
   </v-sheet>
 </template>
 
-<style>
+<style scoped>
 .v-slide-group__prev, .v-slide-group__next {
   flex-basis: 24px;
   min-width: 24px;

src/components/book/BookLightCard.vue

@@ -11,7 +11,7 @@ defineProps<{ book: Book }>()
     hover
     rounded="lg"
     color="white"
-    :to="`/book/${book.id}`"
+    :to="{path: `/book/${book.id}`}"
   >
     <v-img
       :src="book.image_url ?? `https://cdn.vuetifyjs.com/images/cards/sunshine.jpg`"

src/components/filter/ActiveFilters.vue

@@ -12,27 +12,55 @@ const {filters} = storeToRefs(useBooksStore());
   <div class="selected-filters">
     <v-chip-group column>
       <template v-if="filters.mot_clef">
-        <v-chip>Mot-clef: {{ filters.mot_clef }}</v-chip>
+        <v-chip
+          variant="tonal"
+          closable
+          @click:close="filters.mot_clef = ''"
+        >
+          🔎 Mot-clef: {{ filters.mot_clef }}
+        </v-chip>
       </template>
       <template v-if="filters.collections">
         <v-chip
           v-for="collection in filters.collections"
           :key="collection"
+          closable
+          @click:close="filters.collections = filters.collections.filter(c => c !== collection)"
         >
-          Collection: {{ collection }}
+          📁 Collection: {{ collection }}
         </v-chip>
       </template>
       <template v-if="filters.nb_de_pages.min">
-        <v-chip>📚 Nombre de pages minimum: {{ filters.nb_de_pages.min }}</v-chip>
+        <v-chip
+          closable
+          @click:close="filters.nb_de_pages.min = undefined"
+        >
+          📚 Nombre de pages minimum: {{ filters.nb_de_pages.min }}
+        </v-chip>
       </template>
       <template v-if="filters.nb_de_pages.max">
-        <v-chip>📚 Nombre de pages maximum: {{ filters.nb_de_pages.max }}</v-chip>
+        <v-chip
+          closable
+          @click:close="filters.nb_de_pages.max = undefined"
+        >
+          📚 Nombre de pages maximum: {{ filters.nb_de_pages.max }}
+        </v-chip>
       </template>
       <template v-if="filters.date_de_parution.après">
-        <v-chip>🗓️ Publié après: {{ filters.date_de_parution.après }}</v-chip>
+        <v-chip
+          closable
+          @click:close="filters.date_de_parution.après = undefined"
+        >
+          🗓️ Publié après: {{ filters.date_de_parution.après }}
+        </v-chip>
       </template>
       <template v-if="filters.date_de_parution.avant">
-        <v-chip>🗓️ Publié avant : {{ filters.date_de_parution.avant }}</v-chip>
+        <v-chip
+          closable
+          @click:close="filters.date_de_parution.avant = undefined"
+        >
+          🗓️ Publié avant : {{ filters.date_de_parution.avant }}
+        </v-chip>
       </template>
     </v-chip-group>
   </div>

src/components/filter/FiltersPanel.vue

@@ -9,12 +9,14 @@ defineEmits(["close"]);
 </script>
 
 <template>
-  <v-expand-x-transition class="panel">
+  <v-expand-x-transition
+    class="panel"
+    mode="out-in"
+  >
     <v-card
       v-show="isPanelOpened"
       class="mx-auto"
       bg-color="white"
-      height="100%"
       width="100%"
       @keydown.esc="$emit('close')"
     >
@@ -37,9 +39,12 @@ defineEmits(["close"]);
 <style scoped>
 .panel {
   position: absolute;
-  width: 80%;
   top: 64px;
   right: 0;
   z-index: 1;
+  height: calc(100% - 64px);
+  border-radius: 0 0 36px 36px;
+  opacity: 0.95;
 }
+
 </style>

src/pages/BookDetails.vue

@@ -8,16 +8,21 @@ import {storeToRefs} from "pinia";
 
 const router = useRouter();
 
-watch(() => router.currentRoute, () => {
-  console.log("watch", router.currentRoute.value.params.id)
+watch(() => router.currentRoute.value.params.id, () => {
   bookStore.loadBook(router.currentRoute.value.params.id as string)
+  shouldShowReco.value = false;
 },)
 
 const bookStore = useBookStore();
 const {book, isLoading} = storeToRefs(bookStore)
 
 onMounted(() => {
-  bookStore.loadBook(router.currentRoute.value.params.id as string);
+  const bookId = router.currentRoute.value.params.id;
+  if(!bookId) {
+    router.push({name: "search"})
+  } else {
+    bookStore.loadBook(bookId as string)
+  }
 })
 
 const shouldShowReco = ref(false);
@@ -116,7 +121,7 @@ const shouldShowReco = ref(false);
   >
     <v-slide-y-reverse-transition v-if="!isLoading">
       <v-card v-show="shouldShowReco">
-        <Suggestion :book="book!"/>
+        <Suggestion v-if="book" :book="book!"/>
       </v-card>
     </v-slide-y-reverse-transition>
     <v-btn
@@ -143,14 +148,6 @@ const shouldShowReco = ref(false);
   margin-left: calc((100% - 300px) / 2);
 }
 
-.recommandations {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  left: 0
-
-}
-
 section {
   width: 100%;
   display: flex;

src/router/index.ts

@@ -20,8 +20,11 @@ const router = createRouter({
       path: "/book/:id",
       name: "book",
       component: BookDetails
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      redirect: {name: 'search'}
     }
-
   ],
 })
 

src/services/stores/bookStore.ts

@@ -12,7 +12,6 @@ export const useBookStore = defineStore('book', () => {
     isLoading.value = true;
     return getBookById(id)
       .then(result => {
-        console.log("get book")
         book.value = result
       })
       .finally(() => {