Merge pull request #161 from F88/feature/140-page-lesson

授業 (Lesson) の詳細画面と生徒用日別画面からの遷移の実装

Author: NEKOYASAN

src/components/ContentCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ContentCard-Outer">
-    <v-card class="ContentCard elevation-4">
+    <v-card class="ContentCard elevation-4" @click="toLessonDetail">
       <v-card-actions class="ContentCard-Actions">
         <subject-tag
           class="ContentCard-SubjectTag"
@@ -50,6 +50,7 @@ import Vue from 'vue'
 import SubjectTag from '@/components/SubjectTag.vue'
 import ContentCardEditorButton from '@/components/ContentCardEditorButton.vue'
 import { classData } from '~/types/store/classData'
+import LessonWithId = classData.LessonWithId
 
 export default Vue.extend({
   components: {
@@ -65,6 +66,12 @@ export default Vue.extend({
       type: Boolean,
       default: false
     }
+  },
+  methods: {
+    toLessonDetail() {
+      const lesson = this.lesson as LessonWithId
+      this.$router.push('/lesson/?lessonId=' + lesson.docId)
+    }
   }
 })
 </script>
@@ -73,30 +80,37 @@ export default Vue.extend({
 .ContentCard-Outer {
   display: flex;
 }
+
 .ContentCard-Button-Outer {
   display: flex;
   flex-direction: column;
   flex: 0 1 auto;
   margin-left: 12px;
+
   .ContentCard-Button {
     margin-bottom: 12px;
   }
 }
+
 .ContentCard {
   flex: 1 1 auto;
   color: $color-gray;
   border-radius: 14px !important;
+
   .ContentCard-Actions {
     padding: 16px 16px 0;
   }
+
   .ContentCard-SubjectTag {
     margin-right: 4px;
   }
+
   .ContentCard-Title {
     font-weight: bold;
     font-size: 14px;
     line-height: 1.75;
   }
+
   .ContentCard-Description {
     font-size: 12px;
     color: $color-gray;

src/layouts/lesson.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-app>
+    <v-overlay :value="loading" color="#0071C2" opacity="1" z-index="9999">
+      <div class="loader">
+        Loading
+      </div>
+    </v-overlay>
+    <v-app-bar fixed app class="bar" elevation="0">
+      <HeaderLogo />
+      <v-spacer />
+      <v-btn outlined rounded color="#0071C2" @click="back">
+        <v-icon>mdi-arrow-left</v-icon>
+        もどる
+      </v-btn>
+    </v-app-bar>
+    <v-content class="content">
+      <!--      <v-container class="classes-container px-4 py-8">-->
+      <v-container class="classes-container px-4 py-4">
+        <nuxt />
+      </v-container>
+    </v-content>
+  </v-app>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import HeaderLogo from '@/assets/svgs/header_logo.svg'
+// import { vxm } from '@/store'
+
+type LocalData = {
+  loading: boolean
+  date: Date
+}
+
+export default Vue.extend({
+  components: {
+    HeaderLogo
+  },
+  data(): LocalData {
+    return {
+      loading: true,
+      date: new Date()
+    }
+  },
+  // watch: {
+  //   date(value) {
+  //     vxm.app.setDate(value)
+  //   }
+  // },
+  mounted(): void {
+    this.loading = false
+  },
+  methods: {
+    back() {
+      this.$router.back()
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.v-btn {
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 16px;
+  background-color: $color-white;
+}
+
+.date-icon {
+  margin-right: 15px;
+}
+
+.date {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.bar {
+  background-color: $color-back-gray;
+  text-align: center;
+}
+
+.content {
+  background-color: $color-base-color-01;
+}
+
+.header-calender {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 640px;
+  height: 40px;
+}
+
+.classes-container {
+  height: 100%;
+}
+</style>