Merge pull request #57 from AyuntamientoMadrid/debates

Debates

app/assets/stylesheets/debates.scss

@@ -5,7 +5,10 @@
 // 03. Header
 // 04. Footer
 // 05. Debates
-// 06. Comentarios
+//   05.1. Debates Index
+//   05.2. Debates Show
+// 06. Comments
+// 06. Tags
 //
 
 // 01. Variables
@@ -14,14 +17,31 @@
 $font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $line-height: rem-calc(24);
 
-$background:        #EDEFF0;
+$background:        #F9F9F9;
+$border:            #DEE0E3;
 $brand:				#0077B9;
+
 $debates:           #008CCF;
+
+$comments-bg:       #FAF9F8;
+
 $header-color:		#292B33;
+$link:              #0077B9;
+
+$tags-bg:           #FAFAFA;
+$tags-border:       #F0F0F0;
+$tags-color:        #8F8F8F;
+
 $text-color:        #919399;
+$text-medium:       #999999; 
+$text-light:        #a3a6ad;
+
 $votes-background:  #EDEDED;
-$votes-dislike:     #FF7978;
+$votes-border:      #DEE0E3;
-$votes-like:        #00D288;
+$votes-dislike:     #EF8585;
+$votes-dislike-b:   #D26463;//FF7978;
+$votes-like:        #7BD2A8;
+$votes-like-b:      #56A47D;
 
 // 02. Global styles
 // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -32,8 +52,9 @@ $votes-like:        #00D288;
 }
 
 body {
-    background: $background;
+    background: white;
     font-family: $font-family-sans-serif;
+    font-size: rem-calc(13);
     font-weight: normal;
 
     p {
@@ -45,6 +66,14 @@ body {
     max-width: 1170px;
 }
 
+.row-full {
+    max-width: 100% !important;
+}
+
+.clear {
+    clear: both;
+}
+
 .inline-block {
     display: inline-block;
 }
@@ -53,13 +82,13 @@ body {
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 header {
-    background: url('home-header-bg.jpg');
+    background: url('home_header_bg.jpg');
     background-position: 50% 50%;
     background-size: cover;
-    height: $line-height*20;
+    min-height: $line-height*20;
 
     &.results {
-        height: $line-height*8 !important;
+        min-height: $line-height*8;
     }
 
     h1 {
@@ -152,6 +181,9 @@ header {
 // 05. Debates
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
+// 05.1. Debates Index
+// - - - - - - - - - - - -
+
 .debates-index {
     margin-top: $line-height;
 }
@@ -160,7 +192,6 @@ header {
 
     .panel {
         background: white;
-        border: 0;
         box-shadow: 0 2px 0 rgba(0,0,0,.1);
 
         .fi-comment-quotes {
@@ -254,48 +285,97 @@ header {
     }
 }
 
+// 05.2. Debates Show
+// - - - - - - - - - - - -
+
 .debate-show {
-    background: white;
+    color: $text-medium;
     margin-top: $line-height;
-    padding: $line-height/2; 
+    padding: 0 $line-height/2;   
+
+    .back {
+        color: $text-light;
+        font-size: rem-calc(13);
+        line-height: $line-height;
+    }    
 
     h1 {        
-        font-size: rem-calc(30);
+        clear: both;
+        font-size: rem-calc(24);
         font-weight: bold;
+        line-height: $line-height*1.3333;
         margin: 0;
+        padding-top: $line-height/2;
     }
 
-    .fi-price-tag {
+    .debate-info {
-        color: $text-color;
+        color: $text-light;
-        font-size: rem-calc(18);
+        font-weight: lighter;
-        line-height: $line-height;
+        line-height: $line-height*2;
+        margin-bottom: $line-height*0.5;
+        text-align: justify;
+
+        span {
+            color: $border;
+        }
+
+        p {
+            font-size: rem-calc(14);
+            line-height: $line-height;
+            margin-bottom: 0;
+        }  
+    }
+
+    .author-photo {
+        border-radius: 2px;
+        display: inline-block;
+        height: 32px;
+        line-height: $line-height*2;
+        margin-right: $line-height/4;
+        vertical-align: middle;
+        width: 32px;
     }
         
     .votes {
+        border: 1px solid $votes-border;
+        box-shadow: 0 2px 0 rgba(0,0,0,.1);
+        border-radius: 3px;
+        padding: $line-height/2;
         
         .fi-like {
-            color: $votes-like;
+            background: $votes-like;
+            border: 1px solid $votes-like-b;
+            border-radius: $line-height*2.5;
+            color: white;
+            display: block;
             font-size: rem-calc(48);
-            line-height: $line-height*2;
+            height: $line-height*2.5;
+            line-height: $line-height*2.5;
+            width: $line-height*2.5;
         }
 
         .fi-dislike {
-            color: $votes-dislike;
+            background: $votes-dislike;
-            display: inline-block;
+            border: 1px solid $votes-dislike-b;
+            border-radius: $line-height*2.5;
+            color: white;
+            display: block;
             font-size: rem-calc(48);
-            line-height: $line-height*2;
+            height: $line-height*2.5;
-            padding-top: $line-height/3;
+            line-height: $line-height*2.5;
+            width: $line-height*2.5;
         }
 
         .in-favor {
             color: $votes-like;
             line-height: rem-calc(48);
-            vertical-align: top;
 
             span {
                 display: inline-block;
-                line-height: 48px;
+                font-size: rem-calc(18);
-                padding-top: 5px;
+                font-weight: bold;
+                line-height: $line-height;
+                padding-top: $line-height/4;
                 vertical-align: top;
             }
         }
@@ -307,24 +387,26 @@ header {
 
         .total-votes {
             font-size: rem-calc(14);
-            line-height: $line-height*2;
+            margin: 0;
         }
 
         .divider {
-            background: rgba(0,0,0, .1);
+            background: rgba(0,0,0,.05);
             display: inline-block;
-            height: 3rem;
+            height: $line-height*4;
-            margin: 0 .5rem;
+            margin: 0 $line-height;
             width: 1px;
         }
     }
 }
 
-// 06. Comentarios
+// 06. Comments
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .comments {
-    clear: both;
+    background: $comments-bg;
+    margin-top: $line-height*2;
+    padding-top: $line-height;
 
     h2 {
         margin: 0;
@@ -332,6 +414,27 @@ header {
     }
 }
 
+// 07. Tags
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.tags a {    
+    background: $tags-bg;
+    border: 1px solid $tags-border;
+    border-radius: 3px;
+    color: $tags-color;
+    font-size: rem-calc(13);
+    margin-bottom: 8px;
+    margin-right: $line-height/3;
+    padding: $line-height/4 $line-height/3;
+
+    &:hover {
+        color: $link;
+        cursor: pointer;
+        background: #e5f1f8;
+        border: 1px solid $brand;
+    }
+
+}
 
 
 

app/helpers/application_helper.rb

@@ -1,7 +1,7 @@
 module ApplicationHelper
 
   def tags(debate)
-    debate.tag_list.sort.map { |tag| link_to sanitize(tag), debates_path(tag: tag) }.join(', ').html_safe
+    debate.tag_list.sort.map { |tag| link_to sanitize(tag), debates_path(tag: tag) }.join('').html_safe
   end
 
   def percentage(vote, debate)

app/views/debates/show.html.erb

@@ -1,16 +1,23 @@
-<article class="debate-show">
+<section class="debate-show">
 
-    <%= link_to t("debates.show.back_link"), debates_path, class: 'right' %>
+    <div id="debate-<%= @debate.id %>" class="row">
+
+        <div class="small-12 medium-9 column">
+
+            <%= link_to "&lt;&nbsp;".html_safe + t("debates.show.back_link"), debates_path, class: 'left back' %>
 
-    <div class="row">
-        <div id="debate-<%= @debate.id %>" class="small-12 medium-9 column">
             <h1><%= @debate.title %></h1>
-            <p>Por <%= @debate.author.name %> el <%= l @debate.created_at.to_date %></p>
+            <div class="debate-info">
-            <p><%= sanitize(@debate.description.html_safe) %></p>
+
+                <%= image_tag('user_default.jpg', class: 'author-photo', size: '32x32') %>
+
+                <%= @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>
+            <p><%= @debate.description %></p>
             <p><%= render 'shared/tags', debate: @debate %></p>
         </div>
 
-        <div class="votes small-12 medium-3 column">
+        <div class="small-12 medium-3 column votes">
             <div class="small-12 column text-center">
                 <div id="in_favor" class="inline-block">
                     <%= link_to debate_votes_path(@debate, value: 'yes'), class: 'in-favor', method: "post" do %>
@@ -34,18 +41,20 @@
             </div>
         </div>
     </div>
+</section>
 
-    <div id="comments" class="comments">
+<section class="row-full comments">
-        <h2><%= t("debates.show.comments") %></h2>
+    <div class="row">
-            <div style="padding-bottom:60px">
+        <div id="comments" class="small-12 column">
-                <%= t("debates.show.leave_comment") %>
+            <h2><%= t("debates.show.comments") %></h2>
-                <%= render 'comments/form', parent: @debate %>
+                <div style="padding-bottom:60px">
-            </div>
+                    <%= t("debates.show.leave_comment") %>
-        <%= render @debate.root_comments %>
+                    <%= render 'comments/form', parent: @debate %>
+                </div>
+            <%= render @debate.root_comments %>
+        </div>
+        <% if current_user && @debate.editable_by?(current_user) %>
+            <%= link_to t("debates.show.edit_debate_link"), edit_debate_path(@debate), :class => 'button radius right' %>
+        <% end %>
     </div>
-
+</section>
-    <% if current_user && @debate.editable_by?(current_user) %>
-        <%= link_to t("debates.show.edit_debate_link"), edit_debate_path(@debate), class: 'button radius right' %>
-    <% end %>
-
-</article>

app/views/layouts/_header.html.erb

@@ -14,7 +14,7 @@
 			<ul class="title-area">
 				<li class="name">
 					<%= link_to root_path do %>
-						<%= image_tag('header-logo-madrid.png', class: 'left', size: '96x96') %>
+						<%= image_tag('header_logo_madrid.png', class: 'left', size: '96x96') %>
 						<%= t("layouts.header.open_gov", open: "<strong>#{t('layouts.header.open')}</strong>").html_safe %> | <span><%= t("layouts.header.participation") %></span>
 					<% end %>
 				</li>

app/views/layouts/application.html.erb

@@ -23,11 +23,7 @@
         <p class="alert-box"><%= alert %></p>
     <% end %>
 
-    <div class="row">
+    <%= yield %>
-      <div class="small-12 column">
-        <%= yield %>
-      </div>
-    </div>
 
     <%= render 'layouts/footer' %>
   </body>

app/views/shared/_tags.html.erb

@@ -1,3 +1,3 @@
 <% if debate.tags.any? %>
-  <i class="fi-price-tag"></i> <span class='tags'><%= tags(debate) %></span>
+  <span class='tags'><%= tags(debate) %></span>
 <% end %>

config/locales/en.yml

@@ -27,6 +27,7 @@ en:
       accept_terms: I accept the privacy policy and the legal terms
     show:
       back_link: Back
+      comment: Comment
       comments: Comments
       leave_comment: Write a comment
       edit_debate_link: Edit

config/locales/es.yml

@@ -27,6 +27,7 @@ es:
       accept_terms: Acepto la política de privacidad y el aviso legal
     show:
       back_link: Volver
+      comment: Comentario
       comments: Comentarios
       leave_comment: Deja tu comentario
       edit_debate_link: Editar

spec/features/debates_spec.rb

@@ -11,8 +11,8 @@ feature 'Debates' do
     within first('.debate') do
       expect(page).to have_content "Debate title"
       expect(page).to have_content "Debate description"
-      expect(page).to have_content "Por #{Debate.first.author.name}"
+      expect(page).to have_content Debate.first.author.name
-      expect(page).to have_content "el #{I18n.l Date.today}"
+      expect(page).to have_content I18n.l(Date.today)
     end
   end
 
@@ -23,8 +23,8 @@ feature 'Debates' do
 
     expect(page).to have_content "Debate title"
     expect(page).to have_content "Debate description"
-    expect(page).to have_content "Por #{debate.author.name}"
+    expect(page).to have_content debate.author.name
-    expect(page).to have_content "el #{I18n.l Date.today}"
+    expect(page).to have_content I18n.l(Date.today)
   end
 
   scenario 'Create' do
@@ -41,8 +41,8 @@ feature 'Debates' do
     expect(page).to have_content 'Debate was successfully created.'
     expect(page).to have_content 'Acabar con los desahucios'
     expect(page).to have_content 'Esto es un tema muy importante porque...'
-    expect(page).to have_content "Por #{author.name}"
+    expect(page).to have_content author.name
-    expect(page).to have_content "el #{I18n.l Date.today}"
+    expect(page).to have_content I18n.l(Date.today)
   end
 
   scenario 'Update should not be posible if logged user is not the author' do

spec/features/tags_spec.rb

@@ -36,7 +36,8 @@ feature 'Tags' do
 
     visit debate_path(debate)
 
-    expect(page).to have_content "Economía, Hacienda"
+    expect(page).to have_content "Economía"
+    expect(page).to have_content "Hacienda"
   end
 
   scenario 'Tag Cloud' do
@@ -67,7 +68,9 @@ feature 'Tags' do
     click_button 'Create Debate'
 
     expect(page).to have_content 'Debate was successfully created.'
-    expect(page).to have_content 'Economía, Hacienda, Impuestos'
+    expect(page).to have_content 'Economía'
+    expect(page).to have_content 'Hacienda'
+    expect(page).to have_content 'Impuestos'
   end
 
   scenario 'Update' do
@@ -101,4 +104,4 @@ feature 'Tags' do
     expect(page).to_not have_content 'Economía'
   end
 
-end
+end