fix uehaj2022 / latteart#6

src/gui/locale/message_en.json

@@ -235,7 +235,7 @@
     "locale": "locale"
   },
   "manage-show": {
-    "window-title": "Management Tool [top]",
+    "window-title": "Legend",
     "legend1": "( X / Y )",
     "legend2": "X: # of complete session",
     "legend3": "Y: # of planned session",

src/gui/locale/message_ja.json

@@ -239,7 +239,7 @@
     "locale": "言語"
   },
   "manage-show": {
-    "window-title": "管理ツール [トップ]",
+    "window-title": "凡例",
     "legend1": "( X / Y )",
     "legend2": "X: 完了セッション数",
     "legend3": "Y: 予定セッション数",

src/gui/vue/pages/testManagement/manageShowView/organisms/LegendViewer.vue

@@ -16,27 +16,38 @@
 
 <template>
   <v-layout row wrap justify-center align-start>
-    <div
-      v-for="(legend, index) in legendInfos"
-      v-bind:key="index"
-      class="manage-show-legend"
-    >
-      <v-card class="pt-0 my-3">
-        <v-card-title
-          primary-title
-          class="py-2 my-0"
-          v-bind:class="legend.class"
-        >
-          <p class="card-center">{{ legend.status }}</p>
-        </v-card-title>
-      </v-card>
-      <p>{{ legend.text }}</p>
-    </div>
-
-    <div class="manage-show-legend mt-4">
-      {{ $store.getters.message("manage-show.legend1") }}<br />
-      {{ $store.getters.message("manage-show.legend2") }}<br />
-      {{ $store.getters.message("manage-show.legend3") }}<br />
+    <div class="main">
+      <section>
+        <input id="s1" type="checkbox" name="t1" />
+        <label for="s1">{{
+          $store.getters.message("manage-show.window-title")
+        }}</label>
+        <div class="content">
+          <v-layout row wrap justify-center align-start>
+            <div
+              v-for="(legend, index) in legendInfos"
+              v-bind:key="index"
+              class="manage-show-legend"
+            >
+              <v-card class="pt-0 my-3">
+                <v-card-title
+                  primary-title
+                  class="py-2 my-0"
+                  v-bind:class="legend.class"
+                >
+                  <p class="card-center">{{ legend.status }}</p>
+                </v-card-title>
+              </v-card>
+              <p>{{ legend.text }}</p>
+            </div>
+            <div class="manage-show-legend mt-4">
+              {{ $store.getters.message("manage-show.legend1") }}<br />
+              {{ $store.getters.message("manage-show.legend2") }}<br />
+              {{ $store.getters.message("manage-show.legend3") }}<br />
+            </div>
+          </v-layout>
+        </div>
+      </section>
     </div>
   </v-layout>
 </template>
@@ -106,4 +117,40 @@ export default class LegendViewer extends Vue {
   background-color: #FBE9E0
   color: #EA5F1A
   font-weight: bold
+.main
+  section
+    label
+      cursor: pointer
+      display: block
+      padding: 15px 20px
+      color: #fff
+      position: relative
+      font-size: 22px
+      &::after
+        content: "\271B"
+        position: absolute
+        right: 20px
+        top: 50%
+        transform: translateY(-50%)
+        color: #fff
+        opacity: 0.5
+  .content
+    visbililty: hidden
+    max-height: 0
+    overflow: hidden
+    transition: all 0.8s ease
+    padding: 0 20px
+    *
+      opacity: 0
+      transition: all 0.8s ease
+  input
+    display: none
+    &:checked +label+div
+      visibility: visible
+      max-height: 100vh
+      opacity: 1
+      *
+        opacity: 1
+    &:checked+label::after
+      content: "\268A"
 </style>