検査陽性者の状況カードが現状横並び。数字がはみ出る場合に備えて、縦並びにする

[paichi81]

改善詳細 / Details of Improvement

• "検査陽性者の状況"カードは初期東京版のまま横並びになっている。
• 検査実施人数も5桁に突入しており、レイアウトが崩れることが危惧される

期待する見せ方・挙動 / Expected behavior

• 現状東京版に追従し、縦並びのレイアウトのコンポーネントに変更する

[lovechoco]

MyPCの容量の関係で、開発環境を作ってテストするところまでは出来てないものの、 たぶん下記Pathのファイルを次のように書き替えれば、 意図するカタチになると思われるヨ.（中途半端でスマヌ） 　- components/ConfirmedCasesDetailsTable.vue　 　↓↓↓

<template>
  <ul :class="$style.container">
    <li :class="[$style.box]">
      <div :class="[$style.content, $style.inspection]">
          <span> {{ $t('陽性者数人数') }}</span>
          <span>
            <strong>{{ 検査実施人数.toLocaleString() }}</strong>
            <span :class="$style.unit">{{ $t('人') }}</span>
          </span>
      </div>
    </li>
    <li :class="[$style.box, $style.parent]">
      <div :class="$style.content">
        <span> {{ $t('陽性者数') }} ({{ $t('累計') }}) </span>
        <span>
          <strong>{{ 陽性患者数.toLocaleString() }}</strong>
          <span :class="$style.unit">{{ $t('人') }}</span>
        </span>
      </div>
      <ul :class="$style.group">
        <li :class="[$style.box, $style.parent]">
          <div :class="$style.content">
            <span>{{ $t('入院') }}</span>
            <span>
              <strong>{{ 入院中.toLocaleString() }}</strong>
              <span :class="$style.unit">{{ $t('人') }}</span>
            </span>
          </div>
        </li>
        <li :class="[$style.box]">
          <div :class="$style.content">
            <span>{{ $t('退院等（療養期間経過を含む）') }}</span>
            <span>
              <strong>{{ 退院.toLocaleString() }}</strong>
              <span :class="$style.unit">{{ $t('人') }}</span>
            </span>
          </div>
        </li>
        <li :class="[$style.box]">
          <div :class="$style.content">
            <span>{{ $t('死亡') }}</span>
            <span>
              <strong>{{ 死亡.toLocaleString() }}</strong>
              <span :class="$style.unit">{{ $t('人') }}</span>
            </span>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script lang="ts">
import Vue from 'vue'

/* eslint-disable vue/prop-name-casing */
export default Vue.extend({
  props: {
    検査実施人数: {
      type: Number,
      required: true
    },
    陽性患者数: {
      type: Number,
      required: true,
    },
    入院中: {
      type: Number,
      required: true,
    },
    退院: {
      type: Number,
      required: true,
    },
    死亡: {
      type: Number,
      required: true,
    },
  },
})
</script>

<style lang="scss" module>
$default-bdw: 3px;
$default-boxdiff: 35px;

// .container > .box > (.group > .box > ...) .pillar > .content

.container {
  width: 100%;
  box-sizing: border-box;
  color: $green-1;
  line-height: 1.35;

  * {
    box-sizing: border-box;
  }
  // override default styles
  padding-left: 0 !important;

  ul {
    padding-left: 0;
  }
}

.group {
  flex: 0 0 auto;
  padding-left: $default-bdw !important;
  border-top: $default-bdw solid $green-1;
  border-left: $default-bdw solid $green-1;
}

.content {
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: $default-bdw solid $green-1;

  > span {
    display: block;

    @include font-size(14);

    &:first-child {
      text-align: left;
      margin-top: 1px;
      flex-shrink: 2;
    }

    &:last-child {
      margin-left: 10px;
      text-align: right;
      // white-space: nowrap;
      flex-shrink: 1;
    }

    &:not(:last-child) {
      overflow-wrap: break-word;
    }
  }

  strong {
    @include font-size(16);
  }

  span.unit {
    @include font-size(14);
  }
}

.box {
  display: block;
  margin-top: $default-bdw;

  &.parent {
    border-top: $default-bdw solid $green-1;
    border-left: $default-bdw solid $green-1;
    position: relative;
    padding-left: $default-boxdiff - $default-bdw * 2;

    &::after {
      content: '';
      display: block;
      position: absolute;
      left: -1px;
      bottom: 0;
      width: $default-boxdiff - $default-bdw - 2;
      border-bottom: $default-bdw solid $green-1;
    }

    > .content {
      margin-left: -($default-boxdiff - $default-bdw * 2);
      width: calc(100% + #{($default-boxdiff - $default-bdw * 2)});
      border-top: none;
      border-left: none;
      border-bottom: none;
    }
  }
}

@function px2vw($px, $vw: 0) {
  @if $vw > 0 {
    @return ceil($px / $vw * 100000vw) / 1000;
  } @else {
    @return $px * 1px;
  }
}

// 検査
.inspection {
    border-color: $gray-1;
    color: $gray-1;
}

@mixin override($vw, $bdw, $fz, $boxdiff) {
  .group {
    padding-left: px2vw($bdw, $vw) !important;
    border-top: px2vw($bdw, $vw) solid $green-1;
    border-left: px2vw($bdw, $vw) solid $green-1;
  }

  .content {
    padding: px2vw(5, $vw) px2vw(10, $vw);
    border: px2vw($bdw, $vw) solid $green-1;

    > span {
      @include font-size($fz);

      &:first-child {
        margin-top: px2vw(1, $vw);
      }

      &:last-child {
        margin-left: 10px;
      }
    }

    strong {
      @include font-size($fz + 2);
    }

    span.unit {
      @include font-size($fz);
    }
  }

  .box {
    margin-top: px2vw($bdw, $vw);

    &.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;

      &::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)});
      }
    }
  }
}

// Vuetify Breakpoints: Large (1264)
@include lessThan(1263) {
  @include override(1263, 3, 14, 35);
}

// Vuetify Breakpoints: Small (960)
@include lessThan(959) {
  @include override(960, 3, 14, 35);
}

// Vuetify Breakpoints: Extra Small (600)
@include lessThan(600) {
  @include override(600, 3, 14, 35);
}
</style>

[nisshi-dev]

@paichi81 issue作成ありがとうございます！

@lovechoco ありがとうございます。 今月中に対応させていただきます。