Moved home page to "home", splited stores.

Author: anotherKyleFrom1994

src/components/activity/feed/Feed.ts

@@ -0,0 +1,28 @@
+import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
+import { namespace } from 'vuex-class';
+import FeedCard from '@/components/activity/feed_card/FeedCard.vue';
+import { IArticle } from '@/data/articles';
+
+// Utilities
+@Component({ components: { FeedCard } })
+export default class Feed extends Vue {
+  private layout: number[] = [2, 2, 2, 2, 2, 2, 2];
+  private page: number = 1;
+
+  @namespace('activity').State('articles') articles!: IArticle[];
+
+  get pages() {
+    return Math.ceil(this.articles.length / 11);
+  }
+
+  get paginatedArticles() {
+    const start = (this.page - 1) * 4;
+    const stop = this.page * 4;
+
+    return this.articles.slice(start, stop);
+  }
+
+  @Watch('page') onPageChanged(value: number, oldValue: number) {
+    window.scrollTo(0, 0);
+  }
+}

src/components/activity/feed/Feed.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-container class="grid-list-xl">
+    <v-row class="wrap"
+           dense>
+      <v-col sm="6">
+        <v-row dense>
+          <feed-card :key="paginatedArticles[0].title"
+                     :size="1"
+                     :height="'100%'"
+                     :value="paginatedArticles[0]">
+          </feed-card>
+        </v-row>
+      </v-col>
+      <v-col sm="6">
+        <v-row dense>
+          <feed-card v-for="(article, i) in paginatedArticles"
+                     :key="article.title"
+                     :height="'100%'"
+                     :size="layout[i]"
+                     :value="article">
+
+          </feed-card>
+        </v-row>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script type="ts"
+        src="./Feed.ts" />

src/components/activity/feed_card/FeedCard.scss

@@ -0,0 +1,3 @@
+.v-image__image {
+    transition: .3s linear;
+  }

src/components/activity/feed_card/FeedCard.ts

@@ -0,0 +1,34 @@
+import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
+
+// Utilities
+@Component({})
+export default class FeedCard extends Vue {
+  @Prop({ required: true }) size!: number;
+  @Prop({ default: () => ({}) }) value!: Object;
+  @Prop() maxHeight!: number | string;
+  @Prop() height!: number | string;
+  get colMd() {
+    switch (this.size) {
+      case 1: {
+        return 12;
+      }
+      case 2: {
+        return 6;
+      }
+      case 3: {
+        return 4;
+      }
+      case 4: {
+        return 3;
+      }
+    }
+  }
+
+  public get cardHeight() {
+    return this.height === undefined ? undefined : this.height;
+  }
+
+  public get cardMaxHeight() {
+    return this.maxHeight === undefined ? undefined : this.maxHeight;
+  }
+};

src/components/activity/feed_card/FeedCard.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-col sm="12"
+         :md="colMd">
+    <base-card class="d-flex mx-auto"
+               :height="height"
+               :max-height="maxHeight"
+               href="#!">
+      <v-img :src="require(`@/assets/articles/${value.hero}`)"
+             class="lighten-2"
+             aspect-ratio="1.3333"
+             gradient="rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)">
+      </v-img>
+    </base-card>
+  </v-col>
+</template>
+
+<script lang="ts"
+        src="./FeedCard.ts" />
+
+<style lang="scss"
+       src="./FeedCard.scss"
+       scoped />

src/components/activity/sponsor/Sponsor.ts

@@ -0,0 +1,6 @@
+import { Vue, Component } from 'vue-property-decorator';
+
+@Component({})
+export default class Sponsor extends Vue {
+
+}

src/components/activity/sponsor/Sponsor.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-col>
+
+    111111111111
+  </v-col>
+</template>
+
+<script lang="ts"
+        src="./Sponsor.ts" />

src/components/home/feed_card/FeedCard.scss

@@ -0,0 +1,3 @@
+  .v-image__image {
+    transition: .3s linear;
+  }

src/components/home/feed_card/FeedCard.ts

@@ -7,15 +7,17 @@ export default class FeedCard extends Vue {
   @Prop({ default: () => ({}) }) value!: Object;
 
   get colMd() {
-    return this.analyzeColMd();
-  }
-
-  private analyzeColMd() {
-    if (this.size === 2) {
-      return 6;
-    }
-    if (this.size === 3) {
-      return 4;
+    switch (this.size) {
+      case 1: {
+        return 12;
+      }
+      case 2: {
+        return 6;
+      }
+      case 3: {
+        return 4;
+      }
     }
   }
+
 };

src/components/home/feed_card/FeedCard.vue

@@ -41,11 +41,8 @@
   </v-col>
 </template>
 
-<style scoped>
-  .v-image__image {
-    transition: .3s linear;
-  }
-</style>
-
 <script lang="ts"
         src="./FeedCard.ts" />
+
+<style lang="scss"
+       src="./FeedCard.scss" />