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

reiroop · 2024-06-29T04:17:38Z

User description

フィルターが一時的に消えています
最外部のmarginが調整されています
タイトル部分が左寄せになりました
一覧の要素にpaddingが追加されています
一部表記が変更されました
アイコンが追加されました
レスポンシブ対応をしています

PR Type

enhancement

Description

RequestItem.vueにユーザーアイコンを追加し、UIを改善しました。
RequestsPage.vueでレスポンシブデザインを改善し、フィルターコンポーネントを削除しました。
ページネーションバーの位置を調整し、全体的なレイアウトを改善しました。

Changes walkthrough 📝

Relevant files

Enhancement

RequestItem.vue `RequestItemコンポーネントのUIとレイアウトを改善` src/components/requests/RequestItem.vue ユーザーアイコンを追加レイアウトの調整（padding, gapの追加）金額表示のフォントとサイズを調整	+21/-13
RequestsPage.vue `RequestsPageのデザインとレイアウトを調整` src/pages/RequestsPage.vue レスポンシブデザインの改善フィルターコンポーネントの削除ページネーションバーの位置調整	+27/-28

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

figmaに合わせました

created_by から createdBy へ

mehm8128

気になったところ雑にレビューしました
Figmaでauto layoutになってるところは基本flexかgridで作ってpaddingとかgapとかでスペーシングして、できるだけmarginとかはつけないように修正するときれいになりそうです(Figma適当だった頃に昔の僕がmarginつけてたのが悪いけど)

src/components/requests/RequestItem.vue

src/pages/RequestsPage.vue

#190 (comment) を参考に

名前と金額の間に8pxのgapを追加、figmaのデザインに合わせた形

mehm8128 · 2024-07-01T11:29:32Z

/review

github-actions · 2024-07-01T11:30:12Z

PR Reviewer Guide 🔍

(Review updated until commit `b52424e`)

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Key issues to review UI Consistency 新しいユーザーアイコンの追加とレイアウトの変更が行われていますが、アイコンのサイズや配置に関する一貫性が確認されているか再確認が必要です。特に、`UserIcon` コンポーネントの `max-w-7` クラスが適切かどうかを検討してください。 Responsive Design レスポンシブデザインの調整が行われていますが、特にスマホサイズでの表示に関するTodoが完了しているか確認が必要です。`max-w-6xl` クラスの使用が適切かどうかも再検討してください。

mehm8128 · 2024-07-01T11:30:51Z

/improve

mehm8128 · 2024-07-22T02:53:58Z

マージミスってそうですが大丈夫ですか？
git reset --hard b59aa7dで直るかな

reiroop · 2024-08-22T02:07:41Z

マージミスってそうですが大丈夫ですか？ git reset --hard b59aa7dで直るかな

直せました、ありがとうございます

幅が狭くなった時に縦に並ぶように変更しました。inline-blockを使っています。

src/components/shared/TagsGroup.vue

mehm8128 · 2024-08-22T12:23:46Z

作業中ならすぐじゃなくても大丈夫ですが、conflictの解消もお願いします🙏

前のコミットの内容からflex-wrapを使う形に修正

画面比率を変えても要素が画面外に出ないようflex-wrapを実装し、alignやgapを調整しました。

StatusChipの左にあったスペースを削除し、右のスペースを20pxに変更しました。

reiroop · 2024-09-07T02:23:28Z

/improve

github-actions · 2024-09-07T02:24:06Z

PR Code Suggestions ✨

Latest suggestions up to 23fba99

