refont of the style to fix the futter issue and redo of some view to …

…made it more fluid on resize and on mobile
HE-Arc · Apr 19, 2024 · 5980816 · Krucksy · Apr 20, 2024 · Strogator
1 parent 6be747a
commit 5980816
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 90 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -12,7 +12,11 @@
 </head>
 
 <body>
-  <div id="app"></div>
+  <div id="app" style="min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;" >
+  </div>
   <script type="module" src="/src/main.js"></script>
 </body>
 

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
@@ -82,8 +82,20 @@ h4
     justify-content: center;
 }
 
+.center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 @media (hover: hover) {
   a:hover {
     text-decoration: underline;
   }
+}
+
+@media (min-width: 481px) {
+    .form-wrapper {
+        max-width: 80%;
+    }
 }
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
@@ -9,10 +9,10 @@
 
 <style scoped style="scss">
 footer {
-    min-height: 5rem;
-    background-image: url('/background.jpg');
-    background-size: cover; 
+    height: 5rem;
     margin-top: 1rem;
+    background-image: url('/background.jpg');
+    background-size: cover;
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
@@ -29,8 +29,7 @@ header {
   height: 50px;
 }
 
-.wrapper
-{
+.wrapper {
   display: flex;
   flex-direction: column;
   padding: 1.3rem 0;
@@ -67,15 +66,15 @@ nav {
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 481px) {
   #main-title
   {
-    margin-bottom: 0;    
+    margin-bottom: 0;
     line-height: 0;
   }
   .wrapper {
     flex-direction: row;
-    max-width: 1100px;
+    max-width: 90vw;
     margin: 0 auto;
     padding: 1rem;
   }
@@ -91,7 +90,6 @@ nav {
       }
     }
   }
-
   .logo {
     margin: 0 2rem 0 0;
   }

diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
@@ -29,11 +29,6 @@ const router = createRouter({
       name: 'Login',
       component: () => import('../views/Authentication/LoginView.vue')
     },
-    {
-      path: '/logout',
-      name: 'Logout',
-      component: () => import('../views/Authentication/LogoutView.vue')
-    },
     {
       path: '/register',
       name: 'Register',

diff --git a/frontend/src/views/AddQuestionView.vue b/frontend/src/views/AddQuestionView.vue
@@ -50,7 +50,7 @@ const submitForm = async () => {
 </script>
 
 <template>
-    <section class="add-question container form-wrapper">
+    <section class="center container form-wrapper">
         <div>
             <h1 class="title">Add your question</h1>
             <p class="info">Help us become the best quiz game ever by adding your amazing new question!</p>
@@ -75,28 +75,8 @@ const submitForm = async () => {
 </template>
 
 <style scoped>
-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    min-height: 80vh;
-}
-
 .title, .info {
     text-align: center;
 }
-
-@media (min-width: 576px) {
-    .form-wrapper {
-        max-width: 90%;
-    }
-}
-
-@media (min-width: 1024px) {
-    .form-wrapper {
-        max-width: 70%;
-    }
-}
-
 </style>
 
diff --git a/frontend/src/views/Authentication/LoginView.vue b/frontend/src/views/Authentication/LoginView.vue
@@ -38,7 +38,7 @@ const login = async () => {
 
 <template>
     <div>
-        <section class="login-form container">
+        <section class="center container">
             <div>
               <h1 class="title">Login</h1>
               <p class="info">Log in here</p>
@@ -58,30 +58,11 @@ const login = async () => {
 </template>
 
 <style scoped>
-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    min-height: 80vh;
-}
-
 .title, .info {
     text-align: center;
 }
 
 .success-message {
     color: green;
 }
-
-@media (min-width: 576px) {
-    .form-wrapper {
-        max-width: 90%;
-    }
-}
-
-@media (min-width: 1024px) {
-    .form-wrapper {
-        max-width: 70%;
-    }
-}
 </style>
diff --git a/frontend/src/views/Authentication/RegisterView.vue b/frontend/src/views/Authentication/RegisterView.vue
@@ -40,7 +40,7 @@ const register = async () => {
 
 <template>
     <div>
-        <section class="Register-form container">
+        <section class="center container">
             <div>
                 <h1 class="title">Register</h1>
                 <p class="info">Create a new account</p>
@@ -61,12 +61,6 @@ const register = async () => {
 </template>
 
 <style scoped>
-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    min-height: 80vh;
-}
 
 .title, .info {
     text-align: center;
@@ -75,16 +69,4 @@ const register = async () => {
 .success-message {
     color: green;
 }
-
-@media (min-width: 576px) {
-    .form-wrapper {
-        max-width: 90%;
-    }
-}
-
-@media (min-width: 1024px) {
-    .form-wrapper {
-        max-width: 70%;
-    }
-}
 </style>
diff --git a/frontend/src/views/CategoriesView.vue b/frontend/src/views/CategoriesView.vue
@@ -16,10 +16,11 @@ onMounted(async () => {
 </script>
 
 <template>
-    <main class="container col-wrapper">
-        <p class="info">Maximise your IQ by correctly answering the questions in the different categories below and
+    <section class="container">
+      <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>
+    </section>
+    <section class="container col-wrapper">
         <div>
             <h1 class="title">Categories</h1>
             <div class="all-categories">
@@ -30,13 +31,16 @@ onMounted(async () => {
             </div>
         </div>
         <LeaderBoard />
-    </main>
+    </section>
 </template>
 
 <style scoped>
+.info{
+  text-align: center;
+}
 .all-categories {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
     row-gap: 1rem;
     column-gap: 1rem;
 }
@@ -47,11 +51,19 @@ onMounted(async () => {
     padding: 2rem 0;
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 530px) {
+    .col-wrapper {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(230px, 600px));
+        column-gap: 1rem;
+    }
+}
+
+@media (min-width: 800px) {
     .col-wrapper {
         display: grid;
-        grid-template-columns: .66fr .33fr;
-        column-gap: 2rem;
+        grid-template-columns: 10fr 1fr;
+        column-gap: 1rem;
     }
 }
 </style>
diff --git a/frontend/src/views/NotFoundView.vue b/frontend/src/views/NotFoundView.vue
@@ -15,7 +15,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    min-height: 80vh;
 }
 
 .title, .info {

diff --git a/frontend/src/views/QuizView.vue b/frontend/src/views/QuizView.vue
@@ -21,7 +21,7 @@ const fetchNewQuestion = async () => {
     // wait for the question before checking if the user has asked for options
     hasAskedOptions.value = await APIClient.getIfOptionsAsked();
 }
-// Fetch user IQ and add it to the graph 
+// Fetch user IQ and add it to the graph
 const graphComponent = ref(null);
 const fetchUserIQ = async () => {
     const userIq = await APIClient.getUserIQ(id_category);
@@ -36,9 +36,10 @@ onMounted(() => {
 </script>
 
 <template>
+    <section class="container">
+      <p class="info">Answer correctly to the question and earn as many IQs as possible!</p>
+    </section>
     <section class="quiz container col-wrapper">
-        <p class="info">Answer correctly to the question and earn as many IQs as possible!</p>
-        <div class="empty-space"></div>
         <div>
             <h1 class="title">Question</h1>
             <p class="question box">{{ question }}</p>
@@ -50,11 +51,13 @@ onMounted(() => {
             <GraphSection ref="graphComponent" />
             <LeaderBoard :id_category="Number(id_category)" />
         </div>
-
     </section>
 </template>
 
 <style scoped>
+.container{
+  max-width: 1200px;
+}
 .title {
     text-align: center;
 }
@@ -71,8 +74,8 @@ onMounted(() => {
 @media (min-width: 1024px) {
     .col-wrapper {
         display: grid;
-        grid-template-columns: .66fr .33fr;
-        column-gap: 2rem;
+        grid-template-columns: 5fr 1fr;
+        column-gap: 3rem;
     }
 
     .category-banner {