improve display of channel

app/assets/stylesheets/custom.css.erb

@@ -106,7 +106,7 @@ body {
     background: -moz-linear-gradient(left, #dddddd, #f5f5f5);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#f5f5f5', GradientType=1);
 }
-#channel_info           { padding-bottom: 20px; }
+
 .signed_in_channel_header {display:inline-block; }
 .public_private_icon {display:inline-block;}
 .signed_in_channel_header { width:300px;height: 10px;}
@@ -148,14 +148,7 @@ margin-right:5px
 .public_channel_thumbnail {
 position:absolute;border:2px solid red;display:none
 }
-h1.channel_info {
-    margin:0;
-    padding-top: 10px
-}
 
-div.list_tags {
-padding-top:20px;
-}
 .channelLinks {
     padding: 0 0 0 0;
     margin-bottom: 15px;
@@ -260,11 +253,9 @@ textarea.tweet { margin-top: 0.5em; width: 40em; height: 3em; }
 
 /* main layout */
 #maincontent            { float: left; width:980px; padding-bottom: 20px; margin-left:10px; overflow:false}
+#maincontent_nowidth    { float: left; min-width: 980px; padding-bottom: 20px; margin-left:10px; overflow:false}
 #maincontent.thin       { width: 400px; }
-#maincontent.medium     {
+#maincontent.medium     { width: 500px; }
-
-    width: 500px;
-}
 
 #maincontent .thinghttptable { table-layout:fixed;  width: 400px; word-wrap: break-word; }
 #maincontent .thinghttptable .url { width: 100px; }
@@ -350,7 +341,7 @@ input.video_narrow {width:100px; }
 #nav li a.rss:hover     {background: url(rss_feed.png) right -24px no-repeat; padding:0px 30px 0px 0; border-bottom:0 solid #aaa;}
 
 /* jQuery Overrides */
-.ui-widget { font-size: .8em; }
+.ui-widget { font-size: 0.9em; }
 .ui-widget-header   {
     border: 1px solid #0867A3;
     background: #0867a3 none top right no-repeat;
@@ -371,7 +362,7 @@ input.video_narrow {width:100px; }
 
 }
 
-.column { width: 470px; float: left; padding-bottom: 50px; padding-left: 5px; }
+.column { width: 470px; padding-bottom: 50px; margin: 0 auto; }
 .portlet { margin: 0 1em 1em 0; }
 
 .portlet-header { margin: 0.3em; padding: 7px 7px 7px 7px;  }
@@ -476,15 +467,6 @@ input.video_narrow {width:100px; }
     text-decoration:none;
 }
 
-.channelInfo {
-    max-width: 500px;
-}
-.channelDescription {
-    width: 450px;
-    height: 60px;
-
-}
-
 .socialButtons {
     float:right;
     display:inline;
@@ -571,12 +553,6 @@ height:100%;
     display:inline-block;
 }
 
-.channel_stats_location {
-clear:right; float:right;width:475px;padding-top:23px
-}
-.channel_stats_text {
-font-weight:bold;font-size:1.2em
-}
 .channel_time_text {
   color:black !important; font-size:1em !important;
 }

app/views/channels/_channelinfo.html.erb

@@ -1,13 +1,17 @@
-<div id="channel_info" class="FL channelInfo" >
+<div class="col-xs-6 col-sm-6">
-  <div class="FL" ><h3 class="channel_info"><%= @channel.name %></h3></div>
+  <h3><%= @channel.name %></h3>
-  <div class="FR list_tags"><%= @channel.list_tags %></div>
-  <div class="CB"></div>
   <% if @channel.user.present? %>
-    <p>by <%= link_to @channel.user.login, user_profile_path(@channel.user.login) %></p>
+    <div>by <%= link_to @channel.user.login, user_profile_path(@channel.user.login) %></div><br>
   <% end %>
-  <div class="channelDescription" ><p><%= @channel.description %></p></div>
+  <div><%= @channel.description %></div><br>
-  <p></p>
+  <div>
-</div> <!-- end channelInfo -->
+    <b>Tags:</b>
+    <% @channel.tags.each do |tag| %>
+      <a href="/channels/public?tag=<%=u tag.name %>"><%= tag.name %></a><% unless tag == @channel.tags.last %>, <% end %>
+    <% end %>
+  </div><br>
+</div>
+
 <div id="channellinks">
   <div class="FR developerlink">
     <a id="devInfoLink_<%= zone %>" href="#" class="topLink" ><%= t(:developer_info) %></a>

app/views/channels/_edit.html.erb

@@ -103,7 +103,7 @@
       </tr>
       <tr>
         <td class="left"></td>
-        <td><%= c.submit t(:channel_update) %></td>
+        <td><%= c.submit t(:channel_update), class: 'btn btn-primary' %></td>
       </tr>
     </table>
   <% end %>
@@ -111,12 +111,12 @@
   <br><br>
 
   <h4><%= t(:channel_clear_message) %></h4>
-  <%= button_to t(:channel_clear), "/channels/#{@channel.id}/clear", :data => { :confirm => t(:confirm_channel_clear) } %>
+  <%= button_to t(:channel_clear), "/channels/#{@channel.id}/clear", :data => { :confirm => t(:confirm_channel_clear) }, class: 'btn btn-danger' %>
 
   <br><br>
 
   <h4><%= t(:channel_delete_message) %></h4>
-  <%= button_to t(:channel_delete), channel_path(@channel.id), :method => 'delete', :data => { :confirm => t(:confirm_channel_delete) } %>
+  <%= button_to t(:channel_delete), channel_path(@channel.id), :method => 'delete', :data => { :confirm => t(:confirm_channel_delete) }, class: 'btn btn-danger' %>
 </div>
 <div id="sidebar_old">
 <ul>

