🧹 moved files around

src/App.vue

@@ -10,25 +10,25 @@
     <!-- Display the component assigned to the given route (default: home) -->
     <router-view class="content" :key="$route.fullPath"></router-view>
 
-    <!-- Movie popup that will show above existing rendered content -->
+    <!-- Popup that will show above existing rendered content -->
-    <movie-popup></movie-popup>
+    <popup />
 
     <darkmode-toggle />
   </div>
 </template>
 
 <script>
-import NavigationHeader from "@/components/NavigationHeader";
+import NavigationHeader from "@/components/header/NavigationHeader";
-import NavigationIcons from "@/components/NavigationIcons";
+import NavigationIcons from "@/components/header/NavigationIcons";
-import MoviePopup from "@/components/MoviePopup";
+import Popup from "@/components/Popup";
-import DarkmodeToggle from "@/components/ui/darkmodeToggle";
+import DarkmodeToggle from "@/components/ui/DarkmodeToggle";
 
 export default {
   name: "app",
   components: {
     NavigationHeader,
     NavigationIcons,
-    MoviePopup,
+    Popup,
     DarkmodeToggle
   }
 };

src/components/ListHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header :class="{ sticky: sticky }">
+  <header>
     <h2>{{ prettify }}</h2>
     <h3>{{ subtitle }}</h3>
 
@@ -34,11 +34,6 @@ export default {
       required: false,
       default: null
     },
