From 0554c94946645ebd9ed62475312bbdbf1b4bfd75 Mon Sep 17 00:00:00 2001
From: Laurent <58115082+naaturel@users.noreply.github.com>
Date: Tue, 18 Mar 2025 09:53:07 +0100
Subject: [PATCH] Improved responsive design again

---
 front/src/assets/main.css           |   5 +-
 front/src/components/Button.vue     |   3 +-
 front/src/components/InputField.vue |  16 +++-
 front/src/components/NavLink.vue    |   8 +-
 front/src/layouts/LayoutDefault.vue |   2 +-
 front/src/router/index.ts           |  14 ++--
 front/src/views/CreateView.vue      |   7 ++
 front/src/views/EventView.vue       |  11 +++
 front/src/views/HomeView.vue        |  69 +++++++++--------
 front/src/views/JoinView.vue        | 116 +++++++++++++++++++++++++++-
 10 files changed, 201 insertions(+), 50 deletions(-)
 create mode 100644 front/src/views/EventView.vue

diff --git a/front/src/assets/main.css b/front/src/assets/main.css
index a6006f6..2be1dca 100644
--- a/front/src/assets/main.css
+++ b/front/src/assets/main.css
@@ -21,19 +21,17 @@ body
 {
     display: flex;
     padding: 0 1vw 3vh 1vw;
-    justify-content: center;
-    align-content: center;
     align-items: center;
     height: 100%;
     max-height: 100%;
     width: 80%;
-
 }
 
 @media screen and (min-width: 1001px) {
     .container
     {
         flex-direction: row;
+        justify-content: center;
         gap: 10vw;
     }
 }
@@ -41,6 +39,7 @@ body
 @media screen and (max-width: 1000px) {
     .container {
         flex-direction: column;
+        justify-content: start;
         gap: 50px;
     }
 }
diff --git a/front/src/components/Button.vue b/front/src/components/Button.vue
index f128b81..6815b81 100644
--- a/front/src/components/Button.vue
+++ b/front/src/components/Button.vue
@@ -13,6 +13,8 @@
 <style scoped>
 
 .button {
+  height: 100%;
+  width: 100%;
   color: var(--primary-color);
   text-align: center;
   align-content: center;
@@ -20,7 +22,6 @@
   border-radius: var(--radius);
   background-color: var(--secondary-color);
   word-break: break-word;
-  min-height: 7vh;
 }
 
 .button:hover
diff --git a/front/src/components/InputField.vue b/front/src/components/InputField.vue
index 1ae53ed..9758192 100644
--- a/front/src/components/InputField.vue
+++ b/front/src/components/InputField.vue
@@ -3,11 +3,21 @@
 </script>
 
 <template>
-  <div class="input-field">
-    <input/>
-  </div>
+    <input class="input-field" />
 </template>
 
 <style scoped>
 
+input
+{
+  line-height: 100%;
+  text-align: center;
+  border-radius: var(--radius);
+}
+
+input:focus{
+  transform: scale(1.05);
+
+}
+
 </style>
diff --git a/front/src/components/NavLink.vue b/front/src/components/NavLink.vue
index 515e651..a306255 100644
--- a/front/src/components/NavLink.vue
+++ b/front/src/components/NavLink.vue
@@ -10,9 +10,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <router-link :to=path>
-    <Button :description="description"/>
-  </router-link>
+  <div class="nav-link">
+    <router-link :to=path >
+      <Button :description="description"/>
+    </router-link>
+  </div>
 </template>
 
 <style scoped>