Category	Suggestion	Score
Layout issue	`flex-grow` クラスを削除して、レイアウトの問題を解決します。 `RouterLink` コンポーネント内で `flex-grow` クラスが複数の `div` 要素に適用されていますが、これにより予期しないレイアウトの問題が発生する可能性があります。特に、親要素が `flex` ディスプレイを使用している場合、子要素のサイズが不均等になることがあります。これを解決するために、特定の `div` から `flex-grow` を削除することを検討してください。 src/components/requests/RequestItem.vue [36-42] -<div class="flex flex-grow flex-wrap"> - <div class="flex-grow"> +<div class="flex flex-wrap"> + <div> <span class="text-xl">{{ request.title }}</span> <div class="mt-2"> <TagsGroup :tags="request.tags" /> </div> </div> Suggestion importance[1-10]: 8 Why: The suggestion to remove `flex-grow` from certain `div` elements is valid as it addresses potential layout issues that can arise from uneven sizing of child elements. This is a significant improvement for layout consistency.	8
Design consistency	アイコンのパディング設定を削除して、デザインの一貫性を保ちます。 `UserIcon` コンポーネントの `class` 属性に `h-5 p-0` を設定していますが、`p-0` はパディングをゼロに設定するもので、アイコンの見た目に影響を与える可能性があります。デザインの一貫性を保つために、このパディング設定を削除することを検討してください。 src/components/requests/RequestItem.vue [46] -<UserIcon class="h-5 p-0" :name="userMap[request.createdBy]" /> +<UserIcon class="h-5" :name="userMap[request.createdBy]" /> Suggestion importance[1-10]: 7 Why: Removing the padding setting from the `UserIcon` component can help maintain design consistency. This suggestion is valid as it addresses a potential design inconsistency, though it is not critical.	7

Previous suggestions

Suggestions

Category	Suggestion	Score
Possible bug	`SimpleButton` の属性を標準的な Vue.js のスタイルに合わせて修正します。 `SimpleButton` コンポーネントに `font-size="lg"` と `padding="md"` を指定していますが、これらの属性は Vue.js の標準的な属性ではありません。カスタムコンポーネントでこれらの属性を適切に処理しているか確認し、必要に応じて修正してください。 src/pages/RequestsPage.vue [68] -<SimpleButton font-size="lg" padding="md"> +<SimpleButton class="text-lg p-4"> Suggestion importance[1-10]: 8 Why: The suggestion identifies a potential bug with non-standard attributes in the `SimpleButton` component, which could lead to unexpected behavior if not handled properly. This is important for ensuring the component functions as intended.	8
Possible issue	`RouterLink` のパディングを元の設定に戻します。 `RouterLink` のクラス属性が `flex px-6 py-4` に変更されていますが、この変更により、リンクのパディングが以前よりも大きくなっています。これが意図的なデザイン変更でない場合は、元のパディングに戻すことを検討してください。 src/components/requests/RequestItem.vue [32] -<RouterLink class="flex px-6 py-4" :to="'/requests/' + request.id"> +<RouterLink class="flex p-2" :to="'/requests/' + request.id"> Suggestion importance[1-10]: 7 Why: The suggestion correctly identifies a potential unintended design change. Reverting the padding could be important for maintaining the intended UI layout.	7
Maintainability	レスポンシブデザインを考慮して、不要な最小幅設定を削除します。新しいページデザインで `min-w-160` クラスを使用していますが、これによりコンテンツの最小幅が設定されています。レスポンシブデザインの観点から、この設定が適切であるか確認し、必要に応じて調整してください。 src/pages/RequestsPage.vue [63] -<div class="min-w-160 flex flex-col"> +<div class="flex flex-col"> Suggestion importance[1-10]: 6 Why: The suggestion to remove the `min-w-160` class addresses a potential issue with responsive design, which is important for maintainability and user experience on different devices.	6
Enhancement	アイコンのパディングを調整して、UI の一貫性を向上させます。 `UserIcon` コンポーネントのクラス属性に `h-5 p-0` を指定していますが、これはアイコンのサイズとパディングを制御します。デザインの一貫性を保つために、他の UI 要素との間隔を調整することをお勧めします。 src/components/requests/RequestItem.vue [45] -<UserIcon class="h-5 p-0" :name="userMap[request.createdBy]" /> +<UserIcon class="h-5 p-1" :name="userMap[request.createdBy]" /> Suggestion importance[1-10]: 5 Why: The suggestion to adjust padding for `UserIcon` is minor and subjective, focusing on UI consistency. It does not address a critical issue or bug.	5

github-actions · 2024-09-07T02:24:11Z

Persistent review updated to latest commit 23fba99

github-actions · 2024-09-28T05:42:09Z

Persistent review updated to latest commit b52424e