-    sticky: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
     info: {
       type: [String, Array],
       required: false
@@ -77,15 +72,12 @@ header {
   justify-content: space-between;
   align-items: center;
   padding: 0.5rem 0.75rem;
-
-  &.sticky {
   background-color: $background-color;
 
   position: sticky;
   position: -webkit-sticky;
   top: $header-size;
   z-index: 1;
-  }
 
   h2 {
     font-size: 1.4rem;
@@ -125,6 +117,7 @@ header {
   @include tablet-min {
     padding-left: 1.25rem;
   }
+
   @include desktop-lg-min {
     padding-left: 1.75rem;
   }

src/components/Popup.vue

@@ -11,8 +11,8 @@
 
 <script>
 import { mapActions, mapGetters } from "vuex";
-import Movie from "./movie/Movie";
+import Movie from "@/components/popup/Movie";
-import Person from "./Person";
+import Person from "@/components/popup/Person";
 
 export default {
   components: { Movie, Person },

src/components/ResultsList.vue

@@ -5,7 +5,7 @@
       class="results"
       :class="{ shortList: shortList }"
     >
-      <movies-list-item
+      <results-list-item
         v-for="(movie, index) in results"
         :key="`${movie.type}-${movie.id}-${index}`"
         :movie="movie"
@@ -17,10 +17,10 @@
 </template>
 
 <script>
-import MoviesListItem from "@/components/MoviesListItem";
+import ResultsListItem from "@/components/ResultsListItem";
 
 export default {
-  components: { MoviesListItem },
+  components: { ResultsListItem },
   props: {
     results: {
       type: Array,

src/components/ResultsListItem.vue

@@ -177,67 +177,4 @@ export default {
     font-weight: 400;
   }
 }
-
-.no-image {
-  background-color: var(--text-color);
-  color: var(--background-color);
-  width: 100%;
-  height: 383px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  span {
-    font-size: 1.5rem;
-    width: 70%;
-    text-align: center;
-    text-transform: uppercase;
-  }
-
-  &:hover {
-    transform: scale(1);
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-@import "src/scss/variables";
-
-.progress {
-  position: absolute;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  margin-bottom: 0.8rem;
-
-  > progress {
-    width: 95%;
-  }
-
-  > span {
-    position: absolute;
-    font-size: 1rem;
-    line-height: 1.4rem;
-    color: $white;
-  }
-
-  progress {
-    border-radius: 4px;
-    height: 1.4rem;
-  }
-  progress::-webkit-progress-bar {
-    background-color: rgba($black, 0.55);
-    border-radius: 4px;
-  }
-  progress::-webkit-progress-value {
-    background-color: $green-70;
-    border-radius: 4px;
-  }
-  progress::-moz-progress-bar {
-    /* style rules */
-    background-color: green;
-  }
-}
 </style>

src/components/ResultsSection.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="resultSection" class="resultSection">
-    <list-header v-bind="{ title, info, shortList }" :sticky="true" />
+    <list-header v-bind="{ title, info, shortList }" />
 
     <div
       v-if="!loadedPages.includes(1) && loading == false"

src/components/header/NavigationHeader.vue

@@ -23,14 +23,14 @@
 
 <script>
 import { mapGetters, mapActions } from "vuex";
-import TmdbLogo from "../icons/tmdb-logo";
+import TmdbLogo from "@/icons/tmdb-logo";
-import IconProfile from "../icons/IconProfile";
+import IconProfile from "@/icons/IconProfile";
-import IconProfileLock from "../icons/IconProfileLock";
+import IconProfileLock from "@/icons/IconProfileLock";
-import IconSettings from "../icons/IconSettings";
+import IconSettings from "@/icons/IconSettings";
-import IconActivity from "../icons/IconActivity";
+import IconActivity from "@/icons/IconActivity";
-import SearchInput from "@/components/SearchInput";
+import SearchInput from "@/components/header/SearchInput";
-import NavigationIcons from "src/components/NavigationIcons";
+import NavigationIcons from "src/components/header/NavigationIcons";
-import NavigationIcon from "src/components/ui/NavigationIcon";
+import NavigationIcon from "src/components/header/NavigationIcon";
 import Hamburger from "@/components/ui/Hamburger";
 
 export default {

src/components/header/NavigationIcon.vue

@@ -15,7 +15,7 @@
 import { mapGetters, mapActions } from "vuex";
 
 export default {
-  name: "NavigationIcons",
+  name: "NavigationIcon",
   props: {
     active: {
       type: String,

src/components/header/NavigationIcons.vue

@@ -11,13 +11,13 @@
 </template>
 
 <script>
-import NavigationIcon from "./ui/NavigationIcon";
+import NavigationIcon from "@/components/header/NavigationIcon";
-import IconInbox from "../icons/IconInbox";
+import IconInbox from "@/icons/IconInbox";
-import IconNowPlaying from "../icons/IconNowPlaying";
+import IconNowPlaying from "@/icons/IconNowPlaying";
-import IconPopular from "../icons/IconPopular";
+import IconPopular from "@/icons/IconPopular";
-import IconUpcoming from "../icons/IconUpcoming";
+import IconUpcoming from "@/icons/IconUpcoming";
-import IconSettings from "../icons/IconSettings";
+import IconSettings from "@/icons/IconSettings";
-import IconActivity from "../icons/IconActivity";
+import IconActivity from "@/icons/IconActivity";
 
 export default {
   name: "NavigationIcons",

src/components/header/SearchInput.vue

@@ -44,7 +44,7 @@
 <script>
 import { mapActions, mapGetters } from "vuex";
 import SeasonedButton from "@/components/ui/SeasonedButton";
-import AutocompleteDropdown from "@/components/AutocompleteDropdown";
+import AutocompleteDropdown from "@/components/header/AutocompleteDropdown";
 
 import IconSearch from "src/icons/IconSearch";
 import IconClose from "src/icons/IconClose";

src/components/popup/Movie.vue

@@ -26,35 +26,35 @@
       <div class="movie__wrap movie__wrap--main">
         <!-- SIDEBAR ACTIONS -->
         <div class="movie__actions" v-if="movie">
-          <sidebar-list-element :active="matched" :disabled="true">
+          <action-button :active="matched" :disabled="true">
             <IconThumbsUp v-if="matched" />
             <IconThumbsDown v-else />
             {{ !matched ? "Not yet available" : "Already available 🎉" }}
-          </sidebar-list-element>
+          </action-button>
 
-          <sidebar-list-element @click="sendRequest" :active="requested">
+          <action-button @click="sendRequest" :active="requested">
             <transition name="fade" mode="out-in">
               <div v-if="!requested" key="request"><IconRequest /></div>
               <div v-else key="requested"><IconRequested /></div>
             </transition>
             {{ !requested ? `Request ${this.type}?` : "Already requested" }}
-          </sidebar-list-element>
+          </action-button>
 
-          <sidebar-list-element v-if="plexId && matched" @click="openInPlex">
+          <action-button v-if="plexId && matched" @click="openInPlex">
             <IconPlay />
             Open and watch in plex now!
-          </sidebar-list-element>
+          </action-button>
 
-          <sidebar-list-element
+          <action-button
             v-if="credits && credits.cast && credits.cast.length"
             :active="showCast"
             @click="() => (showCast = !showCast)"
           >
             <IconProfile class="icon" />
             {{ showCast ? "Hide cast" : "Show cast" }}
-          </sidebar-list-element>
+          </action-button>
 
-          <sidebar-list-element
+          <action-button
             v-if="admin === true"
             @click="showTorrents = !showTorrents"
             :active="showTorrents"
@@ -64,12 +64,12 @@
             <span v-if="numberOfTorrentResults" class="meta">{{
               numberOfTorrentResults
             }}</span>
-          </sidebar-list-element>
+          </action-button>
 
-          <sidebar-list-element @click="openTmdb">
+          <action-button @click="openTmdb">
             <IconInfo />
             See more info
-          </sidebar-list-element>
+          </action-button>
         </div>
 
         <!-- Loading placeholder -->
@@ -93,33 +93,29 @@
             <loading-placeholder :count="5" />
           </div>
 
-          <MovieDescription
+          <Description
             v-if="!loading && movie && movie.overview"
             :description="movie.overview"
           />
 
           <div class="movie__details" v-if="movie">
-            <MovieDetail
+            <Detail
               v-if="movie.year"
               title="Release date"
               :detail="movie.year"
             />
-            <MovieDetail
+            <Detail v-if="movie.rating" title="Rating" :detail="movie.rating" />
-              v-if="movie.rating"
+            <Detail
-              title="Rating"
-              :detail="movie.rating"
-            />
-            <MovieDetail
               v-if="movie.type == 'show'"
               title="Seasons"
               :detail="movie.seasons"
             />
-            <MovieDetail
+            <Detail
               v-if="movie.genres && movie.genres.length"
               title="Genres"
               :detail="movie.genres.join(', ')"
             />
-            <MovieDetail
+            <Detail
               v-if="
                 movie.production_status &&
                 movie.production_status !== 'Released'
@@ -127,7 +123,7 @@
               title="Production status"
               :detail="movie.production_status"
             />
-            <MovieDetail
+            <Detail
               v-if="movie.runtime"
               title="Runtime"
               :detail="humanMinutes(movie.runtime)"
@@ -141,9 +137,9 @@
           class="movie__admin"
           v-if="showCast && credits && credits.cast && credits.cast.length"
         >
-          <MovieDetail title="cast">
+          <Detail title="cast">
             <CastList :cast="credits.cast" />
-          </MovieDetail>
+          </Detail>
         </div>
       </div>
 
@@ -172,9 +168,9 @@ import IconBinoculars from "@/icons/IconBinoculars";
 import IconPlay from "@/icons/IconPlay";
 import TorrentList from "@/components/TorrentList";
 import CastList from "@/components/CastList";
-import MovieDetail from "@/components/movie/Detail";
+import Detail from "@/components/popup/Detail";
-import MovieDescription from "@/components/movie/Description";
+import ActionButton from "@/components/popup/ActionButton";
-import SidebarListElement from "@/components/ui/sidebarListElem";
+import Description from "@/components/popup/Description";
 import store from "@/store";
 import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder";
 
@@ -201,8 +197,9 @@ export default {
     }
   },
   components: {
-    MovieDescription,
+    Description,
-    MovieDetail,
+    Detail,
+    ActionButton,
     IconProfile,
     IconThumbsUp,
     IconThumbsDown,
@@ -213,8 +210,7 @@ export default {
     IconPlay,
     TorrentList,
     CastList,
-    LoadingPlaceholder,
+    LoadingPlaceholder
-    SidebarListElement
   },
   directives: { img: img }, // TODO decide to remove or use
   data() {

src/components/popup/Person.vue

@@ -37,33 +37,33 @@
     </div>
 
     <div v-if="person">
-      <MovieDetail v-if="age" title="Age" :detail="age" />
+      <Detail v-if="age" title="Age" :detail="age" />
 
-      <MovieDetail
+      <Detail
         v-if="person"
         title="Born"
         :detail="person.place_of_birth ? person.place_of_birth : '(Not found)'"
       />
 
-      <MovieDetail v-if="person.biography" title="Biography">
+      <Detail v-if="person.biography" title="Biography">
-        <MovieDescription :description="person.biography" />
+        <Description :description="person.biography" />
-      </MovieDetail>
+      </Detail>
 
-      <MovieDetail
+      <Detail
         title="movies"
         :detail="`Credited in ${movieCredits.length} movies`"
         v-if="credits"
       >
         <CastList :cast="movieCredits" />
-      </MovieDetail>
+      </Detail>
 
-      <MovieDetail
+      <Detail
         title="shows"
         :detail="`Credited in ${showCredits.length} shows`"
         v-if="credits"
       >
         <CastList :cast="showCredits" />
-      </MovieDetail>
+      </Detail>
     </div>
   </section>
 </template>
@@ -71,8 +71,8 @@
 <script>
 import img from "@/directives/v-image";
 import CastList from "@/components/CastList";
-import MovieDetail from "@/components/movie/Detail";
+import Detail from "@/components/popup/Detail";
-import MovieDescription from "@/components/movie/Description";
+import Description from "@/components/popup/Description";
 import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder";
 
 import { getPerson, getPersonCredits } from "@/api";
@@ -90,8 +90,8 @@ export default {
     }
   },
   components: {
-    MovieDetail,
+    Detail,
-    MovieDescription,
+    Description,
     CastList,
     LoadingPlaceholder
   },

src/pages/ProfilePage.vue

@@ -39,7 +39,7 @@
 import { mapGetters, mapActions } from "vuex";
 import ListHeader from "@/components/ListHeader";
 import ResultsList from "@/components/ResultsList";
-import Settings from "@/pages/Settings";
+import Settings from "@/pages/SettingsPage";
 import Activity from "@/pages/ActivityPage";
 import SeasonedButton from "@/components/ui/SeasonedButton";
 

src/routes.js

@@ -20,7 +20,7 @@ let routes = [
     name: "profile",
     path: "/profile",
     meta: { requiresAuth: true },
-    component: resolve => require(["./pages/Profile.vue"], resolve)
+    component: resolve => require(["./pages/ProfilePage.vue"], resolve)
   },
   {
     name: "list",
@@ -40,19 +40,19 @@ let routes = [
   {
     name: "register",
     path: "/register",
-    component: resolve => require(["./pages/Register.vue"], resolve)
+    component: resolve => require(["./pages/RegisterPage.vue"], resolve)
   },
   {
     name: "settings",
     path: "/settings",
     meta: { requiresAuth: true },
-    component: resolve => require(["./pages/Settings.vue"], resolve)
+    component: resolve => require(["./pages/SettingsPage.vue"], resolve)
   },
   {
     name: "signin",
     path: "/signin",
     alias: "/login",
-    component: resolve => require(["./pages/Signin.vue"], resolve)
+    component: resolve => require(["./pages/SigninPage.vue"], resolve)
   },
   // {
   //   name: 'user-requests',