diff --git a/front/src/layouts/LayoutDefault.vue b/front/src/layouts/LayoutDefault.vue
index b3af227..8dba45e 100644
--- a/front/src/layouts/LayoutDefault.vue
+++ b/front/src/layouts/LayoutDefault.vue
@@ -37,7 +37,7 @@ nav {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  min-height: 10vh;
+  min-height: 50px;
   border-bottom: 1px solid;
   border-radius: var(--radius);
   background-color: var(--header-color);
diff --git a/front/src/router/index.ts b/front/src/router/index.ts
index 22319a3..452a990 100644
--- a/front/src/router/index.ts
+++ b/front/src/router/index.ts
@@ -4,16 +4,18 @@ import AboutView from '../views/AboutView.vue'
 import CreateView from "../views/CreateView.vue";
 import JoinView from "../views/JoinView.vue";
 import ErrorView from '../views/ErrorView.vue';
+import EventView from "@/views/EventView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    { path: '/',       name: 'home',   component: HomeView},
-    { path: '/about',  name: 'about',  component: AboutView},
-    { path: '/create', name: 'create', component: CreateView},
-    { path: '/join',   name: 'join',   component: JoinView},
-    { path: '/error',  name: 'error',  component: ErrorView},
-    { path: '/:pathMatch(.*)*',        component: ErrorView }
+    { path: '/',        name: 'home',   component: HomeView},
+    { path: '/about',   name: 'about',  component: AboutView},
+    { path: '/create',  name: 'create', component: CreateView},
+    { path: '/join',    name: 'join',   component: JoinView},
+    { path: '/event',   name: 'event',  component: EventView},
+    { path: '/error',   name: 'error',  component: ErrorView},
+    { path: '/:pathMatch(.*)*',         component: ErrorView }
   ]
 })
 
diff --git a/front/src/views/CreateView.vue b/front/src/views/CreateView.vue
index 4fdda22..a9a5ff6 100644
--- a/front/src/views/CreateView.vue
+++ b/front/src/views/CreateView.vue
@@ -34,6 +34,13 @@ import NavLink from "@/components/NavLink.vue";
   gap: 20px;
 }
 
+.nav-link
+{
+  width: 50%;
+  height: 70px;
+  min-height: 70px;
+}
+
 /* MEDIA QUERIES */
 @media screen and (min-width: 1001px) {
 
diff --git a/front/src/views/EventView.vue b/front/src/views/EventView.vue
new file mode 100644
index 0000000..85af715
--- /dev/null
+++ b/front/src/views/EventView.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
diff --git a/front/src/views/HomeView.vue b/front/src/views/HomeView.vue
index 5a6d3fd..d43b8fd 100644
--- a/front/src/views/HomeView.vue
+++ b/front/src/views/HomeView.vue
@@ -7,7 +7,7 @@ import TextBlock from "@/components/TextBlock.vue";
 <template>
 
   <div class="container">
-    <TextBlock class="introduction">
+    <TextBlock class="text-block">
       <h1>Welcome !</h1>
       <p>
         This website is currently under <span class="colored-text">development</span> and might look ugly as fuck
@@ -21,47 +21,41 @@ import TextBlock from "@/components/TextBlock.vue";
 
       <div class="actions-group">
         <h1>Meet up <span class="colored-text">now</span> !</h1>
-        <NavLink path="/create" description="Create" class="button"></NavLink>
-        <NavLink path="/join" description="Join" class="button"></NavLink>
+        <NavLink path="/create" description="Create"></NavLink>
+        <NavLink path="/join" description="Join"></NavLink>
     </div>
   </div>
 
 </template>
 
-
 <style scoped>
 
-.actions-group {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
+.text-block, .actions-group {
+  min-width: 300px;
+  min-height: 250px;
 }
 
-.introduction p
+.text-block p
 {
   text-align: justify;
 }
 
-.actions-group {
-  flex-direction: column;
-  min-width: 250px;
-}
-
-.actions-group {
-  justify-content: center;
-  gap: 4vh;
-  height: fit-content;
-  border-radius: var(--radius);
-  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0));
-  margin-bottom: 5vh;
-}
-
 .actions-group h1
 {
   margin-top: 0;
 }
 
+.actions-group {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4vh;
+  height: fit-content;
+  border-radius: var(--radius);
+  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0));
+}
+
 .actions-group::before,
 .actions-group::after {
   content: "";
@@ -87,9 +81,9 @@ import TextBlock from "@/components/TextBlock.vue";
   border-top: none;
 }
 
