From 5980816d813c8ff4fc6c06a7e78ef8d910348183 Mon Sep 17 00:00:00 2001 From: Alessio Comi Date: Fri, 19 Apr 2024 15:41:51 +0200 Subject: [PATCH] refont of the style to fix the futter issue and redo of some view to made it more fluid on resize and on mobile --- frontend/index.html | 6 +++- frontend/src/assets/main.css | 12 ++++++++ frontend/src/components/Footer.vue | 6 ++-- frontend/src/components/Header.vue | 10 +++---- frontend/src/router/index.js | 5 ---- frontend/src/views/AddQuestionView.vue | 22 +-------------- .../src/views/Authentication/LoginView.vue | 21 +------------- .../src/views/Authentication/RegisterView.vue | 20 +------------ frontend/src/views/CategoriesView.vue | 28 +++++++++++++------ frontend/src/views/NotFoundView.vue | 1 - frontend/src/views/QuizView.vue | 15 ++++++---- 11 files changed, 56 insertions(+), 90 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 275a77d..6fd91f0 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -12,7 +12,11 @@ -
+
+
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index d0e340a..4d1acc5 100644 --- 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%; + } } \ No newline at end of file diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue index 3dcdfc1..bc29bc4 100644 --- a/frontend/src/components/Footer.vue +++ b/frontend/src/components/Footer.vue @@ -9,10 +9,10 @@ diff --git a/frontend/src/views/Authentication/LoginView.vue b/frontend/src/views/Authentication/LoginView.vue index 0330c43..1f68ff6 100644 --- a/frontend/src/views/Authentication/LoginView.vue +++ b/frontend/src/views/Authentication/LoginView.vue @@ -38,7 +38,7 @@ const login = async () => { diff --git a/frontend/src/views/Authentication/RegisterView.vue b/frontend/src/views/Authentication/RegisterView.vue index 528cb46..b1c6f54 100644 --- a/frontend/src/views/Authentication/RegisterView.vue +++ b/frontend/src/views/Authentication/RegisterView.vue @@ -40,7 +40,7 @@ const register = async () => { diff --git a/frontend/src/views/CategoriesView.vue b/frontend/src/views/CategoriesView.vue index 6b69aa5..a7bf875 100644 --- a/frontend/src/views/CategoriesView.vue +++ b/frontend/src/views/CategoriesView.vue @@ -16,10 +16,11 @@ onMounted(async () => { diff --git a/frontend/src/views/NotFoundView.vue b/frontend/src/views/NotFoundView.vue index fb513b8..4f59e73 100644 --- 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 index b3b7c53..5568919 100644 --- 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(() => {