Merge pull request #160 from covid19-oita/development

Release v2.4.5

components/SideNavigation.vue

@@ -160,6 +160,10 @@ export default Vue.extend({
           title: this.$t('全国の最新感染動向'),
           link: 'https://www.stopcovid19.jp/'
         },
+        {
+          title: this.$t('お問い合わせ'),
+          link: this.localePath('/contacts')
+        },
         {
           title: this.$t('当サイトについて'),
           link: this.localePath('/about')

pages/contacts.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="Contacts">
+    <div class="Contacts-Card">
+      <iframe
+        src="https://docs.google.com/forms/d/e/1FAIpQLSc9PH4S3BnW4yjpgKf-svVo7cQ7vdSmHoJkMw2rLZWWxq6TCg/viewform?embedded=true"
+        width="100%"
+        height="850"
+        frameborder="0"
+        marginheight="0"
+        marginwidth="0"
+        >読み込んでいます…</iframe
+      >
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { MetaInfo } from 'vue-meta'
+
+export default Vue.extend({
+  components: {},
+  data() {
+    return {
+      pc: true
+    }
+  },
+  computed: {
+    tableAttrs(): any {
+      return this.pc ? {} : { role: 'presentation' }
+    },
+    headingAttrs(): any {
+      return this.pc ? {} : { role: 'heading', 'aria-level': '3' }
+    }
+  },
+  mounted() {
+    if (process.browser) {
+      window.addEventListener('resize', this.handleResize)
+      this.handleResize()
+    }
+  },
+  destroyed() {
+    if (process.browser) {
+      window.removeEventListener('resize', this.handleResize)
+    }
+  },
+  methods: {
+    handleResize() {
+      this.pc = window.innerWidth > 768
+    }
+  },
+  head(): MetaInfo {
+    return {
+      title: this.$t('お問い合わせ先一覧') as string
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.Contacts {
+  &-Card {
+    @include card-container();
+
+    &-Table {
+      width: 100%;
+      border-collapse: collapse;
+
+      th {
+        font-size: 14px !important;
+      }
+
+      td {
+        padding: 0 16px;
+        font-size: 14px;
+      }
+
+      @include largerThan($medium) {
+        thead tr {
+          height: 48px;
+        }
+
+        tbody tr {
+          height: 96px;
+        }
+
+        th,
+        tr:not(:last-child) {
+          border-top: none;
+          border-left: none;
+          border-right: none;
+          border-bottom: thin solid rgba(0, 0, 0, 0.12);
+        }
+
+        tr:last-child {
+          border: none;
+        }
+      }
+
+      @include lessThan($medium) {
+        thead {
+          display: none;
+        }
+
+        tbody {
+          tr {
+            height: auto;
+
+            .content {
+              font-weight: bold;
+              border-bottom: none !important;
+              padding-top: 12px;
+              padding-bottom: 8px;
+            }
+
+            .bureau {
+              border-bottom: none !important;
+            }
+
+            .tel {
+              padding-bottom: 12px;
+            }
+          }
+
+          tr:not(:last-child) {
+            border-bottom: thin solid rgba(0, 0, 0, 0.12);
+          }
+        }
+
+        td {
+          display: block;
+        }
+      }
+    }
+  }
+}
+</style>