From ae3b228cf5a04e2fe1004b20c4d6371316a2a6f4 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Tue, 26 Jul 2022 19:51:19 +0200
Subject: [PATCH] Updated app & header grid layout

---
 src/App.vue                          | 59 +++++++++++++++-------------
 src/components/MoviePopup.vue        |  2 +-
 src/components/NavigationHeader.vue  | 14 ++-----
 src/components/NavigationIcons.vue   | 47 ++++++++++------------
 src/components/Person.vue            | 14 +++----
 src/components/ResultsList.vue       |  1 +
 src/components/ui/NavigationIcon.vue | 19 +++------
 src/routes.js                        | 20 +++++-----
 8 files changed, 80 insertions(+), 96 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8680676..29edc6c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,10 @@
   <div id="app">
     <!-- Header and hamburger navigation -->
     <NavigationHeader class="header"></NavigationHeader>
-    <NavigationIcons class="desktop-menu desktop-only" />
+
+    <div class="navigation-icons-gutter desktop-only">
+      <NavigationIcons />
+    </div>
 
     <!-- Display the component assigned to the given route (default: home) -->
     <router-view class="content" :key="$route.fullPath"></router-view>
@@ -37,36 +40,38 @@ export default {
 
 #app {
   display: grid;
-  // grid-template-columns: 90px 1fr 90px;
   grid-template-rows: var(--header-size);
   grid-template-columns: var(--header-size) 1fr;
-}
-
-.header {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  grid-column: 1 / 3;
-  grid-row: 1;
-  z-index: 15;
-}
-
-.content {
-  grid-column: 2 / 3;
-  grid-row: 2;
-  z-index: 5;
 
   @include mobile {
-    grid-column: 1 / 3;
+    grid-template-columns: 1fr;
+  }
+
+  .header {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 15;
+  }
+
+  .navigation-icons-gutter {
+    position: fixed;
+    height: 100vh;
+    margin: 0;
+    top: var(--header-size);
+    width: var(--header-size);
+    background-color: var(--background-color-secondary);
+  }
+
+  .content {
+    display: grid;
+    grid-column: 2 / 3;
+    grid-row: 2;
+    z-index: 5;
+
+    @include mobile {
+      grid-column: 1 / 3;
+    }
   }
 }
-
-.desktop-menu {
-  grid-column: 1 / 2;
-  grid-row: 2;
-  width: var(--header-size);
-  position: fixed;
-  top: var(--header-size);
-  left: 0;
-}
 </style>
diff --git a/src/components/MoviePopup.vue b/src/components/MoviePopup.vue
index ebdcd53..3b182ce 100644
--- a/src/components/MoviePopup.vue
+++ b/src/components/MoviePopup.vue
@@ -11,7 +11,7 @@
 
 <script>
 import { mapActions, mapGetters } from "vuex";
