rename ConfirmCasesCard.vue to ConfirmedCasesCard.vue

update ConfirmedCasesCard, TestedCasesCard scoped css to module update TestedCasesCard change notes markup
origamium · Mar 19, 2020 · a9a92e4 · a9a92e4
1 parent 64723b5
commit a9a92e4
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 42 deletions.
diff --git a/components/ConfirmCasesCard.vue → components/ConfirmedCasesCard.vue b/components/ConfirmCasesCard.vue → components/ConfirmedCasesCard.vue
@@ -1,25 +1,20 @@
 <template>
-  <data-view class="SvgCard" :title="title" :title-id="titleId" :date="date">
+  <data-view :title="title" :title-id="titleId" :date="date">
     <template v-slot:button>
-      <p class="Graph-Desc">
+      <p :class="$style.note">
         {{ $t('（注）チャーター機帰国者、クルーズ船乗客等は含まれていない') }}
       </p>
     </template>
     <slot />
   </data-view>
 </template>
 
-<style lang="scss" scoped>
-.SvgCard {
-  ::v-deep svg {
-    width: 100%;
-  }
-  .Graph-Desc {
-    margin-top: 10px;
-    margin-bottom: 0;
-    font-size: 12px;
-    color: $gray-3;
-  }
+<style lang="scss" module>
+.note {
+  margin-top: 10px;
+  margin-bottom: 0;
+  font-size: 12px;
+  color: $gray-3;
 }
 </style>
 

diff --git a/components/TestedCasesCard.vue b/components/TestedCasesCard.vue
@@ -1,35 +1,39 @@
 <template>
-  <data-view class="SvgCard" :title="title" :title-id="titleId" :date="date">
+  <data-view :title="title" :title-id="titleId" :date="date">
     <template v-slot:button>
-      <p class="Graph-Desc">
-        {{ $t('（注）医療機関が保険適用で行った検査は含まれていない') }}<br />
-        {{
-          $t(
-            '（注）検査実施人数には、チャーター機帰国者、クルーズ船乗客等は含まれていない'
-          )
-        }}
-        <br />
-        {{
-          $t(
-            '（注）速報値として公開するものであり、後日確定データとして修正される場合あり'
-          )
-        }}
-      </p>
+      <ul :class="$style.notes">
+        <li>
+          {{ $t('（注）医療機関が保険適用で行った検査は含まれていない') }}
+        </li>
+        <li>
+          {{
+            $t(
+              '（注）検査実施人数には、チャーター機帰国者、クルーズ船乗客等は含まれていない'
+            )
+          }}
+        </li>
+        <li>
+          {{
+            $t(
+              '（注）速報値として公開するものであり、後日確定データとして修正される場合あり'
+            )
+          }}
+        </li>
+      </ul>
     </template>
     <slot />
   </data-view>
 </template>
 
-<style lang="scss" scoped>
-.SvgCard {
-  ::v-deep svg {
-    width: 100%;
-  }
-  .Graph-Desc {
-    margin-top: 10px;
-    margin-bottom: 0;
-    font-size: 12px;
-    color: $gray-3;
+<style lang="scss" module>
+ul.notes {
+  margin-top: 10px;
+  margin-bottom: 0;
+  padding-left: 0 !important;
+  font-size: 12px;
+  color: $gray-3;
+  > li {
+    list-style-type: none;
   }
 }
 </style>

diff --git a/components/cards/ConfirmedCasesDetailsCard.vue b/components/cards/ConfirmedCasesDetailsCard.vue
@@ -1,6 +1,6 @@
 <template>
   <v-col cols="12" md="6" class="DataCard">
-    <confirm-cases-card
+    <confirmed-cases-card
       :title="$t('検査陽性者の状況')"
       :title-id="'details-of-confirmed-cases'"
       :date="Data.inspections_summary.date"
@@ -9,19 +9,19 @@
         :aria-label="$t('検査陽性者の状況')"
         v-bind="confirmedCases"
       />
-    </confirm-cases-card>
+    </confirmed-cases-card>
   </v-col>
 </template>
 
 <script>
 import Data from '@/data/data.json'
 import formatConfirmedCases from '@/utils/formatConfirmedCases'
-import ConfirmCasesCard from '@/components/ConfirmCasesCard.vue'
+import ConfirmedCasesCard from '@/components/ConfirmedCasesCard.vue'
 import ConfirmedCasesTable from '@/components/ConfirmedCasesTable.vue'
 
 export default {
   components: {
-    ConfirmCasesCard,
+    ConfirmedCasesCard,
     ConfirmedCasesTable
   },
   data() {