期生別ユーザー一覧のカウントにデザインを入れた

fjordllc · Mar 16, 2024 · 7b25e77 · 7b25e77
1 parent acb64ef
commit 7b25e77
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/app/javascript/generation.vue b/app/javascript/generation.vue
@@ -9,8 +9,27 @@
           | {{ generation.number }}期生
         .user-group__date
           | {{ dateFormat(generation.start_date) }} ~ {{ dateFormat(generation.end_date) }}
-        .user-group__status-count.is-admin-and-mentor(v-if="isAdminOrMentor() && target === 'all'") 
-          |  現役生 {{ generation.students_and_trainees_count }}人  卒業生 {{ generation.graduates_count }}人  退会者 {{ generation.retirees_count }}人 
+        .user-group__counts.is-only-mentor(v-if="isAdminOrMentor() && target === 'all'")
+          .card-counts
+            .card-counts__items
+              .card-counts__item
+                .card-counts__item-inner
+                  .card-counts__item-label
+                    | 現役生
+                  .card-counts__item-value
+                    | {{ generation.students_and_trainees_count }}
+              .card-counts__item
+                .card-counts__item-inner
+                  .card-counts__item-label
+                    | 卒業生
+                  .card-counts__item-value
+                    | {{ generation.graduates_count }}
+              .card-counts__item
+                .card-counts__item-inner
+                  .card-counts__item-label
+                    | 退会者
+                  .card-counts__item-value
+                    | {{ generation.retirees_count }}
   .a-user-icons
     .a-user-icons__items
       .a-user-icons__item(v-for='user in users', :key='user.id')

diff --git a/app/javascript/stylesheets/application/blocks/user/_user-group.sass b/app/javascript/stylesheets/application/blocks/user/_user-group.sass
@@ -4,6 +4,7 @@
     border-top: solid 1px var(--border-tint)
 
 .user-group__title
+  position: relative
   +media-breakpoint-up(md)
     font-size: 1.125rem
   +media-breakpoint-down(sm)
@@ -12,9 +13,12 @@
 .user-group__title-link
   text-decoration: none
   color: var(--main-text)
+  display: flex
   +media-breakpoint-up(md)
-    display: flex
     align-items: flex-end
+  +media-breakpoint-down(sm)
+    flex-direction: column
+    gap: .5rem
   .user-group__title.is-inline &
     display: flex
     align-items: flex-end
@@ -41,8 +45,9 @@
   font-weight: 400
   color: var(--muted-text)
 
-.user-group__count
-  font-size: .75rem
-  font-weight: 400
-  color: var(--muted-text)
-  margin-left: .25rem
+.user-group__counts
+  +media-breakpoint-up(md)
+    +position(absolute, right 0, top -.5rem)
+  .card-counts__item
+    width: 4rem
+    color: var(--default-text)