refactor: add DesignPageTitle

src/components/Stop/StopHeader.vue

@@ -1,48 +1,40 @@
 <template>
-  <div class="title">
-    <h1>
-      {{ stop.displayName }}
-    </h1>
-    <span class="line-connections">
-      <router-link v-for="conn in stop.lineConnections"
-        :key="`${conn.line}/${conn.slugName}`"
-        :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
+  <DesignPageTitle :text="stop.displayName">
+    <div class="line-connections">
+      <router-link
+        v-for="conn in stop.lineConnections"
+       :key="`${conn.line}/${conn.slugName}`"
+       :to="`/timetables/${$route.params.tab}/${conn.line}/${conn.slugName}`"
       >
         <LineIcon
           :lineSlugName="conn.line"
           color="dark"
           size="md"
         />
       </router-link>
-    </span>
-  </div>
+    </div>
+  </DesignPageTitle>
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { StopType } from '@/utils/parser'
 import LineIcon from '@/components/LineIcon.vue'
+import DesignPageTitle from '@/components/design/DesignPageTitle.vue'
 
 export default Vue.extend({
   name: 'StopHeader',
-  components: { LineIcon },
+  components: {
+    LineIcon,
+    DesignPageTitle,
+  },
   props: {
     stop: {} as PropType<StopType>,
   },
 })
 </script>
 
 <style scoped>
-.title {
-  min-height: 2.8rem;
-}
-
-h1 {
-  font-size: 1.5rem;
-  display: inline-block;
-  margin: 0.5rem 1rem 0 0;
-}
-
 .line-connections {
   display: inline-block;
 }

src/components/design/DesignTitle.vue → src/components/design/DesignContentTitle.vue

@@ -11,7 +11,7 @@
 import Vue from 'vue'
 
 export default Vue.extend({
-  name: 'DesignTitle',
+  name: 'DesignContentTitle',
 })
 </script>
 

src/components/design/DesignPageTitle.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>
+      {{ text }}
+    </h1>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'DesignContentTitle',
+  props: {
+    text: String,
+  },
+})
+</script>
+
+<style scoped>
+h1 {
+  font-size: 1.5rem;
+  display: inline-block;
+  margin: 0.5rem 1rem 0 0;
+}
+</style>

src/pages/TimetablesHubPage.vue

@@ -4,7 +4,7 @@
       v-for="category in linesByCategory"
       :key="category.name"
     >
-      <DesignTitle>{{ category.name }}</DesignTitle>
+      <DesignContentTitle>{{ category.name }}</DesignContentTitle>
       <router-link
         v-for="line in category.lines"
         :key="line.slugName"
@@ -26,13 +26,13 @@
 import Vue from 'vue'
 import LineIcon from '@/components/LineIcon.vue'
 import { getLinesByCategory } from '@/utils/localstore/lines'
-import DesignTitle from '@/components/design/DesignTitle.vue'
+import DesignContentTitle from '@/components/design/DesignContentTitle.vue'
 
 export default Vue.extend({
   name: 'TimetablesHubPage',
   components: {
     LineIcon,
-    DesignTitle,
+    DesignContentTitle,
   },
   computed: {
     linesByCategory () {