app/views/channels/_import.html.erb

@@ -9,7 +9,7 @@
     <%= t(:time_zone) %>
     <%= time_zone_select 'feed', 'time_zone', nil, :default => 'UTC' %>
     <br><br>
-    <%= f.submit t(:upload), data: { disable_with: t(:uploading) } %>
+    <%= f.submit t(:upload), data: { disable_with: t(:uploading) }, class: 'btn btn-primary' %>
   <% end %>
 
   <br><br>
@@ -17,7 +17,7 @@
   <h3><%= t(:export) %></h3>
   <%= t(:download_feeds) %>
   <br><br>
-  <%= button_to t(:download), "#{@ssl_api_domain}stream/channels/#{@channel.id}/feeds?api_key=#{@channel.write_api_key}" %>
+  <%= button_to t(:download), "#{@ssl_api_domain}stream/channels/#{@channel.id}/feeds?api_key=#{@channel.write_api_key}", class: 'btn btn-primary' %>
 </div>
 
 <div id="sidebar_old" >

app/views/channels/_private_show.html.erb

@@ -1,16 +1,22 @@
 <%= render :partial => 'channelinfo', :locals => { :zone => "private" } %>
-<div class="channel_stats_location">
+
-  <span class="channel_stats_text">Channel Stats</span>
+<div class="col-xs-6 col-sm-6"  style="padding-left: 42px;">
+  <h4 style="color: #333;">Channel Stats</h4>
   <table>
     <tr><td>Created</td><td ><abbr class="timeago channel_time_text" title="<%= @channel.created_at %>" ><%= @channel.created_at %></abbr></td></tr>
     <tr><td>Updated</td><td ><abbr class="timeago channel_time_text" title="<%= @channel.updated_at %>" ><%= @channel.updated_at %></abbr></td></tr>
   </table>
   <span><%= @channel.feeds.count %> Entries</span>
 </div>
+
 <div class="CB">
+  <div class="col-xs-6 col-sm-6">
     <div id="private_dialog0" class="column"></div>
+  </div>
+  <div class="col-xs-6 col-sm-6">
     <div id="private_dialog1" class="column"></div>
   </div>
+</div>
 <script>
   // when the document is ready
   $(document).on('page:load ready', function() {

app/views/channels/_public_show.html.erb

@@ -3,9 +3,13 @@
 <%= render :partial => 'channelinfo', :locals => { :zone => "public" } %>
 
 <div class="CB">
+  <div class="col-xs-6 col-sm-6">
     <div id="public_dialog0" class="column"></div>
+  </div>
+  <div class="col-xs-6 col-sm-6">
     <div id="public_dialog1" class="column"></div>
   </div>
+</div>
 
 <div class="commentlink" >
   <% if !current_user %>
@@ -74,7 +78,7 @@ function commentflag(m_id, user_id)
 </script>
 <% else %>
 <div class="FL" >
-<h3 class="channel_info"><%= t(:channel_not_public) %></h3>
+  <h3><%= t(:channel_not_public) %></h3>
 </div>
 <% end %>
 

app/views/channels/private_show.html.erb

@@ -12,7 +12,7 @@
 
 <%= render :partial => "socialbuttons" %>
 
-<div id="maincontent" >
+<div id="maincontent_nowidth" class="col-xs-12 col-sm-12">
   <ul>
     <li><a href="#privateview"><%= t("private_view") %></a></li>
     <li><a href="#publicview"><%= t("public_view") %></a></li>
@@ -95,7 +95,7 @@ $(document).on('page:load ready', function() {
       else {
 	  $("#watchText").text("Watch");
       }
-      $("#maincontent").tabs({
+      $("#maincontent_nowidth").tabs({
 			  select: function( e, ui) {
 				  $.cookie('stickyTab', ui.index );
 				},
@@ -111,7 +111,7 @@ $(document).on('page:load ready', function() {
       }
       if( ! isNaN( stickyTab )  )
       {
-          $("#maincontent").tabs( 'select', stickyTab );
+          $("#maincontent_nowidth").tabs( 'select', stickyTab );
       }
 
       var current_user = "<%= @mychannel %>";

app/views/channels/public_show.html.erb

@@ -11,7 +11,7 @@
 
 <%= render :partial=>"socialbuttons" %>
 
-<div id="maincontent">
+<div id="maincontent_nowidth" class="col-xs-12 col-sm-12">
   <ul>
     <li><a href="#publicview">Public View</a></li>
   </ul>
@@ -47,7 +47,7 @@ $(document).on('page:load ready', function() {
 			       position: {
 				   my: 'top',
 				   at: 'top',
-				   of: $('#maincontent')
+				   of: $('#maincontent_nowidth')
 			       },
 			       title: "Developer Info",
 			       dialogClass: "dev-info-dialog"
@@ -62,7 +62,7 @@ $(document).on('page:load ready', function() {
 	  $("#watchText").text("Watch");
       }
 
-      $("#maincontent").tabs( {
+      $("#maincontent_nowidth").tabs( {
 			  select: function( e, ui)
 			      {
 				  $.cookie('stickyTab', ui.index );
@@ -74,7 +74,7 @@ $(document).on('page:load ready', function() {
 
 	  if( ! isNaN( stickyTab )  )
 	  {
-              $("#maincontent").tabs( 'select', stickyTab );
+              $("#maincontent_nowidth").tabs( 'select', stickyTab );
 	  }
 	  var current_user = "<%= @mychannel %>" ;