【RailsでLINEを作る】一覧画面を作る.1

CSSとJSで沼りまくってかなり時間かけた割には全然進まなかったと言う今日この頃です

とりあえず、modelに他のmodelとの関係性を書き込んでいく。軽く作っただけでも13個あるので記述量がえぐい

fontawesame と css でサイドバーを作成

後、形だけ検索窓を作る

ここまでは順調だった、けれどまずcssで沼った。

この吹き出しをホバーで表示させるのが想像以上に大変だった

アイコンにposition: relative; を持たせて吹き出しを　position: absolute; としたらまぁ〜〜訳の分からない表示になった

最終的にアイコンと吹き出しをspanで囲んで、span に position: relative; を持たせることでなんとか解決。

これでざっくり2時間半くらい。とても疲れる

次に、左下のアイコンで設定のポップアップが表示される機能を実装

ここはjQueryで、表示後はポップアップ以外をクリックでも消せるように

しかしここでもまた沼。色々記事を参考にしてなんとか実装。ざっくり3時間くらい。とても疲れる

index.html.slim

span
  i(name="other" id="talk-room-other" class="fas fa-ellipsis-h")
  p.other-fukidashi.fukidashi 設定
  .user-other
    = link_to '設定', '#'
    = link_to 'ヘルプ', '#'
    = link_to 'LINE情報', '#', class: 'LINE'
    = link_to 'ログアウト', destroy_user_session_path, method: :delete
    = link_to '終了', '#'

talk_room.js

  $(document).on('click', function(e){
    // 2.クリックされた場所の判定
    if(!$(e.target).closest('.user-other').length && !$(e.target).closest('#talk-room-other').length){
      $('.user-other').hide();
    } else if($(e.target).closest('#talk-room-other').length){
      // 3.ポップアップの表示状態の判定
      if($('.user-other').is(':hidden')){
        $('.user-other').show();
      } else {
        $('.user-other').hide();
      }
    }
  });

cssも関係しているからなんとも言えないけど

ちょっと、ほんのちょっとだけどjQueryとかJSがわかってきた気がします

今日はこれくらいにして明日はユーザーをテストで追加してフォローを作っていきますよ

またボチボチ更新していきます