Changes styles for debates index and debate show

app/assets/stylesheets/debates.scss

@@ -1,6 +1,8 @@
 // Table of Contents
 //
 // 01. Variables
+//  01.1. Fonts
+//  01.2. Colors
 // 02. Global styles
 // 03. Header
 // 04. Footer
@@ -17,16 +19,22 @@
 // 01. Variables
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
+// 01.1. Fonts
+// - - - - - - - - - - - -
+
 $font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $line-height: rem-calc(24);
 
+// 01.2. Colors
+// - - - - - - - - - - - -
+
 $background:        #E9E9E9;
 $border:            #DEE0E3;
 $brand:             #0077B9;
 
 $debates:           #008CCF;
 
-$comments-bg:       #FAF9F8;
+$comments-bg:       #F1F1F1;//FAF9F8;
 $comments-info:     #A5B2B9;
 $comments-text:     #3F4549;
 
@@ -38,16 +46,16 @@ $tags-bg:           #FAFAFA;
 $tags-border:       #F0F0F0;
 $tags-color:        #8F8F8F;
 
-$text-color:        #919399;
+$text-color:        #222222;
 $text-medium:       #999999;
-$text-light:        #a3a6ad;
+$text-light:        #A3A6AD;
 
-$votes-background:  #EDEDED;
+$votes:             #A0AEC4;
-$votes-border:      #DEE0E3;
+$votes-background:  #F0F0F0;
-$votes-dislike:     #EF8585;
+$votes-border:      #D8D8D8;
-$votes-dislike-b:   #D26463;//FF7978;
+$votes-unlike:      #EF8585;
 $votes-like:        #7BD2A8;
-$votes-like-b:      #56A47D;
+$votes-text:        #54627C;
 
 // 02. Global styles
 // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -62,10 +70,7 @@ body {
   font-family: $font-family-sans-serif;
   font-size: rem-calc(13);
   font-weight: normal;