-.button {
-  width: 50%;
-  min-width: 50%;
+.nav-link {
+  height: 70px;
+  min-height: 70px;
 }
 
 /* MEDIA QUERIES */
@@ -99,22 +93,28 @@ import TextBlock from "@/components/TextBlock.vue";
     width: 35%;
   }
 
-  .introduction p
+  .text-block p
   {
     width: 90%;
     margin-bottom: 0;
   }
 
-  .introduction h1
+  .text-block h1
   {
     font-size: 4rem;
     margin: 0 5px 5px 5px;
   }
+
+  .nav-link
+  {
+    width: 50%;
+  }
+
 }
 
 @media screen and (max-width: 1000px) {
 
-  .introduction, .actions-group {
+  .text-block, .actions-group {
     width: 100%;
   }
 
@@ -122,17 +122,22 @@ import TextBlock from "@/components/TextBlock.vue";
     height: 40%;
   }
 
-  .introduction p
+  .text-block p
   {
     width: 95%;
     margin-bottom: 0;
   }
 
-  .introduction h1
+  .text-block h1
   {
     font-size: 2.5rem;
     margin: 0 5px 5px 5px;
   }
+
+  .nav-link
+  {
+    width: 70%;
+  }
 }
 
 </style>
diff --git a/front/src/views/JoinView.vue b/front/src/views/JoinView.vue
index ecf0f69..5dd9b77 100644
--- a/front/src/views/JoinView.vue
+++ b/front/src/views/JoinView.vue
@@ -13,8 +13,9 @@ import InputField from "@/components/InputField.vue";
     </TextBlock>
 
     <div class="actions-group">
+      <h1>Event <span class="colored-text">code</span></h1>
       <InputField/>
-      <Button description="Go for it"></Button>
+      <Button description="Go for it !"/>
     </div>
 
   </div>
@@ -23,4 +24,117 @@ import InputField from "@/components/InputField.vue";
 
 <style scoped>
 
+.text-block, .actions-group {
+  min-width: 300px;
+}
+
+
+.actions-group {
+  min-height: 250px;
+}
+
+.actions-group h1
+{
+  margin-top: 0;
+}
+
+.actions-group {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4vh;
+  height: fit-content;
+  border-radius: var(--radius);
+  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.0));
+}
+
+.actions-group::before,
+.actions-group::after {
+  content: "";
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  border: 4px solid black;
+}
+
+.actions-group::before {
+  top: -20px;
+  left: 0;
+  border-radius: var(--radius);
+  border-right: none;
+  border-bottom: none;
+}
+
+.actions-group::after {
+  bottom: -20px;
+  right: 0;
+  border-radius: var(--radius);
+  border-left: none;
+  border-top: none;
+}
+
+.input-field {
+  letter-spacing: 10px;
+  font-size: calc(0.4 * 75px);
+}
+
+.input-field, .button {
+  height: 75px;
+  min-height: 75px;
+}
+
+/* MEDIA QUERIES */
+@media screen and (min-width: 1001px) {
+
+  .actions-group {
+    width: 35%;
+  }
+
+  .text-block p
+  {
+    width: 90%;
+    margin-bottom: 0;
+  }
+
+  .text-block h1
+  {
+    font-size: 4rem;
+    margin: 0 5px 5px 5px;
+  }
+
+  .button, .input-field
+  {
+    width: 50%;
+  }
+}
+
+@media screen and (max-width: 1000px) {
+
+  .text-block, .actions-group {
+    width: 100%;
+  }
+
+  .actions-group {
+    height: 40%;
+  }
+
+  .text-block p
+  {
+    width: 95%;
+    margin-bottom: 0;
+  }
+
+  .text-block h1
+  {
+    font-size: 2.5rem;
+    margin: 0 5px 5px 5px;
+  }
+
+  .button, .input-field
+  {
+    width: 70%;
+  }
+
+}
 </style>