Upgrade to Bootstrap 4 (#3937)

* Some changes in homepage related to bootstrap 4

* Removed the comments

* changes in _header.html.erb and style.css

* Removed the space on the top of the navbar

* Changed bootstrap version

* Changed the dropdowns on left side according to bootstrap 4

* Changes in navbar bootstrap for large sccreen

* Added spacing before public lab label in large screens

* Made the dropdowns look more appropriate in large and medium screens

* Added padding to body tag

* Corrected the btn-default class of social icons buttons

* Corrected the positioning of the social icons in sign up page

* Fixed the login and signup popups in the home screen

* Corrected the notes in the home page

* Modified some class

* Changes in dashboard

* Activity in dashboard sorted

* Sidebar sorted

* Some changes due to the rebase

* Some changes in wiki.html of dashboard

* Some modifications in layouts stylesheets which was missed

* Legacy editor sorted

* fixed the rich editor for asking questions

* Fixed the legacy question form

* Fixed the header of the wiki page

* Modifications in wiki show page

* Modified the comment editor accordingly

* Changes in wiki editor

* Changed the sizing style of show.html of talk

* Modified the wiki revision accordingly

* Modified the well to card in the editors

* Some changes after rebasing

* Some changes with tagging editor

* Some changes in tag editor

* modified some features in map

* made the maps modal look good

* Some modifications

* Some changes in wiki sidebar

* Some changes in questions page

* Some changes in questions page

* Corrected tag index page

* Fixed the tag page

* Corrected the methods page

* modified the users page

* Some changes due to rebase

* Some important changes after rebase

* Some changes in sidebar

* some changes in views of subscription page

* Changed the subscribe button

* Upgraded the bootstrap version to 4.1.0

* Some changes in yarn

* Some changes in package.json

* Added will_paginate_4 in Gemfile

* Removed the rails errors related to will_paginate bootstrap-4

* Some minor changes with the home page

* Added typeahead.js package to the javascript assets

* Corrected all the bootstrap classes in admin folder

* Corrected the bootstrap class in comment and dashboard folder

* Corrected bootstrap in editor folder

* Corrected the bootstrap in features, grids and home folder

* Corrected the bootstrap in notes folder

* Changed the bootstrap in questions folder and some mistakes related to img-rounded corrected

* Modified the bootstrap class in search class

* Corrected all the bootstrap class in sidebar and stats

* Initially completed correcting all the bootstrap classes

* Auto-complete worked

* Added missing </div> in dashboard.html

* Some views covered

* Some missed views covered

* Changed some views at sidebar/author.html.erb

* Some minor changes in header layout

* Prevented navbar from folding

* Some correction with the min-width of the About us link

* Corrected the tags being shown as plain text

* Corrected another instance of badge default

* Changes in cross button of the badge

* some changes in rich editor

* Corrected the notes page where there were some redundancies

* Corrected the tests

* Added some space after the search bar in the navbar

* semver patch

* Corrected the signup page

* Added spacing between or and login in sign up page

* Smoothened the side dropdown in dashboard

* Corrected the subscribe button

* Made the creation of tag possible

* Corrected the weirdness in comment form

* Made the map modal larger

* Added caret-down button in the like button group

* Corrected the nav-tabs in questions page

* Alligned the dropdowns to the right

* Corrected the well in comment edit section

* Removed the emojis from going down in comments

* Added the eye button to the password field in login modal

* Adding the eye button to password field

* corrected tests related to search button

Gemfile

@@ -62,7 +62,7 @@ gem 'tzinfo-data', platforms: %i(mingw mswin x64_mingw jruby)
 gem 'unicode-emoji'
 gem 'whenever', require: false
 gem 'will_paginate', '>= 3.0.6'
-gem 'will_paginate-bootstrap', '>= 1.0.1'
+gem 'will_paginate-bootstrap4'
 gem 'jquery-atwho-rails'
 gem 'lemmatizer', '~> 0.2.2'
 # To implement incoming mail processing microframework

Gemfile.lock

@@ -507,8 +507,8 @@ GEM
     whenever (0.11.0)
       chronic (>= 0.6.3)
     will_paginate (3.1.7)
-    will_paginate-bootstrap (1.0.2)
-      will_paginate (>= 3.0.3)
+    will_paginate-bootstrap4 (0.2.2)
+      will_paginate (~> 3.0, >= 3.0.0)
     xpath (3.2.0)
       nokogiri (~> 1.8)
 
@@ -610,7 +610,7 @@ DEPENDENCIES
   web-console (>= 3.3.0)
   whenever
   will_paginate (>= 3.0.6)
-  will_paginate-bootstrap (>= 1.0.1)
+  will_paginate-bootstrap4
 
 RUBY VERSION
    ruby 2.4.4p296

app/assets/javascripts/application.js

@@ -17,7 +17,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require debounce/index.js
-//= require bootstrap/dist/js/bootstrap.min.js
+//= require bootstrap/dist/js/bootstrap.bundle.min.js
 //= require bootstrap-3-typeahead/bootstrap3-typeahead.min.js
 //= require bootstrap-datepicker/dist/js/bootstrap-datepicker.js
 //= require jquery-file-upload/js/vendor/jquery.ui.widget.js

app/assets/javascripts/tagging.js

@@ -43,9 +43,9 @@ function initTagForm(deletion_path, selector) {
     $.each(response['saved'], function(i,tag) {
       var tag_name = tag[0];
       var tag_id = tag[1];
-      $('#tags ul:first').append("<li><span id='tag_"+tag_id+"' class='label label-primary'> \
-        <a href='/tag/"+tag_name+"'>"+tag_name+"</a> <a class='tag-delete' \
-        data-remote='true' href='"+deletion_path+"/"+tag_id+"' data-tag-id='"+tag_id+"' \
+      $('#tags ul:first').append("<li><span id='tag_"+tag_id+"' class='badge badge-primary'> \
+        <a style='color:white;' href='/tag/"+tag_name+"'>"+tag_name+"</a> <a class='tag-delete' \
+        data-remote='true' href='"+deletion_path+"/"+tag_id+"' style='color:white' data-tag-id='"+tag_id+"' \
         data-method='delete'>x</a></span></li> ")
       el.find('.tag-input').val("")
       el.find('.control-group').removeClass('has-error')

app/assets/stylesheets/editor.css

@@ -38,17 +38,21 @@
 }
 
 @media (max-width: 480px) {
-  .side-dropzone, .profile-dropzone { padding:0; }
+  .side-dropzone, .profile-dropzone { padding:0; margin-bottom:10px;}
   .side-dropzone p, .profile-dropzone p { padding:15px; }
 }
 
 @media (max-width: 768px) {
-  .side-dropzone, .profile-dropzone { padding:0; }
+  .side-dropzone, .profile-dropzone { padding:0; margin-bottom:10px;}
   .side-dropzone p, .profile-dropzone p {
     padding:20px 20px 30px;
   }
 }
 
+@media (max-width: 992px) {
+    .side-dropzone, .profile-dropzone { margin-bottom: 10px;}
+}
+
 @media (max-width: 480px) {
   #dropzone textarea {
     height:300px;

app/assets/stylesheets/style.css

@@ -25,6 +25,9 @@ It was originally created by Caroline Hadilaksono: http://www.hadilaksono.com
 
 }
 
+body{
+    padding-top: 80px;
+}
 
 h1,h2,h3 {
   font-family:"Junction Light", lucida grande,lucida sans console,sans-serif;
@@ -59,7 +62,7 @@ h4,h5,h6, h1 small, h3 small {
 .pl-content p img,
 #comments p img,
 #answer-0-comment p img,
-.pl-content p iframe {
+.pl-content p {
   max-width: 100%;
   border: none;
 }
@@ -96,13 +99,27 @@ a .fa-white,
   display:none;
 }
 
+#pl_pad {
+    width:300%;
+}
+
+@media (max-width:992px) {
+    #pl_pad {
+        width:250%;
+    }
+}
+
 @media (max-width:400px) {
   .hidden-tiny {
     display:none;
   }
   .visible-tiny {
     display:inline;
   }
+
+  #pl_pad {
+      width: 75%;
+  }
 }
 
 @media (min-width:400px) {
@@ -112,12 +129,10 @@ a .fa-white,
   .visible-tiny {
     display:none;
   }
+
 }
 
 @media (max-width: 768px) {
-    .navbar-header {
-        float: none;
-    }
     .navbar-left,.navbar-right {
         float: none !important;
     }
@@ -132,9 +147,9 @@ a .fa-white,
         top: 0;
         border-width: 0 0 1px;
     }
-    .navbar-collapse.collapse {
+    /*.navbar-collapse.collapse {
         display: none!important;
-    }
+    }*/
     .navbar-nav {
         float: none!important;
         margin-top: 7.5px;
@@ -152,9 +167,11 @@ a .fa-white,
     #md-ham {
         display: none;
     }
+    #pl_pad {
+        width:150%;
+    }
 }
 
-body { padding-top: 70px; }
 
 #header .collapse.in .hidden-xs,
 #header .collapse.in .hidden-sm,
@@ -170,7 +187,7 @@ body { padding-top: 70px; }
 
 #header .navbar-brand {
   color: white;
-  padding-top: 19px;
+  /*padding-top: 19px;*/
   font-family: "Junction Light", lucida grande,lucida sans console,sans-serif;
   font-size: 22px;
 }
@@ -186,14 +203,17 @@ body { padding-top: 70px; }
 @media (max-width: 340px) {
   #brand { display:none; }
   #header .brand-compact { display:inline; }
+  #pl_pad {
+      width: 75%;
+  }
 }
 
 @media (min-width: 340px) {
   #brand { display:inline; }
   #header .brand-compact { display:none; }
 }
 
