[アップロードファイル管理] サムネイルを拡大表示できるようにしました

[gakigaki]

概要

アップロードファイル一覧で画像ファイルのサムネイルを見やすくし、オンマウスで拡大表示できるようにしました。

変更内容

• アップロードファイル一覧の画像サムネイルを大きめの表示に変更しました。
• 画像サムネイルにマウスを重ねる、またはキーボードでフォーカスすると拡大プレビューを表示するようにしました。
• サムネイル表示部分をBlade partialに分け、表示用CSSをSassに移動しました。
• 画像ファイルと画像以外の表示差分を確認するUnitテストを追加しました。

背景と目的

アップロードファイル一覧のサムネイルが小さく、画像の内容を一覧上で確認しにくい状態でした。
一覧上で内容を確認しやすくするため、通常表示のサムネイルを大きくし、必要に応じて小さな拡大プレビューでも確認できるようにしました。

特記事項

画像以外のファイルは従来どおりファイル名リンクのみを表示します。
画面表示用のCSSを更新したため、public/css/app.css と public/mix-manifest.json も更新しています。

レビュー完了希望日

軽微な改修のため急ぎません。

関連Pull requests/Issues

なし

参考

確認した内容:

• docker compose exec -T webapp php vendor/bin/phpunit tests/Unit/Plugins/Manage/UploadfileManage/UploadfileManageThumbnailViewTest.php
  • OK: 2 tests, 8 assertions
• docker compose exec -T webapp php vendor/bin/phpunit tests/Feature/Plugins/Manage/UploadfileManage/UploadfileManageSearchTest.php
  • OK: 7 tests, 14 assertions
• npm run prod
  • CSS生成は成功しました。

DB変更の有無

無し

チェックリスト

• プルリクエストにわかりやすいタイトルとラベルを付けました。https://github.com/opensource-workshop/connect-cms/wiki/Pull-requests-Rule