bootcamp
bootcamp copied to clipboard
見たよ(足あと)を非同期にしたい
下記のように全件出しているとすごく重いのでJSで非同期で出したい。

Facebookのいいねのように、最初の3件だけ出して、「もっと見る」をクリックすると全件見えるような形にする。
:memo: (アイコン)(アイコン)、他23人
のような表記にして、クリックしたらモーダルで全員分出す。
@machida さん、お疲れ様です。IssueのUIの要件で確認したいことがあります!
-
モーダルで表示する意味をご教示いただきたいです
(アイコン)(アイコン)、他23人
で表示する場合、モーダルを使用せず、他23人
をクリックしたら現在の表示の通り全員分の足あとが表示されても良いのではないかと思いました。モーダルを使用する意図を知りたいです🙏 -
モーダルを使用する場合のUIにつきまして モーダルを使用する場合、どのような情報が必要で、どのように表示するべきでしょうか。 現状、足あとの表示には以下の情報が使用されています。
- ユーザーアイコン
- ユーザーのロール(卒業生、メンターなど)
ユーザーアイコンにマウスオーバーをした場合にのみユーザーの名前が表示されます。
モーダルを使用する場合、現状と全く同じ表示にするのか、それともFacebookのようにユーザーアイコン(ロール付)+名前の一覧を表示するのか、など色々な案があるなと思いました。
お手数をおかけしますが、上記2点につきましてご確認いただきたいです。よろしくお願いします🙇
@Nabegon 確かに、モーダルにしなくていいですね。Facebookみたいに場所が限られてる訳ではないので。 モーダルは無しにしましょう。
以下のようにしたいですー
最初に 10人表示されてて、

「もっと見る」をクリックすると...

このような動きにしたいです。
また、「もっと見る」をクリックしたあとにローディングが出るといいですね。ロード中という文字が表示されると助かります(プレースホルダにするのは別Issue)。
@machida さん、ご回答ありがとうございます。モーダルなしの件、承知しました。また、クリックした後にローディングを出す件も承知しました!
よろしくお願いしますー🙏
@machida さん、お疲れ様です!
パラパラとUIの仕様確認すみません💦また1点確認したいことがあります🙏
現状、足あとのアイコンを全件表示にすると、戻せません(全件表示されたままで、画面をリロードするまでは全件表示されています)。足あとのアイコンを全件表示/最初の10件だけ表示にリンクを押すと切り替えられるようにした方が良いでしょうか。
お手数をおかけしますが、お時間ある時にご回答いただけますと幸いです。よろしくお願いします🙇
@Nabegon 一度表示したら戻したいというシチュエーションとその理由は思い付かないので、戻せるようにはしなくて大丈夫ですー🙆♀️
@machida さん、迅速なご回答ありがとうございます🙏足あとを戻せるようにしない件、承知しました!
@machida さん、お疲れ様です!足あとが10件以上ある際に表示させるリンクのデザインの件で質問があります。
現在、リンクには暫定的にcssのpage-content-prev-next__item-link
クラスを使用しています。
こちら、まちださんにデザインをお願いした方が良いでしょうか。
現在の足あとのリンクの見た目は下記の通りです。
ご検討のほどよろしくお願いします🙏
@Nabegon アサインありがとうございますー
このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。