Fixes broken functions and bugs

- Mobile can now click behind movie popup to dismiss
- Link to /activity instead of /profile?activity=true
- Remove fill from icons that color using stroke
- Add border to navigation icons
- Darkmode now toggles correctly when load in light/default mode.
- Only show load previous button when loading is false
- Switched to new SearchPage over Search.vue

src/components/Movie.vue

@@ -449,14 +449,7 @@ header {
       }
     }
   }
-  &__main {
-    min-height: calc(100vh - 250px);
-    @include tablet-min {
-      min-height: 0;
-    }
 
-    height: 100%;
-  }
   &__actions {
     text-align: center;
     width: 100%;

src/components/MoviePopup.vue

@@ -39,8 +39,6 @@ export default {
         params.append("movie", id);
       }
 
-      console.log(params.toString());
-
       window.history.replaceState(
         {},
         "search",

src/components/NavigationHeader.vue

@@ -31,11 +31,7 @@
           </li>
         </router-link>
 
-        <router-link
+        <router-link v-if="userLoggedIn" class="profile" to="/activity">
-          v-if="userLoggedIn"
-          class="profile"
-          to="/profile?activity=true"
-        >
           <li class="navigation-link">
             <icon-activity class="navigation-icon stroke" />
             <span>Activity</span>
@@ -129,6 +125,12 @@ export default {
 <style lang="scss">
 @import "./src/scss/media-queries";
 
+.profile.desktop-only .navigation-link,
+.navigation-link {
+  border-bottom: none;
+  border-left: 1px solid var(--text-color-5);
+}
+
 .navigation-link {
   display: grid;
   place-items: center;
@@ -159,6 +161,7 @@ export default {
       fill: var(--text-color);
 
       &.stroke {
+        fill: none;
         stroke: var(--text-color);
       }
     }
@@ -182,6 +185,7 @@ a {
   transition: inherit;
 
   &.stroke {
+    fill: none;
     stroke: var(--text-color-70);
   }
 }

src/components/ResultsList.vue

@@ -1,10 +1,6 @@
 <template>
   <ul class="results" :class="{ shortList: shortList }">
-    <movies-list-item
+    <movies-list-item v-for="movie in results" :movie="movie" />
-      v-for="movie in results"
-      :movie="movie"
-      :key="movie.title"
-    />
   </ul>
 </template>
 

src/components/ResultsSection.vue

@@ -2,7 +2,10 @@
   <div>
     <list-header :title="prettify(title)" :info="info" :sticky="true" />
 
-    <div v-if="!loadedPages.includes(1)" class="load-button">
+    <div
+      v-if="!loadedPages.includes(1) && loading == false"
+      class="load-button"
+    >
       <seasoned-button @click="loadLess" :fullWidth="true"
         >load previous</seasoned-button
       >

src/components/SearchPage.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <button @click="updateQueryParams">Shows</button>
+    <ResultsSection :title="title" :apiFunction="searchTmdb" />
+  </div>
+</template>
+
+<script>
+import ResultsSection from "./ResultsSection";
+import { searchTmdb } from "@/api";
+
+export default {
+  components: { ResultsSection },
+  data() {
+    return {
+      query: "",
+      page: 1,
+      adult: false,
+      mediaType: null
+    };
+  },
+  watch: {
+    $route(to, from) {
+      console.log("query", to, from);
+      const { query, page, adult, media_type } = this.$route.query;
+      if (query != this.query) console.log("query updated");
+      if (page != this.page) console.log("page updated");
+      if (adult != this.adult) console.log("adult updated");
+      if (media_type != this.media_type) console.log("media_type updated");
+    }
+  },
+  computed: {
+    title() {
+      return `Search results: ${this.query}`;
+    }
+  },
+  methods: {
+    searchTmdb(page = this.page) {
+      return searchTmdb(this.query, page, this.adult, this.mediaType);
+    },
+    updateQueryParams() {
+      console.log("updating");
+      const { query, page, adult, media_type } = this.$route.query;
+      this.media_type = media_type == "show" ? "movie" : "show";
+
+      this.$router.push({
+        path: "search",
+        query: {
+          ...this.$route.query,
+          media_type: this.media_type
+        }
+      });
+    }
+  },
+  created() {
+    const { query, page, adult, media_type } = this.$route.query;
+
+    if (!query) {
+      // abort
+      console.error("abort, no query");
+    }
+    this.query = decodeURIComponent(query);
+    this.page = page || 1;
+    this.adult = adult || this.adult;
+    this.mediaType = media_type || this.mediaType;
+
+    // this.searchTmdb();
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/ui/SeasonedInput.vue

@@ -32,7 +32,7 @@ export default {
   data() {
     return {
       inputValue: this.value || undefined,
-      tempType: undefined
+      tempType: this.type
     };
   },
   methods: {

src/components/ui/darkmodeToggle.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="darkToggle">
-    <span @click="toggleDarkmode()">{{ darkmodeToggleIcon }}</span>
+    <span @click="toggleDarkmode">{{ darkmodeToggleIcon }}</span>
   </div>
 </template>
 
@@ -8,7 +8,7 @@
 export default {
   data() {
     return {
-      darkmode: this.supported
+      darkmode: this.supported()
     };
   },
   methods: {
@@ -18,8 +18,9 @@ export default {
     },
     supported() {
       const computedStyle = window.getComputedStyle(document.body);
-      if (computedStyle["colorScheme"] != null)
+      if (computedStyle["colorScheme"] != null) {
         return computedStyle.colorScheme.includes("dark");
+      }
       return false;
     }
   },
@@ -36,9 +37,8 @@ export default {
   height: 25px;
   width: 25px;
   cursor: pointer;
-  // background-color: red;
   position: fixed;
-  margin-bottom: 10px;
+  margin-bottom: 1.5rem;
   margin-right: 2px;
   bottom: 0;
   right: 0;

src/routes.js

@@ -35,7 +35,7 @@ let routes = [
   {
     name: "search",
     path: "/search",
-    component: resolve => require(["./components/Search.vue"], resolve)
+    component: resolve => require(["./components/SearchPage.vue"], resolve)
   },
   {
     name: "register",