diff app/views/layouts/application.html.erb @ 469:68231013b01b bootstrap-4

Now with more bootstrap than ever
author nanaya <me@nanaya.pro>
date Sun, 23 Feb 2020 22:25:50 +0900
parents 802dcd44188e
children b26dd8fa1c26
line wrap: on
line diff
--- a/app/views/layouts/application.html.erb	Sun Feb 23 20:23:09 2020 +0900
+++ b/app/views/layouts/application.html.erb	Sun Feb 23 22:25:50 2020 +0900
@@ -7,32 +7,41 @@
     <%= stylesheet_link_tag "application", :media => "all" %>
   </head>
   <body>
-    <nav class="navbar navbar-default navbar-static-top">
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
       <div class="container">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <%= link_to "Zeropaste", root_path, :class => "navbar-brand" %>
-        </div>
+        <%= link_to "Zeropaste", root_path, :class => "navbar-brand" %>
+
+        <button
+          type="button"
+          class="navbar-toggler"
+          data-toggle="collapse"
+          data-target="#navbar-menu"
+          aria-controls="navbar-menu"
+          aria-expanded="false"
+          aria-label="<%= t('.toggle_nav') %>"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
 
         <div class="collapse navbar-collapse" id="navbar-menu">
-          <ul class="nav navbar-nav navbar-right">
-            <li>
-              <%= link_to t(".about"), "#",
-                  :data => { :toggle => "modal",
-                  :target => "#modal-about" }
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item">
+              <%= link_to t(".about"), "#", {
+                    data: {
+                      toggle: "modal",
+                      target: "#modal-about",
+                    },
+                    class: 'nav-link',
+                  }
               %>
             </li>
-            <li>
-              <a href="https://bitbucket.org/nanayapro/zeropaste"><%= t(".source") %></a>
+            <li class="nav-item">
+              <a class="nav-link" href="https://bitbucket.org/nanayapro/zeropaste"><%= t(".source") %></a>
             </li>
-            <li>
+            <li class="nav-item">
               <%= link_to t(".donate"),
-                  "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GV9AHVHQAHXLJ"
+                  "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GV9AHVHQAHXLJ",
+                  class: 'nav-link'
               %>
             </li>
           </ul>
@@ -41,8 +50,8 @@
     </nav>
 
     <div class="container">
-      <div class="row"><div class="col-xs-12">
-        <h1 class="h2 zp-header page-header"><%= content_for :title %></h1>
+      <div class="row"><div class="col-12">
+        <h1 class="h2 pt-3 pb-1"><%= content_for :title %></h1>
       </div></div>
 
       <%= render "layouts/alerts" %>
@@ -51,7 +60,7 @@
 
     </div>
 
-    <div class="modal fade" id="modal-about" tabindex="-1" role="dialog" aria-labelledby="about-modal-label">
+    <div class="modal fade" id="modal-about" tabindex="-1" role="dialog" aria-labelledby="about-modal-label" aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
@@ -62,7 +71,7 @@
             <%= render "layouts/about" %>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-default" data-dismiss="modal">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">
               <%= t("buttons.close") %>
             </button>
           </div>