時間割がない場合の表示を調整

Author: kaizumaki

src/layouts/classes.vue

@@ -18,7 +18,7 @@
       </template>
     </v-app-bar>
     <v-content class="content">
-      <v-container class="px-4 py-8">
+      <v-container class="classes-container px-4 py-8">
         <nuxt />
       </v-container>
     </v-content>
@@ -90,4 +90,7 @@ export default Vue.extend({
   max-width: 640px;
   height: 40px;
 }
+.classes-container {
+  height: 100%;
+}
 </style>

src/pages/classes/index.vue

@@ -3,16 +3,16 @@
     <div v-if="classData.getLessonsByDisplayDate.length">
       <period-card :class-data="classData" />
     </div>
-    <v-row v-else-if="today" class="DataBlock">
-      <h1 style="color: white; width: 100vw; text-align: center;">
+    <div v-else-if="today" class="Classes-Outer">
+      <h1 class="Classes-Title">
         今日の時間割はまだ届いていないみたいです
       </h1>
-    </v-row>
-    <v-row v-else class="DataBlock">
-      <h1 style="color: white; width: 100vw; text-align: center;">
+    </div>
+    <div v-else class="Classes-Outer">
+      <h1 class="Classes-Title">
         {{ dateTitle }} の時間割はまだ届いていないみたいです
       </h1>
-    </v-row>
+    </div>
   </div>
 </template>
 
@@ -55,14 +55,19 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .MainPage {
-  .Logo {
-    text-align: center;
-  }
-  .DataBlock {
-    margin: 0 -12px;
-    .studycard {
-      margin-bottom: 20px;
-    }
-  }
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.Classes-Outer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 0 auto;
+}
+.Classes-Title {
+  font-size: 21px;
+  font-weight: normal;
+  color: $color-white;
 }
 </style>