From c0a5200c10a3f98e814e57a993308bc3410c18c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alberto=20Garci=CC=81a=20Cabeza?= <alberto@decabeza.es>
Date: Mon, 27 Jul 2015 22:01:13 +0200
Subject: [PATCH] Adds styles for debates show

---
 app/assets/stylesheets/debates.scss | 183 ++++++++++++++++++++--------
 app/views/comments/_form.html.erb   |   2 +-
 app/views/debates/show.html.erb     |  81 ++++++------
 3 files changed, 176 insertions(+), 90 deletions(-)

diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss
index 3b42c6c05..dc97b7e43 100644
--- a/app/assets/stylesheets/debates.scss
+++ b/app/assets/stylesheets/debates.scss
@@ -5,7 +5,8 @@
 // 03. Header
 // 04. Footer
 // 05. Debates
-
+// 06. Comentarios
+//
 
 // 01. Variables
 // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -44,6 +45,10 @@ body {
     max-width: 1170px;
 }
 
+.inline-block {
+    display: inline-block;
+}
+
 // 03. Header
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -148,7 +153,7 @@ header {
 }
 
 .debate {
-    
+
     .panel {
         background: white;
         border: 0;
@@ -168,7 +173,7 @@ header {
         }
 
         .label {
-            margin-top: $line-height/4; 
+            margin-top: $line-height/4;
         }
 
         h3 {
@@ -190,58 +195,136 @@ header {
             line-height: $line-height;
             margin-bottom: $line-height;
         }
+    }
+        
+    .votes {
+        background: $votes-background;
+        margin: -5px -20px -20px -20px;
+        padding: 1.25rem 1.25rem 0 1.25rem;
 
-        .votes {
-            background: $votes-background;
-            margin: -5px -20px -20px -20px;
-            padding: 1.25rem 1.25rem 0 1.25rem;
+        .fi-like {
+            color: $votes-like;
+            font-size: rem-calc(48);
+            line-height: $line-height*2;
+        }
 
-            .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);
+            line-height: $line-height*2;
+            padding-top: $line-height/3;
+        }
 
-            .fi-dislike {
-                color: $votes-dislike;
+        .in-favor {
+            color: $votes-like;
+            line-height: rem-calc(48);
+            vertical-align: top;
+
+            span {
                 display: inline-block;
-                font-size: rem-calc(48);
-                line-height: $line-height*2;
-                padding-top: $line-height/3;
-            }
-
-            .in-favor {
-                color: $votes-like;
-                line-height: rem-calc(48);
+                line-height: 48px;
+                padding-top: 5px;
                 vertical-align: top;
-
-                span {
-                    display: inline-block;
-                    line-height: 48px;
-                    padding-top: 5px;
-                    vertical-align: top;
-                }
-            }
-
-            .against {
-                @extend .in-favor;
-                color: $votes-dislike;
-                display: inline-block;
-            }
-
-            .total-votes {
-                font-size: rem-calc(12);
-                line-height: $line-height*2;
-            }
-
-            .divider {
-                background: rgba(0,0,0, .1);
-                display: inline-block;
-                height: 3rem;
-                margin: 0 .5rem;
-                width: 1px;
             }
         }
+
+        .against {
+            @extend .in-favor;
+            color: $votes-dislike;
+            display: inline-block;
+        }
+
+        .total-votes {
+            font-size: rem-calc(12);
+            line-height: $line-height*2;
+        }
+
+        .divider {
+            background: rgba(0,0,0, .1);
+            display: inline-block;
+            height: 3rem;
+            margin: 0 .5rem;
+            width: 1px;
+        }
+    }
+}
+
+.debate-show {
+    background: white;
+    margin-top: $line-height;
+    padding: $line-height/2; 
+
+    h1 {        
+        font-size: rem-calc(30);
+        font-weight: bold;
+        margin: 0;
+    }
+
+    .fi-price-tag {
+        color: $text-color;
+        font-size: rem-calc(18);
+        line-height: $line-height;
+    }
+        
+    .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);
+            line-height: $line-height*2;
+            padding-top: $line-height/3;
+        }
+
+        .in-favor {
+            color: $votes-like;
+            line-height: rem-calc(48);
+            vertical-align: top;
+
+            span {
+                display: inline-block;
+                line-height: 48px;
+                padding-top: 5px;
+                vertical-align: top;
+            }
+        }
+
+        .against {
+            @extend .in-favor;
+            color: $votes-dislike;
+        }
+
+        .total-votes {
+            font-size: rem-calc(14);
+            line-height: $line-height*2;
+        }
+
+        .divider {
+            background: rgba(0,0,0, .1);
+            display: inline-block;
+            height: 3rem;
+            margin: 0 .5rem;
+            width: 1px;
+        }
+    }
+}
+
+// 06. Comentarios
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.comments {
+    clear: both;
+
+    h2 {
+        margin: 0;
+        font-weight: bold;
     }
 }
 
