Merge pull request #200 from Sun-Mountain/187-design-make-nav-and-foo…

…ter-responsive 187 design make nav and footer responsive
Sun-Mountain · Jun 5, 2023 · 5da9566 · 5da9566
2 parents 1d356a0 + 617caba
commit 5da9566
Show file tree

Hide file tree

Showing 14 changed files with 138 additions and 61 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,6 +18,7 @@
     "vee-validate": "^4.8.6",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0",
+    "vue3-mq": "^3.1.3",
     "vuetify": "^3.0.0",
     "webfontloader": "^1.0.0",
     "yup": "^1.1.1"

diff --git a/frontend/src/assets/stylesheets/base/0_base.scss b/frontend/src/assets/stylesheets/base/0_base.scss
@@ -44,7 +44,7 @@ main {
 footer {
   display: flex;
   flex: 0 !important;
-  flex-direction: row !important;
+  flex-direction: row;
   justify-content: space-between;
 
   a, a:visited {

diff --git a/frontend/src/assets/stylesheets/base/basics.scss b/frontend/src/assets/stylesheets/base/basics.scss
@@ -7,4 +7,8 @@
 .flex-space-between {
   display: flex;
   justify-content: space-between;
+}
+
+.no-padding {
+  padding: 0;
 }
diff --git a/frontend/src/assets/stylesheets/base/variables.scss b/frontend/src/assets/stylesheets/base/variables.scss
@@ -6,7 +6,8 @@ $main-link-hover: $color-deep-sea;
 $main-nav-bg: $color-medium-sea-green;
 $main-nav-font: $color-cultured;
 $main-nav-font-size: 22px;
-$main-nav-bg-hover: $color-deep-sea;
+$main-nav-bg-hover: $color-white;
+$main-nav-font-hover: $color-deep-sea;
 
 $warning-color: $color-orange-darkened;
 
@@ -28,6 +29,8 @@ $user-stats: $color-info-blue;
 $event-stats: $color-success-green;
 
 // Events
+$date-color: $color-sonic-silver;
+$description-color: $color-cadet-blue-crayola;
 $edit-link-color: $color-info-blue;
 $edit-link-hover: $color-fed-blue;
 

diff --git a/frontend/src/assets/stylesheets/components/0_components.scss b/frontend/src/assets/stylesheets/components/0_components.scss
@@ -2,7 +2,6 @@
 @import "./buttons.scss";
 @import "./cards.scss";
 @import "./events.scss";
-@import "./footer.scss";
 @import "./forms.scss";
 @import "./headers.scss";
 @import "./layouts.scss";

diff --git a/frontend/src/assets/stylesheets/components/events.scss b/frontend/src/assets/stylesheets/components/events.scss
@@ -1,4 +1,13 @@
 .event-container {
+  #event-date {
+    color: $date-color;
+  }
+
+  .no-description {
+    color: $description-color;
+    font-style: italic;
+  }
+
   .event-actions-container {
     display: flex;
     justify-content: space-between;

diff --git a/frontend/src/assets/stylesheets/components/footer.scss b/frontend/src/assets/stylesheets/components/footer.scss
diff --git a/frontend/src/assets/stylesheets/components/navigation.scss b/frontend/src/assets/stylesheets/components/navigation.scss
@@ -1,11 +1,16 @@
 nav {
   background-color: $main-nav-bg;
-  height: 64px;
   width: 100%;
 
   .v-toolbar {
     margin: 0 auto;
   }
+
+  .v-toolbar__content {
+    display: flex;
+    flex-direction: column;
+    height: auto !important;
+  }
 }
 
 #main-navigation {
@@ -16,21 +21,22 @@ nav {
 
   .nav_logo_container {
     display: flex;
-    flex-direction: column;
     justify-content: space-around;
+    width: 100%;
 
     img {
-      margin: 10px 15px 5px 15px;
-      width: 52px;
+      justify-content: space-around;
+      margin: 8px 15px 0px 15px;
+      width: 80px;
       height: auto;
     }
   }
 
   .nav_links_container {
     display: flex;
-    flex-direction: row;
-    height: 64px;
+    flex-direction: column;
     vertical-align: bottom;
+    width: 100%;
 
     a, a:visited {
       color: $color-cultured;
@@ -40,34 +46,30 @@ nav {
       height: 100%;
       margin: 15px 0 0 0;
       padding: 5px 15px;
+      text-align: center;
       text-decoration: none;
     }
 
     a:hover {
       background-color: $main-nav-bg-hover;
-      border-top-left-radius: 15px;
-      border-top-right-radius: 15px;
+      color: $main-nav-font-hover;
     }
 
     button {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 22px;
       font-weight: 700;
       letter-spacing: .25px;
-      margin-top: 18px;
       text-transform: capitalize;
     }
 
     button:hover {
       background-color: $main-nav-bg-hover;
     }
 
-    .router-link-exact-active {
+    a+.router-link-exact-active {
       background-color: $main-nav-bg-hover;
-      border-top-left-radius: 15px;
-      border-top-right-radius: 15px;
-      margin: 8px 0 0 0;
-      padding-top: 5px;
+      color: $main-nav-font-hover;
     }
   }
 }
@@ -127,4 +129,30 @@ nav {
   display: flex;
   flex-direction: row;
   justify-content: right;
+}
+
+@media screen and (min-width: 960px) {
+  nav {
+    .v-toolbar__content {
+      flex-direction: row;
+    }
+  }
+
+  #main-navigation {
+    .nav_links_container {
+      flex-direction: row;
+      justify-content: right;
+    }
+  }
+
+
+  .nav_logo_container {
+    flex-direction: column;
+
+    img {
+      margin: 8px 15px;
+      width: 58px;
+      height: auto;
+    }
+  }
 }
diff --git a/frontend/src/components/MainNav.vue b/frontend/src/components/MainNav.vue
@@ -1,54 +1,62 @@
 <template>
   <nav>
     <v-app-bar
-      :elevation="0"
-      id="main-navigation"
-      style="position:relative"
+    :elevation="0"
+    id="main-navigation"
+    style="position:relative"
     >
       <div class="nav_logo_container">
         <router-link to="/">
-          <img src="@/assets/images/lettuce_nav_logo.png" class="logo" />
+          <img
+            src="@/assets/images/lettuce_nav_logo.png"
+            class="logo"
+          />
         </router-link>
       </div>
-      <v-spacer />
-      <div class="nav_links_container">
-        <router-link
+      <v-spacer v-show="mq.mdPlus" />
+      <v-btn
+        v-show="mq.smMinus"
+        :icon="showNav ? 'mdi:mdi-chevron-up-circle' : 'mdi:mdi-chevron-down-circle'"
+        @click="showNav = !showNav"
+      ></v-btn>
+      <v-expand-transition>
+        <div class="nav_links_container" v-show="mq.mdPlus || showNav">
+          <router-link
           v-for="link in globalLinks"
           v-bind:key="link.name"
           v-bind:to="link.path"
-        >
+          >
           {{ link.name }}
-        </router-link>
-        <router-link
-          v-for="link in loggedInLinks"
-          v-bind:key="link.name"
-          v-bind:to="link.path"
-          v-show="authStore.currentUser"
-        >
-          {{ link.name }}
-        </router-link>
-        <router-link
-          v-for="link in publicLinks"
-          v-bind:key="link.name"
-          v-bind:to="link.path"
-          v-show="!authStore.currentUser"
-        >
-          {{ link.name }}
-        </router-link>
-        <v-btn
-          @click="authStore.logout()"
-          v-show="authStore.currentUser"
-        >
-          Logout
-        </v-btn>
-      </div>
+          </router-link>
+          <router-link
+            v-for="link in loggedInLinks"
+            v-bind:key="link.name"
+            v-bind:to="link.path"
+            v-show="authStore.currentUser"
+          >
+            {{ link.name }}
+          </router-link>
+          <router-link
+            v-for="link in publicLinks"
+            v-bind:key="link.name"
+            v-bind:to="link.path"
+            v-show="!authStore.currentUser"
+          >
+            {{ link.name }}
+          </router-link>
+        </div>
+      </v-expand-transition>
     </v-app-bar>
   </nav>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import { globalLinks, loggedInLinks, publicLinks } from '@/assets/json';
 import { useAuthStore } from '@/store';
+import { useMq } from "vue3-mq";
 
+const mq = useMq();
 const authStore = useAuthStore();
+const showNav = ref(false)
 </script>
diff --git a/frontend/src/plugins/index.ts b/frontend/src/plugins/index.ts
@@ -12,6 +12,8 @@ import router from '@/router'
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css'
 
+import { Vue3Mq } from "vue3-mq";
+
 // Types
 import type { App } from 'vue'
 
@@ -21,5 +23,13 @@ export function registerPlugins (app: App) {
     .component('VueDatePicker', VueDatePicker)
     .use(vuetify)
     .use(router)
+    .use(Vue3Mq, {
+      preset: 'vuetify'
+      // xs	0
+      // sm	600
+      // md	960
+      // lg	1264
+      // xl	1904
+    })
     .use(createPinia())
 }
diff --git a/frontend/src/views/account/Profile.vue b/frontend/src/views/account/Profile.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>Welcome, {{ fullname }}</h2>
+    <h2>Welcome, {{ fullName }}</h2>
     <div v-show="currentUser.admin" className="role-container">
       <v-icon size="20px" color="info" icon="mdi:mdi-star-circle" /> Admin
     </div>
@@ -9,6 +9,11 @@
       <router-link :to="{ name: 'accountEdit' }">
         Edit
       </router-link>
+      <div>
+        <v-btn @click="authStore.logout()">
+          Logout
+        </v-btn>
+      </div>
     </div>
   </div>
 </template>
@@ -19,5 +24,5 @@ import { userFullName } from '@/helpers';
 const authStore = useAuthStore();
 const currentUser = authStore.currentUser;
 
-const fullname = userFullName(currentUser.first_name, currentUser.last_name);
+const fullName = userFullName(currentUser.first_name, currentUser.last_name);
 </script>
diff --git a/frontend/src/views/events/StagedEvent.vue b/frontend/src/views/events/StagedEvent.vue
@@ -1,6 +1,9 @@
 <template>
   <v-container class="event-container">
     <h2>{{ stagedEvent.event_title }}</h2>
+    <div id="event-date">
+      {{ stagedEvent.start_date }} {{ stagedEvent.end_date ? `- ${stagedEvent.end_date}` : null }}
+    </div>
     <div className="event-actions-container" v-show="stagedEvent.user_id === currentUser.id">
       <router-link className="edit-link" :to="editLink">
         <v-icon size="16px" color="info" icon="mdi:mdi-square-edit-outline" /> Edit
@@ -13,7 +16,13 @@
         Cancel Event
       </v-btn>
     </div>
-    {{ stagedEvent}}
+    <h3>About</h3>
+    <div id="description-container" :class="{ 'no-description': !stagedEvent.description }">
+      {{ stagedEvent.description ?
+        stagedEvent.description :
+        'No description has been given for the event.'
+      }}
+    </div>
   </v-container>
 </template>
 

diff --git a/frontend/src/views/website/About.vue b/frontend/src/views/website/About.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-container>
-    <v-container>
+  <v-container class="no-padding">
+    <div>
       <h1>Welcome to the Lettuce Meet App alpha!</h1>
         <p>
           Lettuce Meet App started as a joke in 2019 at a coding bootcamp and evolved into a passion project and professional development exercise. This application is currently in alpha (otherwise known as: not its final form).
@@ -23,13 +23,13 @@
         <p>
           Simply, Lettuce Meet wants its users to be able to create events, invite people (whether or not they're on the application) and allow invitees to respond to the invitation.
         </p>
-    </v-container>
-    <v-container>
+    </div>
+    <div>
       <h3>Recommended Reading:</h3>
       <p>
         <router-link to="/faq">Frequently Asked Questions</router-link>
       </p>
-    </v-container>
+    </div>
     <BackToHome />
   </v-container>
 </template>