スポンサーリストを追加#26
Conversation
✅ Deploy Preview for unrivaled-empanada-4b1c20 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
ダミー画像でも例を出してくれるとスタイルのレビューなどもできるのですがいかがでしょうか。 |
|
@mochi-yu まだ実装途中なので、レビュー投げるときはダミーデータ入れた状態にしますね〜 |
|
@masakurapa i18n 対応をスポンサー一覧ページにも取り込んでいます、そちらの都合の良いタイミングで #36 マージしてください 🙇🏻 |
|
@mochi-yu ありがとうございます、取り込みました〜!! |
mochi-yu
left a comment
mochi-yu
left a comment
There was a problem hiding this comment.
レスポンシブ対応が不十分そうなところがあり、言葉で全て伝えるのも難しそうでしたので b76e0a1 で例として変更しています。
上のコミットではコメントで指摘している各所についても修正されているかと思います。
主な変更内容としては以下のとおりです。
- コンテナの
width: fit-content;を使わない- 中の要素の大きさに応じて、画面幅を超えてしまう可能性がある。
- 画像サイズを固定で指定しない。
- 画面サイズを変更した時に画面幅を超えてしまうため。
- かわりに、
aspect-ratioは固定して、 width は 100% としています。
| img { | ||
| object-fit: contain; | ||
| border-radius: 50%; | ||
| display: block; | ||
| margin: 0 auto; | ||
| } |
There was a problem hiding this comment.
| img { | |
| object-fit: contain; | |
| border-radius: 50%; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| img { | |
| object-fit: cover; | |
| border-radius: 50%; | |
| display: block; | |
| margin: 0 auto; | |
| } |
正方形ではない画像の時に見切れそうです。
There was a problem hiding this comment.
coverにすると逆に画像がほとんど見えないケースもありそうなんですよねー
ここは実際のデータ入ってきてから再調整でもいいですかね？
There was a problem hiding this comment.
coverにすると逆に画像がほとんど見えないケースもありそうなんですよねー
これってどういうものですかね…？極端に縦長・横長の画像をもらうとかでしょうか？
そういった画像が来る方が珍しい気がして、ベース cover の方がスタイルとしては統一感あるのかな、と思ってしまいますね 🤔
There was a problem hiding this comment.
そうですねー、去年の見ていただくと分かるかもしれないです（こちらについてはある程度サイズ定義出来ないか確認してみましょうかね）
There was a problem hiding this comment.
画像集めるのは自分だと思うので、正方形の前提で object-fit: cover; で作成いただけないでしょうか？画像を集める要件にもそのように記載の予定です。
|
@masakurapa プッシュしそびれていました、こちらです： b76e0a1 |
|
@mochi-yu 全体的に取り込みつつ再調整しました cssの分岐が多くなってきていたため、スポンサー種別毎にcomponentを分離しています preview: https://deploy-preview-30--unrivaled-empanada-4b1c20.netlify.app/ |
|
ドリンクとランチのスポンサーでロゴサイズが変わってしまうのが気になりました。シルバーのサイズに合わせるので僕の方でも CSS 調整してみようかと思います。 
|
| li > img { | ||
| width: 208px; | ||
| height: auto; | ||
| aspect-ratio: 208 / 100; | ||
| max-width: 100%; | ||
| object-fit: contain; | ||
| } |
There was a problem hiding this comment.
nits: 素の img タグは inline なので、コンテナの下に微妙な余白が入ってしまいます。（他のコンポーネントも同様）
| li > img { | |
| width: 208px; | |
| height: auto; | |
| aspect-ratio: 208 / 100; | |
| max-width: 100%; | |
| object-fit: contain; | |
| } | |
| li > img { | |
| width: 208px; | |
| height: auto; | |
| aspect-ratio: 208 / 100; | |
| max-width: 100%; | |
| object-fit: contain; | |
| display: block; | |
| } |
| img { | ||
| object-fit: contain; | ||
| border-radius: 50%; | ||
| display: block; | ||
| margin: 0 auto; | ||
| } |
There was a problem hiding this comment.
画像集めるのは自分だと思うので、正方形の前提で object-fit: cover; で作成いただけないでしょうか？画像を集める要件にもそのように記載の予定です。
| ul { | ||
| display: grid; | ||
| grid-template-columns: repeat(2, auto); | ||
| list-style: none; | ||
| text-align: center; | ||
| padding: 0 118px; | ||
| gap: 20px; | ||
| margin: 0 auto; | ||
| justify-content: center; | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| } |
There was a problem hiding this comment.
ドリンクスポンサーは 1 社なので、gap がありロゴが中央になっていませんでした。
| ul { | |
| display: grid; | |
| grid-template-columns: repeat(2, auto); | |
| list-style: none; | |
| text-align: center; | |
| padding: 0 118px; | |
| gap: 20px; | |
| margin: 0 auto; | |
| justify-content: center; | |
| width: 100%; | |
| box-sizing: border-box; | |
| } | |
| ul { | |
| display: grid; | |
| grid-template-columns: repeat(2, auto); | |
| list-style: none; | |
| text-align: center; | |
| padding: 0 118px; | |
| margin: 0 auto; | |
| justify-content: center; | |
| width: 100%; | |
| box-sizing: border-box; | |
| } |
| li > img { | ||
| width: 262px; | ||
| } |
There was a problem hiding this comment.
sp サイズでは表示されるコンテナのアスペクト比がそもそも違っていそうです。（他のコンポーネントも同様）
2 participants
概要
変更理由
変更内容
レビュワーへの共有事項など