🎸 feat: 全ページ共通のレイアウトとする

[anko9801]

User description

変更箇所

• これまでそれぞれのページで異なるレイアウトとなっていたところ、App.vue にまとめた

---

PR Type

Enhancement

---

Description

• 全ページのレイアウトを統一し、コードの簡素化と一貫性を向上。
• 各ページで不要なコンテナ要素を削除し、レイアウトを簡素化。
• App.vueで全体のレイアウトを中央揃えに変更。
• グリッドやページネーションのスタイルを調整し、視覚的一貫性を改善。
• インポートの整理によりコードの可読性を向上。

---

Changes walkthrough 📝

Relevant files

Enhancement

11 files App.vue Unified layout structure in App.vue                                            src/App.vue Unified layout by wrapping content in a centered container. Adjusted main element styles for consistent layout. +15/-14  AdminPage.vue Simplified layout structure in AdminPage.vue                          src/pages/AdminPage.vue Removed unnecessary container div for layout simplification. +1/-1      GroupDetailPage.vue Simplified layout and organized imports in GroupDetailPage.vue src/pages/GroupDetailPage.vue Removed unnecessary container div for layout simplification. Adjusted imports for better organization. +2/-2      GroupsPage.vue Simplified layout and improved grid structure in GroupsPage.vue src/pages/GroupsPage.vue Simplified layout structure by removing redundant wrappers. Adjusted grid and pagination layout for consistency. +30/-34  NewGroupPage.vue Simplified layout and organized imports in NewGroupPage.vue src/pages/NewGroupPage.vue Removed unnecessary container div for layout simplification. Adjusted imports for better organization. +2/-4      NewRequestPage.vue Simplified layout structure in NewRequestPage.vue                src/pages/NewRequestPage.vue Simplified layout structure by removing redundant wrappers. +47/-49  NewTransactionPage.vue Simplified layout structure in NewTransactionPage.vue        src/pages/NewTransactionPage.vue Removed unnecessary container div for layout simplification. +1/-1      RequestDetailPage.vue Simplified layout and organized imports in RequestDetailPage.vue src/pages/RequestDetailPage.vue Removed unnecessary container div for layout simplification. Adjusted imports for better organization. +2/-4      RequestsPage.vue Simplified layout structure in RequestsPage.vue                    src/pages/RequestsPage.vue Simplified layout structure by removing redundant wrappers. Adjusted layout for better alignment and spacing. +9/-11    TransactionDetailPage.vue Simplified layout structure in TransactionDetailPage.vue  src/pages/TransactionDetailPage.vue Removed unnecessary container div for layout simplification. +1/-3      TransactionsPage.vue Simplified layout and improved pagination in TransactionsPage.vue src/pages/TransactionsPage.vue Simplified layout structure by removing redundant wrappers. Adjusted pagination layout for consistency. +22/-26

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Layout Change Validation The new layout structure in App.vue introduces a centralized layout with a main container and a router-view. Ensure that this change does not break existing page-specific layouts or introduce visual inconsistencies. <main class="text-text-primary bg-surface-primary pt-12"> <div class="md:w-2/3 w-5/6 mx-auto mt-8 pb-32"> <router-view v-slot="{ Component }"> <template v-if="Component"> <suspense> <template #default> <component :is="Component" /> </template> <template #fallback> <div>loading...</div> </template> </suspense> </template> </router-view> </div> Pagination and Grid Changes The grid and pagination structure for the groups page has been modified. Verify that the new grid layout and pagination logic work as expected and maintain usability. <div class="relative flex flex-wrap mb-8 gap-x-7 gap-y-2 w-full items-center"> <h1 class="text-2xl">グループ一覧</h1> <div v-if="isAdmin"> <RouterLink to="/groups/new"> <SimpleButton font-size="lg" padding="md"> グループを作成 </SimpleButton> </RouterLink> </div> </div> <div class="grid grid-cols-[2fr_3fr_2fr] divide-y my-7"> <div class="grid grid-cols-subgrid col-span-3 bg-surface-tertiary gap-x-2 px-6 py-4 whitespace-nowrap"> <div>グループ名</div> <div>詳細</div> <div>予算</div> </div> <RouterLink v-for="group in sliceGroupsAt(page, 10)" :key="group.id" class="grid grid-cols-subgrid col-span-3 hover:bg-hover-secondary gap-x-2 px-6 py-4" :to="`/groups/${group.id}`"> <div>{{ group.name }}</div> <div class="truncate">{{ group.description }}</div> <div>{{ group.budget }}</div> </RouterLink> </div> <PaginationBar v-if="groups.length > 0" :current-page="page" path="/groups" :total-pages="Math.ceil(groups.length / 10)" /> Form Layout Simplification The form layout for creating new requests has been simplified. Ensure that all required fields and their validations are still functioning correctly. <div class="pb-8"> <h1 class="text-2xl">申請の新規作成</h1> </div> <form class="flex flex-col gap-6"> <div class="flex flex-col gap-2"> <label class="text-sm font-medium">申請者</label> <span>{{ me?.name }}</span> </div> <div class="flex flex-col gap-2"> <label class="text-sm font-medium" for="title">タイトル</label> <InputText id="title" v-model="request.title" auto-focus placeholder="タイトルを入力" /> </div> <div class="flex flex-col gap-2"> <label class="text-sm font-medium" for="details">詳細</label> <MarkdownTextarea id="details" v-model="request.content" placeholder="" :templates="requestTemplates" /> </div> <NewRequestTargets :targets="request.targets" @input="request.targets = $event" /> <div class="flex flex-col gap-2"> <label class="text-sm font-medium" for="group">グループ</label> <InputSelectSingle id="group" v-model="request.group" class="w-full" :options="groupOptions" placeholder="グループを選択" /> </div> <NewRequestTag :tags="request.tags" @input="request.tags = $event" /> <NewRequestFileForm :files="files" @input="files = $event" /> <div class="text-right"> <SimpleButton :disabled="isSending" font-size="base" padding="md" @click.stop="postRequest"> 申請を作成 </SimpleButton> </div> </form>