Merge pull request #994 from AlisProject/ALIS-5109

ALIS-5109: Update top notices and game menu.
AlisProject · Mar 16, 2020 · c83ddd7 · c83ddd7
2 parents 5fda4a1 + 3874929
commit c83ddd7
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 16 deletions.
diff --git a/app/components/organisms/CategoryNotices.vue b/app/components/organisms/CategoryNotices.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="area-category-notices-container js-scrollable">
+    <nuxt-link class="description" to="/ALIS-official/articles/KeO0vXW1opDL">
+      クリスペ <span class="tooltip" />
+    </nuxt-link>
+    <nuxt-link class="link" to="/tag/%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9A">
+      全て
+    </nuxt-link>
+    <nuxt-link
+      class="link"
+      to="/tag/%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9A%EF%BC%9A%E3%83%87%E3%83%83%E3%82%AD%E7%B4%B9%E4%BB%8B"
+    >
+      デッキ紹介
+    </nuxt-link>
+    <nuxt-link
+      class="link"
+      to="/tag/%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9A%EF%BC%9A%E3%82%AB%E3%83%BC%E3%83%89%E8%A9%95%E4%BE%A1"
+    >
+      カード評価
+    </nuxt-link>
+    <nuxt-link
+      class="link"
+      to="/tag/%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9A%EF%BC%9A%E5%88%9D%E5%BF%83%E8%80%85"
+    >
+      初心者
+    </nuxt-link>
+    <nuxt-link
+      class="link"
+      to="/tag/%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%9A%EF%BC%9A%E3%81%9D%E3%81%AE%E4%BB%96"
+    >
+      その他
+    </nuxt-link>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.area-category-notices-container {
+  grid-area: notices;
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  padding-top: 18px;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.description {
+  color: #6e6e6e;
+  font-size: 16px;
+  font-weight: bold;
+  text-decoration: none;
+  margin-right: 20px;
+  height: 16px;
+  white-space: nowrap;
+}
+
+.tooltip {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  background: #6e6e6e;
+  border-radius: 100%;
+  position: relative;
+  margin-top: -3px;
+
+  &::before {
+    position: absolute;
+    display: inline-block;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.6);
+    content: '?';
+    color: #fff;
+    font-size: 100%;
+    font-weight: bold;
+  }
+}
+
+.link {
+  border-bottom: solid 1px transparent;
+  color: #6e6e6e;
+  font-size: 16px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 400ms ease;
+  height: 16px;
+  margin-right: 20px;
+  white-space: nowrap;
+
+  &:hover {
+    border-bottom: solid 1px #6e6e6e;
+  }
+}
+
+@media screen and (max-width: 920px) {
+  .description {
+    margin: 0 20px 0 0;
+  }
+}
+
+@media screen and (max-width: 550px) {
+  .area-category-notices-container {
+    padding-top: 8px;
+  }
+
+  .description {
+    font-size: 14px;
+  }
+
+  .link {
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/app/components/organisms/TopNotices.vue b/app/components/organisms/TopNotices.vue
@@ -3,14 +3,17 @@
     <nuxt-link class="description" to="/ALIS-official/articles/K8DQAXMojLyN">
       今週のお題 <span class="tooltip" />
     </nuxt-link>
-    <nuxt-link class="link" to="/tag/%E3%83%95%E3%82%A1%E3%83%9F%E3%82%B3%E3%83%B3">
-      ファミコン
+    <nuxt-link
+      class="link"
+      to="/tag/%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%95%E3%82%A7%E3%82%A4%E3%82%AF"
+    >
+      ディープフェイク
     </nuxt-link>
-    <nuxt-link class="link" to="/tag/ALIS%E3%81%A7%E5%86%99%E7%9C%9F">
-      ALISで写真
+    <nuxt-link class="link" to="/tag/DIY">
+      DIY
     </nuxt-link>
-    <nuxt-link class="link" to="/tag/%E3%83%AC%E3%82%B7%E3%83%94">
-      レシピ
+    <nuxt-link class="link" to="/tag/%E6%9C%AC">
+      本
     </nuxt-link>
   </div>
 </template>

diff --git a/app/components/pages/NewArticleList.vue b/app/components/pages/NewArticleList.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="new-article-list-container">
+  <div class="new-article-list-container" :class="{ 'with-notices': isWithNotices }">
     <app-header />
     <default-header-nav />
+    <category-notices v-if="$route.query.topic === 'game'" />
     <article-type-select-nav />
     <article-card-list :articles="newArticles" />
     <the-loader :is-loading="!isLastPage" />
@@ -13,6 +14,7 @@
 import { mapActions, mapGetters } from 'vuex'
 import AppHeader from '../organisms/AppHeader'
 import DefaultHeaderNav from '../molecules/DefaultHeaderNav'
+import CategoryNotices from '../organisms/CategoryNotices'
 import ArticleTypeSelectNav from '../organisms/ArticleTypeSelectNav'
 import ArticleCardList from '../organisms/ArticleCardList'
 import TheLoader from '../atoms/TheLoader'
@@ -23,12 +25,16 @@ export default {
   components: {
     AppHeader,
     DefaultHeaderNav,
+    CategoryNotices,
     ArticleTypeSelectNav,
     ArticleCardList,
     TheLoader,
     AppFooter
   },
   computed: {
+    isWithNotices() {
+      return this.$route.query.topic === 'game'
+    },
     ...mapGetters('article', ['newArticles', 'isLastPage', 'topics']),
     ...mapGetters('user', ['loggedIn', 'currentUser']),
     ...mapGetters('presentation', ['articleListScrollHeight'])
@@ -129,6 +135,19 @@ export default {
   grid-template-rows: 100px auto 84px minmax(0, 1fr) 75px 75px;
   min-height: 100vh;
 }
+.new-article-list-container.with-notices {
+  /* prettier-ignore */
+  grid-template-areas:
+    "app-header              app-header              app-header             "
+    "nav                     nav                     nav                    "
+    "...                     notices                 ...                    "
+    "article-type-select-nav article-type-select-nav article-type-select-nav"
+    "...                     ...                     ...                    "
+    "...                     article-card-list       ...                    "
+    "...                     loader                  ...                    "
+    "app-footer              app-footer              app-footer             ";
+  grid-template-rows: 100px auto 36px 49px 17.5px minmax(0, 1fr) 75px 75px;
+}
 
 .is-fixed-button {
   position: fixed;
@@ -139,14 +158,6 @@ export default {
 @media screen and (max-width: 1296px) {
   .new-article-list-container {
     grid-template-columns: minmax(0, 1fr) 710px minmax(0, 1fr);
-    /* prettier-ignore */
-    grid-template-areas:
-      "app-header              app-header              app-header             "
-      "nav                     nav                     nav                    "
-      "article-type-select-nav article-type-select-nav article-type-select-nav"
-      "...                     article-card-list       ...                    "
-      "...                     loader                  ...                    "
-      "app-footer              app-footer              app-footer             ";
   }
 }
 
@@ -161,6 +172,9 @@ export default {
     grid-template-rows: 66px minmax(62px, min-content) 60px minmax(0, 1fr) 75px min-content;
     grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
   }
+  .new-article-list-container.with-notices {
+    grid-template-rows: 66px minmax(62px, min-content) 36px 30px 20px minmax(0, 1fr) 75px min-content;
+  }
 }
 
 @media screen and (max-width: 370px) {

diff --git a/app/components/pages/PopularArticleList.vue b/app/components/pages/PopularArticleList.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="popular-article-list-container">
+  <div class="popular-article-list-container" :class="{ 'with-notices': isWithNotices }">
     <app-header />
     <default-header-nav />
+    <category-notices v-if="$route.query.topic === 'game'" />
     <article-type-select-nav />
     <article-card-list :articles="popularArticles" />
     <the-loader :is-loading="!isLastPage" />
@@ -13,6 +14,7 @@
 import { mapActions, mapGetters } from 'vuex'
 import AppHeader from '../organisms/AppHeader'
 import DefaultHeaderNav from '../molecules/DefaultHeaderNav'
+import CategoryNotices from '../organisms/CategoryNotices'
 import ArticleTypeSelectNav from '../organisms/ArticleTypeSelectNav'
 import ArticleCardList from '../organisms/ArticleCardList'
 import TheLoader from '../atoms/TheLoader'
@@ -23,6 +25,7 @@ export default {
   components: {
     AppHeader,
     DefaultHeaderNav,
+    CategoryNotices,
     ArticleTypeSelectNav,
     ArticleCardList,
     TheLoader,
@@ -35,6 +38,9 @@ export default {
     }
   },
   computed: {
+    isWithNotices() {
+      return this.$route.query.topic === 'game'
+    },
     ...mapGetters('article', ['popularArticles', 'isLastPage', 'topics']),
     ...mapGetters('user', ['loggedIn', 'currentUser']),
     ...mapGetters('presentation', ['articleListScrollHeight'])
@@ -130,6 +136,20 @@ export default {
   min-height: 100vh;
 }
 
+.popular-article-list-container.with-notices {
+  /* prettier-ignore */
+  grid-template-areas:
+    "app-header              app-header              app-header             "
+    "nav                     nav                     nav                    "
+    "...                     notices                 ...                    "
+    "article-type-select-nav article-type-select-nav article-type-select-nav"
+    "...                     ...                     ...                    "
+    "...                     article-card-list       ...                    "
+    "...                     loader                  ...                    "
+    "app-footer              app-footer              app-footer             ";
+  grid-template-rows: 100px auto 36px 49px 17.5px minmax(0, 1fr) 75px 75px;
+}
+
 .is-fixed-button {
   position: fixed;
   right: 20px;
@@ -161,6 +181,9 @@ export default {
     grid-template-rows: 66px minmax(62px, min-content) 60px minmax(0, 1fr) 75px min-content;
     grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
   }
+  .popular-article-list-container.with-notices {
+    grid-template-rows: 66px minmax(62px, min-content) 36px 30px 20px minmax(0, 1fr) 75px min-content;
+  }
 }
 
 @media screen and (max-width: 370px) {