revisit base scss

Tokyo-Metro-Gov · Jun 26, 2021 · 810cd65 · 810cd65
2 parents 3398cc1 + 5f70c24
commit 810cd65
Show file tree

Hide file tree

Showing 49 changed files with 5,883 additions and 1,258 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -3,14 +3,11 @@
     "dockerComposeFile": [
         "../docker-compose.yml"
     ],
-    "appPort": [
-        3000
-    ],
     "service": "app",
     "extensions": [
         "dbaeumer.vscode-eslint"
     ],
     "postCreateCommand": "yarn install",
     "workspaceFolder": "/app",
     "shutdownAction": "stopCompose"
-}
+}
diff --git a/assets/locales/ja.json b/assets/locales/ja.json
@@ -837,5 +837,6 @@
   "主婦": "主婦",
   "会社職員": "会社職員",
   "サービス業": "サービス業",
-  "{date}〜{enddate}": "{date}〜{enddate}"
+  "{date}〜{enddate}": "{date}〜{enddate}",
+  "ワクチン接種記録システム（VRS）への報告を居住地の都道府県別に国が集計し、公表したものに基づき作成（本データは過日の数値が修正されることがある）": "ワクチン接種記録システム（VRS）への報告を居住地の都道府県別に国が集計し、公表したものに基づき作成（本データは過日の数値が修正されることがある）"
 }
diff --git a/auto-i18n/result.csv b/auto-i18n/result.csv
@@ -855,3 +855,5 @@ TAG_ADD,会社職員
 TAG_ADD,サービス業
 RUN,2021/06/21 14:32
 TAG_ADD,{date}〜{enddate}
+RUN,2021/06/25 13:34
+TAG_ADD,ワクチン接種記録システム（VRS）への報告を居住地の都道府県別に国が集計し、公表したものに基づき作成（本データは過日の数値が修正されることがある）
diff --git a/components/_shared/SideNavigation.vue b/components/_shared/SideNavigation.vue
@@ -2,6 +2,7 @@
   <div ref="Side" class="SideNavigation" tabindex="-1">
     <header class="SideNavigation-Header">
       <v-icon
+        ref="Open"
         class="SideNavigation-OpenIcon"
         :aria-label="$t('サイドメニュー項目を開く')"
         @click="$emit('open-navigation', $event)"
@@ -41,7 +42,12 @@
       <nav class="SideNavigation-Menu">
         <div class="SideNavigation-Language">
           <div v-if="$i18n.locales.length > 1" class="SideNavigation-Language">
-            <label class="SideNavigation-LanguageLabel" for="LanguageSelector">
+            <label
+              ref="LanguageLabel"
+              class="SideNavigation-LanguageLabel"
+              for="LanguageSelector"
+              tabindex="-1"
+            >
               {{ $t('多言語対応選択メニュー') }}
             </label>
             <language-selector />
@@ -51,63 +57,83 @@
       </nav>
 
       <footer class="SideNavigation-Footer">
-        <div class="SideNavigation-Social">
-          <app-link
-            to="https://line.me/R/ti/p/%40822sysfc"
-            :show-icon="false"
-            class="SideNavigation-SocialLink"
-          >
-            <picture>
-              <source srcset="/line.webp" type="image/webp" />
-              <img src="/line.png" width="130" height="130" alt="LINE" />
-            </picture>
-          </app-link>
-          <app-link
-            to="https://twitter.com/tokyo_bousai"
-            :show-icon="false"
-            class="SideNavigation-SocialLink"
-          >
-            <picture>
-              <source srcset="/twitter.webp" type="image/webp" />
-              <img src="/twitter.png" width="130" height="130" alt="Twitter" />
-            </picture>
-          </app-link>
-          <app-link
-            to="https://www.facebook.com/tochokoho"
-            :show-icon="false"
-            class="SideNavigation-SocialLink"
-          >
-            <picture>
-              <source srcset="/facebook.webp" type="image/webp" />
-              <img
-                src="/facebook.png"
-                width="130"
-                height="130"
-                alt="Facebook"
-              />
-            </picture>
-          </app-link>
-          <app-link
-            to="https://github.com/tokyo-metropolitan-gov/covid19"
-            :show-icon="false"
-            class="SideNavigation-SocialLink"
-          >
-            <picture>
-              <source srcset="/github.webp" type="image/webp" />
-              <img src="/github.png" width="130" height="130" alt="GitHub" />
-            </picture>
-          </app-link>
-          <app-link
-            to="https://www.youtube.com/user/tokyo/videos"
-            :show-icon="false"
-            class="SideNavigation-SocialLink"
-          >
-            <picture>
-              <source srcset="/youtube.webp" type="image/webp" />
-              <img src="/youtube.png" width="130" height="130" alt="YouTube" />
-            </picture>
-          </app-link>
-        </div>
+        <ul class="SideNavigation-Social">
+          <li class="SideNavigation-SocialLink-ListItem">
+            <app-link
+              to="https://line.me/R/ti/p/%40822sysfc"
+              :show-icon="false"
+              class="SideNavigation-SocialLink"
+            >
+              <picture>
+                <source srcset="/line.webp" type="image/webp" />
+                <img src="/line.png" width="130" height="130" alt="LINE" />
+              </picture>
+            </app-link>
+          </li>
+          <li class="SideNavigation-SocialLink-ListItem">
+            <app-link
+              to="https://twitter.com/tokyo_bousai"
+              :show-icon="false"
+              class="SideNavigation-SocialLink"
+            >
+              <picture>
+                <source srcset="/twitter.webp" type="image/webp" />
+                <img
+                  src="/twitter.png"
+                  width="130"
+                  height="130"
+                  alt="Twitter"
+                />
+              </picture>
+            </app-link>
+          </li>
+          <li class="SideNavigation-SocialLink-ListItem">
+            <app-link
+              to="https://www.facebook.com/tochokoho"
+              :show-icon="false"
+              class="SideNavigation-SocialLink"
+            >
+              <picture>
+                <source srcset="/facebook.webp" type="image/webp" />
+                <img
+                  src="/facebook.png"
+                  width="130"
+                  height="130"
+                  alt="Facebook"
+                />
+              </picture>
+            </app-link>
+          </li>
+          <li class="SideNavigation-SocialLink-ListItem">
+            <app-link
+              to="https://github.com/tokyo-metropolitan-gov/covid19"
+              :show-icon="false"
+              class="SideNavigation-SocialLink"
+            >
+              <picture>
+                <source srcset="/github.webp" type="image/webp" />
+                <img src="/github.png" width="130" height="130" alt="GitHub" />
+              </picture>
+            </app-link>
+          </li>
+          <li class="SideNavigation-SocialLink-ListItem">
+            <app-link
+              to="https://www.youtube.com/user/tokyo/videos"
+              :show-icon="false"
+              class="SideNavigation-SocialLink"
+            >
+              <picture>
+                <source srcset="/youtube.webp" type="image/webp" />
+                <img
+                  src="/youtube.png"
+                  width="130"
+                  height="130"
+                  alt="YouTube"
+                />
+              </picture>
+            </app-link>
+          </li>
+        </ul>
         <i18n
           tag="small"
           path="このサイトの内容物は{creativeCommons}の下に提供されています（ただし商標等の他団体が権利を持つものは除く）。"