-import Movie from "./Movie";
+import Movie from "./movie/Movie";
 import Person from "./Person";
 
 export default {
diff --git a/src/components/NavigationHeader.vue b/src/components/NavigationHeader.vue
index fe66139..605c02c 100644
--- a/src/components/NavigationHeader.vue
+++ b/src/components/NavigationHeader.vue
@@ -9,11 +9,11 @@
 
     <SearchInput />
 
-    <Hamburger />
+    <Hamburger class="mobile-only" />
 
     <NavigationIcon class="desktop-only" :route="profileRoute" />
 
-    <div class="nav__list mobile-only" :class="{ open: isOpen }">
+    <div class="navigation-icons-grid mobile-only" :class="{ open: isOpen }">
       <NavigationIcons>
         <NavigationIcon :route="profileRoute" />
       </NavigationIcons>
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import storage from "@/storage";
+import { mapGetters, mapActions } from "vuex";
 import TmdbLogo from "../icons/tmdb-logo";
 import IconProfile from "../icons/IconProfile";
 import IconProfileLock from "../icons/IconProfileLock";
@@ -32,7 +32,6 @@ import SearchInput from "@/components/SearchInput";
 import NavigationIcons from "src/components/NavigationIcons";
 import NavigationIcon from "src/components/ui/NavigationIcon";
 import Hamburger from "@/components/ui/Hamburger";
-import { mapGetters, mapActions } from "vuex";
 
 export default {
   components: {
@@ -46,11 +45,6 @@ export default {
     IconActivity,
     Hamburger
   },
-  data() {
-    return {
-      listTypes: storage.homepageLists
-    };
-  },
   computed: {
     ...mapGetters("user", ["loggedIn"]),
     ...mapGetters("hamburger", ["isOpen"]),
@@ -112,7 +106,7 @@ nav {
   }
 }
 
-.nav__list {
+.navigation-icons-grid {
   display: flex;
   flex-wrap: wrap;
   position: fixed;
diff --git a/src/components/NavigationIcons.vue b/src/components/NavigationIcons.vue
index fe5fb51..e91de45 100644
--- a/src/components/NavigationIcons.vue
+++ b/src/components/NavigationIcons.vue
@@ -32,44 +32,25 @@ export default {
   },
   data() {
     return {
-      routes: [],
-      activeRoute: null
-    };
-  },
-  watch: {
-    $route() {
-      this.activeRoute = window.location.pathname;
-    }
-  },
-  created() {
-    this.activeRoute = window.location.pathname;
-    this.routes = this.getAvailableRoutes();
-  },
-  methods: {
-    getAvailableRoutes() {
-      return [
+      routes: [
         {
           title: "Requests",
           route: "/list/requests",
-          apiPath: "/v2/requests",
           icon: IconInbox
         },
         {
           title: "Now Playing",
           route: "/list/now_playing",
-          apiPath: "/v2/movie/now_playing",
           icon: IconNowPlaying
         },
         {
           title: "Popular",
           route: "/list/popular",
-          apiPath: "/v2/movie/popular",
           icon: IconPopular
         },
         {
           title: "Upcoming",
           route: "/list/upcoming",
-          apiPath: "/v2/movie/upcoming",
           icon: IconUpcoming
         },
         {
@@ -84,8 +65,17 @@ export default {
           requiresAuth: true,
           icon: IconSettings
         }
-      ];
+      ],
+      activeRoute: null
+    };
+  },
+  watch: {
+    $route() {
+      this.activeRoute = window.location.pathname;
     }
+  },
+  created() {
+    this.activeRoute = window.location.pathname;
   }
 };
 </script>
@@ -94,17 +84,20 @@ export default {
 @import "src/scss/media-queries";
 
 .navigation-icons {
-  display: inline-flex;
-  flex-direction: column;
-  margin: 0;
+  display: grid;
+  grid-column: 1fr;
   padding-left: 0;
-  height: 100%;
+  margin: 0;
   background-color: var(--background-color-secondary);
   z-index: 15;
+  width: 100%;
+
+  @include desktop {
+    grid-template-rows: var(--header-size);
+  }
 
   @include mobile {
-    flex-wrap: wrap;
-    flex-direction: row;
+    grid-template-columns: 1fr 1fr;
   }
 }
 </style>
diff --git a/src/components/Person.vue b/src/components/Person.vue
index 15d2fad..ce9e765 100644
--- a/src/components/Person.vue
+++ b/src/components/Person.vue
@@ -54,7 +54,7 @@
         :detail="`Credited in ${movieCredits.length} movies`"
         v-if="credits"
       >
-        <Cast :cast="movieCredits" />
+        <CastList :cast="movieCredits" />
       </MovieDetail>
 
       <MovieDetail
@@ -62,7 +62,7 @@
         :detail="`Credited in ${showCredits.length} shows`"
         v-if="credits"
       >
-        <Cast :cast="showCredits" />
+        <CastList :cast="showCredits" />
       </MovieDetail>
     </div>
   </section>
@@ -70,10 +70,10 @@
 
 <script>
 import img from "@/directives/v-image";
-import Cast from "./Cast";
-import MovieDetail from "./ui/MovieDetail";
-import MovieDescription from "./ui/MovieDescription";
-import LoadingPlaceholder from "./ui/LoadingPlaceholder";
+import CastList from "@/components/CastList";
+import MovieDetail from "@/components/movie/Detail";
+import MovieDescription from "@/components/movie/Description";
+import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder";
 
 import { getPerson, getPersonCredits } from "@/api";
 
@@ -92,7 +92,7 @@ export default {
   components: {
     MovieDetail,
     MovieDescription,
-    Cast,
+    CastList,
     LoadingPlaceholder
   },
   directives: { img: img }, // TODO decide to remove or use
diff --git a/src/components/ResultsList.vue b/src/components/ResultsList.vue
index 6277d39..4309bab 100644
--- a/src/components/ResultsList.vue
+++ b/src/components/ResultsList.vue
@@ -67,6 +67,7 @@ export default {
   &.shortList {
     overflow: auto;
     grid-auto-flow: column;
+    max-width: 100vw;
 
     @include noscrollbar;
 
diff --git a/src/components/ui/NavigationIcon.vue b/src/components/ui/NavigationIcon.vue
index 06f1deb..c3e30d7 100644
--- a/src/components/ui/NavigationIcon.vue
+++ b/src/components/ui/NavigationIcon.vue
@@ -2,9 +2,7 @@
   <router-link
     :to="{ path: route.route }"
     :key="route.title"
-    v-if="
-      route.requiresAuth == undefined || (route.requiresAuth && userLoggedIn)
-    "
+    v-if="route.requiresAuth == undefined || (route.requiresAuth && loggedIn)"
   >
     <li class="navigation-link" :class="{ active: route.route == active }">
       <component class="navigation-icon" :is="route.icon"></component>
@@ -14,6 +12,8 @@
 </template>
 
 <script>
+import { mapGetters, mapActions } from "vuex";
+
 export default {
   name: "NavigationIcons",
   props: {
@@ -27,9 +27,7 @@ export default {
     }
   },
   computed: {
-    userLoggedIn() {
-      return localStorage.getItem("token") ? true : false;
-    }
+    ...mapGetters("user", ["loggedIn"])
   }
 };
 </script>
@@ -40,21 +38,14 @@ export default {
 .navigation-link {
   display: grid;
   place-items: center;
-  height: var(--header-size);
+  min-height: var(--header-size);
   list-style: none;
   padding: 1rem 0.15rem;
-  margin: 0;
   text-align: center;
   background-color: var(--background-color-secondary);
   transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
     fill 0.3s ease, background-color 0.5s ease;
 
-  @include mobile {
-    height: 90px;
-    padding: 1rem;
-    width: 50vw;
-  }
-
   &:hover {
     transform: scale(1.05);
   }
diff --git a/src/routes.js b/src/routes.js
index c5df6ea..2c98087 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -8,51 +8,51 @@ let routes = [
   {
     name: "home",
     path: "/",
-    component: resolve => require(["./components/Home.vue"], resolve)
+    component: resolve => require(["./pages/Home.vue"], resolve)
   },
   {
     name: "activity",
     path: "/activity",
     meta: { requiresAuth: true },
-    component: resolve => require(["./components/ActivityPage.vue"], resolve)
+    component: resolve => require(["./pages/ActivityPage.vue"], resolve)
   },
   {
     name: "profile",
     path: "/profile",
     meta: { requiresAuth: true },
-    component: resolve => require(["./components/Profile.vue"], resolve)
+    component: resolve => require(["./pages/Profile.vue"], resolve)
   },
   {
     name: "list",
     path: "/list/requests",
-    component: resolve => require(["./components/RequestPage.vue"], resolve)
+    component: resolve => require(["./pages/RequestPage.vue"], resolve)
   },
   {
     name: "list",
     path: "/list/:name",
-    component: resolve => require(["./components/ListPage.vue"], resolve)
+    component: resolve => require(["./pages/ListPage.vue"], resolve)
   },
   {
     name: "search",
     path: "/search",
-    component: resolve => require(["./components/SearchPage.vue"], resolve)
+    component: resolve => require(["./pages/SearchPage.vue"], resolve)
   },
   {
     name: "register",
     path: "/register",
-    component: resolve => require(["./components/Register.vue"], resolve)
+    component: resolve => require(["./pages/Register.vue"], resolve)
   },
   {
     name: "settings",
     path: "/settings",
     meta: { requiresAuth: true },
-    component: resolve => require(["./components/Settings.vue"], resolve)
+    component: resolve => require(["./pages/Settings.vue"], resolve)
   },
   {
     name: "signin",
     path: "/signin",
     alias: "/login",
-    component: resolve => require(["./components/Signin.vue"], resolve)
+    component: resolve => require(["./pages/Signin.vue"], resolve)
   },
   // {
   //   name: 'user-requests',
@@ -64,7 +64,7 @@ let routes = [
   {
     name: "404",
     path: "/404",
-    component: resolve => require(["./components/404.vue"], resolve)
+    component: resolve => require(["./pages/404.vue"], resolve)
   },
   {
     path: "*",