mehm8128

tailwind移行時に壊れたっぽいところメインですがちょっと気になったところ書きました
あとはそんなに問題なさそうです

src/components/requests/RequestItem.vue

mehm8128 · 2024-09-28T12:51:44Z

src/components/requests/RequestItem.vue

-  <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" />


status chip

完全な丸になってなさそう

Figmaで中身塗りつぶさないやつ使ってるので、そっちの方がいいかもです

src/pages/RequestsPage.vue

…るように

anko9801 · 2024-12-21T10:43:32Z

src/components/requests/RequestItem.vue

-      <span class="text-xl">{{ request.title }}</span>
-      <div class="mt-2">
-        <TagsGroup :tags="request.tags" />
+    <div class="flex flex-grow flex-wrap">


折り返したときに右側が空いてしまうのが気になります。これはまだデザインが決まってないので別 PR でレスポンシブデザインにするのが筋かなと思います。

anko9801 · 2024-12-21T10:52:37Z

src/pages/RequestsPage.vue

-            申請の新規作成
-          </SimpleButton>
-        </RouterLink>
+  <div class="max-w-6xl mx-auto p-3 sm:p-8 flex flex-col gap-7">


ここは App.vue のところを書き換えて全ページでデザインを共通化した方がのちのち楽だと思うので別 PR でお願いしたいです 🙏

reiroop added 5 commits June 17, 2024 18:04

✨ フィルターを一時的に削除

e02cf7b

🎨 cssのmargin/padding周りの整理

1f924e8

🎨 PaginationBarのmargin topを削除

eb8ada8

✨ 申請一覧、申請を作成の位置を調整

c4553da

💄 feat: RequestItemに外側のpaddingを追加

173d27c

reiroop requested a review from mehm8128 June 29, 2024 04:17

reiroop and others added 3 commits June 29, 2024 13:23

💄 feat: ユーザーアイコンをRequestItemに追加

6e90d1a

figmaに合わせました

Merge branch 'main' into feat/request_page

0d51698

🎨 fix: request.createdBy のメソッド名の変更に対応

5c56f87

created_by から createdBy へ

mehm8128 reviewed Jun 29, 2024

View reviewed changes

src/components/requests/RequestItem.vue Outdated Show resolved Hide resolved

src/components/requests/RequestItem.vue Outdated Show resolved Hide resolved

src/pages/RequestsPage.vue Show resolved Hide resolved

src/pages/RequestsPage.vue Outdated Show resolved Hide resolved

reiroop added 3 commits June 29, 2024 19:27

💄 feat: 金額のフォントやサイズを調整

8e6fb5c

#190 (comment) を参考に

💄 feat: ユーザーアイコン・ユーザー名のUIを改善

262ca91

#190 (comment) を参考に

💄 feat: RequestItem の右側に縦の gap を追加

b59aa7d

名前と金額の間に8pxのgapを追加、figmaのデザインに合わせた形

github-actions bot added the Review effort [1-5]: 2 label Jul 1, 2024

reiroop force-pushed the feat/request_page branch from 33dc4e3 to b59aa7d Compare August 20, 2024 12:34

feat: RequestPageの横のmarginをautoに

c1950af

💄 refactor: TagsGroup.vueのレスポンシブ対応

9efa78b

幅が狭くなった時に縦に並ぶように変更しました。inline-blockを使っています。

reiroop requested a review from mehm8128 August 22, 2024 07:16

mehm8128 reviewed Aug 22, 2024

View reviewed changes

src/components/shared/TagsGroup.vue Outdated Show resolved Hide resolved

reiroop added 3 commits August 23, 2024 18:54

💄 refactor: TagsGroup.vueのレスポンシブ対応

4d584e7

前のコミットの内容からflex-wrapを使う形に修正

💄 refactor: RequestItem.vueのレスポンシブ対応

9a47567

画面比率を変えても要素が画面外に出ないようflex-wrapを実装し、alignやgapを調整しました。

💄 fix: RequestItem.vueのStatusChipの右のgapを調整

297bfb0

StatusChipの左にあったスペースを削除し、右のスペースを20pxに変更しました。

