Flashメッセージはブラウザをリロードすれば消えますが、メッセージ横に×ボタンを設置してクリックしたらcloseできるようにしました。
アラートはBootstrap3のalert-infoとalert-dangerを使用して、若干cssを追加しています。
レイアウトにアラートを設置する
レイアウト毎に共通して同じアラートを使う場合ですが、レイアウトのヘッダーの下部にアラートのパーシャルを読み込むようにしました。
app/views/layouts/application.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>Remonote</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <%= render 'layouts/header' %> <%= render 'layouts/alert' %> <!-- ここに追加 --> <%= yield %> </body> </html> |
テンプレートの方は次の通りです。noticeかalertかで分岐しています。×ボタンはHTML-特殊文字を使用しています。
app/views/layouts/_alert.html.erb
|
1 2 3 4 5 6 7 8 9 |
<% if notice %> <div class="alert alert-info"><%= notice %> <button type="button" class="close" data-dismiss="alert">×</button> </div> <% elsif alert %> <div class="alert alert-danger"><%= alert %> <button type="button" class="close" data-dismiss="alert">×</button> </div> <% end %> |
スタイルシート
一応、今回加えたcssも載せておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.alert { text-align: center; } .alert-info { background-color: #bde9ff; border-color: #bde9ff; color: #4c6977; } .alert-danger { background-color: #f3c0c0; border-color: #f3c0c0; color: #3e3a3a; } |
簡単ですが以上です！ご覧いただきありがとうございました！！😀
