Upgrade app to Bootstrap 4

Gemfile

@@ -7,6 +7,7 @@ gem 'rake',  '~> 12.3.2'
 gem "will_paginate", "3.1.7"
 gem "will_paginate-bootstrap"
 gem "friendly_id"
+gem 'popper_js', '~> 1.11', '>= 1.11.1'
 
 # dependencies
 group :dependencies do

Gemfile.lock

@@ -102,6 +102,7 @@ GEM
       rack
       rake (>= 0.8.1)
     polyglot (0.3.5)
+    popper_js (1.14.5)
     power_assert (1.1.4)
     rack (1.4.7)
     rack-cache (1.8.0)
@@ -199,6 +200,7 @@ DEPENDENCIES
   open_id_authentication
   paperclip (~> 4.3.7)
   passenger
+  popper_js (~> 1.11, >= 1.11.1)
   rails (~> 3.2)
   rake (~> 12.3.2)
   rdiscount (= 2.2.0.1)

app/assets/bower.json

@@ -10,7 +10,7 @@
 		"leaflet-illustrate": "manleyjster/Leaflet.Illustrate#master",
 		"leaflet-image-distort": "manleyjster/ImageDistortLeaflet",
 
-		"bootstrap": "http://github.com/twbs/bootstrap/archive/v3.2.0.tar.gz",
+		"bootstrap": "https://github.com/twbs/bootstrap/archive/v4.3.1.zip",
 
 		"blueimp-file-upload": "9.7.0",
 		"blueimp-tmpl": "2.5.4",

app/assets/javascripts/application.js

@@ -11,6 +11,7 @@
 // GO AFTER THE REQUIRES BELOW.
 //
 
+//= require popper
 //= require jquery/dist/jquery.js
 //= require jquery-ujs/src/rails.js 
 
@@ -20,6 +21,8 @@
 //= require leaflet-providers/leaflet-providers.js
 //= require leaflet-toolbar/dist/leaflet.toolbar.js
 //= require leaflet-distortableimage/dist/leaflet.distortableimage.js
+//= require leaflet-easybutton/src/easy-button.js
+//= require leaflet-google/index.js
 //= require sparklines/source/sparkline.js
 //= require annotations-legacy.js
 //= require glfx-js/dist/glfx.js

app/assets/javascripts/maps.js

@@ -1,7 +1,9 @@
+//= require popper
 //= require jquery-ui/jquery-ui.min.js
 //= require knitter
 //= require exif-js/exif.js
 //= require mapknitter