-
+  text-rendering: optimizeLegibility;
-    p {
-        font-weight: normal;
-    }
 }
 
 .row {
@@ -84,12 +89,7 @@ body {
   display: inline-block;
 }
 
-::selection {
+::selection, ::-moz-selection {
-    background: $brand;
-    color: white;
-}
-
-::-moz-selection {
   background: $brand;
   color: white;
 }
@@ -125,8 +125,6 @@ header {
   }
 
   .button {
-        background: none;
-        border: 2px solid white;
     color: white;
     margin-top: $line-height*2;
   }
@@ -197,38 +195,57 @@ header {
 // 05. Debates
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
+aside {
+  .button {
+    margin-top: $line-height;
+  }
+}
+
 // 05.1. Debates Index
 // - - - - - - - - - - - -
 
-.debates-index {
+.debates-list {
   margin-top: $line-height;
 }
 
+.debates-featured {
+
   .debate {
 
     .panel {
       background: white;
       box-shadow: 0 2px 0 rgba(0,0,0,.1);
+      padding: rem-calc(20) rem-calc(20) 0 rem-calc(20);
 
-        .fi-comment-quotes {
+      .debate-content {
-            color: $debates;
+        min-height: $line-height*11;
-            font-size: rem-calc(36);
-            line-height: $line-height;
-            margin-bottom: $line-height*0.77;
-        }
-
-        .fi-price-tag {
-            color: $text-color;
-            font-size: rem-calc(18);
-            line-height: $line-height;
       }
 
       .label {
-            margin-top: $line-height/4;
+        background: none;
+        clear: both;
+        color: $debates;
+        display: block;
+        font-weight: bold;
+        text-transform: uppercase;
+        padding: 0;
+      }
+
+      .icon-quote-right {
+        color: $debates;
+        font-size: rem-calc(30);
+        line-height: $line-height;
+        position: absolute;
+        right: $line-height;
+        top: $line-height/2;
+      }
+
+      .icon-chat-bubble-two {
+        vertical-align: middle;
       }
 
       h3 {
-            margin: 0;
+        margin: rem-calc(12) 0 0 0;
         font-weight: bold;
 
         a {
@@ -240,63 +257,139 @@ header {
         }
       }
 
+      .debate-info {
+        color: $text-light;
+        font-weight: lighter;
+        margin-bottom: 0;
+
+        .icon-chat-bubble-two {
+          font-size: rem-calc(16);
+        }
+      }
+
       p {
         color: $text-color;
         font-size: rem-calc(13);
         line-height: $line-height;
-            margin-bottom: $line-height;
+        margin-bottom: $line-height/2;
       }
     }
 
     .votes {
+      border-top: 1px solid $votes-border;
+      padding: $line-height/2 0;
+
+      .icon-like {
         background: $votes-background;
-        margin: -5px -20px -20px -20px;
+        border: 1px solid $votes-border;
-        padding: 1.25rem 1.25rem 0 1.25rem;
+        border-radius: rem-calc(3);
-
+        color: $votes;
-        .fi-like {
-            color: $votes-like;
-            font-size: rem-calc(48);
-            line-height: $line-height*2;
-        }
-
-        .fi-dislike {
-            color: $votes-dislike;
         display: inline-block;
-            font-size: rem-calc(48);
+        font-size: rem-calc(30);
-            line-height: $line-height*2;
+        line-height: rem-calc(30);
-            padding-top: $line-height/3;
+        padding: rem-calc(6) rem-calc(12);
+        //when active => color: $votes-like;
+
+        &:hover {
+          background: white;
+          color: $brand;
+        }
       }
 
-        .in-favor {
+      .icon-unlike {
-            color: $votes-like;
+        background: $votes-background;
+        border: 1px solid $votes-border;
+        border-radius: rem-calc(3);
+        color: $votes;
+        display: inline-block;
+        font-size: rem-calc(30);
+        line-height: rem-calc(30);
+        padding: rem-calc(6) rem-calc(12);
+        //when active => color: $votes-unlike;
+
+        &:hover {
+          background: white;
+          color: $brand;
+        }
+      }
+
+      .like {
         line-height: rem-calc(48);
-            vertical-align: top;
+        vertical-align: super;
 
         span {
+          color: $votes-text;
           display: inline-block;
-                line-height: 48px;
+          font-size: rem-calc(18);
-                padding-top: 5px;
+          font-weight: bold;
+          line-height: $line-height*2;
+          padding-left: rem-calc(6);
           vertical-align: top;
         }
       }
 
-        .against {
+      .unlike {
-            @extend .in-favor;
+        @extend .like;
-            color: $votes-dislike;
-            display: inline-block;
       }
 
       .total-votes {
-            font-size: rem-calc(12);
+        color: $votes-text;
         line-height: $line-height*2;
       }
 
       .divider {
-            background: rgba(0,0,0, .1);
+        margin: 0 rem-calc(3);
-            display: inline-block;
+      }
-            height: 3rem;
+    }
-            margin: 0 .5rem;
+  }
-            width: 1px;
+}
+
+.debates-index {
+  @extend .debates-featured;
+
+  .debate {
+    margin-bottom: rem-calc(6);
+
+    .panel {
+      border: 0;
+      box-shadow: none;
+      margin-bottom: 0;
+      padding: 0 rem-calc(6);
+
+      p {
+        text-align: justify;
+      }
+
+      .debate-content {
+        min-height: 0;
+      }
+
+      .icon-quote-right {
+        font-size: rem-calc(14);
+        position: initial;
+        vertical-align: bottom;
+      }
+
+      .label {
+        line-height: $line-height;
+        margin-right: rem-calc(5);
+      }
+    }
+
+    .votes {
+      border: 0;
+      margin-top: $line-height;
+
+      .like {
+
+        span {
+          color: $votes-text;
+          display: block;
+          font-size: rem-calc(18);
+          font-weight: bold;
+          line-height: $line-height*1.5;
+        }
+      }
     }
   }
 }
@@ -305,10 +398,8 @@ header {
 // - - - - - - - - - - - -
 
 .debate-show {
-    color: $text-medium;
   margin-top: $line-height;
-    margin-bottom: $line-height*2;
+  padding: 0 rem-calc(12);
-    padding: 0 $line-height/2;
 
   .back {
     color: $text-light;
@@ -316,23 +407,26 @@ header {
     line-height: $line-height;
   }
 
+  .icon-angle-left {
+   @extend .back;
+  }
+
   h1 {
     clear: both;
     font-size: rem-calc(24);
     font-weight: bold;
-        line-height: $line-height*1.3333;
+    line-height: $line-height*2;
     margin: 0;
-        padding-top: $line-height/2;
   }
 
   .debate-info {
+    clear: both;
     color: $text-light;
     font-weight: lighter;
     line-height: $line-height*2;
-        margin-bottom: $line-height*0.5;
     text-align: justify;
 
-        span {
+    .bullet {
       color: $border;
     }
 
@@ -353,70 +447,87 @@ header {
     width: 32px;
   }
 
+  .author {
+    color: $text-color;
+    font-weight: bold;
+  }
+
   .votes {
+    padding-top: 0;
+
+    @media (min-width: 480px) {
+      padding-top: $line-height*1.5;
+    }
+
+    h3 {
+      border-bottom: 1px solid $border;
+      font-size: rem-calc(18);
+      margin: 0 0 $line-height 0;
+      text-transform: uppercase;
+    }
+
+    .icon-like {
+      background: $votes-background;
       border: 1px solid $votes-border;
-        box-shadow: 0 2px 0 rgba(0,0,0,.1);
+      border-radius: rem-calc(3);
-        border-radius: 3px;
+      color: $votes;
-        padding: $line-height/2;
+      display: inline-block;
+      font-size: rem-calc(30);
+      line-height: rem-calc(30);
+      padding: rem-calc(6) rem-calc(12);
+      //when active => color: $votes-like;
 
-        .fi-like {
+      &:hover {
-            background: $votes-like;
+        background: white;
-            border: 1px solid $votes-like-b;
+        color: $brand;
-            border-radius: $line-height*2.5;
+      }
-            color: white;
-            display: block;
-            font-size: rem-calc(48);
-            height: $line-height*2.5;
-            line-height: $line-height*2.5;
-            width: $line-height*2.5;
     }
 
-        .fi-dislike {
+    .icon-unlike {
-            background: $votes-dislike;
+      background: $votes-background;
-            border: 1px solid $votes-dislike-b;
+      border: 1px solid $votes-border;
-            border-radius: $line-height*2.5;
+      border-radius: rem-calc(3);
-            color: white;
+      color: $votes;
-            display: block;
+      display: inline-block;
-            font-size: rem-calc(48);
+      font-size: rem-calc(30);
-            height: $line-height*2.5;
+      line-height: rem-calc(30);
-            line-height: $line-height*2.5;
+      padding: rem-calc(6) rem-calc(12);
-            width: $line-height*2.5;
+      //when active => color: $votes-unlike;
+
+      &:hover {
+        background: white;
+        color: $brand;
+      }
     }
 
-        .in-favor {
+    .like {
-            color: $votes-like;
-            line-height: rem-calc(48);
 
       span {
-                display: inline-block;
+        color: $votes-text;
+        display: block;
         font-size: rem-calc(18);
         font-weight: bold;
-                line-height: $line-height;
+        line-height: $line-height*1.5;
-                padding-top: $line-height/4;
-                vertical-align: top;
       }
     }
 
-        .against {
+    .unlike {
-            @extend .in-favor;
+      @extend .like;
-            color: $votes-dislike;
     }
 
     .total-votes {
+      color: $votes-text;
       font-size: rem-calc(14);
-            margin: 0;
+      line-height: $line-height;
     }
 
     .divider {
-            background: rgba(0,0,0,.05);
+      margin: 0 rem-calc(12);
-            display: inline-block;
-            height: $line-height*4;
-            margin: 0 $line-height;
-            width: 1px;
     }
   }
 
-    .publish-comment {
+  .leave-comment {
+    display: inline-block;
     margin-top: $line-height;
   }
 }
@@ -490,15 +601,19 @@ header {
 // 07. Tags
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.tags a {
+.tags {
+
+  a {
     background: $tags-bg;
     border: 1px solid $tags-border;
     border-radius: 3px;
     color: $tags-color;
+    display: inline-block;
     font-size: rem-calc(13);
-    margin-bottom: 8px;
+    margin-bottom: rem-calc(8);
-    margin-right: $line-height/3;
+    margin-right: rem-calc(8);
-    padding: $line-height/4 $line-height/3;
+    padding: 0 rem-calc(6);
+
 
     &:hover {
       color: $link;
@@ -507,6 +622,22 @@ header {
       border: 1px solid $brand;
     }
   }
+}
+
+.tag-cloud {
+  @extend .tags;
+
+  h3 {
+    font-size: rem-calc(24);
+    font-weight: bold;
+    line-height: $line-height*2;
+    margin: 0;
+  }
+
+  a {
+    padding: $line-height/4 $line-height/3;
+  }
+}
 
 // 08. Login and Sign Up
 // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -534,38 +665,3 @@ header {
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

app/views/debates/_debate.html.erb

@@ -1,32 +1,38 @@
-<div id="debate-<%= debate.id %>" class="small-12 medium-6 large-4 column debate end">
+<div class="debates-index">
+  <div id="debate-<%= debate.id %>" class="debate">
     <div class="panel">
-        <i class="fi-comment-quotes left"></i>
+      <div class="row">
-        <span class="label radius right"><%= t("debates.debate.debate") %></span>
+        <div class="small-12 medium-9 column">
-
+          <div class="debate-content">
+            <span class="label left"><%= t("debates.debate.debate") %></span>
+            <i class="icon-quote-right"></i>
             <h3><%= link_to debate.title, debate %></h3>
-        <p>Por <%= debate.author.name %> el <%= l debate.created_at.to_date %></p>
+            <p class="debate-info">
-        <p><%= sanitize(debate.description.html_safe) %></p>
+              <i class="icon-chat-bubble-two"></i>&nbsp;<%= pluralize(debate.comment_threads.count, t("debates.debate.comment"), t("debates.debate.comments")) %>
-
+            </p>
-        <p><%= render 'shared/tags', debate: debate %></p>
+            <p><%= sanitize(truncate(debate.description, length: 200).html_safe) %></p>
-
+            <%= render "shared/tags", debate: debate %>
-		<div class="row votes">
+          </div>
-        	<div class="small-8 column">
+        </div>
-
+        <div class="small-12 medium-3 column">
-	    		<%= link_to debate_votes_path(debate, value: 'yes'), class: 'in-favor', method: "post" do %>
+          <div class="text-center votes">
-	    			<i class="fi-like"></i>
+            <%= link_to debate_votes_path(debate, value: 'yes'), class: "like inline-block", title: t('votes.agree'), method: "post" do %>
+              <i class="icon-like"></i>
               <span><%= percentage('likes', debate) %></span>
             <% end %>
 
             <span class="divider"></span>
 
-	    		<%= link_to debate_votes_path(debate, value: 'no'), class: 'against', method: "post" do %>
+            <%= link_to debate_votes_path(debate, value: 'no'), class: "unlike inline-block", title: t('votes.disagree'), method: "post" do %>
-	    			<i class="fi-dislike"></i>
+              <i class="icon-unlike"></i>
               <span><%= percentage('dislikes', debate) %></span>
             <% end %>
-			</div>
+            <br>
-
+            <span class="total-votes">
-			<div class="small-4 column">
+              <%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
-    			<p class="total-votes right"><%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %></p>
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   </div>

app/views/debates/index.html.erb

@@ -1,9 +1,59 @@
-<section id='debates' class="debates-index">
+<section id="debates" role="main">
   <div class="row">
+  <!-- HTML for debates featured (3) -->
+    <% debate = @debates.first %>
+    <div class="small-12 medium-4 column debates-list">
+      <div class="row">
+        <div class="debates-featured">
+          <div id="debate-<%= debate.id %>" class="small-12 column end debate">
+            <div class="panel">
+              <div class="debate-content">
+                <span class="label left"><%= t("debates.debate.debate") %></span>
+                <i class="icon-quote-right right"></i>
+
+                <h3><%= link_to debate.title, debate %></h3>
+                <p class="debate-info">
+                  <i class="icon-chat-bubble-two"></i>&nbsp;<%= pluralize(debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")) %>
+                </p>
+                <p><%= sanitize(truncate(debate.description, length: 200).html_safe) %></p>
+                <p><%= render "shared/tags", debate: debate %></p>
+              </div>
+
+              <div class="row votes">
+                <div class="small-12 column">
+                  <%= link_to debate_votes_path(debate, value: "yes"), class: "like", title: t('votes.agree'), method: "post" do %>
+                    <i class="icon-like"></i>
+                    <span><%= percentage('likes', debate) %></span>
+                  <% end %>
+
+                  <span class="divider"></span>
+
+                  <%= link_to debate_votes_path(debate, value: "no"), class: "unlike", title: t('votes.disagree'), method: "post" do %>
+                    <i class="icon-unlike"></i>
+                    <span><%= percentage('dislikes', debate) %></span>
+                  <% end %>
+
+                  <span class="total-votes right">
+                    <%= pluralize(debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <!-- HTML for debates featured (3) -->
+    <div class="small-12 medium-9 column debates-list">
       <%= render @debates %>
     </div>
-</section>
+    <div class="small-12 medium-3 column">
-
+      <aside role="complementary">
-<aside>
+        <%= link_to t("debates.index.create_debate"), new_debate_path, class: 'button radius' %>
-    <%= render 'shared/tag_cloud' %>
+        <%= render "shared/tag_cloud" %>
       </aside>
+    </div>
+  </div>
+</section>

app/views/debates/show.html.erb

@@ -1,26 +1,20 @@
 <section class="debate-show">
-
   <div id="debate-<%= @debate.id %>" class="row">
-
     <div class="small-12 medium-9 column">
-
+      <i class="icon-angle-left left"></i>&nbsp;<%= link_to t("debates.show.back_link"), debates_path, class: 'left back' %>
-            <%= link_to "&laquo;&nbsp;".html_safe + t("debates.show.back_link"), debates_path, class: 'left back' %>
-
-            <h1><%= @debate.title %></h1>
       <div class="debate-info">
-
         <%= image_tag('user_default.jpg', class: 'author-photo', size: '32x32') %>
-
+        <span class="author"><%= @debate.author.name %></span><span class="bullet">&nbsp;&bullet;&nbsp;</span> <%= l @debate.created_at.to_date %> <span class="bullet">&nbsp;&bullet;&nbsp;</span><i class="icon-chat-bubble-two"></i>&nbsp;<%= pluralize(@debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")) %>
-                <%= @debate.author.name %> <span>&nbsp;&bullet;&nbsp;</span> <%= l @debate.created_at.to_date %> <span>&nbsp;&bullet;&nbsp;</span> <%= pluralize(@debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")) %>
-            </div>
-            <div class="debate-description">
-              <%= @debate.description.html_safe %>
       </div>
+      <h1><%= @debate.title %></h1>
+      <p><%= @debate.description %></p>
       <p><%= render 'shared/tags', debate: @debate %></p>
     </div>
-
+    <div id="votes" class="small-12 medium-3 column votes">
-      <div id="votes" class="votes small-12 medium-3 column">
       <%= render 'votes/votes' %>
+      <div class="text-center">
+        <%= link_to t("debates.show.leave_comment"), "#comments", class: "leave-comment" %>
+      </div>
     </div>
   </div>
 </section>

app/views/shared/_tag_cloud.html.erb

@@ -1,4 +1,5 @@
-<div id="tag-cloud">
+<div id="tag-cloud" class="tag-cloud">
+  <h3><%= t("shared.tags_cloud.tags") %></h3>
   <% tag_cloud Debate.tag_counts, %w[s m l] do |tag, css_class| %>
     <%= link_to sanitize("#{tag.name}(#{tag.taggings_count})"), debates_path(tag: tag.name), class: css_class %>
   <% end %>

app/views/votes/_votes.html.erb

@@ -1,7 +1,14 @@
-<div class="small-12 column text-center">
+<div class="small-12 column">
+  <p class="total-votes right">
+    <%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
+  </p>
+
+  <h3><%= t("votes.supports") %></h3>
+
+  <div class="text-center">
     <div id="in_favor" class="inline-block">
-    <%= link_to debate_votes_path(@debate, value: 'yes'), class: 'in-favor', method: "post", remote: true do %>
+      <%= link_to debate_votes_path(@debate, value: 'yes'), class: "like", title: t('votes.agree'), method: "post", remote: true do %>
-      <i class="fi-like"></i>
+        <i class="icon-like"></i>
         <span><%= percentage('likes', @debate) %></span>
       <% end %>
     </div>
@@ -9,15 +16,10 @@
     <span class="divider"></span>
 
     <div id="against" class="inline-block">
-    <%= link_to debate_votes_path(@debate, value: 'no'), class: 'against', method: "post", remote: true do %>
+      <%= link_to debate_votes_path(@debate, value: 'no'), class: "unlike", title: t('votes.disagree'), method: "post", remote: true do %>
-      <i class="fi-dislike"></i>
+        <i class="icon-unlike"></i>
         <span><%= percentage('dislikes', @debate) %></span>
       <% end %>
     </div>
   </div>
-
-<div class="small-12 column text-center">
-  <p class="total-votes">
-    <%= pluralize(@debate.total_votes, t("debates.debate.vote"), t("debates.debate.votes")) %>
-  </p>
 </div>

config/locales/en.yml

@@ -12,10 +12,17 @@ en:
       create_debate: Create a debate
       my_account_link: My account
   debates:
+    index:
+      create_debate: Create a debate
     debate:
       debate: Debate
       vote: vote
       votes: votes
+      comment: Comment
+      comments: Comments
+      agree: I agree
+      disagree: I disagree
+      leave_comment: Comment
     form:
       one_error: error
       plural_errors: errors
@@ -45,9 +52,15 @@ en:
     reply_link: Reply
     reply_button: Publish reply
   votes:
+    agree: I agree
+    disagree: I disagree
+    supports: Supports
     notice_thanks: "Thanks for voting."
     notice_already_registered: "Your vote is already registered."
   account:
     show:
       title: "My account"
       save_changes_submit: "Save changes"
+  shared:
+    tags_cloud:
+        tags: Tags

config/locales/es.yml

@@ -12,10 +12,16 @@ es:
       create_debate: Crea un debate
       my_account_link: Mi cuenta
   debates:
+    index:
+      create_debate: Crea un debate
     debate:
       debate: Debate
       vote: voto
       votes: votos
+      comment: Comentario
+      comments: Comentarios
+      agree: Estoy de acuerdo
+      disagree: No estoy de acuerdo
     form:
       one_error: error
       plural_errors: errores
@@ -45,9 +51,15 @@ es:
     reply_link: Responder
     reply_button: Publicar respuesta
   votes:
+    agree: Estoy de acuerdo
+    disagree: No estoy de acuerdo
+    supports: Apoyos
     notice_thanks: "Gracias por votar."
     notice_already_registered: "Tu voto ya ha sido registrado."
   account:
     show:
       title: "Mi cuenta"
       save_changes_submit: "Guardar cambios"
+  shared:
+    tags_cloud:
+        tags: Etiquetas