Merge pull request #141 from AyuntamientoMadrid/debates

Improves styles for debates

app/assets/stylesheets/debates.scss

@@ -13,7 +13,7 @@
 @mixin votes {
   border-top: 1px solid $votes-border;
   padding: rem-calc(14) rem-calc(12);
-  background: $votes-background;
+  background: $votes-bg;
   margin: 0 -12px;
 
   .icon-like {
@@ -178,6 +178,10 @@
         font-size: rem-calc(16);
         vertical-align: top;
       }
+
+      a {
+        color: $text-light;
+      }
     }
 
     .debate-description {
@@ -320,6 +324,10 @@
     line-height: $line-height*2;
     text-align: justify;
 
+    a {
+        color: $text-light;
+    }
+
     .bullet {
       color: $border;
     }
@@ -346,10 +354,17 @@
     font-weight: bold;
   }
 
+  .sidebar {
+    border-top: 1px solid $border;
+  }
+
   h3 {
-    border-bottom: 2px solid $votes-border;
-    font-size: rem-calc(18);
-    margin: 0;
+    border-top: 1px solid $votes-border;
+    display: inline-block;
+    font-family: $font-family-sans-serif;
+    font-size: rem-calc(16);
+    margin: -1px 0 rem-calc(12);
+    padding-top: rem-calc(6);
     text-transform: uppercase;
   }
 
@@ -369,6 +384,11 @@
     display: inline-block;
     margin-top: $line-height;
   }
+
+  .tags {
+    display: block;
+    margin-top: $line-height;
+  }
 }
 
 // 04. New
@@ -443,12 +463,24 @@
 
     p {
       color: $comments-text;
-      font-size: rem-calc(15);
       margin-bottom: 0;
     }
 
-    a {
+    .comment-votes {
       color: $comments-info;
+      font-weight: lighter;
+      margin: rem-calc(15) rem-calc(6) 0;
+
+      a {
+        color: $comments-info;
+        display: inline-block;
+        vertical-align: top;
+      }
+
+      [class^="icon-"] {
+        font-size: rem-calc(20);
+        vertical-align: top;
+      }
     }
 
     .user-photo {
@@ -456,7 +488,7 @@
       display: inline-block;
       height: 32px;
       line-height: $line-height*2;
-      margin-right: $line-height/4;
+      margin-right: rem-calc(6);
       vertical-align: top;
       width: 32px;
     }
@@ -465,13 +497,17 @@
       margin-left: $line-height*1.6;
 
       .reply {
+        background: white;
+        border: 1px solid $border;
         font-size: rem-calc(12);
         font-weight: lighter;
+        margin: rem-calc(6) 0;
+        padding: rem-calc(6);
       }
     }
 
     .comment-children {
-      border-left: 1px dotted $border;
+      border-left: 1px dashed $border;
       margin-left: $line-height*1.6;
       padding-left: $line-height/4;
 
@@ -485,6 +521,11 @@
       font-size: rem-calc(13);
       font-weight: lighter;
       vertical-align: middle;
+
+      span {
+        color: $text-color;
+        font-weight: bold;
+      }
     }
   }
 }

app/assets/stylesheets/participacion.scss

@@ -73,6 +73,14 @@ p {
   margin-bottom: $line-height/2;
 }
 
+a {
+  color: $link;
+
+  &:hover {
+    color: $link-hover;
+  }
+}
+
 .button {
   padding: rem-calc(15) rem-calc(32);
 }

app/assets/stylesheets/variables.scss

@@ -27,7 +27,7 @@ $comments-text:     #3F4549;
 
 $header-color:      #292B33;
 $link:              #2895F1;
-$link-hover: 		#2178BF;
+$link-hover: 		    #2178BF;
 
 $tags-bg:           #FAFAFA;
 $tags-border:       #F0F0F0;
@@ -38,7 +38,7 @@ $text-medium:       #999999;
 $text-light:        #A3A6AD;
 
 $votes:             #31708f;
-$votes-background:  #26AEEE;
+$votes-bg:          #26AEEE;
 $votes-border:      #1F94CB;
 $votes-like:        #7BD2A8;
 $votes-like-act:    #5D9E7F;
@@ -59,7 +59,7 @@ $success-bg:        #DFF0D8;
 $success-border:    #D6E9C6;
 $success-color:     #3C763D;
 
-$info-bg:	        #D9EDF7;
+$info-bg:	          #D9EDF7;
 $info-border:       #BCE8F1;
 $info-color:        #31708F;
 

app/views/comments/_comment.html.erb

@@ -1,25 +1,29 @@
 <div class="row">
-	<div id="comment-<%= comment.id %>" class="small-12 column comment">
+  <div id="comment-<%= comment.id %>" class="comment small-12 column">
 
