✅Talk List Dialogの見た目を改善する

from ✅ダイアログの見た目を改善する Talk List Dialogの見た目を改善する

after

before

• 

  • 考えたこと
    • リスト冒頭のマージンが無駄
    • タイトルをリンクにしたらShowLogボタンは不要？
      • でも暗黙の操作より明示的な操作の方がわかりやすい？
    • タイトル手前で改行すると頭が揃ってみやすそう
    • アイテムの間にマージンつける

• React List component - Material-UI

  • 
    • 開発用PCでは使ってないからデータがしょぼいな
  • 
    • 一時的にそれっぽいタイトルを表示するようにしてみた

• iPhone Xサイズにしてみる

  • 
    • うーん、ボタンが縮んでテキストがはみ出てるのは微妙だなぁ
  • ボタンをdivで囲んだパターン
    • 
  • ListItemの外に出したパターン
    • 
  • 前者がいい

• ボタンが縮むのは親にflexがついてるから

• ボタンにalign-items: flex-end;して下に揃えた

• 

• 実機で確認

  • 
    • あー、テキストの長さがまちまちだとそうなるのかー

• スマホのローカルストレージに保存されてるトークリストを開発PCに持ってきて試したい

• ✅トークリストのエクスポート/インポート

• 開発PCで再現できた

  • 

• スペース節約のためにボタンが1列になれるならなった方がいいと考えてたけどそれほど良くないな

  • 

• flex-basis: 110px;で基本サイズを大きいボタンの幅にする、これで基本は折り返しになる

• flex-grow: 1;をテキストとボタンの両方のdivにつける、これでテキストが短い時にはボタンのdivも引き伸ばされ、十分伸びたら1列になる

• text-align: right;でボタンを右揃えにしておく。ボタンのdivがどうなろうが右端が揃うようになる。

• ボタンがテキストより上に突き出すのはダサい

  • 
  • align-self: flex-start;とalign-self: flex-end;でテキストを上に、ボタンを下にする

• リストの領域に薄墨を引いてボタン同様のシャドウをつける

  • background: #eee;
  • box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);

• できた

  • 

divの状態