Merge pull request #102 from HE-Arc/sp-95-adding-visual-details-and-a…

…dpating-for-desktop-version

Adding visual details and adpating for desktop version

frontend/src/App.vue

@@ -1,11 +1,13 @@
 <script setup>
 import { RouterView } from 'vue-router'
 import Header from './components/Header.vue'
+import Footer from './components/Footer.vue'
 </script>
 
 <template>
   <Header />
   <RouterView />
+  <Footer />
 </template>
 
 <style scoped>

frontend/src/assets/main.css

@@ -49,6 +49,7 @@ h4
   padding: 2rem;
   background-color: var(--color-background-soft);
   border-radius: 27px;
+  margin-bottom: 2rem;
 }
 
 .title

frontend/src/components/CategorieBanner.vue

@@ -0,0 +1,71 @@
+<script setup>
+import APIClient from '@/api_client';
+import { onMounted, defineProps, ref } from 'vue';
+
+const imageData = ref('');
+const imageLoaded = ref(false);
+
+const props = defineProps({
+    id_category: Number
+})
+
+onMounted(async () => {
+    console.log(props.id_category);
+    imageData.value = await APIClient.getImageCategory(props.id_category);
+    imageLoaded.value = true;
+});
+</script>
+
+<template>
+    <Transition>
+        <div v-if="imageLoaded">
+            <h2 class="title">Categorie</h2>
+            <div class="category-banner" :style="{ backgroundImage: 'url(' + imageData + ')' }">
+                <div class="opacity-filter">
+                    <span class="category-name">Politique</span> <!-- TODO -->
+                </div>
+            </div>
+        </div>
+    </Transition>
+</template>
+
+<style scoped style="scss">
+.v-enter-active,
+.v-leave-active {
+    transition: all 1s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.category-banner {
+    border-radius: 1.5rem;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin-bottom: 1.3rem;
+
+    .opacity-filter {
+        background-color: rgba(0, 0, 0, 0.5);
+        padding: 1rem;
+        border-radius: 1.5rem;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .category-name {
+            font-family: 'Montserrat', Inter, sans-serif;
+            font-weight: 800;
+            color: black;
+            font-size: 1.75rem;
+            font-style: italic;
+            color: white;
+            text-transform: uppercase;
+        }
+    }
+}
+</style>

frontend/src/components/CategoryItem.vue

@@ -3,38 +3,53 @@ import APIClient from '@/api_client';
 import { onMounted, ref } from 'vue';
 
 const imageData = ref('');
+const imageLoaded = ref(false);
 
 const props = defineProps({
     id: Number,
     category: Object
 })
 onMounted(async () => {
     imageData.value = await APIClient.getImageCategory(props.id);
+    imageLoaded.value = true;
 });
 </script>
 
 <template>
-    <RouterLink class="link" :to="{ name: 'Quiz', params: { id_category: id } }">
-        <div class="category-item" :style="{ backgroundImage: 'url(' + imageData + ')' }">
-            <div class="opacity-filter">
-                <h2 class="name">{{ category.category_name }}</h2>
-                <p class="iq">{{ category.user_iq }}</p>
+    <Transition>
+        <RouterLink v-if="imageLoaded" class="link" :to="{ name: 'Quiz', params: { id_category: id } }">
+            <div class="category-item" :style="{ backgroundImage: 'url(' + imageData + ')' }">
+                <div class="opacity-filter">
+                    <h2 class="name">{{ category.category_name }}</h2>
+                    <p class="iq">{{ category.user_iq }}</p>
+                </div>
             </div>
-        </div>
-    </RouterLink>
+        </RouterLink>
+    </Transition>
 </template>
 
 <style scoped style="scss">
-.link
-{
+.v-enter-active,
+.v-leave-active {
+    transition: all 1s ease !important;
+}
+
+.v-enter-from,
+.v-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+
+.link {
     text-decoration: none;
     color: inherit;
-    transition: all 0.3s ease-in-out;
-    &:hover
-    {
+    transition: transform 0.3s ease-in-out;
+
+    &:hover {
         transform: scale(1.05);
     }
 }
+
 .category-item {
     border-radius: 1.5rem;
     background-position: center;

frontend/src/components/Footer.vue

@@ -0,0 +1,25 @@
+<script setup>
+</script>
+
+<template>
+    <footer>
+        <span class="copyright">&copy; 2024 MasterIQ - Maëlys Alessio Simon</span>
+    </footer>
+</template>
+
+<style scoped style="scss">
+footer {
+    min-height: 5rem;
+    background-image: url('/background.jpg');
+    background-size: cover; 
+    margin-top: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .copyright {
+        background-color: white;
+        padding: .3rem;
+        border-radius: 15px; 
+    }
+}
+</style>

frontend/src/views/HomeView.vue

@@ -12,14 +12,18 @@ onMounted(async () => {
 </script>
 
 <template>
-    <main class="container">
-        <p class="info">Maximise your IQs in each question category and climb the overall rankings.</p>
-        <h1 class="title">Categories</h1>
-        <div class="all-categories">
-            <CategoryItem v-for="category, key in categories" :id="parseInt(key)" :category></CategoryItem>
-        </div>
-        <div class="btn-container">
-            <button class="btn">Random question</button>
+    <main class="container col-wrapper">
+        <p class="info">Maximise your IQ by correctly answering the questions in the different categories below and
+            climb the leaderboard to become the best.</p>
+        <div class="empty-space"></div>
+        <div>
+            <h1 class="title">Categories</h1>
+            <div class="all-categories">
+                <CategoryItem v-for="category, key in categories" :id="parseInt(key)" :category></CategoryItem>
+            </div>
+            <div class="btn-container">
+                <button class="btn">Random question</button>
+            </div>
         </div>
         <LeaderBoard />
     </main>
@@ -28,14 +32,22 @@ onMounted(async () => {
 <style scoped>
 .all-categories {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
     row-gap: 1rem;
-    column-gap: 1.5rem;
+    column-gap: 1rem;
 }
 
 .btn-container {
     display: flex;
     justify-content: center;
     padding: 2rem 0;
 }
+
+@media (min-width: 1024px) {
+    .col-wrapper {
+        display: grid;
+        grid-template-columns: .66fr .33fr;
+        column-gap: 2rem;
+    }
+}
 </style>

frontend/src/views/QuizView.vue

@@ -3,6 +3,7 @@ import { useRoute } from 'vue-router';
 import { onMounted, ref } from 'vue';
 import AnswerForm from '@/components/AnswerForm.vue';
 import LeaderBoard from '@/components/LeaderBoard.vue';
+import CategorieBanner from '@/components/CategorieBanner.vue';
 import APIClient from '@/api_client';
 
 // default variables
@@ -27,23 +28,45 @@ onMounted(() => {
 </script>
 
 <template>
-    <section class="quiz container">
+    <section class="quiz container col-wrapper">
         <p class="info">Answer correctly to the question and earn as many IQs as possible!</p>
-        <h1 class="title">Question</h1>
-        <p class="question box">{{ question }}</p>
-        <AnswerForm @new-question="fetchNewQuestion" :hasAskedOptions="hasAskedOptions"/>
-        <LeaderBoard :id_category="Number(id_category)"/>
+        <div class="empty-space"></div>
+        <div>
+            <h1 class="title">Question</h1>
+            <p class="question box">{{ question }}</p>
+            <AnswerForm @new-question="fetchNewQuestion" :hasAskedOptions="hasAskedOptions" />
+        </div>
+        <div>
+            <CategorieBanner class="category-banner" :id_category="Number(id_category)" />
+            <LeaderBoard :id_category="Number(id_category)" />
+        </div>
+
     </section>
 </template>
 
 <style scoped>
 .title {
     text-align: center;
-    margin-bottom: 1rem;
 }
 
 .question {
     text-align: center;
     margin-bottom: 1.3rem;
 }
+
+.category-banner {
+    display: none;
+}
+
+@media (min-width: 1024px) {
+    .col-wrapper {
+        display: grid;
+        grid-template-columns: .66fr .33fr;
+        column-gap: 2rem;
+    }
+
+    .category-banner {
+        display: block;
+    }
+}
 </style>