-		<%= image_tag('user_default_2.jpg', class: 'user-photo left', size: '32x32') %>
+    <%= image_tag('user_default_2.jpg', class: 'user-photo left', size: '32x32') %>
 
-	 	<div class="comment-body">
-	 		<span class="comment-info">
-	 			<%= comment.user.name %>&nbsp;&bullet;&nbsp;<%= time_ago_in_words(comment.created_at) %>
-	 		</span>
-  		<p><%= comment.body %></p>
+    <div class="comment-body">
+      <span class="comment-info">
+        <span><%= comment.user.name %></span>&nbsp;&bullet;&nbsp;<%= time_ago_in_words(comment.created_at) %>
+      </span>
+      <p><%= comment.body %></p>
 
-  		<span id="<%= dom_id(comment) %>_votes">
-  		  <%= render 'comments/votes', comment: comment %>
-  		</span>
+      <span id="<%= dom_id(comment) %>_votes" class="comment-votes right">
+        <%= render 'comments/votes', comment: comment %>
+      </span>
 
-  		<% if user_signed_in? %>
-  		<p class="reply"><%= render 'comments/form', {parent: comment, toggeable: true} %></p>
-  		<% end %>
-	  </div>
+      <p class="reply">
+      númerototal respuestas
+      <% if user_signed_in? %>
+        &nbsp;|&nbsp;
+        <%= render 'comments/form', {parent: comment, toggeable: true} %></p>
+      <% end %>
+    </div>
 
-  	<div class="comment-children">
-    	<%= render comment.children %>
-  	</div>
-	</div>
+    <div class="comment-children">
+      <%= render comment.children %>
+    </div>
+
+  </div>
 </div>

app/views/comments/_votes.html.erb

@@ -1,11 +1,19 @@
+<span>
+  númerototal votos
+</span>
+&nbsp;|&nbsp;
 <span class="in_favor">
-  <%= link_to "up", vote_comment_path(comment, value: 'yes'),
-    method: "post", remote: true %>
+  <%= link_to vote_comment_path(comment, value: 'yes'),
+      method: "post", remote: true do %>
+      <i class="icon-angle-up"></i>
+  <% end %>
   <%= comment.get_likes.size %>
 </span>
 
 <span class="against">
-  <%= link_to "down", vote_comment_path(comment, value: 'no'),
-      method: "post", remote: true %>
+  <%= link_to vote_comment_path(comment, value: 'no'),
+      method: "post", remote: true do %>
+      <i class="icon-angle-down"></i>
+  <% end %>
   <%= comment.get_dislikes.size %>
 </span>

app/views/debates/_debate.html.erb

@@ -9,8 +9,7 @@
           <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.debate.comment"), t("debates.debate.comments")) %>
+            <%= link_to pluralize(debate.comment_threads.count, t("debates.debate.comment"), t("debates.debate.comments")), debate_path(debate, anchor: "comments") %>
           </p>
           <div class="debate-description">
             <%= link_to debate.description, debate %>

app/views/debates/_featured_debate.html.erb

@@ -8,8 +8,7 @@
         <h3><%= link_to featured_debate.title, featured_debate %></h3>
         <p class="debate-info">
           <i class="icon-chat-bubble-two"></i>&nbsp;
-          <%= pluralize(featured_debate.comment_threads.count,
-              t("debates.show.comment"), t("debates.show.comments")) %>
+          <%= link_to pluralize(featured_debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")), debate_path(featured_debate, anchor: "comments") %>
         </p>
         <div class="debate-description">
           <%= link_to featured_debate.description, featured_debate %>

app/views/debates/show.html.erb

@@ -2,17 +2,22 @@
   <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' %>
+      <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")) %>
+        <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;<%= link_to pluralize(@debate.comment_threads.count, t("debates.show.comment"), t("debates.show.comments")), "#comments" %>
       </div>
-      <h1><%= @debate.title %></h1>
+
       <%= @debate.description %>
-      <p><%= render 'shared/tags', debate: @debate %></p>
+
+      <%= render 'shared/tags', debate: @debate %>
+
       <p><%= social_share_button_tag(@debate.title) %></p>
     </div>
 
-    <div class="small-12 medium-3 column">
+    <aside class="small-12 medium-3 column">
+      <div class="sidebar"></div>
       <h3><%= t("votes.supports") %></h3>
       <div class="text-center">
         <div id="<%= dom_id(@debate) %>_votes">
@@ -24,8 +29,7 @@
           <%= link_to t("debates.show.login_to_comment"), new_user_session_path, class: "leave-comment" %>
         <% end %>
       </div>
-    </div>
-
+    </aside>
   </div>
 </section>
 
@@ -45,4 +49,4 @@
       <%= link_to t("debates.show.edit_debate_link"), edit_debate_path(@debate), :class => 'button radius right' %>
     <% end %>
   </div>
-</section>
+</section>