404 fix

src/App.vue

@@ -108,6 +108,10 @@ export default {
     // Router After Leave
     afterLeave(){
       document.querySelector('body').scrollTop = 0;
+    },
+    // Detect if touch device
+    isTouchDevice() {
+      return 'ontouchstart' in document.documentElement;
     }
   },
   created(){
@@ -117,6 +121,9 @@ export default {
     eventHub.$on('setSearchQuery', this.setSearchQuery);
     eventHub.$on('requestToken', this.requestToken);
     eventHub.$on('setUserStatus', this.setUserStatus);
+    if (this.isTouchDevice()) {
+      document.querySelector('body').classList.add('touch');
+    }
   }
 }
 </script>
@@ -206,7 +213,7 @@ img{
     &-input{
       display: block;
       width: 100%;
-      padding: 15px 20px 15px 50px;
+      padding: 15px 20px 15px 45px;
       outline: none;
       border: 0;
       background-color: transparent;
@@ -275,10 +282,15 @@ img{
   color: $c-dark;
   background: transparent;
   outline: none;
+  transition: background 0.5s ease, color 0.5s ease;
   @include tablet-min{
     font-size: 12px;
     padding: 6px 20px 5px 20px;
   }
+  body:not(.touch) &:hover{
+    background: $c-dark;
+    color: $c-white;
+  }
 }
 
 

src/components/404.vue

@@ -19,16 +19,16 @@ export default {
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
 .not-found{
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
-  height: 100%;
+  height: calc(100vh - 100px);
   background: url('~assets/pulp-fiction.jpg') no-repeat 50% 50%;
   background-size: cover;
   display: flex;
   align-items: center;
   justify-content: center;
+  @include tablet-min{
+    height: calc(100vh - 75px);
+  }
   &:before{
     content: "";
     display: block;

src/components/Movie.vue

@@ -104,7 +104,6 @@ export default {
           document.title = this.movie.title + storage.pageTitlePostfix;
       }.bind(this))
       .catch(function(error) {
-        console.log('error');
         this.$router.push({ name: '404' });
       }.bind(this));
     },

src/components/MoviesList.vue

@@ -97,6 +97,9 @@ export default {
           if(this.type == 'page'){
             document.title = this.pageTitle;
           }
+      }.bind(this))
+      .catch(function(error) {
+        this.$router.push({ name: '404' });
       }.bind(this));
     },
     loadMore(){
@@ -124,7 +127,7 @@ export default {
           this.movies = movies;
           this.pages = pages;
           if(this.currentPage > pages){
-            this.currentPage -= 1; 
+            this.currentPage -= 1;
           }
           this.results = results;
         }.bind(this));