Merge pull request #175 from HE-Arc/sp-172-refactor-style

Sp 172 refactor style
HE-Arc · Apr 26, 2024 · 9ced24e · 9ced24e
2 parents 6910181 + c8b6033
commit 9ced24e
Show file tree

Hide file tree

Showing 10 changed files with 186 additions and 198 deletions.
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
@@ -1,13 +1,17 @@
 @import './base.css';
 
-#app {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+main {
+  min-height: 80vh;
 }
 
-a { 
+.center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+a {
   text-decoration: none;
   color: var(--miq-blue);
   transition: 0.4s;
@@ -24,13 +28,11 @@ span,
 h1,
 h2,
 h3,
-h4
-{
+h4 {
   font-family: 'Montserrat', Inter, sans-serif;
 }
 
-.btn
-{
+.btn {
   padding: 1rem 2rem;
   border: none;
   border-radius: 27px;
@@ -42,8 +44,8 @@ h4
   background-color: var(--color-background-btn);
   line-height: 1.2;
 }
-.btn:hover
-{
+
+.btn:hover {
   background-color: var(--color-background-btn-hover);
   text-decoration: none;
 }
@@ -52,47 +54,31 @@ h4
   margin: 1.5rem 0 1rem 0;
 }
 
-.box
-{
+.box {
   padding: 2rem;
   background-color: var(--color-background-soft);
   border-radius: 27px;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
-.title
-{
+.title {
   font-family: 'Montserrat', Inter, sans-serif;
   font-weight: 800;
   color: black;
   font-size: 1.75rem;
   font-style: italic;
 }
 
-.container
-{
+.container {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 1rem;
 }
 
-.form-wrapper {
-    width: 100%;
-    max-width: 100%;
-    padding: 0 1rem;
-    box-sizing: border-box;
-}
-
 .button-wrapper {
-    margin-top: 1.5rem;
-    display: flex;
-    justify-content: center;
-}
-
-.center {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  margin-top: 1.5rem;
+  display: flex;
+  justify-content: center;
 }
 
 @media (hover: hover) {
@@ -101,8 +87,16 @@ h4
   }
 }
 
-@media (min-width: 481px) {
-    .form-wrapper {
-        max-width: 80%;
-    }
+@media (min-width: 481px) {}
+
+@media (min-width: 576px) {
+  .wrapper {
+      max-width: 80%;
+  }
+}
+
+@media (min-width: 1024px) {
+  .wrapper {
+      max-width: 50%;
+  }
 }
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
@@ -9,8 +9,7 @@
 
 <style scoped style="scss">
 footer {
-    height: 5rem;
-    margin-top: 1rem;
+    height: 10vh;
     background-image: url('/background.jpg');
     background-size: cover;
     display: flex;

diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
@@ -10,7 +10,7 @@ const props = defineProps({
 
 <template>
   <header>
-    <div class="wrapper">
+    <div class="header-wrapper container">
       <RouterLink id="main-title" to="/"><IconLogo class="header-logo"/></RouterLink>
       <nav>
         <RouterLink to="/categories" v-show="isConnected">Categories</RouterLink>
@@ -27,17 +27,19 @@ const props = defineProps({
 header {
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
   line-height: 1.5;
+  min-height: 10vh;
 }
 
 .header-logo {
   width: 50px;
   height: 50px;
 }
 
-.wrapper {
+.header-wrapper {
   display: flex;
   flex-direction: column;
   padding: 1.3rem 0;
+  height: 100%;
 }
 
 #main-title {
@@ -58,6 +60,9 @@ nav {
   width: 100%;
   font-size: 12px;
   text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   a {
     display: inline-block;
@@ -77,15 +82,14 @@ nav {
     margin-bottom: 0;
     line-height: 0;
   }
-  .wrapper {
+  .header-wrapper {
     flex-direction: row;
-    max-width: 90vw;
-    margin: 0 auto;
     padding: 1rem;
   }
   header {
     nav
     {
+      justify-content: flex-end;
       margin-top: 0;
       padding: 0;
       text-align: right;

diff --git a/frontend/src/views/AddQuestionView.vue b/frontend/src/views/AddQuestionView.vue
@@ -23,7 +23,7 @@ const submitForm = async () => {
     try {
         if (!question.value.trim() || !correctAnswer.value.trim() || !wrongAnswer1.value.trim()
             || !wrongAnswer2.value.trim() || !wrongAnswer3.value.trim()) {
-            validationMessage.value ='Please fill in all fields. ';
+            validationMessage.value = 'Please fill in all fields. ';
         }
 
         if (question.value.length > 250 || correctAnswer.value.length > 250 || wrongAnswer1.value.length > 250
@@ -45,38 +45,47 @@ const submitForm = async () => {
         validationMessage.value += 'Failed to save question. Please try again.';
         console.error('Error saving question:', error.message);
     }
-  clearForm();
+    clearForm();
 };
 </script>
 
 <template>
-    <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>
-        </div>
-        <form @submit.prevent="submitForm" class="form-wrapper">
-            <div class="box">
-                <CustomInput label="Question" v-model="question" required />
+    <main class="center container">
+        <section class="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>
             </div>
-            <div class="box">
-                <CustomInput label="Correct Answer" v-model="correctAnswer" required />
-                <CustomInput label="Wrong Answer 1" v-model="wrongAnswer1" required />
-                <CustomInput label="Wrong Answer 2" v-model="wrongAnswer2" required />
-                <CustomInput label="Wrong Answer 3" v-model="wrongAnswer3" required />
-                <p class="info" :style="{ color : validationMessage === 'Question saved successfully.' ?
-                    'green' : 'red'}">{{ validationMessage }}</p>
-            </div>
-            <div class="button-wrapper">
-                <button type="submit" class="btn">Submit</button>
-            </div>
-        </form>
-    </section>
+            <form @submit.prevent="submitForm">
+                <div class="box">
+                    <CustomInput label="Question" v-model="question" required />
+                </div>
+                <div class="box">
+                    <CustomInput label="Correct Answer" v-model="correctAnswer" required />
+                    <CustomInput label="Wrong Answer 1" v-model="wrongAnswer1" required />
+                    <CustomInput label="Wrong Answer 2" v-model="wrongAnswer2" required />
+                    <CustomInput label="Wrong Answer 3" v-model="wrongAnswer3" required />
+                    <p v-if="validationMessage" class="info" :style="{
+                color: validationMessage === 'Question saved successfully.' ?
+                    'green' : 'red'
+            }">{{ validationMessage }}</p>
+                </div>
+                <div class="button-wrapper">
+                    <button type="submit" class="btn">Submit</button>
+                </div>
+            </form>
+        </section>
+    </main>
 </template>
 
 <style scoped>
-.title, .info {
+.title
+{
+    margin-top: 1rem;
+}
+
+.title,
+.info {
     text-align: center;
 }
 </style>
-
diff --git a/frontend/src/views/Authentication/LoginView.vue b/frontend/src/views/Authentication/LoginView.vue
@@ -40,14 +40,14 @@ const login = async () => {
 </script>
 
 <template>
-    <div>
-        <section class="center container">
+    <main class="container center">
+        <section class="wrapper">
             <div>
                 <h1 class="title">Login</h1>
                 <p class="info">Log in here</p>
             </div>
             <p class="form-message" :class="{ 'success-message': loginSuccess }">{{ validationMessage }}</p>
-            <form @submit.prevent="login" class="form-wrapper">
+            <form @submit.prevent="login">
                 <div class="box">
                     <CustomInput label="Username" v-model="username" required />
                     <CustomInput label="Password" v-model="password" type="password" required />
@@ -57,23 +57,24 @@ const login = async () => {
                 </div>
             </form>
         </section>
-    </div>
+    </main>
 </template>
 
 <style scoped>
-
-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.title,
+.info {
+    text-align: center;
 }
 
-.title, .info {
-    text-align: center;
+.wrapper
+{
+    min-width: 50%;
 }
 
 .form-message {
     color: red;
+    text-align: center;
+    margin-bottom: .5rem;
 }
 
 .success-message {

diff --git a/frontend/src/views/Authentication/RegisterView.vue b/frontend/src/views/Authentication/RegisterView.vue
@@ -44,14 +44,14 @@ const register = async () => {
 </script>
 
 <template>
-    <div>
-        <section class="center container">
+    <main class="container center">
+        <section class="wrapper">
             <div>
                 <h1 class="title">Register</h1>
                 <p class="info">Create a new account</p>
             </div>
             <p class="form-message" :class="{ 'success-message': registerSuccess }">{{ validationMessage }}</p>
-            <form @submit.prevent="register" class="form-wrapper">
+            <form @submit.prevent="register">
                 <div class="box">
                     <CustomInput label="Username" v-model="username" required />
                     <CustomInput label="Password" v-model="password" type="password" required />
@@ -62,17 +62,23 @@ const register = async () => {
                 </div>
             </form>
         </section>
-    </div>
+    </main>
 </template>
 
 <style scoped>
+.wrapper {
+    min-width: 50%;
+}
 
-.title, .info {
+.title,
+.info {
     text-align: center;
 }
 
 .form-message {
     color: red;
+    text-align: center;
+    margin-bottom: .5rem;
 }
 
 .success-message {