reiroop force-pushed the feat/request_page branch from becb7f4 to 297bfb0 Compare August 28, 2024 06:36

Merge branch 'main' into feat/request_page

b16a491

reiroop and others added 7 commits September 7, 2024 12:01

refactor: Update UserIcon size in RequestItem.vue

ce2ba5f

Merge branch 'main' into feat/request_page

069c31c

Merge branch 'main' into feat/request_page

bd37bf7

Merge branch 'main' into feat/request_page

e8ce69e

Merge branch 'main' into feat/request_page

34ee49b

Merge branch 'main' into feat/request_page

bb1b295

💄 fix: アイコンサイズを修正、paddingをレスポンシブに

fc1c413

reiroop self-assigned this Sep 28, 2024

reiroop and others added 2 commits September 28, 2024 10:41

💄 feat: 横方向のpadding, gapをレスポンシブに

002fec0

Merge branch 'main' into feat/request_page

b52424e

reiroop marked this pull request as ready for review September 28, 2024 05:41

reiroop requested a review from anko9801 September 28, 2024 06:03

reiroop linked an issue Sep 28, 2024 that may be closed by this pull request

申請一覧ページ #157

Open

mehm8128 reviewed Sep 28, 2024

View reviewed changes

reiroop and others added 9 commits November 1, 2024 21:17

Merge branch 'main' into feat/request_page

da9ea33

run npm i

9290595

run npm audit fix --force

4f3b0a9

run npm audit fix --force

7a2cdbd

💄 feat: UserIcon.vueが円形になっていなかった問題を修正、RequestsPage.vueでホバー時に正常に背景色が変わ…

c004b07

…るように

💄 fix: StatusChip.vueを円形に

7df08f0

Merge branch 'main' into feat/request_page

51be5dc

Merge branch 'main' into feat/request_page

7a30e70

Merge branch 'main' into feat/request_page

d88de14

anko9801 requested changes Dec 21, 2024

View reviewed changes

anko9801 self-requested a review December 21, 2024 10:54

anko9801 approved these changes Dec 21, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

reiroop commented Jun 29, 2024 •

edited

Loading

mehm8128 left a comment

mehm8128 commented Jul 1, 2024

github-actions bot commented Jul 1, 2024 •

edited

Loading

mehm8128 commented Jul 1, 2024

mehm8128 commented Jul 22, 2024

reiroop commented Aug 22, 2024

mehm8128 commented Aug 22, 2024

reiroop commented Sep 7, 2024

github-actions bot commented Sep 7, 2024 •

edited

Loading

github-actions bot commented Sep 7, 2024

github-actions bot commented Sep 28, 2024

mehm8128 left a comment

mehm8128 Sep 28, 2024

anko9801 Dec 21, 2024

anko9801 Dec 21, 2024

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

Are you sure you want to change the base?

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

Conversation

reiroop commented Jun 29, 2024 • edited Loading

User description

PR Type

Description

Changes walkthrough 📝

mehm8128 left a comment

Choose a reason for hiding this comment

mehm8128 commented Jul 1, 2024

github-actions bot commented Jul 1, 2024 • edited Loading

PR Reviewer Guide 🔍

(Review updated until commit b52424e)

mehm8128 commented Jul 1, 2024

mehm8128 commented Jul 22, 2024

reiroop commented Aug 22, 2024

mehm8128 commented Aug 22, 2024

reiroop commented Sep 7, 2024

github-actions bot commented Sep 7, 2024 • edited Loading

PR Code Suggestions ✨

Previous suggestions

github-actions bot commented Sep 7, 2024

github-actions bot commented Sep 28, 2024

mehm8128 left a comment

Choose a reason for hiding this comment

mehm8128 Sep 28, 2024

Choose a reason for hiding this comment

anko9801 Dec 21, 2024

Choose a reason for hiding this comment

anko9801 Dec 21, 2024

Choose a reason for hiding this comment

reiroop commented Jun 29, 2024 •

edited

Loading

github-actions bot commented Jul 1, 2024 •

edited

Loading

(Review updated until commit `b52424e`)

github-actions bot commented Sep 7, 2024 •

edited

Loading