Merge pull request publiclab#400 from jywarren/bootstrap3-fixes-3

more bootstrap 3 style fixes

app/assets/javascripts/like.js

@@ -7,7 +7,7 @@ function changelikecount(value,node_id) {
   count = parseInt(count.substr(1, count.length-2));
   count += value;
   // push value back out
-  $('#like-count-'+node_id).html("(" + count + ")");
+  $('#like-count-'+node_id).html(count);
 }
 function shownotliked(node_id) {
   $('#like-star-'+node_id)[0].className = "fa fa-star-o";

app/assets/stylesheets/style.css

@@ -53,7 +53,8 @@ h4,h5,h6, h1 small, h3 small {
   margin-top:8px;
 }
 
-#content p img {
+#content p img,
+#content p iframe {
   max-width: 100%;
 }
 
@@ -119,7 +120,13 @@ body { padding-top: 70px; }
   font-size: 22px;
 }
 
-#header #brand-compact { padding-top: 22px; }
+@media (max-width: 768px) {
+  #header #brand,
+  #header #brand-compact {
+    padding-top: 22px;
+    padding-right: 4px;
+  }
+}
 
 @media (max-width: 340px) {
   #brand { display:none; }

app/views/editor/_main_image.html.erb

@@ -2,7 +2,7 @@
 
   <h3 class="hidden-sm">Main image <i id="main-image-spinner" class="hidden icon-spinner icon-spin"></i></h3>
 
-  <img style="width:100%;" class="img-rounded" id="leadImage" <% unless (@node && @node.main_image) || params[:main_image] || params[:i] %>style="display:none;" <% end %>src="<% if @node && @node.main_image %><%= @node.main_image.path(:default) %><% elsif params[:main_image] && Image.find_by_id(params[:main_image]) %><%= Image.find_by_id(params[:main_image]).path %><% elsif @image %><%= @image.path(:default) %><% end %>" />
+  <img class="img-rounded" id="leadImage" style="width:100%;<% unless (@node && @node.main_image) || params[:main_image] || params[:i] %>display:none;<% end %>" src="<% if @node && @node.main_image %><%= @node.main_image.path(:default) %><% elsif params[:main_image] && Image.find_by_id(params[:main_image]) %><%= Image.find_by_id(params[:main_image]).path %><% elsif @image %><%= @image.path(:default) %><% end %>" />
 
   <div class="side-dropzone" id="side-dropzone">
     <p class="prompt">

app/views/layouts/_header.html.erb

@@ -21,7 +21,7 @@
     <div class="navbar-header">
       <a class="navbar-brand" id="brand" href="/<%= "home" if current_user %>">Public Lab</a>
       <a class="navbar-brand brand-compact" id="brand-compact" href="/<%= "home" if current_user %>">PL</a>
-      <% if current_user %><a class="navbar-brand brand-compact" href="/"><i class="fa fa-home fa fa-white"></i></a><% end %>
+      <% if current_user %><a class="navbar-brand home-icon visible-xs" href="/"><i class="fa fa-home fa fa-white"></i></a><% end %>
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar-collapse">
         <span class="fa fa-white fa-bars"></span>

app/views/like/_like.html.erb

@@ -1,7 +1,10 @@
 <div class="btn-toolbar pull-right" style="margin-left:10px;margin-top:0;">
   <ul class="btn-group">
-    <li class="btn btn-default btn-sm" data-html="true" rel="popover" data-content="<%= "No tags" if tagnames.nil? || tagnames.length == 0 %><% if tagnames %><% tagnames.each do |tagname| %><p style='margin-bottom:3px;'><a href='/subscribe/tag/<%= tagname %>' class='btn btn-default btn-mini'><%= tagname %></a></p><% end %><% end %><hr /><a class='btn btn-sm'><i class='fa fa-user'></i> <%= node.author.name %></a>" title="Follow by tag or author" data-placement="left"><i class="fa fa-eye"></i><span class="hidden-sm"> Follow</span></li>
-    <li rel="tooltip" title="Helpful? Follow it!" class="btn btn-default btn-sm" node-id="<%= node.id %>" id="like-button-<%= node.id %>"><span id="like-star-<%= node.id %>" class="fa fa-star<% if current_user && !node.liked_by(current_user.uid) %>-o<% end %>"></span><span class="hidden-sm"> Like <span id="like-count-<%= node.id %>"/>(<%= node.likers.length %>)</span></li>
+
+    <li class="btn btn-default btn-sm" data-html="true" rel="popover" data-content="<%= "No tags" if tagnames.nil? || tagnames.length == 0 %><% if tagnames %><% tagnames.each do |tagname| %><p style='margin-bottom:3px;'><a href='/subscribe/tag/<%= tagname %>' class='btn btn-default btn-mini'><%= tagname %></a></p><% end %><% end %><hr /><a class='btn btn-sm'><i class='fa fa-user'></i> <%= node.author.name %></a>" title="Follow by tag or author" data-placement="left"><i class="fa fa-eye"></i><span class="hidden-xs hidden-sm"> Follow</span></li>
+
+    <li rel="tooltip" title="Helpful? Follow it!" class="btn btn-default btn-sm" node-id="<%= node.id %>" id="like-button-<%= node.id %>"><span id="like-star-<%= node.id %>" class="fa fa-star<% if current_user && !node.liked_by(current_user.uid) %>-o<% end %>"></span> <span id="like-count-<%= node.id %>"><%= node.likers.length %> </span></li>
+
     <li class="btn btn-default btn-sm" rel="popover" data-placement="left" data-html="true" data-title="Tools" data-content="
 <p><b>Users who liked this</b></p>
 <% node.likers.each do |user| %>
@@ -30,12 +33,12 @@
   <hr />
 
   <div class='btn-group'>
-    <% if node.type == 'note' %><a <% if current_user && current_user.uid != node.uid %>data-confirm='Please be aware that you are editing someone else\'s post, a privilege you have only because you are a moderator or admin.' <% end %>class='btn btn-default btn-sm' href='/notes/edit/<%= node.id %>?t=<%= Time.now.to_i %>'><i class='fa fa-pencil'></i><span class='hidden-sm'> Edit</span></a><% end %>
+    <% if node.type == 'note' %><a <% if current_user && current_user.uid != node.uid %>data-confirm='Please be aware that you are editing someone else\'s post, a privilege you have only because you are a moderator or admin.' <% end %>class='btn btn-default btn-sm' href='/notes/edit/<%= node.id %>?t=<%= Time.now.to_i %>'><i class='fa fa-pencil'></i><span class='hidden-xs hidden-sm'> Edit</span></a><% end %>
     <a href='/notes/delete/<%= node.id %>' class='btn btn-default btn-sm' data-confirm='Are you sure?'>
-      <i class='fa fa-trash'></i><span class='hidden-sm' Delete</span>
+      <i class='fa fa-trash'></i><span class='hidden-xs hidden-sm' Delete</span>
     </a>
     <a href='/notes/raw/<%= node.id %>' class='btn btn-default btn-sm'>
-      <i class='fa fa-code'></i><span class='hidden-sm' Raw</span>
+      <i class='fa fa-code'></i><span class='hidden-xs hidden-sm' Raw</span>
     </a>
     <% if current_user.role == "moderator" || current_user.role == "admin" %>
       <a class='btn btn-default btn-sm' href='/moderate/spam/<%= node.id %>'><i class='fa fa-ban-circle'></i> Spam</a>
@@ -62,7 +65,7 @@
       // grab the like count for this node; "/likes/node/11278/count"
       jQuery.getJSON("<%= like_count_path(node) %>", function (json) {
         // push like count into the Like button placeholder 
-        $('#like-count-<%= node.id %>').html("(" + json + ")");
+        $('#like-count-<%= node.id %>').html(json);
       });
 
       <% if current_user %>

app/views/map/_maps.html.erb

@@ -5,8 +5,7 @@
       <a class="img-thumbnail" href="<%= node.path %>"><img src="<%= node.main_image.path(:default) %>" style="width:100%;" /></a>
     <% end %>
     <h4><a href="<%= node.path %>"><%= node.title %></a></h4>
-    <p style="color:#888;"><small>by 
-      <%= node.drupal_content_field_mappers.collect(&:field_mappers_value).uniq.join(', ') %>
+    <p style="color:#888;"><small> 
       <% unless !node.map || node.map.captured_on == "" %>| <%= time_ago_in_words(node.map.captured_on) %> ago<% end %>
       | <a href="<%= node.path %>#comments"><i style="color:#888;" class="fa fa-comment-alt"></i> <%= node.comment_count %></a>
       | <i style="color:#888;" class="fa fa-star-o"></i> <%= node.likes %>

app/views/notes/_comment.html.erb

@@ -11,8 +11,8 @@
         <% end %>
         <a href="/profile/<%= comment.author.name %>"><%= comment.author.name %></a>
       <% end %>
-      <a style="color:#aaa;" href="#c<%= comment.cid %>">commented</a>
-      <%= time_ago_in_words(comment.created_at) %> ago
+      <span class="hidden-xs">commented</span>
+      <a style="color:#aaa;" href="#c<%= comment.cid %>"><%= time_ago_in_words(comment.created_at) %> ago</a>
     </div>
 
     <div class="navbar-text navbar-right pull-right" style="padding-right:10px;">

app/views/notes/show.html.erb

@@ -5,7 +5,7 @@
   <% if current_user && @node.tags.length == 0 %><div class="alert">This note has no tags yet; help connect it to other content by <a onClick="$('#taginput').focus()">adding descriptive tags below</a>.</div><% end %>
 
   <% if @node.main_image %>
-    <a class="main-image" style="width:100%;max-width:800px;" href="<%= @node.main_image.path(:original) %>">
+    <a class="main-image" style="max-height:600px;max-width:100%;width:800px;" href="<%= @node.main_image.path(:original) %>">
       <img class="img-rounded" src="<%= @node.main_image.path(:large) %>" />
     </a>
     <!--<div class="expand"><a onClick="$('.main-image').toggleClass('compressed');"><i class="fa fa-angle-down"></i></a></div>-->

app/views/sidebar/_related.html.erb

@@ -86,6 +86,7 @@
 
   <% if @maps && @maps.length > 0 && params[:controller] != "search" %>
 
+    <br />
     <div style="width:100%;margin-left:0;height:300px;" id="map"></div>
 
     <% if @node && @maps && @node.lat %> 

app/views/tag/show.html.erb

@@ -36,21 +36,21 @@
   </script>
   <% end %>
 
-  <h3 style="margin-top:0;">Notes tagged with <i style="color:#aaa;"><%= params[:id] %></i></h3>
+  <h3>Notes tagged with <i style="color:#aaa;"><%= params[:id] %></i></h3>
 
   <%= render :partial => "notes/format_toggle" if @node_type == "note" %>
 
   <% if current_user %>
   <!-- AJAXify -->
   <div class="btn-group">
-    <a class="btn btn-sm" href="/feed/tag/<%= params[:id] %>.rss"><i class="fa fa-rss"></i> RSS</a>
+    <a class="btn btn-default btn-sm" href="/feed/tag/<%= params[:id] %>.rss"><i class="fa fa-rss"></i> RSS</a>
     <% unless @wildcard %>
       <% if current_user.following(params[:id]) %>
-      <a rel="tooltip" title="Click to unfollow" class="btn btn-sm active" href="/unsubscribe/tag/<%= params[:id] %>"><i class="fa fa-eye"></i> Following <b><%= params[:id] %></b></a>
+      <a rel="tooltip" title="Click to unfollow" class="btn btn-default btn-sm active" href="/unsubscribe/tag/<%= params[:id] %>"><i class="fa fa-eye"></i> Following <b><%= params[:id] %></b></a>
       <% else %>
-      <a class="btn btn-sm" href="/subscribe/tag/<%= params[:id] %>"><i class="fa fa-eye"></i> Follow <b><%= params[:id] %></b></a>
+      <a class="btn btn-default btn-sm" href="/subscribe/tag/<%= params[:id] %>"><i class="fa fa-eye"></i> Follow <b><%= params[:id] %></b></a>
       <% end %>
-      <a class="btn btn-sm" rel="popover" data-placement="bottom" data-html="true" data-title="Users following this tag" data-content="<% DrupalTag.followers(params[:id]).each do |user| %><i class='fa fa-star-o'></i> <a href='/profile/<%= user.username %>'><%= user.username %></a><br /><% end %><% if DrupalTag.follower_count(params[:id]) == 0 %><i>None</i><% end %>"><%= DrupalTag.follower_count(params[:id]) %> <i class="fa fa-user"></i> <span class="caret"></span></a>
+      <a class="btn btn-default btn-sm" rel="popover" data-placement="bottom" data-html="true" data-title="Users following this tag" data-content="<% DrupalTag.followers(params[:id]).each do |user| %><i class='fa fa-star-o'></i> <a href='/profile/<%= user.username %>'><%= user.username %></a><br /><% end %><% if DrupalTag.follower_count(params[:id]) == 0 %><i>None</i><% end %>"><%= DrupalTag.follower_count(params[:id]) %> <i class="fa fa-user"></i> <span class="caret"></span></a>
     <% end %>
   </div>
   <!-- AJAXify -->
@@ -64,6 +64,8 @@
     <li<% if @node_type == "map" %> class="active"<% end %>><a href="/maps/tag/<%= params[:id] %>"><i class="fa fa-map-marker"></i> Maps</a></li>
   </ul>
 
+  <br />
+
   <div class="tab-content">
 
     <% if @node_type == "note" %> 

app/views/users/profile.html.erb

@@ -131,7 +131,7 @@
     </div>
     <script>
       (function(){
-        $('a#comments-tab').on('shown',function (e) {
+        $('a#comments-tab').on('shown.bs.tab',function (e) {
           $.ajax({
             url : '/profile/comments/<%= @user.id %>',
             type: 'GET',

app/views/wiki/show.html.erb

@@ -15,7 +15,7 @@
   <% if current_user && @node.tags.length == 0 %><div class="alert alert-warning">This page has no tags yet; help connect it to other content by <a onClick="$('#taginput').focus()">adding descriptive tags below</a>.</div><% end %>
 
   <% if @node.main_image && !@presentation %>
-    <a style="margin-bottom:10px;" href="<%= @node.main_image.path(:original) %>"><img style="max-height:400px;margin-bottom:10px;" class="img-rounded" src="<%= @node.main_image.path(:large) %>" /></a>
+    <a style="margin-bottom:10px;" href="<%= @node.main_image.path(:original) %>"><img style="max-width:100%;max-height:600px;margin-bottom:10px;" class="img-rounded" src="<%= @node.main_image.path(:large) %>" /></a>
   <% end %>
 
   <div style="margin-top:10px;" class="hidden-print">
@@ -60,14 +60,12 @@
   <% end %>
 
   <% if @node.has_power_tag('tabbed') %>
-  <div class="navbar">
-    <div class="navbar-inner">
-      <ul class="nav">
-        <li class="active"><a data-toggle="tab" href="#tab-overview">Overview</a></li>
-        <% if @node.power_tags('tabbed').include?("notes") %><li><a data-toggle="tab" href="#tab-notes">Research</a></li><% end %>
-        <% if @node.power_tags('tabbed').include?("wikis") %><li><a data-toggle="tab" href="#tab-wikis">Wiki<span class="hidden-sm"> pages</span></a></li><% end %>
-      </ul>
-    </div>
+  <div class="navbar navbar-default">
+    <ul class="nav navbar-nav">
+      <li class="active"><a data-toggle="tab" href="#tab-overview">Overview</a></li>
+      <% if @node.power_tags('tabbed').include?("notes") %><li><a data-toggle="tab" href="#tab-notes">Research</a></li><% end %>
+      <% if @node.power_tags('tabbed').include?("wikis") %><li><a data-toggle="tab" href="#tab-wikis">Wiki<span class="hidden-sm"> pages</span></a></li><% end %>
+    </ul>
   </div>
   <% end %>