Move schedule dialog into a separate component

src/js/components/splatoon/ScheduleBox.vue

@@ -24,10 +24,20 @@
             </div>
         </div>
 
-        <ScheduleList :schedules="upcomingSchedules" :now="now" :onlyFirst="true"></ScheduleList>
+        <template v-if="upcomingSchedules && upcomingSchedules[0]">
+            <div class="is-size-5 title-squid font-splatoon1">
+                Next
+            </div>
+
+            <ScheduleRow
+                :schedule="upcomingSchedules[0]"
+                :now="now"
+                :smallSize="true"
+                ></ScheduleRow>
+        </template>
 
         <p class="has-text-centered" style="margin-top: 10px">
-            <button class="button is-translucent is-rounded" @click="isOpen=true">
+            <button class="button is-translucent is-rounded" @click="dialogOpen = true">
                 <span class="icon squid-icon-tilt">
                     <span class="fa squid-squid"></span>
                 </span>
@@ -35,31 +45,29 @@
             </button>
         </p>
 
-        <Modal v-if="isOpen" @close="isOpen = false" class="font-splatoon2">
-            <div class="modal-card schedule-box tilt-left-slight" :class="cssClass">
-                <header class="modal-card-head">
-                    <GameModeHeader :gameMode="gameMode"></GameModeHeader>
-                </header>
-                <section class="modal-card-body">
-                    <ScheduleList :schedules="schedules" :now="now" :onlyFirst="false"></ScheduleList>
-                </section>
-            </div>
-        </Modal>
+        <ScheduleDialog
+            v-if="dialogOpen"
+            :schedules="schedules"
+            :gameMode="gameMode"
+            :cssClass="cssClass"
+            :now="now"
+            @close="dialogOpen = false"
+            ></ScheduleDialog>
     </div>
 </template>
 
 <script>
-import Modal from '@/js/components/Modal.vue';
 import GameModeHeader from './GameModeHeader.vue';
 import Stage from './Stage.vue';
-import ScheduleList from './ScheduleList.vue';
+import ScheduleRow from './ScheduleRow.vue';
+import ScheduleDialog from './ScheduleDialog.vue';
 
 export default {
-    components: { Modal, GameModeHeader, Stage, ScheduleList },
+    components: { GameModeHeader, Stage, ScheduleRow, ScheduleDialog },
     props: ['schedules', 'cssClass', 'festival', 'now'],
     data() {
         return {
-            isOpen: false,
+            dialogOpen: false,
         };
     },
     computed: {

src/js/components/splatoon/ScheduleDialog.vue

@@ -0,0 +1,23 @@
+<template>
+    <Modal @close="$emit('close')" class="font-splatoon2">
+        <div class="modal-card schedule-box tilt-left-slight" :class="cssClass">
+            <header class="modal-card-head">
+                <GameModeHeader :gameMode="gameMode"></GameModeHeader>
+            </header>
+            <section class="modal-card-body">
+                <ScheduleList :schedules="schedules" :now="now"></ScheduleList>
+            </section>
+        </div>
+    </Modal>
+</template>
+
+<script>
+import Modal from '@/js/components/Modal.vue';
+import GameModeHeader from './GameModeHeader.vue';
+import ScheduleList from './ScheduleList.vue';
+
+export default {
+    components: { Modal, GameModeHeader, ScheduleList },
+    props: ['schedules', 'gameMode', 'cssClass', 'now'],
+}
+</script>

src/js/components/splatoon/ScheduleList.vue

@@ -3,19 +3,18 @@
         <div v-if="first">
             <div class="is-size-5 title-squid font-splatoon1">
                 <span v-if="first.start_time <= this.now">Now</span>
-                <span v-else-if="onlyFirst">Next</span>
                 <span v-else>Soon!</span>
             </div>
 
-            <ScheduleRow :schedule="first" :now="now" :smallSize="smallSize"></ScheduleRow>
+            <ScheduleRow :schedule="first" :now="now"></ScheduleRow>
         </div>
-        <template v-if="!onlyFirst">
+        <template>
             <div v-if="second">
                 <div class="is-size-5 title-squid font-splatoon1" style="margin-top: 10px">
                     Next
                 </div>
 
-                <ScheduleRow :schedule="second" :now="now" :smallSize="smallSize"></ScheduleRow>
+                <ScheduleRow :schedule="second" :now="now"></ScheduleRow>
             </div>
 
             <div v-if="others && others.length">
@@ -28,7 +27,6 @@
                     :key="schedule.id"
                     :schedule="schedule"
                     :now="now"
-                    :smallSize="smallSize"
                     ></ScheduleRow>
             </div>
 
@@ -41,16 +39,11 @@ import ScheduleRow from './ScheduleRow.vue';
 
 export default {
     components: { ScheduleRow },
-    props: ['schedules', 'now', 'onlyFirst'],
+    props: ['schedules', 'now'],
     computed: {
         first() { return this.schedules && this.schedules[0]; },
         second() { return this.schedules && this.schedules[1]; },
         others() { return this.schedules && this.schedules.slice(2); },
-        smallSize() {
-            // Use a smaller size on smaller displays when only displaying the first row
-            // (i.e., only when viewing the row on the main page with the three types of battles)
-            return this.onlyFirst;
-        }
     },
 }
 </script>