add bootstrap and refactor extract component

src/App.vue

@@ -21,6 +21,8 @@ export default {
 </script>
 
 <style>
+@import "bootstrap";
+
 .nav-top {
   display: block;
   font-size: large;
@@ -34,12 +36,7 @@ export default {
   width: 20px;
 }
 
-ul.route-list {
-  list-style: none;
-  padding: 0;
-}
-
-.list-item, .route-item {
+.list-item {
   border: 1px solid;
   display: block;
   margin: .5rem;

src/components/ScheduleList.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="list">
+    <div class="list-title">{{ $route.params.date }}</div>
+    <div v-for="(el, index) in timeline" :key="index" class="list-item">
+      <time>{{ el.date }} {{ el.time }}</time>
+      <SchedulePlace v-if="el.place" :place="places[el.place]" />
+      <ScheduleRouteList v-if="el.routes" :routes="el.routes" />
+    </div>
+  </div>
+</template>
+
+<script>
+import SchedulePlace from '@/components/SchedulePlace'
+import ScheduleRouteList from '@/components/ScheduleRouteList'
+
+export default {
+  name: 'ScheduleList',
+  components: { ScheduleRouteList, SchedulePlace },
+  props: ['places', 'timeline'],
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/SchedulePlace.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="place">
+    <div v-if="place.name" class="place-name">
+      <div lang="ja">{{ place.name.jp }}</div>
+      <div lang="zh">{{ place.name.tw }}</div>
+      <div lang="en">{{ place.name.en }}</div>
+    </div>
+    <div v-if="place.address" class="place-address">
+      <div class="zipcode">〒{{ place.address.zipcode }}</div>
+      <div lang="ja">{{ place.address.jp }}</div>
+      <div lang="en">{{ place.address.en }}</div>
+    </div>
+    <div v-if="place.tel" class="place-tel">
+      <a :href="'tel:' + place.tel" :title="place.tel">
+        <font-awesome-icon icon="fa-solid fa-phone" />
+        {{ place.tel }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SchedulePlace',
+  props: ['place'],
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/ScheduleRoute.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="list-item route-item small">
+    <time v-if="route.time" class="route-time my-1">{{ route.time }}</time>
+    <div class="d-flex my-1">
+      <font-awesome-icon v-if="route.icon" :icon="route.icon" class="route-icon" />
+      <div class="d-flex flex-grow-1 flex-column">
+        <div v-if="route.from" class="route-from mx-2">出發地：{{ route.from }}</div>
+        <div v-if="route.to" class="route-to mx-2">目的地：{{ route.to }}</div>
+      </div>
+    </div>
+    <div v-if="route.lines" class="route-line-list my-1">
+      <div
+          v-for="(line, index) in route.lines"
+          :key="index"
+          :style="route.color ? ColorUtil.setContrast(route.color) : {}"
+          class="route-line d-inline-block mx-1 px-1"
+      >{{ line }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ColorUtil from '@/utils/ColorUtil'
+
+export default {
+  name: 'ScheduleRoute',
+  props: ['route'],
+  data() {
+    return {
+      ColorUtil,
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/ScheduleRouteList.vue

@@ -0,0 +1,19 @@
+<template>
+  <div v-if="routes" class="route-list">
+    <ScheduleRoute v-for="(route, index) in routes" :key="index" :route="route" />
+  </div>
+</template>
+
+<script>
+import ScheduleRoute from '@/components/ScheduleRoute'
+
+export default {
+  name: 'ScheduleRouteList',
+  components: { ScheduleRoute },
+  props: ['routes'],
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
+import 'bootstrap'
 import routes from '@/routes'
 import App from '@/App'
 import { library } from '@fortawesome/fontawesome-svg-core'

src/pages/SchedulePage.vue

@@ -1,54 +1,15 @@
 <template>
-  <div class="list">
-    <div class="list-title">{{ $route.params.date }}</div>
-    <div v-for="(el, index) in schedule.timeline" :key="index" class="list-item">
-      <time>{{ el.date }} {{ el.time }}</time>
-      <div v-if="el.place" :set="place = schedule.places[el.place]" class="place">
-        <div v-if="place.name" class="place-name">
-          <div lang="ja">{{ place.name.jp }}</div>
-          <div lang="zh">{{ place.name.tw }}</div>
-          <div lang="en">{{ place.name.en }}</div>
-        </div>
-        <div v-if="place.address" class="place-address">
-          <div class="zipcode">〒{{ place.address.zipcode }}</div>
-          <div lang="ja">{{ place.address.jp }}</div>
-          <div lang="en">{{ place.address.en }}</div>
-        </div>
-        <div v-if="place.tel" class="place-tel">
-          <a :href="'tel:' + place.tel" :title="place.tel">
-            <font-awesome-icon icon="fa-solid fa-phone" />
-            {{ place.tel }}
-          </a>
-        </div>
-      </div>
-      <ul v-if="el.routes" class="route-list">
-        <li
-            v-for="(route, index) in el.routes"
-            :key="index"
-            :style="route.color ? ColorUtil.setContrast(route.color) : {}"
-            class="route-item"
-        >
-          <time v-if="route.time" class="route-time">{{ route.time }}</time>
-          <font-awesome-icon v-if="route.icon" :icon="route.icon" class="route-icon" />
-          <div v-if="route.from" class="route-from">{{ route.from }}</div>
-          <div v-if="route.to" class="route-to">{{ route.to }}</div>
-          <div v-if="route.lines" class="route-line-list">
-            <div v-for="(line, index) in route.lines" :key="index" class="route-line">{{ line }}</div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
+  <ScheduleList :places="schedule.places" :timeline="schedule.timeline" />
 </template>
 
 <script>
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import Schedules from '@/schedules'
 import ColorUtil from '@/utils/ColorUtil'
+import ScheduleList from '@/components/ScheduleList'
 
 export default {
   name: 'SchedulePage',
-  components: { FontAwesomeIcon },
+  components: { ScheduleList },
   data() {
     return {
       ColorUtil,
@@ -59,4 +20,5 @@ export default {
 </script>
 
 <style scoped>
+
 </style>