Feat/request page のデザインを調整

src/components/requests/RequestItem.vue

@@ -10,6 +10,7 @@ import { formatDate } from '/@/lib/date'
 import StatusChip from '/@/components/shared/StatusChip.vue'
 import TagsGroup from '/@/components/shared/TagsGroup.vue'
 import type { Request } from '/@/features/request/model'
+import UserIcon from '/@/components/shared/UserIcon.vue'
 
 interface Props {
   request: Request
@@ -28,23 +29,30 @@ const totalAmount = computed(
 </script>
 
 <template>
-  <RouterLink class="flex p-2" :to="'/requests/' + request.id">
-    <div class="mx-2 flex items-center justify-center">
+  <RouterLink class="flex px-3 sm:px-6 py-4 gap-2 sm:gap-5" :to="'/requests/' + request.id">
+    <div class="flex items-start justify-center">
       <StatusChip :status="request.status" />
     </div>
-    <div class="flex-grow">
-      <span class="text-xl">{{ request.title }}</span>
-      <div class="mt-2">
-        <TagsGroup :tags="request.tags" />
+    <div class="flex flex-grow flex-wrap">
+      <div class="flex-grow">
+        <span class="text-xl">{{ request.title }}</span>
+        <div class="mt-2">
+          <TagsGroup :tags="request.tags" />
+        </div>
       </div>
-    </div>
-    <div>
-      <div class="flex gap-4">
-        <span v-if="request.group"> グループ：{{ request.group.name }} </span>
-        <span>申請者：{{ userMap[request.createdBy] }}</span>
-        <span>申請日：{{ formattedDate }}</span>
+      <div class="flex flex-col gap-2">
+        <div class="flex items-center justify-end gap-x-4 flex-wrap">
+          <div class="flex items-center gap-1">
+            <UserIcon class="max-w-7" :name="userMap[request.createdBy]" />
+            <span>{{ userMap[request.createdBy] }}</span>
+          </div>
+          <span v-if="request.group"> {{ request.group.name }} </span>
+          <span>{{ formattedDate }}</span>
+        </div>
+        <div class="text-right font-bold font-sans text-2xl">
+          {{ totalAmount }}円
+        </div>
       </div>
-      <div class="text-right text-3xl">{{ totalAmount }}円</div>
     </div>
   </RouterLink>
 </template>

src/components/shared/StatusChip.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
 import {
-  HandThumbUpIcon,
+  CheckCircleIcon,
+  ChevronDownIcon,
   CloudArrowUpIcon,
   ExclamationTriangleIcon,
-  XCircleIcon,
-  CheckCircleIcon,
-  ChevronDownIcon
-} from '@heroicons/vue/24/solid'
-import { computed } from 'vue'
+  HandThumbUpIcon,
+  XCircleIcon
+} from '@heroicons/vue/24/solid';
+import { computed } from 'vue';
 
-import type { RequestStatus } from '/@/features/requestStatus/model'
+import type { RequestStatus } from '/@/features/requestStatus/model';
 
 interface Props {
   status: RequestStatus
@@ -59,7 +59,7 @@ const backgroundColor = computed(() => (status: RequestStatus) => {
 
 <template>
   <div
-    :class="`inline flex items-center rounded-3xl px-3 py-2 gap-2 text-white ${backgroundColor(
+    :class="`inline flex items-center rounded-3xl px-2 py-2 gap-2 text-white ${backgroundColor(
       status
     )}${hasMenu ? ' cursor-pointer' : ''}`"
     :title="statusToJpn(status)">

src/components/shared/UserIcon.vue

@@ -8,7 +8,7 @@ defineProps<{
 <template>
   <img
     :alt="name"
-    class="rounded-1/2 h-full p-1"
+    class="rounded-full h-full p-1"
     :src="`https://q.trap.jp/api/v3/public/icon/${name}`"
     :title="name" />
 </template>

src/pages/RequestsPage.vue

@@ -10,7 +10,6 @@ import { useUserStore } from '/@/stores/user'
 
 import { toPage } from '/@/lib/parseQueryParams'
 
-import RequestFilters from '/@/components/requests/RequestFilters.vue'
 import RequestItem from '/@/components/requests/RequestItem.vue'
 import PaginationBar from '/@/components/shared/PaginationBar.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
@@ -60,35 +59,35 @@ watch(
 </script>
 
 <template>
-  <div class="min-w-[640px] mx-auto flex w-2/3 flex-col px-12 pt-8">
-    <div class="relative flex w-full items-center justify-center pb-8">
-      <h1 class="text-center text-3xl">申請一覧</h1>
-      <div class="absolute right-0">
-        <RouterLink to="/requests/new">
-          <SimpleButton font-size="lg" padding="md">
-            申請の新規作成
-          </SimpleButton>
-        </RouterLink>
+  <div class="max-w-6xl mx-auto p-3 sm:p-8 flex flex-col gap-7">
+    <div class="flex flex-col">
+      <div class="relative flex w-full items-center justify-start gap-7">
+        <h1 class="text-center text-3xl">申請一覧</h1>
+        <div>
+          <RouterLink to="/requests/new">
+            <SimpleButton font-size="lg" padding="md">
+              申請を作成
+            </SimpleButton>
+          </RouterLink>
+        </div>
       </div>
     </div>
-  </div>
-  <RequestFilters />
-  <div class="min-h-[480px]">
-    <div class="mx-auto mt-4 w-3/4 rounded-xl shadow">
-      <ul>
-        <li
-          v-for="request in sliceRequestsAt(page, 7)"
-          :key="request.id"
-          class="hover:bg-hover-secondary first:hover:rounded-t-xl last:hover:rounded-b-xl">
-          <RequestItem :request="request" />
-        </li>
-      </ul>
+    <div class="min-h-120">
+      <div class="mx-auto rounded-xl shadow">
+        <ul>
+          <li
+            v-for="request in sliceRequestsAt(page, 7)"
+            :key="request.id"
+            class="hover:bg-hover-secondary">
+            <RequestItem :request="request" />
+          </li>
+        </ul>
+      </div>
     </div>
+    <PaginationBar
+      v-if="requests.length > 0"
+      :current-page="page"
+      path="/requests"
+      :total-pages="Math.ceil(requests.length / 7)" />
   </div>
-  <PaginationBar
-    v-if="requests.length > 0"
-    class="mt-4"
-    :current-page="page"
-    path="/requests"
-    :total-pages="Math.ceil(requests.length / 7)" />
 </template>