お知らせの個別ページに最新のお知らせを10件表示するようにした

[a-terumoto-gs]

Issue

• https://github.com/fjordllc/bootcamp/issues/7493

概要

お知らせの個別ページの右側に最新のお知らせを10件表示するようにしました

変更確認方法

1. feature/display-latest-10-notifications-on-individual-notification-pageをローカルに取り込む
2. http://localhost:3000/announcementsにアクセス
3. どれか一つお知らせをクリックして個別ページを開く
4. 右側に最新のお知らせが10件表示されていることを確認する

Screenshot

変更前

変更後

[a-terumoto-gs]

@machida お疲れ様です！ こちらのissueですが、機能の実装は終わったのですが、表示を整えるのに苦戦しています。 ダッシュボードの「最新のみんなの日報」の該当コードを参考に、 デザイン用のタグなどをそのまま使わせていただきお知らせ用のコードを書いてみたので、 右側表示はスムーズにいきましたが、細かいところの不具合が2点生じています。

一つ目は表示位置のずれ(ずれと言っていいのかもわかりませんが…)で、 想定したのは「最新のお知らせ」という表示の下にお知らせ記事が10個表示される仕様ですが、右側の表示部分がヘッダーに食い込んで表示されています。 また下部のお知らせや左側のラインがフッターに食い込んで表示されています。

参考にしたダッシュボードの「最新のみんなの日報」では以下のような表示になっていてこれを目指していました…

二つ目の不具合は、長いお知らせを表示すると顕著にわかるのですが、右側の表示がスクロールについてこず、かつ、途中で途切れてしまいます ↓動画ですが見られますでしょうか https://github.com/fjordllc/bootcamp/assets/133624488/cb4c5989-afa8-487f-a402-876951db6152

このような状態になっているのですが、これは現在の実装にデザインを入れる段階できれいに調整可能な範囲でしょうか？ 試行錯誤はしてみたのですが、どうもうまくいかなかったため、「最新のみんなの日報」のデザインにプラスして新しく調整はいれておりません。 可能なのであれば、デザインをお願いできればと思います デザインをいれていただいて、後からシステムテストは足したいと思います。

ご確認よろしくお願いいたします

[machida]

@a-terumoto-gs 大丈夫ですよー、見た目の方の続きは僕の方でやりますー。ここまでやってくれて助かります🙏

[a-terumoto-gs]

@machida あとのデザインはよろしくお願いいたします！

[machida]

@a-terumoto-gs すいません、遅くなりました🙇‍♂️ デザイン完了しました！！

最新のmainからrebaseしてあるので、こちらのブランチを手元で動かす際は、

git pull --rebase origin feature/display-latest-10-notifications-on-individual-notification-page

をお願いします🙏

[a-terumoto-gs]

@nishitatsu-dev おつかれさまです！ こちらのPRのレビューをお願いしてもよろしいでしょうか？ お忙しい等あればその旨お伝えいただけると助かりますm(__)m

[nishitatsu-dev]

@a-terumoto-gs レビュー承知しました〜 １週間以内に対応しますので、少々お待ちください🙏

[a-terumoto-gs]

@komagata メンバーの方にApproveいただいたのでレビューをお願いしますm(__)m