@@ -123,7 +149,6 @@
             </app-link>
           </template>
         </i18n>
-        <br />
         <small class="SideNavigation-Copyright">
           &copy; 2020 Tokyo Metropolitan Government
         </small>
@@ -316,10 +341,25 @@ export default Vue.extend({
     },
   },
   watch: {
-    $route: 'handleChageRoute',
+    $route: 'handleChangeRoute',
+    '$vuetify.breakpoint.xsOnly'(value) {
+      const $Side = this.$refs.Side as HTMLEmbedElement | undefined
+      if ($Side) {
+        if (value) {
+          $Side.setAttribute('role', 'dialog')
+          $Side.setAttribute('aria-modal', 'true')
+        } else {
+          $Side.removeAttribute('role')
+          $Side.removeAttribute('aria-modal')
+        }
+      }
+    },
+    isNaviOpen(value) {
+      this.handleNavFocus(value)
+    },
   },
   methods: {
-    handleChageRoute() {
+    handleChangeRoute() {
       // nuxt-link で遷移するとフォーカスが残り続けるので $route を監視して SideNavigation にフォーカスする
       return this.$nextTick().then(() => {
         const $Side = this.$refs.Side as HTMLEmbedElement | undefined
@@ -328,6 +368,18 @@ export default Vue.extend({
         }
       })
     },
+    handleNavFocus(isNaviOpen: boolean) {
+      return this.$nextTick(() => {
+        if (isNaviOpen) {
+          const $LanguageLabel = this.$refs.LanguageLabel as HTMLElement
+          $LanguageLabel.focus()
+        } else {
+          const $Open = this.$refs.Open as Vue
+          const $OpenElement = $Open.$el as HTMLButtonElement
+          $OpenElement.focus()
+        }
+      })
+    },
   },
 })
 </script>
@@ -485,39 +537,46 @@ export default Vue.extend({
 
 .SideNavigation-Footer {
   padding-top: 20px;
-}
-
-.SideNavigation-Social {
-  display: flex;
-}
-
-.SideNavigation-SocialLink {
-  border: 1px dotted transparent;
-  border-radius: 30px;
-  color: $gray-3;
-  margin-bottom: 15px;
 
-  &:link,
-  &:hover,
-  &:visited,
-  &:active {
-    color: inherit;
-    text-decoration: none;
-  }
+  .SideNavigation-Social {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin-bottom: 15px;
+
+    .SideNavigation-SocialLink-ListItem {
+      .SideNavigation-SocialLink {
+        display: block;
+        border: 1px dotted transparent;
+        border-radius: 15px;
+        color: $gray-3;
+
+        &:link,
+        &:hover,
+        &:visited,
+        &:active {
+          color: inherit;
+          text-decoration: none;
+        }
 
-  &:focus {
-    color: inherit;
-    text-decoration: none;
-    border: 1px dotted $gray-3;
-    outline: none;
-  }
+        &:focus {
+          color: inherit;
+          text-decoration: none;
+          border: 1px dotted $gray-3;
+          outline: none;
+        }
 
-  & + & {
-    margin-left: 10px;
-  }
+        picture {
+          img {
+            width: 30px;
+          }
+        }
+      }
 
-  img {
-    width: 30px;
+      & + .SideNavigation-SocialLink-ListItem {
+        margin-left: 10px;
+      }
+    }
   }
 }