Bootstrap 4 small button fixes

app/assets/stylesheets/maps.css.scss

@@ -35,7 +35,8 @@ html, body {
 }
 
 .map-list .map h3 {
-  overflow:hidden;
+  padding-top: 10px;
+  overflow: hidden;
 }
 
 .map-list .map {
@@ -250,7 +251,7 @@ table .btn {
   .comment-body {
     padding-left:4px;
   }
-  .btn-xs {
+  .btn-sm {
     margin-left:3px;
   }
 }

app/views/comments/_comment.html.erb

@@ -1,25 +1,31 @@
 <div id="c<%= comment.id %>" class="comment" data-comment-id="<%= comment.id %>">
   <div class="comment-header">
-    <a href="//publiclab.org/profile/<%= comment.author %>"><%= comment.author %></a>
-    commented <%= time_ago_in_words(comment.created_at) %> ago
+    <div class="row">
+      <div class="col-6">
+        <a href="//publiclab.org/profile/<%= comment.author %>"><%= comment.author %></a>
+        commented <%= time_ago_in_words(comment.created_at) %> ago
+      </div>
 
-    <% if current_user && current_user.can_edit?(comment) %>
-      <a class="btn btn-default btn-xs pull-right edit-comment-btn"><span class="fa fa-pencil" data-comment-id="<%= comment.id %>"></span></a>
-    <% end %> 
+      <div class="col-6">
+        <% if current_user && current_user.can_edit?(comment) %>
+          <a class="btn btn-sm btn-outline-secondary float-right edit-comment-btn"><span class="fa fa-pencil" data-comment-id="<%= comment.id %>"></span></a>
+        <% end %>
 
-    <% if current_user && current_user.can_delete?(comment) %>
-      <%= link_to(
-        [@map, comment], 
-        :method => "delete", 
-        #:remote => true, 
-        :confirm => "Are you sure? This cannot be undone.", 
-        :class => "btn btn-default btn-xs pull-right delete-comment-btn",
-        :id => "comment-delete-#{comment.id}"
-      ) do %>
+        <% if current_user && current_user.can_delete?(comment) %>
+          <%= link_to(
+            [@map, comment],
+            :method => "delete",
+            #:remote => true,
+            :confirm => "Are you sure? This cannot be undone.",
+            :class => "btn btn-sm btn-outline-secondary float-right delete-comment-btn",
+            :id => "comment-delete-#{comment.id}"
+          ) do %>
 
-        <span class="fa fa-trash" data-comment-id="<%= comment.id %>"></span>
-      <% end %>
-    <% end %>
+            <span class="fa fa-trash" data-comment-id="<%= comment.id %>"></span>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
   </div><!-- .comment-header -->
   <div class="comment-body" data-comment-id="<%= comment.id %>"><%=raw markdown_to_html(comment.body) %></div><!-- .comment-body -->
   <div class="comment-edit-form" data-comment-id="<%= comment.id %>" style="display:none">

app/views/export/index.html.erb

@@ -31,7 +31,7 @@
       <td><%= export.status %></td>
       <td>
         <% if logged_in? && current_user.role == "admin" %>
-        <a class="btn btn-default" href="/export/cancel/<%= export.map_id %>?authenticity_token=<%= form_authenticity_token %>&exports=true">Cancel</a>
+        <a class="btn btn-outline-secondary" href="/export/cancel/<%= export.map_id %>?authenticity_token=<%= form_authenticity_token %>&exports=true">Cancel</a>
         <% end %>
       </td>
     </tr>

app/views/images/_index.html.erb

@@ -18,8 +18,8 @@
           <p><%= number_to_human_size warpable.image_file_size %></p>
           <p>
             <% unless warpable.placed? %>
-              <a onClick="window.mapKnitter.addImage('<%= warpable.image.url(:medium) %>',<%= warpable.id %>);$('#warpable-<%= warpable.id %> a').hide()" class="btn btn-xs btn-default add-image-<%= warpable.id %>">Place</a>
-              <a class="btn btn-xs btn-default add-image-gps-<%= warpable.id %>" style="display:none;">Place w/ GPS</a> 
+              <a onClick="window.mapKnitter.addImage('<%= warpable.image.url(:medium) %>',<%= warpable.id %>);$('#warpable-<%= warpable.id %> a').hide()" class="btn btn-sm btn-outline-secondary add-image-<%= warpable.id %>">Place</a>
+              <a class="btn btn-sm btn-outline-secondary add-image-gps-<%= warpable.id %>" style="display:none;">Place w/ GPS</a>
               <!-- <a href="">Re-place</a>  -->
               <script>
                 jQuery(document).ready(function($) {
@@ -31,11 +31,16 @@
         </td>
         <td>
           <% if logged_in? && current_user.can_delete?(warpable) %>
-            <%= link_to "<i class='fa fa-remove'></i>".html_safe, [@map, warpable], :method => "delete", :class => "btn btn-xs btn-danger", :title => "Delete", :rel=> "tooltip" %>
+            <%= link_to "<i class='fa fa-remove'></i>".html_safe, [@map, warpable],
+                :method => "delete",
+                :confirm => "Are you sure? This cannot be undone.",
+                :class => "btn btn-sm btn-danger",
+                :title => "Delete",
+                :rel=> "tooltip" %>
           <% end %>
           <% if warpable.placed? %>
-            <a rel="tooltip" id="locate-warpable-<%= warpable.id %>" title="Pan to this image" class="btn btn-xs btn-success"><i class='fa fa-crosshairs'></i></a>
-            <a rel="tooltip" title="Download full resolution distorted image (please allow popups)" class="btn btn-xs btn-default img-download img-download-<%= warpable.id %>" data-image="/images/fetch/?url=<%= warpable.image.url(:original) %>"><i class="fa fa-download"></i></a> 
+            <a rel="tooltip" id="locate-warpable-<%= warpable.id %>" title="Pan to this image" class="btn btn-sm btn-success"><i class='fa fa-crosshairs'></i></a>
+            <a rel="tooltip" title="Download full resolution distorted image (please allow popups)" class="btn btn-sm btn-outline-secondary img-download img-download-<%= warpable.id %>" data-image="/images/fetch/?url=<%= warpable.image.url(:original) %>"><i class="fa fa-download"></i></a>
             <div class="full-image-container-<%= warpable.id %>" style="overflow:hidden;width:0;height:0;"><img id="full-img-<%= warpable.id %>" /></div>
             <script>
               $('#warpable-<%= warpable.id %> [rel=tooltip]').tooltip();

app/views/images/_new.html.erb

@@ -84,9 +84,9 @@
                   <td class="status">
                       Image uploaded.
                         <p>
-                          <a onClick="window.mapKnitter.addImage('{%= file.url %}',{%= file.id %});$('.add-image-{%= file.id %}').hide();$('#uploadModal').modal('hide')" class="btn btn-xs btn-default add-image-{%= file.id %}">Place</a>
-                          <a class="btn btn-xs btn-default add-image-gps-{%= file.id %}" style="display:none;">Auto-place with GPS</a>
-                          <a rel="tooltip" title="Download full resolution distorted image (please allow popups)" class="btn btn-xs btn-default img-download-{%= file.id %}" data-image="/images/fetch/?url={%= file.original_url %}"><i class="fa fa-download"></i></a> 
+                          <a onClick="window.mapKnitter.addImage('{%= file.url %}',{%= file.id %});$('.add-image-{%= file.id %}').hide();$('#uploadModal').modal('hide')" class="btn btn-sm btn-outline-secondary add-image-{%= file.id %}">Place</a>
+                          <a class="btn btn-sm btn-outline-secondary add-image-gps-{%= file.id %}" style="display:none;">Auto-place with GPS</a>
+                          <a rel="tooltip" title="Download full resolution distorted image (please allow popups)" class="btn btn-sm btn-outline-secondary img-download-{%= file.id %}" data-image="/images/fetch/?url={%= file.original_url %}"><i class="fa fa-download"></i></a>
                           <div class="full-image-container-{%= file.id %}" style="overflow:hidden;width:0;height:0;"><img id="full-img-{%= file.id %}" /></div>
                         <a target="_blank" href="http://publiclab.org/wiki/mapknitter#GPS+Placement">Learn more</a>
                       </p>

app/views/layouts/knitter2.html.erb

@@ -74,21 +74,19 @@
         <% else %>
           <div class="sidebar-content-wrap">
             <!-- Toolbar for uploading and viewing images and exporting the map. -->
-            <div class="btn-group btn-group-justified sidebar-buttons">
+            <div class="btn-group sidebar-buttons" role="group">
               <!-- Upload images -->
                 <button class="btn btn-outline-secondary" title="Upload images" type="button" data-toggle="modal" data-target="#uploadModal" onClick="$('#map-images-tab').tab('show')">
-                  <span class="fa fa-upload"></span> 
-                  <span class="hidden-xs">Upload</span>
+                  <span class="d-none d-sm-block"><span class="fa fa-upload"></span> Upload</span>
                 </button>
 
               <!-- Write a research note on Public Lab -->
-                <a target="_blank" class="btn btn-outline-secondary" title="Post a research note on Public Lab" href="//publiclab.org/post?title=MapKnitter map of <%= @map.name %>&tags=lat:<%= @map.lat %>,lon:<%= @map.lon %>,mapknitter&body=%3Ciframe%20src=%22https://mapknitter.org/embed/<%= @map.slug %>%22%20style=%22border:none%22%20width=%22100%25%22%20height=%22400px%22%3E%3C/iframe%3E%3Cbr /%3E%3Cbr /%3E<%= @map.description %>%3Cbr /%3Ehttps://mapknitter.org/embed/<%= @map.slug %>">
-                  <span class="fa fa-file"></span> 
-                  <span class="hidden-xs">Post</span>
+                <a target="_blank" class="btn btn-outline-secondary" title="Post a research note on Public Lab" href="//publiclab.org/post?title=MapKnitter map of <%= @map.name %>&tags=lat:<%= @map.lat %>,lon:<%= @map.lon %>,mapknitter&body=%3Ciframe%20src=%22https://mapknitter.org/embed/<%= @map.slug %>%22%20style=%22border:none%22%20width=%22100%25%22%20height=%22400px%22%3E%3C/iframe%3E%3Cbr /%3E%3Cbr /%3E<%= @map.description %>%3Cbr /%3Ehttps://mapknitter.org/embed/<%= @map.slug %>" type="button">
+                  <span class="d-none d-sm-block"><span class="fa fa-file"></span> Post</span>
                 </a>
 
                 <div class="btn-group" role="group">
-                  <button id="btnGroupDrop1" type="button" title="Export map" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <button id="btnGroupDrop1" type="button" title="Export map" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">
                     <span class="fa fa-download"></span>
                     Download
                   </button>
@@ -181,7 +179,7 @@
                   <%= render :partial => "sidebar_exports" %>
                 </div>
                 <div role="tabpanel" class="tab-pane fade" id="chat">
-                  <a style="margin-right:4px;" class="pull-right nav-link" href="https://webchat.oftc.net/?channels=publiclab<% if current_user %>&nick=<%= current_user.login %><% end %>" target="_blank">pop out</a>
+                  <a style="margin-right:4px;" class="float-right nav-link" href="https://webchat.oftc.net/?channels=publiclab<% if current_user %>&nick=<%= current_user.login %><% end %>" target="_blank">pop out</a>
                   <p class="popover-title">Public Lab chatroom</p>
                   <script>login = '<%= current_user.login if logged_in? %>'</script>
                 </div>

app/views/map/_annotations.html.erb

@@ -148,6 +148,6 @@
   <% end %>
 
   <% if @export && @export.jpg %>
-    <a class="btn btn-sm btn-primary pull-right" href="http://www.zazzle.com/api/create/at-238652512768069879?rf=238652512768069879&ax=Linkover&pd=228632289886847720&fwd=ProductPage&ed=true&tc=&ic=&title=<%= @map.name %>&map=https://mapknitter.org/export/jpg/<%= @map.name %>.jpg"><i class="fa-white fa-print"></i> Order a print</a>
+    <a class="btn btn-sm btn-primary float-right" href="http://www.zazzle.com/api/create/at-238652512768069879?rf=238652512768069879&ax=Linkover&pd=228632289886847720&fwd=ProductPage&ed=true&tc=&ic=&title=<%= @map.name %>&map=https://mapknitter.org/export/jpg/<%= @map.name %>.jpg"><i class="fa-white fa-print"></i> Order a print</a>
   <% end %>
 </div>

app/views/map/view.html.erb

@@ -202,7 +202,7 @@
   </script>
 
 <div class='well'>
-  <h3>Edit map details<a class="pull-right btn" href="javascript:void(0);" onClick="$('#new_map').toggle()">Expand <i class="caret"></i></a></h3>
+  <h3>Edit map details<a class="float-right btn" href="javascript:void(0);" onClick="$('#new_map').toggle()">Expand <i class="caret"></i></a></h3>
   <form style="display:none;" class='map' id="new_map" action="/map/update_map/<%= @map.name %>" method="get" accept-charset="utf-8">
 
     <input type='hidden' name='map[id]' value="<%= @map.id %>"/>

app/views/maps/_sidebar_annotations.html.erb

@@ -4,7 +4,7 @@ A new annotation system is under development; for now, <a href="/embed/<%= @map.
 
 <p>To try the new annotations system, click here:</p>
 
-<p><button type="button" class="btn btn-outline-info" href="/maps/<%= @map.slug %>/annotate">Beta annotation tool</button></p>
+<p><a type="button" class="btn btn-outline-info" href="/maps/<%= @map.slug %>/annotate">Beta annotation tool</a></p>
 
 <p>To overlay a KML (temporarily only, for now!), click here:</p>
 

app/views/maps/_sidebar_exports.html.erb

@@ -44,7 +44,7 @@
     <% if logged_in? || @map.anonymous? %>
       <p>
         <button id="begin-export" class="btn btn-lg btn-primary"<% if @map.export && @map.exporting? %> style="display:none;"<% end %>>Start export</button>
-        <button <% unless @map.export && @map.exporting? %>style="display:none;"<% end %> id="cancel-export" class="btn btn-lg btn-default"><i class="fa fa-remove"></i> Cancel export</button>
+        <button <% unless @map.export && @map.exporting? %>style="display:none;"<% end %> id="cancel-export" class="btn btn-lg btn-outline-secondary"><i class="fa fa-remove"></i> Cancel export</button>
       </p>
 
       <% if @map.exporting? && ((@map.export.updated_at-DateTime.now)/1.hours).abs > 4 %>

app/views/maps/annotate.html.erb

@@ -6,7 +6,7 @@
     by <a href="//publiclab.org/profile/<%= @map.author %>"><%= @map.author %></a>
   </div>
   <br /><p>
-  <%= link_to "&laquo; Back to main interface".html_safe, map_path(@map), :class => 'btn btn-default' %>
+  <%= link_to "&laquo; Back to main interface".html_safe, map_path(@map), :class => 'btn btn-outline-secondary' %>
   </p>
 <% end %>
 

app/views/maps/index.html.erb

@@ -50,7 +50,7 @@
 
       <iframe style="margin-top:10px;border:none;width:100%;height:180px;" src="https://publiclab.org/features/embed/mapknitter-sidebar"></iframe>
 
-      <div class="hidden-xs hidden-sm">
+      <div class="d-none d-sm-block d-sm-none d-md-block">
         <%= render 'map/regions' %>
         <%= render 'map/authors' %>
         <%= render :partial => 'maps/statistics' %>

app/views/maps/new.html.erb

@@ -33,7 +33,7 @@
     <div class="form-group">
       <%= f.label :location, "Location <small>begin typing to search by name</small>".html_safe %>
       <div class="input-group">
-        <div class="input-group-addon"><i class="fa fa-search"></i></div>
+        <div class="input-group-prepend"><button class="btn btn-outline-secondary" type="button"><i class="fa fa-search"></i></button></div>
         <%= f.text_field :location, :class => "form-control", :tabIndex => 2 %>
       </div>
     </div>
@@ -52,7 +52,7 @@
     </table>
 
     <p class="d-block d-sm-none">
-      <a class="btn btn-default sidebar-toggle"><i class="fa fa-map-marker"></i> Choose location via map</a>
+      <a class="btn btn-outline-secondary sidebar-toggle"><i class="fa fa-map-marker"></i> Choose location via map</a>
     </p>
 
     <!-- Map description -->