Merge pull request #20 from Need2Watch/carousel-redux

Carousel redux

src/App.vue

@@ -19,5 +19,22 @@ export default {
 };
 </script>
 <style>
-@import './assets/styles/N2w.css';
+#app {
+  background: linear-gradient(
+    0deg,
+    rgba(27, 38, 54, 1) 0%,
+    rgba(32, 62, 104, 1) 100%
+  ) !important;
+}
+
+.v-toolbar__content {
+  padding: 0px !important;
+}
+
+.slide {
+  width: 100%;
+  height: 100%;
+  background-position: center;
+  background-size: cover;
+}
 </style>

src/components/moviesView/N2wCarousel.vue

@@ -1,37 +1,36 @@
 <template>
-  <div class="card-carousel-wrapper n2wgray">
-    <div class="card-carousel--nav__left" @click="moveCarousel(-1)" :disabled="atHeadOfList"></div>
-    <div class="card-carousel n2wgray">
-      <div class="card-carousel--overflow-container">
-        <div
-          class="card-carousel-cards"
-          :style="{ transform: 'translateX' + '(' + currentOffset + 'px' + ')' }"
-        >
-          <div class="card-wrapper" :key="item.title" v-for="item in items">
+  <v-row align="center">
+    <v-col class="pa-0 text-center">
+      <v-icon size="60" @click="moveCarousel(-1)" :disabled="atHeadOfList">mdi-chevron-left</v-icon>
+    </v-col>
+    <v-col lg="10" md="9" cols="8">
+      <v-row class="overflow-hidden">
+        <v-col class="d-flex pa-0">
+          <v-row
+            class="pa-0 my-5 mx-10 mx-lg-11"
+            :key="item.title"
+            v-for="item in items"
+            :style="cardStyle"
+          >
             <n2w-cinema-card
               v-bind:id="item.movie_id"
               v-bind:name="item.title"
               v-bind:rating="item.rating"
               v-bind:image="item.poster_url"
               v-bind:overview="item.overview"
             ></n2w-cinema-card>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="card-carousel--nav__right" @click="moveCarousel(1)" :disabled="atEndOfList"></div>
-  </div>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-col>
+    <v-col class="pa-0">
+      <v-icon size="60" @click="moveCarousel(1)" :disabled="atEndOfList">mdi-chevron-right</v-icon>
+    </v-col>
+  </v-row>
 </template>
 <script>
 import N2wCinemaCard from './N2wCinemaCard.vue';
 export default {
-  created() {
-    this.windowResize();
-    window.addEventListener('resize', this.resizeEventHandler);
-  },
-  destroyed() {
-    window.removeEventListener('resize', this.resizeEventHandler);
-  },
   name: 'N2wCarousel',
   components: {
     N2wCinemaCard,
@@ -51,6 +50,12 @@ export default {
     };
   },
   computed: {
+    cardStyle() {
+      return {
+        transform: 'translateX(' + this.currentOffset + 'px)',
+        transition: 'transform 150ms ease-out',
+      };
+    },
     atEndOfList() {
       return (
         this.currentOffset <=
@@ -62,53 +67,13 @@ export default {
     },
   },
   methods: {
-    showModal() {
-      this.isModalVisible = true;
-    },
-    closeModal() {
-      this.isModalVisible = false;
-    },
     moveCarousel(direction) {
-      // Find a more elegant way to express the :style. consider using props to make it truly generic
       if (direction === 1 && !this.atEndOfList) {
         this.currentOffset -= this.paginationFactor;
       } else if (direction === -1 && !this.atHeadOfList) {
         this.currentOffset += this.paginationFactor;
       }
     },
-    resizeEventHandler() {
-      this.windowResize();
-    },
-    windowResize() {
-      var preSize = this.windowSize;
-
-      if (window.matchMedia('(max-width: 554px)').matches) {
-        this.windowSize = 1;
-        return 0;
-      }
-      if (window.matchMedia('(max-width: 816px)').matches) {
-        this.windowSize = 2;
-        return 0;
-      }
-      if (window.matchMedia('(max-width: 1078px)').matches) {
-        this.windowSize = 3;
-        return 0;
-      }
-      if (window.matchMedia('(max-width: 1340px)').matches) {
-        this.windowSize = 4;
-        return 0;
-      }
-      this.windowSize = 5;
-
-      if (preSize < this.windowSize) {
-        for (var i = 0; i < this.windowSize - preSize; i++) {
-          this.moveCarousel(-1);
-        }
-      }
-    },
   },
 };
-</script>
-<style scoped>
-@import '../../assets/styles/N2wCarousel.css';
-</style>
+</script>

src/components/moviesView/N2wCinemaCard.vue

@@ -81,5 +81,32 @@ export default {
 };
 </script>
 <style scoped>
-@import '../../assets/styles/N2wCinemaCard.css';
+.card-cinema-card {
+  width: 182px;
+  height: 273px;
+}
+
+.card-cinema-card:hover {
+  box-shadow: 0 0 15px 0 black, 0 0 2px 0 rgba(40, 44, 53, 0.06);
+}
+
+.card-cinema-card:hover .card-img {
+  transition: opacity 0.3s;
+  opacity: 0.3;
+}
+
+.card-footer {
+  width: 100%;
+  opacity: 0;
+  position: absolute;
+  bottom: 0;
+}
+
+.card-cinema-card:hover .card-footer {
+  opacity: 1;
+}
+
+.card-footer-text {
+  word-break: keep-all;
+}
 </style>

src/views/Movies.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <vs-divider
-      v-if="this.user.userId && this.followingMovies"
+      v-if="this.user.user_id && this.followingMovies"
       position="left-center"
       color="n2wwhite"
       class="text-h3 font-weight-bold"
     >Following</vs-divider>
     <n2w-carousel
-      v-if="this.user.userId && this.followingMovies"
+      v-if="this.user.user_id && this.followingMovies"
       v-bind:items="this.followingMovies"
     ></n2w-carousel>
 
@@ -42,8 +42,8 @@ export default {
   methods: {
     getMoviesOf(movieKind) {
       let route = 'http://127.0.0.1:5000/movies/' + movieKind;
-      if (this.user.userId) {
-        route += '/' + this.user.userId;
+      if (this.user.user_id) {
+        route += '/' + this.user.user_id;
       }
       return axios
         .get(route)
@@ -57,7 +57,7 @@ export default {
   },
   mounted: function () {
     let self = this;
-    if (this.user.userId)
+    if (this.user.user_id)
       this.getMoviesOf('following').then(
         (data) => (self.followingMovies = data),
       );

src/views/SignIn.vue

@@ -38,7 +38,4 @@ export default {
     };
   },
 };
-</script>
-<style scoped>
-@import '../assets/styles/N2w.css';
-</style>
+</script>

src/views/SignUp.vue

@@ -38,7 +38,4 @@ export default {
     };
   },
 };
-</script>
-<style scoped>
-@import '../assets/styles/N2w.css';
-</style>
+</script>