use Bootstrap styles for public channels list

Gemfile

@@ -12,6 +12,7 @@ gem 'nested_form'
 gem 'dalli'
 gem 'kgio'
 gem 'will_paginate', '~> 3.0.pre2'
+gem 'will_paginate-bootstrap'
 gem 'nokogiri'
 gem 'acts_as_tree'
 gem 'acts_as_list'

Gemfile.lock

@@ -339,6 +339,8 @@ GEM
       rack (>= 1.0)
       rack-test (>= 0.5.3)
     will_paginate (3.0.5)
+    will_paginate-bootstrap (1.0.1)
+      will_paginate (>= 3.0.3)
 
 PLATFORMS
   ruby
@@ -397,3 +399,4 @@ DEPENDENCIES
   uglifier
   webrat
   will_paginate (~> 3.0.pre2)
+  will_paginate-bootstrap

app/assets/stylesheets/custom.css.erb

@@ -2,6 +2,7 @@
 code                    { word-wrap: break-word; white-space: normal; }
 .navbar-collapse        { max-height: 350px; }
 .breadcrumb             { margin-top: 10px; margin-bottom: 20px; } /* margins to make sure breadcrumb and h4.breadcrumb line up properly */
+.panel-primary .panel-heading a { color: #fff; font-weight: bold; }
 .table td               { word-break: break-word; }
 
 /* table sorting */
@@ -25,6 +26,7 @@ body                    { padding-top: 70px; }
 .btn-margin             { margin: 2px; }
 .col-pad                { padding: 0 15px; }
 .dismiss                { float: right; cursor: pointer; position: relative; top: -12px; left: 7px; }
+.link-no-hover:hover    { text-decoration: none; }
 
 /* contact form */
 #contact_form           { display: none; }
@@ -111,44 +113,10 @@ body {
 .public_private_icon {display:inline-block;}
 .signed_in_channel_header { width:300px;height: 10px;}
 #list_progress_bar { width:300px;height: 10px;}
-.public_channel_box {
-margin:5px;border-radius:7px;height:300px;border:solid 1px red;display:inline-block;width:260px;vertical-align:top
-}
-.public_channel_inner {
-margin-left:10px;
-margin-right:5px
-}
-.public_channel_name {
-    height: 11px;
-    font-size: 1.3em;
-    font-weight:bold;
-    color: #2565A5;
-}
-.public_channel_user {
-    height:15px;
-    margin-left:7px;
-    font-size: 0.9em;
-}
-.progressbar {
-    height:10px;
-
-}
-.public_channel_desc {
-    height:140px;
-    word-break:break-all;
-}
-.public_channel_url {
-    height:10px;
-}
-.public_channel_tags {
-    height:57px;
-    margin-bottom:10px;
-    overflow: hidden;
-}
-.public_channel_thumbnail {
-position:absolute;border:2px solid red;display:none
-}
 
+.progressbar { height:10px; margin-bottom: 5px; }
+.public_channel_description { height: 140px; overflow: hidden; }
+.public_channel_tags { height: 40px; overflow: hidden; }
 .channelLinks {
     padding: 0 0 0 0;
     margin-bottom: 15px;

app/views/channels/_list.html.erb

@@ -1,22 +1,35 @@
-<div>
-  <% @channels.each do |channel| %>
+<% @channels.each do |channel| %>
 
-    <div class="public_channel_box">
-      <div class="public_channel_inner">
-        <p class="public_channel_name">
-          <%= link_to truncate(channel.name, length: 23), channel_path(channel.id), :id => "showsite_#{channel.id}" %>
-        </p>
-        <p class="public_channel_user" >by <%= channel.user.login if channel.user.present? %></p>
-        <p class="public_channel_desc"><%= channel.description %></p>
-        <div class="progressbar" rel="<%= channel.ranking %>"></div>
-        <p class="public_channel_tags">
-          <% channel.tags.each do |tag| %>
-            <a href="/channels/public?tag=<%=u tag.name %>"><%= tag.name %></a><% unless tag == channel.tags.last %>, <% end %>
-          <% end %>
-        </p>
+  <div class="col-md-4 col-sm-6 col-xs-12">
+    <div class="panel panel-primary">
+
+      <div class="panel-heading">
+        <%= link_to channel_path(channel.id), :id => "showsite_#{channel.id}", class: 'link-no-hover' do %>
+          <i class="fa fa-bar-chart-o"></i>
+        <% end %>
+        <%= link_to channel_path(channel.id), :id => "showsite_#{channel.id}" do %>
+          <%= truncate(channel.name, length: 23) %>
+        <% end %>
       </div>
+
+      <div class="panel-body">
+        <p class="small">by <%= link_to(channel.user.login, user_profile_path(channel.user.login)) if channel.user.present? %></p>
+        <p class="public_channel_description"><%= channel.description %></p>
+        <div class="progressbar" rel="<%= channel.ranking %>"></div>
+        <div class="public_channel_tags">
+          <% if channel.tags.present? %>
+            <i class="fa fa-tags"></i>
+            <% channel.tags.each do |tag| %>
+              <a href="/channels/public?tag=<%=u tag.name %>"><%= tag.name %></a><% unless tag == channel.tags.last %>, <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+
     </div>
+  </div>
 
-  <% end %>
-</div>
+<% end %>
+
+<div class="clearfix"></div>
 

app/views/channels/public.html.erb

@@ -4,7 +4,7 @@
     <h4 class="breadcrumb"><%= @header %></h4>
     <%= render :partial => 'list' %>
     <br>
-    <%= will_paginate @channels %>
+    <%= will_paginate @channels, renderer: BootstrapPagination::Rails %>
   </div>
 
   <div class="col-xs-12 col-sm-3">

app/views/users/_list_channels.html.erb

@@ -30,7 +30,7 @@
     </tbody>
   </table>
   <br>
-  <%= will_paginate @channels %>
+  <%= will_paginate @channels, renderer: BootstrapPagination::Rails %>
 <% else %>
   <%= t(:user_no_public_channels) %>
 <% end %>