update px2vw remote call

Tokyo-Metro-Gov · Oct 24, 2021 · 741dd42 · 741dd42
1 parent 1a0bc58
commit 741dd42
Show file tree

Hide file tree

Showing 22 changed files with 928 additions and 852 deletions.
diff --git a/assets/monitoringItemsTableCommon.scss → assets/_monitoringItemsTableCommon.scss b/assets/monitoringItemsTableCommon.scss → assets/_monitoringItemsTableCommon.scss
@@ -92,8 +92,10 @@ $default-boxdiff: 35px;
 
 @function px2vw($px, $vw: 0) {
   @if $vw > 0 {
-    @return ceil($px / $vw * 100000vw) / 1000;
-  } @else {
+    $shft-px: 100000 * $px;
+    @return div(#{$shft-px % $vw == 0} + div($shft-px, $vw), 1000)
+  }
+  @else {
     @return $px * 1px;
   }
 }
@@ -132,16 +134,16 @@ $default-boxdiff: 35px;
     &.parent {
       border-top: px2vw($bdw, $vw) solid $green-1;
       border-left: px2vw($bdw, $vw) solid $green-1;
-      padding-left: px2vw($boxdiff, $vw) - px2vw($bdw, $vw) * 2;
+      padding-left: px2vw($boxdiff, $vw) - px2vw($bdw * 2, $vw);
 
       &::after {
         width: px2vw($boxdiff - $bdw, $vw);
         border-bottom: px2vw($bdw, $vw) solid $green-1;
       }
 
       > .content {
-        margin-left: -(px2vw($boxdiff, $vw) - px2vw($bdw, $vw) * 2);
-        width: calc(100% + #{(px2vw($boxdiff, $vw) - px2vw($bdw, $vw) * 2)});
+        margin-left: px2vw($bdw * 2, $vw) - px2vw($boxdiff, $vw);
+        width: calc(100% + #{(px2vw($boxdiff, $vw) - px2vw($bdw * 2, $vw))});
       }
     }
   }

diff --git a/assets/variables.scss → assets/_variables.scss b/assets/variables.scss → assets/_variables.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // ==================
 // color
 $green-1: #008830;
@@ -12,8 +14,8 @@ $gray-5: #f8f9fa;
 $white: #fff;
 $link: #006ca8;
 $focus: #1976d2;
-$notice: #B19201;
-$alert: #AD2121;
+$notice: #b19201;
+$alert: #ad2121;
 
 // ==================
 // shadow
@@ -63,7 +65,7 @@ $chinese-hant: "PingFang TC", "Microsoft JhengHei", "Source Han Sans TC", "Noto
 // ==================
 // font-size
 @mixin font-size($size, $important: false) {
-  font-size: ($size / 10) + rem #{if($important, "!important", "")};
+  font-size: math.div($size, 10) + rem #{if($important, "!important", "")};
 }
 
 @mixin card-h1 {
@@ -111,7 +113,8 @@ $chinese-hant: "PingFang TC", "Microsoft JhengHei", "Source Han Sans TC", "Noto
 @mixin button-text($size: 'md', $font-size: 14) {
   @if ($size == 'sm') {
     padding: 5px 8px;
-  } @else {
+  }
+  @else {
     padding: 24px 36px;
   }
 
@@ -183,5 +186,5 @@ $chinese-hant: "PingFang TC", "Microsoft JhengHei", "Source Han Sans TC", "Noto
 $expansion-panel-content-padding: 0;
 $expansion-panel-header-padding: 10px 0;
 $expansion-panel-header-min-height: 26px;
-$expansion-panel-active-header-min-height: 26px;
+$expansion-panel-active-header-min-height: 026px;
 $expansion-panel-header-font-size: .875rem;
diff --git a/assets/global.scss b/assets/global.scss
@@ -1,3 +1,5 @@
+/* stylelint-enable no-unknown */
+
 :root {
   box-sizing: border-box;
   font-size: 62.5%;

diff --git a/components/_shared/SideNavigation/MenuList.vue b/components/_shared/SideNavigation/MenuList.vue
@@ -7,7 +7,9 @@
     >
       <custom-expansion-panel v-if="itemTitles[i].isExpand" :id="`menu-${i}`">
         <template #icon>
-          <v-icon size="2.4rem">{{ mdiChevronRight }}</v-icon>
+          <v-icon size="2.4rem">
+            {{ mdiChevronRight }}
+          </v-icon>
         </template>
         <template #title>
           <span class="MenuTitle">{{ setMenuTitle(slug) }}</span>

diff --git a/components/index/CardsFeatured/InfectionMedicalCareProvisionStatus/Card.vue b/components/index/CardsFeatured/InfectionMedicalCareProvisionStatus/Card.vue
@@ -19,7 +19,9 @@
           />
         </section>
         <div :class="$style.link">
-          <v-icon color="#D9D9D9">{{ mdiChevronRight }}</v-icon>
+          <v-icon color="#D9D9D9">
+            {{ mdiChevronRight }}
+          </v-icon>
           <app-link
             to="https://www.fukushihoken.metro.tokyo.lg.jp/hodo/saishin/hassei.html"
           >

diff --git a/components/index/CardsFeatured/MonitoringComment/Card.vue b/components/index/CardsFeatured/MonitoringComment/Card.vue
@@ -30,7 +30,9 @@
             </li>
           </ul>
           <section class="MonitoringCommentFrame">
-            <h4 class="MonitoringCommentFrame-title">{{ $t('感染状況') }}</h4>
+            <h4 class="MonitoringCommentFrame-title">
+              {{ $t('感染状況') }}
+            </h4>
             <frame
               :level="monitoringComment['総括コメント-感染状況'].level - 1"
               :comment="commentMonitoring('総括コメント-感染状況')"
@@ -48,7 +50,9 @@
           <div class="MonitoringCommentImage">
             <random-image />
             <div class="MonitoringCommentLink">
-              <v-icon color="#D9D9D9">{{ mdiChevronRight }}</v-icon>
+              <v-icon color="#D9D9D9">
+                {{ mdiChevronRight }}
+              </v-icon>
               <app-link
                 to="https://www.fukushihoken.metro.tokyo.lg.jp/iryo/kansen/corona_portal/info/monitoring.html"
               >

diff --git a/components/index/CardsTab.vue b/components/index/CardsTab.vue
@@ -10,7 +10,9 @@
       exact
       @click="change"
     >
-      <v-icon class="TabIcon">{{ mdiChartTimelineVariant }}</v-icon>
+      <v-icon class="TabIcon">
+        {{ mdiChartTimelineVariant }}
+      </v-icon>
       {{ item.label }}
     </v-tab>
     <v-tabs-items v-model="tab" touchless>

diff --git a/components/index/SiteTopUpper/Consultation/StaticInfo.vue b/components/index/SiteTopUpper/Consultation/StaticInfo.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="StaticInfo">
-    <h3 class="StaticInfo-Text">{{ text }}</h3>
+    <h3 class="StaticInfo-Text">
+      {{ text }}
+    </h3>
     <div v-if="btnText" class="StaticInfo-Button">
       <app-link :to="url" class="StaticInfo-Link">
         {{ btnText }}

diff --git a/components/index/SiteTopUpper/StayingPopulation.vue b/components/index/SiteTopUpper/StayingPopulation.vue
@@ -7,10 +7,13 @@
             {{ $t('都内の滞在人口の増減状況（毎週月曜日更新）') }}
           </h3>
           <div class="StayingPopulation-link">
-            <v-icon color="#D9D9D9">{{ mdiChevronRight }}</v-icon>
+            <v-icon color="#D9D9D9">
+              {{ mdiChevronRight }}
+            </v-icon>
             <app-link
               to="https://www.seisakukikaku.metro.tokyo.lg.jp/information/corona-people-flow-analysis.html#top"
-              >{{ $t('詳細はこちら') }}
+            >
+              {{ $t('詳細はこちら') }}
             </app-link>
           </div>
         </div>

diff --git a/components/index/_shared/CardsLazyRow.vue b/components/index/_shared/CardsLazyRow.vue
@@ -18,7 +18,9 @@
   <div v-else class="DataBlock">
     <custom-expansion-panel id="hide-cards">
       <template #icon>
-        <v-icon size="2.4rem">{{ mdiChevronRight }}</v-icon>
+        <v-icon size="2.4rem">
+          {{ mdiChevronRight }}
+        </v-icon>
       </template>
       <template #title>
         <span class="expansion-panel-text">

diff --git a/components/index/_shared/DataView/ExpantionPanel.vue b/components/index/_shared/DataView/ExpantionPanel.vue
@@ -2,7 +2,9 @@
   <div>
     <custom-expansion-panel v-if="showDetails" :id="id" @click="toggleDetails">
       <template #icon>
-        <v-icon size="2.4rem">{{ mdiChevronRight }}</v-icon>
+        <v-icon size="2.4rem">
+          {{ mdiChevronRight }}
+        </v-icon>
       </template>
       <template #title>
         <span class="expansion-panel-text">{{ $t('テーブルを表示') }}</span>

diff --git a/components/index/_shared/DataView/Share.vue b/components/index/_shared/DataView/Share.vue
@@ -54,8 +54,9 @@
             class="EmbedCode-Copy"
             :aria-label="$t('クリップボードにコピー')"
             @click="copyEmbedCode"
-            >{{ mdiClipboardOutline }}</v-icon
           >
+            {{ mdiClipboardOutline }}
+          </v-icon>
           {{ graphEmbedValue }}
         </div>
       </section>

diff --git a/components/index/_shared/DataViewDataSetPanel.vue b/components/index/_shared/DataViewDataSetPanel.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="DataView-DataSet">
-    <h4 v-if="title" class="DataView-DataSet-title">{{ title }}</h4>
+    <h4 v-if="title" class="DataView-DataSet-title">
+      {{ title }}
+    </h4>
     <div class="DataView-DataSet-info">
       <template v-if="lText">
         <p class="DataView-DataSet-summary">

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,8 +1,15 @@
 /* eslint-disable simple-import-sort/imports -- `@nuxt/types` import should occur after import of `path` */
-import fs from 'fs'
-import path from 'path'
+import 'regenerator-runtime/runtime'
+import 'core-js/stable'
+import fs, {
+  readFileSync /* eslint-disable-line @typescript-eslint/no-unused-vars */,
+} from 'fs'
+import path, {
+  resolve /* eslint-disable-line @typescript-eslint/no-unused-vars */,
+} from 'path'
+
 import { NuxtConfig } from '@nuxt/types'
-// eslint-disable-next-line no-restricted-imports
+import { NuxtRouteConfig } from '@nuxt/types/config/router'
 import i18n from './nuxt-i18n.config'
 // @ts-ignore
 import { Settings } from '@/types/cardRoutesSettings'
@@ -15,11 +22,6 @@ const cardData = JSON.parse(
 )
 
 const config: NuxtConfig = {
-  // Since nuxt@2.14.5, there have been significant changes.
-  // We dealt with typical two (2) out of them:
-  // 1) The "mode:" directive got deprecated (seen right below);
-  // 2) Autoprefixer has been included so that we can lessen upgrade burden.
-  // mode: 'universal',
   target: 'static',
   components: true,
   /*
@@ -62,6 +64,10 @@ const config: NuxtConfig = {
         property: 'note:card',
         content: 'summary_large_image',
       },
+      {
+        name: 'tabs',
+        content: 'no',
+      },
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
@@ -78,16 +84,34 @@ const config: NuxtConfig = {
    ** Customize the progress-bar color
    */
   loading: { color: '#fff' },
-  /*
-   ** Global CSS
-   */
-  css: ['@/assets/global.scss'],
+  styleResources: {
+    /*
+     ** Global CSS/SCSS/SASS
+     */
+    css: ['@/assets/global.scss'],
+    /*
+     ** Pulled out from vuild.styleResources block w/ according module uninstalled
+     ** https://github.com/nuxt-community/style-resources-module/issues/88
+     */
+    scss: [
+      '@/assets/global.scss',
+      '@/assets/variables.scss',
+      '@/assets/monitoringItemsTableCommon.scss',
+      '*.vue',
+    ],
+    sass: [
+      '@/assets/global.scss',
+      '@/assets/variables.scss',
+      '@/assets/monitoringItemsTableCommon.scss',
+    ],
+    hoistUseStatements: true,
+  },
   /*
    ** Plugins to load before mounting the App
    */
   plugins: [
     {
-      src: '@/plugins/vue-chart.ts',
+      src: '@/plugins/vue-chart',
       ssr: true,
     },
     {
@@ -108,14 +132,13 @@ const config: NuxtConfig = {
           async: true,
           typescript: {
             enable: true,
-            memoryLimit: 4096,
+            memoryLimit: 5120,
           },
         },
       },
     ],
     '@nuxtjs/google-analytics',
     '@nuxtjs/gtm',
-    'nuxt-purgecss',
   ],
   /*
    ** Nuxt.js modules
@@ -125,7 +148,7 @@ const config: NuxtConfig = {
     // Doc: https://github.com/nuxt-community/dotenv-module
     ['@nuxtjs/dotenv', { filename: `.env.${environment}` }],
     ['@nuxtjs/i18n', i18n],
-    'nuxt-svg-loader',
+    '@nuxtjs/svg',
     ['vue-scrollto/nuxt', { duration: 1000, offset: -72 }],
     'nuxt-webfontloader',
   ],
@@ -159,35 +182,33 @@ const config: NuxtConfig = {
     pageTracking: true,
     enabled: true,
   },
-  /*
-   * nuxt-i18n による自動リダイレクトを停止したためコメントアウト
-   * @todo 「Cookieがあるときのみ、その言語にリダイレクトする」を実装する場合は復活させる
-   * 実装しない場合は以下の記述を完全に削除する
-   */
-  /* optionalCookies: [
-    {
-      name: 'i18n_redirected',
-      label: 'i18n Redirection Cookie',
-      description:
-        'For automatically switching UI languages in accordance with locale preferences in the web browser configuration.',
-      cookies: ['i18n_redirected']
-    }
-  ], */
   build: {
-    filenames: {
-      chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js'),
+    loaders: {
+      file: {
+        regExp: /\.[mc]?js$/,
+        name: ({ isDev }: any): string => {
+          return isDev ? '[name].[ext]' : '[id].[contenthash].[ext]'
+        },
+      },
     },
     babel: {
       presets() {
         return [
           [
             '@nuxt/babel-preset-app',
             {
-              corejs: { version: '3.16' },
+              corejs: {
+                version: 3,
+                useBuiltins: 'entry',
+              },
             },
           ],
         ]
       },
+      plugins: [
+        // https://github.com/altgifted/babel-plugin-transform-scss/blob/master/lib/index.js
+        'babel-plugin-transform-scss',
+      ],
     },
     postcss: {
       preset: {
@@ -217,7 +238,7 @@ const config: NuxtConfig = {
     theme_color: '#00a040',
     background_color: '#ffffff',
     display: 'standalone',
-    Scope: '/',
+    scope: '/',
     start_url: '/',
     splash_pages: null,
   },
@@ -252,15 +273,17 @@ const config: NuxtConfig = {
     },
   },
   router: {
-    extendRoutes(routes) {
-      routes.forEach((route) => {
-        if (
-          route.name === 'index' ||
-          route.name === 'monitoring' ||
-          route.name === 'reference'
-        ) {
-          route.meta = { tabs: true }
-        }
+    extendRoutes(routes: NuxtRouteConfig[]) {
+      routes.forEach((route: NuxtRouteConfig) => {
+        return (route.meta = {
+          tabs: {
+            type: Boolean,
+            default:
+              route.name === 'index' ||
+              route.name === 'monitoring' ||
+              route.name === 'reference',
+          },
+        })
       })
     },
   },