[６９]Bootstrap |Googleフォント・アイコン<< [ホームに戻る] >> [７１]Bootstrap | 電話番号カラム追加
「15 | 画像アップロード」のBootstrap変更部分のみ書いておきます。
ダッシュボードビューに記述を追加します。
記述更新 app\views\users\dashboard.html.erb
コードをコピーしてファイルの内容を置き換えて下さい。
<div class="row" style="margin: 20px;"> <!-- 左側 --> <div class="col-4"> <div class="card"> <div class="card-body"> <!-- アバター --> <%= image_tag avatar_url(current_user), class: "img-fluid img-thumbnail rounded-pill" %> <!-- 画像アップロードボタン --> <div class="mx-auto" style="width: 200px;"> <h5 class="card-title btn-block" style="margin-left: 15px; margin-top: 10px;"><%= current_user.full_name %></h5> </div> <a data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample3"> <div> <strong> <button type="button" class="btn btn-info btn-block"><i class="fas fa-upload"></i>アバター画像アップロード</button> </strong> </a> <br/> <div class="collapse" id="collapseExample3"> <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %> <%= f.file_field :avatar, class: "input-group-text", onchange: "this.form.submit();" %> <% end %> </div> <br/> </div> <hr/> <!-- アカウント情報 --> <div style="margin-top: 10px; margin-left: 30px;"> アカウント登録日 </div> <div class="mx-auto" style="width: 200px;"> <h5 class="card-title btn-block" style="margin-top: 10px;"><strong><%= I18n.l(current_user.created_at, format: :full_date) %></strong></h5> </div> <hr/> <!-- オンラインステータス --> <div style="margin-top: 10px; margin-left: 30px;"> ステータス </div> <br/> <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> <div style="margin-left: 20px;"> <strong> <% if current_user.status %> <span class="btn btn-success"><i class="toggle far fa-edit"></i>オンライン</span> <% else %> <span class="btn btn-danger"><i class="toggle far fa-edit"></i>オフライン</span> <% end %> </strong> </a> <div class="collapse" id="collapseExample"> <div class="card card-body"> <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %> <%= f.select(:status, options_for_select([["オンライン", true], ["オフライン", false]]), {}, {class: "custom-select"}) %> <br/> <br/> <%= f.submit "保存", class: "btn btn-danger" %> <% end %> </div> </div> </div> <hr/> <!-- 自己紹介 --> <div style="margin-top: 10px; margin-left: 30px;"> 自己紹介 <br/> <br/> <%= current_user.about %> </div> <br/> <a data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2"> <div style="margin-left: 20px;"> <strong> <span class="btn btn-danger"><i class="toggle far fa-edit"></i>編集</span> </strong> </a> <div class="collapse" id="collapseExample2"> <div class="card card-body"> <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %> <%= f.text_area :about, autofocus: true, autocomplete: 'form'%> <br/> <br/> <%= f.submit "保存", class: "btn btn-danger" %> <% end %> </div> </div> </div> <hr class="h-10"> <!-- 電話番号 --> </div> </div> </div> <!-- 右側 --> <div class="col-8"> <!-- お知らせ --> <div class="card"> <div class="card-header"> お知らせ </div> <div class="card-body"> <h5 class="card-title"></h5> <p class="card-text"></p> </div> </div> <br/> <!-- 登録しているお部屋 --> <div class="card"> <div class="card-header"> 登録しているお部屋() </div> <div class="card-body"> <div class="row"> </div> </div> </div> </div> </div>
ナビゲーションバーを更新します。
app\views\shared\_navbar.html.erb
<nav class="navbar navbar-expand-lg navbar-dark bg-info" style="z-index: 5;"> <a class="navbar-brand" href="/"><h1 class="navh1">MinpakuBs</h1></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown"> <ul class="navbar-nav"> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <li class="nav-item" style="margin-right: 20px; margin-bottom: 5px;"> <%= link_to "新規ユーザ登録", new_user_registration_path, class: "btn btn-light" %> </li> <li class="nav-item"> <%= link_to "ログイン", new_user_session_path, class: "btn btn-light", style: "margin-right: 80px;" %> </li> <!-- ログインしていたら --> <% else %> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <figure class="avatar <%= current_user.status ? "online" : "offline" %>"></figure> <%= image_tag avatar_url(current_user), class: "bd-placeholder-img figure-img img-fluid rounded-pill", style: "width: 40px; height: 30px;" %> <%= current_user.full_name %> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <span class="dropdown-item"><i class="fas fa-user-edit"></i><%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "btn btn-white" %></span> <hr/> <span class="dropdown-item"><i class="fas fa-sign-out-alt"></i><%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "btn btn-white" %></span> </div> </li> <% end %> </ul> </div> </nav> <% if (user_signed_in?) %> <nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 3;"> <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown"> <ul class="navbar-nav mr-auto"> <li class="nav-item" style="margin-left: 100px; margin-bottom: 5px; margin-right: 80px;"> <span style="margin-top:13px;"><i class="fas fa-tachometer-alt"></i></span><%= link_to 'ダッシュボード', dashboard_path, class: "btn btn-light" %> </li> <li class="nav-item dropdown" style="margin-right: 50px;"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-hospital-symbol"></i> ホスト </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-user-friends"></i> ゲスト </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> </div> </li> </ul> </div> </nav> <% end %>
ブラウザ確認
http://localhost:3000/dashboard
ドロップダウンメニューにアバター画像をつけました。
アバター画像をアップロードできるか確認して下さい。
↓↓クリックして頂けると励みになります。
[６９]Bootstrap |Googleフォント・アイコン<< [ホームに戻る] >> [７１]Bootstrap | 電話番号カラム追加