@@ -250,7 +333,3 @@ header {
 
 
 
-
-
-
-
diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb
index 4ef99b4b0..b309a34ef 100644
--- a/app/views/comments/_form.html.erb
+++ b/app/views/comments/_form.html.erb
@@ -3,5 +3,5 @@
   <%= f.hidden_field :commentable_type, value: parent.class %>
   <%= f.hidden_field :commentable_id, value: parent.id %>
   
-  <%= f.submit 'Publicar comentario' %>
+  <%= f.submit 'Publicar comentario', :class => "button radius" %>
 <% end %>
\ No newline at end of file
diff --git a/app/views/debates/show.html.erb b/app/views/debates/show.html.erb
index 719857185..87b3ffd24 100644
--- a/app/views/debates/show.html.erb
+++ b/app/views/debates/show.html.erb
@@ -1,44 +1,51 @@
-<article>
+<article class="debate-show">
+    
+    <%= link_to 'Volver', debates_path, :class => 'right' %>
+
     <div class="row">
-        <div id="debate-<%= @debate.id %>" class="small-12 medium-2 large-4 colum">
-            <h3><%= @debate.title %></h3>
+        <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>            
             <p><%= @debate.description %></p>
-        <p>
-            Creado el: <%= l @debate.created_at.to_date %>
-            por: <%= @debate.author.name %>
-        </p>
+            <p><%= render 'shared/tags', debate: @debate %></p>
+        </div>
+    
+        <div class="votes small-12 medium-3 column">
+            <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 %>
+                        <i class="fi-like"></i>
+                        <span><%= percentage('likes', @debate) %></span>
+                    <% end %>
+                </div>
+                
+                <span class="divider"></span>
+
+                <div id="against" class="inline-block">
+                    <%= link_to debate_votes_path(@debate, value: 'no'), :class => 'against', method: "post" do %>
+                        <i class="fi-dislike"></i>
+                        <span><%= percentage('dislikes', @debate) %></span>
+                    <% end %>
+                </div>
+            </div>
+            
+            <div class="small-12 column text-center">
+                <p class="total-votes"><%= @debate.total_votes %> votos</p>
+            </div>
+        </div>
     </div>
 
-<span style="width:30%;float:left">
-  <div id='in_favor'>
-    <%= link_to "up", debate_votes_path(@debate, value: 'yes'), method: "post" %>
-    <%= percentage('likes', @debate) %>
-  </div>
+    <div id="comments" class="comments">
+        <h2>Comentarios</h2>
+            <div style="padding-bottom:60px">
+                Deja tu comentario
+                <%= render 'comments/form', parent: @debate %>
+            </div>
+        <%= render @debate.root_comments %>
+    </div>
 
-  <div id='against'>
-    <%= link_to "down", debate_votes_path(@debate, value: 'no'), method: "post" %>
-    <%= percentage('dislikes', @debate) %>
-  </div>
+    <% if current_user && @debate.editable_by?(current_user) %>
+        <%= link_to 'Edit', edit_debate_path(@debate), :class => 'button radius right' %> |
+    <% end %>
 
-  Votos <%= @debate.total_votes %>
-</span>
-
-<div style="display: block; width:300px">
-  <%= render 'shared/tags', debate: @debate %>
-</div>
-
-<br/><br/>
-<div id="comments" style="padding-top:20px">
-  <h2>Comentarios</h2>
-  <div style="padding-bottom:60px">
-    Deja tu comentario
-    <%= render 'comments/form', parent: @debate %>
-  </div>
-  <%= render @debate.root_comments %>
-</div>
-
-<% if current_user && @debate.editable_by?(current_user) %>
-  <%= link_to 'Edit', edit_debate_path(@debate) %> |
-<% end %>
-<%= link_to 'Back', debates_path %>
 </article>
\ No newline at end of file