Linting

src/App.vue

@@ -1,5 +1,40 @@
-<style lang="scss" scoped>
+<template>
-@import "./src/scss/media-queries";
+  <div id="app">
+    <!-- Header and hamburger navigation -->
+    <NavigationHeader class="header"></NavigationHeader>
+    <NavigationIcons class="desktop-menu desktop-only" />
+
+    <!-- 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 -->
+    <movie-popup></movie-popup>
+
+    <darkmode-toggle />
+  </div>
+</template>
+
+<script>
+import NavigationHeader from "@/components/NavigationHeader";
+import NavigationIcons from "@/components/NavigationIcons";
+import MoviePopup from "@/components/MoviePopup";
+import DarkmodeToggle from "@/components/ui/darkmodeToggle";
+
+export default {
+  name: "app",
+  components: {
+    NavigationHeader,
+    NavigationIcons,
+    MoviePopup,
+    DarkmodeToggle
+  }
+};
+</script>
+
+<style lang="scss">
+@import "src/scss/main";
+@import "src/scss/media-queries";
+
 #app {
   display: grid;
   // grid-template-columns: 90px 1fr 90px;
@@ -35,41 +70,3 @@
   left: 0;
 }
 </style>
-
-<template>
-  <div id="app">
-    <!-- Header and hamburger navigation -->
-    <NavigationHeader class="header"></NavigationHeader>
-    <NavigationIcons class="desktop-menu desktop-only" />
-
-    <!-- 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 -->
-    <movie-popup></movie-popup>
-
-    <darkmode-toggle />
-  </div>
-</template>
-
-<script>
-import NavigationHeader from "@/components/NavigationHeader";
-import NavigationIcons from "@/components/NavigationIcons";
-import MoviePopup from "@/components/MoviePopup";
-import DarkmodeToggle from "@/components/ui/darkmodeToggle";
-
-export default {
-  name: "app",
-  components: {
-    NavigationHeader,
-    NavigationIcons,
-    MoviePopup,
-    DarkmodeToggle
-  }
-};
-</script>
-
-<style lang="scss">
-@import "./src/scss/main";
-@import "./src/scss/media-queries";
-</style>

src/components/MoviesListItem.vue

@@ -65,7 +65,7 @@ export default {
     };
   },
   computed: {
-    posterAltText: function () {
+    posterAltText: function() {
       const type = this.movie.type || "";
       const title = this.movie.title || this.movie.name;
       return this.movie.poster

src/components/ui/LoadingPlaceholder.vue

@@ -1,7 +1,11 @@
 <template>
   <div>
     <div class="text-input__loading">
-      <div class="text-input__loading--line" :class="lineClass" v-for="_ in Array(count)"></div>
+      <div
+        class="text-input__loading--line"
+        :class="lineClass"
+        v-for="_ in Array(count)"
+      ></div>
     </div>
   </div>
 </template>
@@ -15,10 +19,10 @@ export default {
     },
     lineClass: {
       type: String,
-      default: ''
+      default: ""
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/components/ui/MovieDescription.vue

@@ -52,8 +52,9 @@ export default {
       elementWithoutOverflow.innerText = this.description;
 
       document.body.appendChild(elementWithoutOverflow);
-      const elemWithoutOverflowHeight =
+      const elemWithoutOverflowHeight = elementWithoutOverflow.getBoundingClientRect()[
-        elementWithoutOverflow.getBoundingClientRect()["height"];
+        "height"
+      ];
 
       this.overflow = elemWithoutOverflowHeight > height;
       this.removeElements(document.querySelectorAll(".dummy-non-overflow"));

src/components/ui/SeasonedMessages.vue

@@ -13,7 +13,6 @@
 </template>
 
 <script>
-
 export default {
   props: {
     messages: {
@@ -24,26 +23,25 @@ export default {
   data() {
     return {
       defaultTitles: {
-        error: 'Unexpected error',
+        error: "Unexpected error",
-        warning: 'Something went wrong',
+        warning: "Something went wrong",
-        undefined: 'Something went wrong'
+        undefined: "Something went wrong"
       },
       localMessages: [...this.messages]
-    }
+    };
   },
   computed: {
     reversedMessages() {
-      return [...this.messages].reverse()
+      return [...this.messages].reverse();
     }
   },
   methods: {
     clicked(e) {
-      const removedMessage = [...this.messages].filter(mes => mes !== e)
+      const removedMessage = [...this.messages].filter(mes => mes !== e);
-      this.$emit('update:messages', removedMessage)
+      this.$emit("update:messages", removedMessage);
     }
   }
-}
+};
-
 </script>
 
 <style lang="scss" scoped>
@@ -51,10 +49,10 @@ export default {
 @import "src/scss/media-queries";
 
 .fade-enter-active {
-  transition: opacity .4s;
+  transition: opacity 0.4s;
 }
 .fade-leave-active {
-  transition: opacity .1s;
+  transition: opacity 0.1s;
 }
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
@@ -72,7 +70,6 @@ export default {
   > div {
     margin: 10px 24px;
     width: 100%;
-
   }
 
   .title {
@@ -81,12 +78,12 @@ export default {
     margin: 0;
     font-size: 1.3rem;
     color: $text-color;
-    transition: color .5s ease;
+    transition: color 0.5s ease;
   }
   .message {
     font-weight: 300;
     color: $text-color-70;
-    transition: color .5s ease;
+    transition: color 0.5s ease;
     margin: 0.2rem 0 0.5rem;
   }
 
@@ -101,7 +98,6 @@ export default {
     span {
       font-size: 0.9rem;
     }
-
   }
 
   .pinstripe {
@@ -126,7 +122,7 @@ export default {
     margin-top: 0.5rem;
     margin-right: 0.5rem;
     color: $text-color-70;
-    transition: color .5s ease;
+    transition: color 0.5s ease;
 
     &:hover {
       color: $text-color;
@@ -140,7 +136,7 @@ export default {
       background-color: $color-success-highlight;
     }
   }
-  
+
   &.error {
     background-color: $color-error;
 
@@ -151,11 +147,10 @@ export default {
 
   &.warning {
     background-color: $color-warning;
-    
+
     .pinstripe {
       background-color: $color-warning-highlight;
     }
   }
 }
-
+</style>
-</style>

src/scss/elements.scss

@@ -9,7 +9,7 @@
   border: 1px solid;
   border-radius: 2px;
   display: flex;
-  transition: color .2s ease;
+  transition: color 0.2s ease;
 
   &-item {
     padding: 6px 15px;
@@ -20,12 +20,13 @@
     text-transform: capitalize;
     text-align: center;
     width: 100%;
-    white-space:nowrap;
+    white-space: nowrap;
 
-    &:nth-child(n+2) {
+    &:nth-child(n + 2) {
       border-left: solid 1px;
     }
-    &.active, &:hover {
+    &.active,
+    &:hover {
       border-color: transparent;
       background-color: $teal;
       color: $green;
@@ -38,5 +39,5 @@
   }
 }
 
-// TODO 
+// TODO
-//  - add buttons
+//  - add buttons

src/scss/loading-placeholder.scss

@@ -12,7 +12,7 @@
 .text-input__loading {
   width: 100%;
 
-   &--line {
+  &--line {
     height: 10px;
     margin: 10px;
     animation: pulse 1s infinite ease-in-out;
@@ -52,4 +52,4 @@
       background-color: rgba(165, 165, 165, 0.1);
     }
   }
-}
+}

src/scss/main.scss

@@ -12,6 +12,7 @@
 * {
   box-sizing: border-box;
 }
+
 html {
   height: 100%;
 }