+//= require seiyria-bootstrap-slider/dist/bootstrap-slider.min.js
 
 /* Move navbar links into dropdown if nav is inside the sidebar. */
 jQuery(document).ready(function($) {

app/assets/stylesheets/header.css.scss

@@ -1,50 +1,23 @@
 body {
-  padding-top: 60px;
+  padding-top: 70px;
 }
 
-/* override Bootstrap 3 navbar collapse for medium screen sizes */
-@media (max-width: 1200px) {
-  .navbar-header {
-    float: none;
-  }
-
-  .navbar-left,.navbar-right {
-    float: none !important;
-  }
-
-  .navbar-toggle {
-    display: block;
-  }
-
-  .navbar-collapse {
-    border-top: 1px solid transparent;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
-  }
-
-  .navbar-fixed-top {
-    top: 0;
-    border-width: 0 0 1px;
-  }
-
-  .navbar-collapse.collapse {
-    display: none !important;
-  }
-
-  .navbar-nav {
-    float: none !important;
-    margin-top: 7.5px;
-  }
+.login-links {
+  color: rgba(0,0,0,.7);
+  text-decoration: none;
+}
 
-  .navbar-nav > li {
-    float: none;
-  }
+.login-links:visited {
+  color: rgba(0,0,0,.7);
+  text-decoration: none;
+}
 
-  .navbar-nav > li > a {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
+.login-links:hover {
+  color: rgba(0,0,0,.7);
+  text-decoration: underline;
+}
 
-  .collapse.in{
-    display:block !important;
-  }
+.login-links:active {
+  color: rgba(0,0,0,.7);
+  text-decoration: underline;
 }

app/assets/stylesheets/style.css.scss

@@ -25,6 +25,11 @@ It was originally created by Caroline Hadilaksono: http://www.hadilaksono.com
     font-style: normal;
 }
 
+.login-form {
+  width: 200px;
+  padding-left: 20px;
+}
+
 /* Application-wide styles */
 h1, h2, h3, h4 {
   font-family: 'Junction Light', lucida grande,lucida sans console,sans-serif;

app/views/author/list.html.erb

@@ -1,13 +1,13 @@
 <div id="main">
 
-	<% @maps.each do |map| %>	
-	<h3><a href ="/maps/<%= map.name %>"><%= map.name.capitalize %></a> 
-		<small>
-			by "<a href="/author/<%= map.author %>"><%= map.author %></a>" 
-			<% if map.email != '' %><<a href="mailto:<%= map.email %>"><%= map.email %></a>>,</a></small> <% end %>
-		</small>
-	</h3>
-	<% end %>
+  <% @maps.each do |map| %>
+    <h3><a href ="/maps/<%= map.name %>"><%= map.name.capitalize %></a>
+    <small>
+      by "<a href="/author/<%= map.author %>"><%= map.author %></a>"
+      <% if map.email != '' %><<a href="mailto:<%= map.email %>"><%= map.email %></a>>,</a></small> <% end %>
+    </small>
+    </h3>
+  <% end %>
 
 </div>
 <div id ="sidebar">

app/views/images/_new.html.erb

@@ -2,11 +2,11 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
+        <h4 class="modal-title">Upload Images</h4>
+        <label for="warpable">Drag images or click to choose a file from your computer (10mb max):</label>
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
           &times;
         </button>
-        <h4 class="modal-title">Upload Images</h4>
-        <label for="warpable">Drag images or click to choose a file from your computer (10mb max):</label>
       </div>
       <div class="modal-body">
         <div>
@@ -108,14 +108,14 @@
         </div>
       </div>
       <div class="modal-footer">
-        <center>
         <button class="btn btn-primary" type="button" class="close" data-dismiss="modal" aria-hidden="true">
-          Continue
-        </button> to place the images on the map
-        </center>
+          Continue to place the images on the map
+        </button>
         <hr />
-        Where can you get images to upload?<br />Take them from an airplane window, or read about <a href="http://publiclab.org/wiki/balloon-mapping">Grassroots Mapping with Balloons and Kites</a>.
+        <p>
+          Where can you get images to upload?<br />Take them from an airplane window, or read about <a href="http://publiclab.org/wiki/Balloonslloons-mapping">Grassroots Mapping with Balloons and Kites</a>.
+        </p>
       </div>
     </div>
   </div>
-</div>
+</div>

app/views/layouts/_header.html.erb

@@ -1,33 +1,36 @@
-<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand" href="/">MapKnitter</a>
-    </div>
+<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
+  <a class="navbar-brand" href="/">MapKnitter</a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-navbar-collapse" aria-controls="header-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
 
-    <div class="collapse navbar-collapse" id="navbar-collapse">
-      <form action="/search" method='get' class="navbar-form navbar-left" id="nav_search_form">
+  <div class="collapse navbar-collapse" id="header-navbar-collapse">
+    <ul class="navbar-nav">
+      <form action="/search" method='get' class="navbar-form navbar-left">
         <div class="input-group">
-          <input class="form-control mr-sm-2" style="min-width: 280px;" type="text" id="search-input" name="q" value='<%= params[:id] if params[:action] == "search" %>' placeholder="Search maps"/>
-          <span class="input-group-btn">
-            <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
+          <input class="form-control" id="search-input" style="min-width: 280px;" type="text" name='q' placeholder="Search maps" value='<%= params[:id] if params[:action] == "search" %>'>
+          <span class="input-group-append">
+            <button class="btn btn-outline-secondary" type="submit"><i class="fa fa-search"></i></button>
           </span>
         </div>
       </form>
-      <ul class="nav navbar-nav">
-        <li><a href="//publiclab.org/wiki/mapknitter" target="_blank">Getting Started</a></li>
-        <li><a href="//publiclab.org/wiki/balloon-mapping" target="_blank">Balloon Mapping</a></li>
-        <li><a href="//store.publiclab.org/products/balloon-mapping-kit" target="_blank">Aerial Mapping Kits</a></li>
-        <li><a href="//publiclab.org/lists" target="_blank">Mailing Lists</a></li>
-      </ul>
-      <ul class="nav navbar-nav navbar-right">
-        <%= render :partial => "layouts/login" %>
-      </ul>
-    </div>
+    </ul>
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="//publiclab.org/wiki/mapknitter" target="_blank">Getting Started</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="//publiclab.org/wiki/balloon-mapping" target="_blank">Baloon Mapping</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="//store.publiclab.org/products/balloon-mapping-kit" target="_blank">Aerial Mapping Kits</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="//publiclab.org/lists" target="_blank">Mailing Lists</a>
+      </li>
+    </ul>
+    <ul class="navbar-nav">
+      <%= render :partial => "layouts/login" %>
+    </ul>
   </div>
 </nav>

app/views/layouts/_login.html.erb

@@ -1,21 +1,21 @@
 <% if logged_in? %>
-  <li class="dropdown">
-    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="logout-menu"><%= current_user.login %></a>
-    <ul class="dropdown-menu" role="menu" aria-labelled-by="logout-menu">
-      <div class="dropdown-header">
-        <% if current_user.role == 'admin'%>
-          - logged as Admin %>
-        <% end %>
-      </div>
-      <li><a href="//publiclab.org/profile/<%= current_user.login %>">Profile</a></li>
-      <li><a href="/logout">Log out</a></li>
-    </ul>
+  <li class="nav-item dropdown">
+    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" id="logout-menu" aria-haspopup="true" aria-expanded="false">
+      <i class="fa fa-user"></i> <%= current_user.login %>
+    </a>
+    <div class="dropdown-menu login-form" aria-labelled-by="logout-menu">
+      <a href="//publiclab.org/profile/<%= current_user.login %>" class="dropdown-item">Profile</a>
+      <a href="/logout" class="dropdown-item">Log out</a>
+      <% if current_user.role == 'admin' %>
+        <a href="#">Role: <b>Admin</b></a>
+      <% end %>
+    </div>
   </li>
 <% else %>
-  <li class="dropdown">
-    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="login-menu">Log In</a>
-    <div class="dropdown-menu login-form" role="menu" aria-labelled-by="login-menu">
+  <li class="nav-item dropdown">
+    <a href="#" class="nav-link dropdown login-form" data-toggle="dropdown" id="login-menu" aria-haspopup="true" aria-expanded="false">Log In</a>
+    <div class="dropdown-menu" aria-labelled-by="login-menu">
       <%= render :partial => "layouts/login_form" %>
     </div>
-  </li>                
-<% end %>
+  </li>
+<% end %>

app/views/layouts/_login_form.html.erb

@@ -10,14 +10,12 @@
     </label>
   </div>
    <div class="form-group">
-    <%= text_field_tag 'open_id', @login, { :placeholder => "Username (not email)", :class => "form-control"} %>
-    <div class="checkbox">
-      <label for="remember_me">
-        <%= check_box_tag 'remember_me', '1', @remember_me %> Remember me
-      </label>
-    </div>
+    <%= text_field_tag 'open_id', @login, { :placeholder => "Username (not email)", :tabindex => 1, :class => 'form-control', :id => 'username-login' } %>
   </div>
-  <div class="form-group">
-    <%= submit_tag 'Log in', {:class => "btn btn-primary btn-large"} %>
+  <div class="form-check">
+    <label>
+      <%= check_box_tag 'remember_me', '1', @remember_me, { :class => "form-check-input" } %> Remember me
+    </label>
   </div>
+  <%= submit_tag 'Log in', {:class => "btn btn-primary btn-large"} %>
 </form>