-.navbar-inverse .navbar-nav > li > a {
+.navbar-nav > li > a {
   color: #aaa;
 }
 

app/views/admin/_comments.html.erb

@@ -22,12 +22,12 @@
         </td>
         <td><div class="btn-toolbar" style="margin:0;">
           <div class="btn-group">
-            <a class="btn btn-default btn-lg <% if comment.status == 0 %>btn-success<% else %>disabled<% end %> publish" href="/admin/publish_comment/<%= comment.id %>"><i class="fa fa-ok-circle fa fa-white"></i> Publish</a>
+            <a class="btn btn-outline-secondary btn-lg <% if comment.status == 0 %>btn-success<% else %>disabled<% end %> publish" href="/admin/publish_comment/<%= comment.id %>"><i class="fa fa-ok-circle fa fa-white"></i> Publish</a>
 
             <% if comment.author.status == 0 %>
-                <a class="btn btn-default btn-lg ban a<%= comment.author.id %>" href="/ban/<%= comment.author.id %>">Ban</a>
+                <a class="btn btn-outline-secondary btn-lg ban a<%= comment.author.id %>" href="/ban/<%= comment.author.id %>">Ban</a>
             <% elsif comment.author.status == 1 %>
-                <a class="btn btn-default btn-lg unban a-unban<%= comment.author.id %>" href="/unban/<%= comment.author.id %>">Unban</a>
+                <a class="btn btn-outline-seconday btn-lg unban a-unban<%= comment.author.id %>" href="/unban/<%= comment.author.id %>">Unban</a>
             <% end %>
           </div>
         </div></td>

app/views/admin/_nodes.html.erb

@@ -28,11 +28,11 @@
   </td>
   <td><div class="btn-toolbar" style="margin:0;">
     <div class="btn-group">
-      <a class="btn btn-default btn-lg <% if node.status == 0 %>btn-success<% else %>disabled<% end %> publish" data-remote="true" href="/moderate/publish/<%= node.id %>"><i class="fa fa-ok-circle fa fa-white"></i> Publish</a>
+      <a class="btn btn-outline-secondary btn-lg <% if node.status == 0 %>btn-success<% else %>disabled<% end %> publish" data-remote="true" href="/moderate/publish/<%= node.id %>"><i class="fa fa-ok-circle fa fa-white"></i> Publish</a>
 
-      <a class="btn btn-default btn-lg ban a<%= node.author.id %>" <% if node.author.status == 0 %>style="display:none;"<% end %> data-remote="true" href="/ban/<%= node.author.id %>">Ban</a>
-      <a class="btn btn-default btn-lg unban a-unban<%= node.author.id %>" <% if node.author.status == 1 %>style="display:none;"<% end %> data-remote="true" href="/unban/<%= node.author.id %>">Unban</a>
-      <%= link_to "/notes/delete/"+node.id.to_s, data: { confirm: 'Are you sure you want to delete "'+node.path+'"?' }, :remote => true, :class => "btn btn-default btn-lg delete" do %>
+      <a class="btn btn-outline-secondary btn-lg ban a<%= node.author.id %>" <% if node.author.status == 0 %>style="display:none;"<% end %> data-remote="true" href="/ban/<%= node.author.id %>">Ban</a>
+      <a class="btn btn-outline-secondary btn-lg unban a-unban<%= node.author.id %>" <% if node.author.status == 1 %>style="display:none;"<% end %> data-remote="true" href="/unban/<%= node.author.id %>">Unban</a>
+      <%= link_to "/notes/delete/"+node.id.to_s, data: { confirm: 'Are you sure you want to delete "'+node.path+'"?' }, :remote => true, :class => "btn btn-outline-secondary btn-lg delete" do %>
         <i class="fa fa-trash"></i>
       <% end %>
     </div>

app/views/admin/_revisions.html.erb

@@ -20,12 +20,12 @@
       </td>
       <td><div class="btn-toolbar" style="margin:0;">
         <div class="btn-group">
-          <a class="btn btn-default btn-lg <% if revision.status == 0 %>btn-success<% else %>disabled<% end %> publish" href="/moderate/revision/publish/<%= revision.vid %>"><i class="fa fa-ok-circle fa fa-white"></i> Publish</a>
+          <a class="btn btn-outline-secondary btn-lg <% if revision.status == 0 %>btn-success<% else %>disabled<% end %> publish" href="/moderate/revision/publish/<%= revision.vid %>"><i class="fa fa-ok-circle fa fa-white"></i> Publish</a>
 
           <% if revision.author.status == 0 %>
-            <a class="btn btn-default btn-lg ban a<%= revision.author.id %>" href="/ban/<%= revision.author.id %>">Ban</a>
+            <a class="btn btn-outline-secondary btn-lg ban a<%= revision.author.id %>" href="/ban/<%= revision.author.id %>">Ban</a>
           <% elsif revision.author.status == 1 %>
-            <a class="btn btn-default btn-lg unban a-unban<%= revision.author.id %>" href="/unban/<%= revision.author.id %>">Unban</a>
+            <a class="btn btn-outline-secondary btn-lg unban a-unban<%= revision.author.id %>" href="/unban/<%= revision.author.id %>">Unban</a>
           <% end %>
         </div>
       </div></td>

app/views/admin/spam.html.erb

@@ -1,4 +1,4 @@
-<div class="col-md-3">
+<div class="col-lg-3">
 
   <h3>Spam moderation:</h3>
 
@@ -8,24 +8,24 @@
 
 </div>
 
-<div class="col-md-9">
+<div class="col-lg-9">
 
   <h3>Moderate potential spam</h3>
 
   <ul class="nav nav-tabs">
-    <li <% unless params[:type] && params[:action] == "spam_revisions" %>class="active"<% end %>><a href="/spam">Filtered</a></li>
-    <li <% if params[:type] == "wiki" %>class="active"<% end %>><a href="/spam/wiki"><i class="fa fa-book"></i><span class="hidden-sm"> Wiki</span></a></li>
-    <li <% if params[:action] == "spam_revisions" %>class="active"<% end %>><a href="/spam/revisions"><i class="fa fa-list"></i><span class="hidden-sm"> Revisions</span></a></li>
-    <li <% if params[:action] == "spam_comments" %>class="active"<% end %>><a href="/spam/comments"><i class="fa fa-comment"></i><span class="hidden-sm"> Comments</span></a></li>
-    <li <a href="/people"><i class="fa fa-user"></i><span class="hidden-sm"> Active Users</span></a></li>
+    <li class="nav-item"><a class="nav-link <% unless params[:type] && params[:action] == "spam_revisions" %> active <% end %>" href="/spam">Filtered</a></li>
+    <li class="nav-item"><a class="nav-link <% if params[:type] == "wiki" %> active <% end %>" href="/spam/wiki"><i class="fa fa-book"></i><span class="d-xs-inline d-md-none d-lg-inline"> Wiki</span></a></li>
+    <li class="nav-item"><a class="nav-link <% if params[:action] == "spam_revisions" %> active <% end %>" href="/spam/revisions"><i class="fa fa-list"></i><span class="d-xs-inline d-md-none d-lg-inline"> Revisions</span></a></li>
+    <li class="nav-item"><a class="nav-link <% if params[:action] == "spam_comments" %> active <% end %>" href="/spam/comments"><i class="fa fa-comment"></i><span class="d-xs-inline d-md-none d-lg-inline"> Comments</span></a></li>
+    <li class="nav-item"><a class="nav-link" href="/people"><i class="fa fa-user"></i><span class="d-xs-inline d-md-none d-lg-inline"> Active Users</span></a></li>
   </ul>
 
   <br />
 
   <% if params[:action] != "spam_revisions" && params[:action] != "spam_comments" %>
   <div class="btn-toolbar">
     <div class="btn-group">
-      <a class="btn btn-default" id="batch-delete" href="javascript:void();"><i class="fa fa-ban-circle"></i> Spam all checked and ban authors</a>
+      <a class="btn btn-outline-secondary" id="batch-delete" href="javascript:void();"><i class="fa fa-ban-circle"></i> Spam all checked and ban authors</a>
     </div>
   </div>
   <br />

app/views/admin/useremail.html.erb

@@ -1,5 +1,5 @@
-<div class="col-md-3">&nbsp;</div>
-<div class="col-md-9">
+<div class="col-lg-3">&nbsp;</div>
+<div class="col-lg-9">
 
   <h3>User lookup by email:</h3> 
 

app/views/admin/users.html.erb

@@ -1,4 +1,4 @@
-<div class="col-md-3">
+<div class="col-lg-3">
 
   <h3>User moderation:</h3> 
 
@@ -8,7 +8,7 @@
 
 </div>
 
-<div class="col-md-9">
+<div class="col-lg-9">
 
   <h3>Moderate users</h3>
 
@@ -23,9 +23,9 @@
     <td><div class="btn-toolbar" style="margin:0;">
       <div class="btn-group">
         <% if user.status == 0 %>
-          <a class="btn btn-default btn-lg btn-success unban" data-remote="true" href="/unban/<%= user.id %>"><i class="fa fa-ok-circle fa fa-white"></i> Unban</a>
+          <a class="btn btn-outline-secondary btn-lg btn-success unban" data-remote="true" href="/unban/<%= user.id %>"><i class="fa fa-ok-circle fa fa-white"></i> Unban</a>
         <% else %>
-          <%= link_to "/ban/"+user.id.to_s, :confirm => 'Are you sure?', :remote => true, :class => "btn btn-lg btn-error ban" do %>
+          <%= link_to "/ban/"+user.id.to_s, :confirm => 'Are you sure?', :remote => true, :class => "btn btn-lg btn-danger ban" do %>
             <i class="fa fa-circle-ban"></i> Ban
           <% end %>
         <% end %>

app/views/comments/_comments.html.erb

@@ -1,7 +1,7 @@
 <h1>Comments </h1>
 <table class="table">
     <tr>
-      <th class="visible-sm visible-xs"></th>
+      <th class="d-lg-none"></th>
       <th><%= t('users.list.comment') %></th>
       <th><%= t('users.list.last_activity') %></th>
 
@@ -23,14 +23,14 @@
     <td><%= distance_of_time_in_words(comment.created_at, Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %></td>
     <td>
       <% if comment.status == 4 && current_user &. can_moderate? %>
-            <a class="btn btn-default btn-xs" href="/admin/publish_comment/<%= comment.id %>"><%= t('dashboard.moderate.approve') %></a>
-            <a class="btn btn-default btn-xs" href="/admin/mark_comment_spam/<%= comment.id %>"><%= t('dashboard.moderate.spam') %></a>
+            <a class="btn btn-outline-secondary btn-sm" href="/admin/publish_comment/<%= comment.id %>"><%= t('dashboard.moderate.approve') %></a>
+            <a class="btn btn-outline-secondary btn-sm" href="/admin/mark_comment_spam/<%= comment.id %>"><%= t('dashboard.moderate.spam') %></a>
       <% elsif current_user &. can_moderate? %>
-          <a rel="tooltip" title="Mark as spam" class="btn btn-sm btn-default btn-flag-spam-<%= comment.id %>" data-confirm="Are you sure? The user will no longer be able to log in or publish, and their content will be hidden except comments." href="/admin/mark_comment_spam/<%= comment.id %>">
+          <a rel="tooltip" title="Mark as spam" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" data-confirm="Are you sure? The user will no longer be able to log in or publish, and their content will be hidden except comments." href="/admin/mark_comment_spam/<%= comment.id %>">
             <i class="fa fa-ban"></i>
           </a>
       <% else %>
-          <a rel="tooltip" title="Flag as spam" class="btn btn-sm btn-default btn-flag-spam-<%= comment.id %>" href="mailto:moderators@publiclab.org?subject=Reporting+spam+on+Public+Lab&body=Hi,+I+found+this+comment+that+looks+like+spam+or+needs+to+be+moderated:+https://publiclab.org/<%= comment.parent.path %>#c<%= comment.cid %>+by+https://publiclab.org/profile/<% if comment.author %><%= comment.author.name %><% end %>+Thanks!">
+          <a rel="tooltip" title="Flag as spam" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" href="mailto:moderators@publiclab.org?subject=Reporting+spam+on+Public+Lab&body=Hi,+I+found+this+comment+that+looks+like+spam+or+needs+to+be+moderated:+https://publiclab.org/<%= comment.parent.path %>#c<%= comment.cid %>+by+https://publiclab.org/profile/<% if comment.author %><%= comment.author.name %><% end %>+Thanks!">
             <i class="fa fa-flag"></i>
           </a>
       <% end %>
@@ -39,4 +39,4 @@
   <% end %>
 </table>
 
-<%= will_paginate comments, :renderer => BootstrapPagination::Rails %>
+<%= will_paginate comments, renderer: WillPaginate::ActionView::BootstrapLinkRenderer %>