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("/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% - 176px) !important;
+  width: 344px !important;
+}
+
+.v-application {
+  border-radius: 36px;
+}
+
+.recommandations {
+  position: fixed;
+  top: 790px !important;
+  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
@@ -71,8 +77,17 @@ watch(selectedOption, getSimilarBooks)
       center-active
       show-arrows
     >
+      <v-slide-group-item v-if="books.length === 0">
+        <v-card
+          class="ma-2 align-center mx-12"
+          height="118"
+          width="100%"
+          elevation="0"
+        > Aucun livre trouvé ..</v-card>
+      </v-slide-group-item>
       <v-slide-group-item
         v-for="book in books"
+        v-else
         :key="book.id"
         v-slot="{ toggle }"
       >
@@ -92,9 +107,18 @@ watch(selectedOption, getSimilarBooks)
   </v-sheet>
 </template>
 
-<style>
+<style scoped>
 .v-slide-group__prev, .v-slide-group__next {
   flex-basis: 24px;
   min-width: 24px;
 }
+
+
+.recommandation-books {
+  position: fixed;
+  top: 590px !important;
+  width: 342px;
+  left: calc(50% - 174px) !important;
+  border-radius: 0 0 36px 36px  !important;
+}
 </style>

src/components/book/BookCard.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import type {Book} from "@/services/models/book";
+import {useBookStore} from "@/services/stores/bookStore";
 
-defineProps<{ book: Book }>()
+const {book} = defineProps<{ book: Book }>()
+
+const bookStore = useBookStore();
+
+function loadBookDetails() {
+  bookStore.loadBook(book.id);
+}
 </script>
 
 <template>
@@ -11,7 +18,7 @@ defineProps<{ book: Book }>()
     height="120px"
     rounded="lg"
     color="white"
-    :to="`book/${book.id}`"
+    @click="loadBookDetails"
   >
     <div class="d-flex ga-1">
       <v-avatar

src/components/book/BookLightCard.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
 import type {Book} from "@/services/models/book";
+import {useBookStore} from "@/services/stores/bookStore";
 
-defineProps<{ book: Book }>()
+const {book} = defineProps<{ book: Book }>()
 
+const bookStore = useBookStore();
+
+function loadSimilarBook(){
+  bookStore.loadBook(book.id)
+}
 </script>
 
 <template>
@@ -11,7 +17,7 @@ defineProps<{ book: Book }>()
     hover
     rounded="lg"
     color="white"
-    :to="`/book/${book.id}`"
+    @click="loadSimilarBook"
   >
     <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, () => {
+watch(() => router.currentRoute.value.params.id, () => {
-  console.log("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);
@@ -30,7 +35,7 @@ const shouldShowReco = ref(false);
     size="small"
     class="back-button"
     position="absolute"
-    :to="{name: 'search'}"
+    @click="book = undefined"
   />
 
   <div class="book-details mt-4 mb-10 d-flex flex-column align-center">
@@ -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/pages/Search.vue

@@ -6,14 +6,21 @@ import Filters from "@/components/filter/Filters.vue";
 import {useBooksStore} from "@/services/stores/booksStore";
 import {storeToRefs} from "pinia";
 import BookCardSkeleton from "@/components/skeletons/BookCardSkeleton.vue";
+import {useBookStore} from "@/services/stores/bookStore";
+import BookDetails from "@/pages/BookDetails.vue";
 
 const booksStore = useBooksStore();
 const {books, areBooksLoading, noData} = storeToRefs(booksStore)
 onMounted(booksStore.searchBooks);
 
+const {book} = storeToRefs(useBookStore())
 </script>
 
 <template>
+  <template v-if="book">
+    <BookDetails/>
+  </template>
+  <template v-else>
     <Filters/>
     <div class="books">
       <template v-if="areBooksLoading">
@@ -34,6 +41,7 @@ onMounted(booksStore.searchBooks);
       </template>
     </div>
   </template>
+</template>
 
 <style scoped>
 .books {

src/router/index.ts

@@ -7,7 +7,6 @@
 // Composables
 import {createRouter, createWebHistory} from 'vue-router/auto'
 import Search from "@/pages/Search.vue";
-import BookDetails from "@/pages/BookDetails.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -17,11 +16,9 @@ const router = createRouter({
     component: Search
   },
     {
-      path: "/book/:id",
+      path: '/:pathMatch(.*)*',
-      name: "book",
+      redirect: {name: 'search'}
-      component: BookDetails
     }
-
   ],
 })
 

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(() => {