Improves styles of debates show page

app/assets/fonts/icons.svg

@@ -19,4 +19,5 @@
 <glyph unicode="&#106;" d="M91 347c0-5-1-9-5-12-4-4-8-6-13-6-5 0-9 2-13 6-3 3-5 7-5 12 0 6 2 10 5 13 4 4 8 6 13 6 5 0 9-2 13-6 4-3 5-7 5-13z m46-146l0 183c0 5-2 9-5 13-4 3-8 5-13 5l-82 0c-5 0-10-2-13-5-4-4-6-8-6-13l0-183c0-5 2-9 6-13 3-3 8-5 13-5l82 0c5 0 9 2 13 5 3 4 5 8 5 13z m323 43c10-12 15-26 15-43 0-15-5-28-16-38-11-11-24-17-38-17l-80 0c1-2 2-5 3-7 0-1 2-4 3-6 1-2 2-4 3-5 3-7 6-12 7-16 2-4 4-10 6-17 2-7 3-15 3-22 0-4 0-8 0-11-1-3-1-7-2-13-1-6-2-10-3-14-2-4-4-8-7-13-3-5-7-9-12-12-4-3-10-5-17-7-7-2-15-3-23-3-5 0-10 2-13 5-4 4-7 9-10 15-3 5-4 10-5 15-1 4-3 10-4 17-2 8-3 14-4 17-1 4-2 8-5 14-2 6-5 10-9 14-6 6-16 18-29 34-9 12-19 24-28 35-10 11-18 16-22 17-5 0-9 2-12 5-4 4-6 8-6 13l0 183c0 5 2 9 6 13 3 3 8 5 13 5 6 0 21 5 45 13 15 5 26 9 34 11 9 3 20 5 35 8 15 3 29 5 41 5l37 0c25-1 44-8 56-22 11-14 16-31 14-52 8-7 13-16 16-27 3-12 3-23 0-33 8-12 13-25 12-40 0-6-1-13-4-21z"/>
 <glyph unicode="&#107;" d="M91 128c0 5-1 9-5 13-4 3-8 5-13 5-5 0-9-2-13-5-3-4-5-8-5-13 0-5 2-9 5-13 4-4 8-5 13-5 5 0 9 1 13 5 4 4 5 8 5 13z m46 146l0-183c0-5-2-9-5-12-4-4-8-6-13-6l-82 0c-5 0-10 2-13 6-4 3-6 7-6 12l0 183c0 5 2 10 6 13 3 4 8 6 13 6l82 0c5 0 9-2 13-6 3-3 5-8 5-13z m338 0c0-16-5-30-15-42 3-9 4-16 4-22 1-14-4-28-12-39 3-11 3-22 0-34-3-10-8-19-16-26 2-22-3-39-14-52-12-15-31-22-56-22l-37 0c-12 0-26 1-41 4-15 3-26 6-35 8-8 3-19 7-34 12-24 8-39 12-45 12-5 0-10 2-13 6-4 3-6 7-6 12l0 184c0 4 2 8 6 12 3 4 7 5 12 6 4 0 12 6 22 17 9 11 19 22 28 34 13 17 23 28 29 35 4 3 7 8 9 13 3 6 4 11 5 14 1 4 2 9 4 17 1 8 3 14 4 18 1 4 2 9 5 15 3 5 6 10 10 14 3 4 8 5 13 5 8 0 16-1 23-3 7-2 13-4 17-7 5-3 9-7 12-12 3-4 5-9 7-12 1-4 2-9 3-15 1-5 1-10 2-13 0-2 0-6 0-11 0-7-1-14-3-21-2-8-4-13-5-18-2-4-5-9-8-16-1-1-2-2-3-5-1-2-3-4-3-6-1-2-2-4-3-7l80 0c14 0 27-5 38-16 11-11 16-24 16-39z"/>
 <glyph unicode="&#108;" d="M477 350c0-7-2-14-8-19l-206-207-39-39c-6-5-12-8-20-8-7 0-14 3-19 8l-142 142c-6 6-8 12-8 20 0 7 2 14 8 19l38 39c6 5 12 8 20 8 7 0 14-3 19-8l84-84 188 188c5 5 12 8 19 8 8 0 14-3 20-8l38-39c6-6 8-12 8-20z"/>
+<glyph unicode="&#109;" d="M140 73l26 26-67 67-26-26 0-30 37 0 0-37z m150 265c0 4-2 7-7 7-1 0-3-1-4-2l-155-155c-2-2-2-3-2-5 0-4 2-6 6-6 2 0 4 0 5 2l155 154c1 2 2 3 2 5z m-16 55l119-119-238-237-118 0 0 118z m195-27c0-10-3-19-10-26l-48-47-118 118 47 48c7 7 15 10 26 10 10 0 18-3 26-10l67-67c7-8 10-16 10-26z"/>
 </font></defs></svg>

app/assets/stylesheets/debates.scss

@@ -138,9 +138,11 @@
 // 02. Index
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.debate-featured {
-  margin-bottom: rem-calc(34);
+.featured-debates {
   margin-top: rem-calc(23);
+}
+
+.debate-featured {
 
   .panel {
     background: white;
@@ -242,6 +244,7 @@
 
 .debates-list {
   margin-bottom: $line-height*2;
+  margin-top: $line-height;
 }
 
 .debate {
@@ -318,12 +321,16 @@
   }
 }
 
+.sidebar {
+  margin-top: $line-height;
+}
+
 // 03. Show
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .debate-show {
   background: white;
-  padding: rem-calc(24) rem-calc(12) 0 rem-calc(12);
+  padding: rem-calc(24) rem-calc(12) rem-calc(48);
 
   .back {
     @include back;
@@ -378,8 +385,13 @@
     font-weight: bold;
   }
 
-  .sidebar {
+  .sidebar-divider {
     border-top: 1px solid $border;
+    margin-top: $line-height;
+
+    &:first-child {
+      margin-top: 0;
+    }
   }
 
   h3 {

app/assets/stylesheets/icons.scss

@@ -72,4 +72,7 @@
 }
 .icon-check:before {
   content: "l";
+}
+.icon-edit:before {
+  content: "m";
 }

app/views/debates/show.html.erb

@@ -2,6 +2,15 @@
   <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' %>
+
+      <% if current_user && @debate.editable_by?(current_user) %>
+        <%= link_to edit_debate_path(@debate), :class => 'right' do %>
+          <i class="icon-edit"></i>
+          <%= t("debates.show.edit_debate_link") %>
+        <% end %>
+      <% end %>
+
+
       <h1><%= @debate.title %></h1>
 
       <div class="debate-info">
@@ -12,23 +21,24 @@
       <%= @debate.description %>
 
       <%= render 'shared/tags', debate: @debate %>
-
-      <p><%= social_share_button_tag(@debate.title) %></p>
     </div>
 
     <aside class="small-12 medium-3 column">
-      <div class="sidebar"></div>
+      <div class="sidebar-divider"></div>
       <h3><%= t("votes.supports") %></h3>
       <div class="text-center">
         <div id="<%= dom_id(@debate) %>_votes">
          <%= render 'debates/votes', debate: @debate %>
         </div>
-        <% if user_signed_in? %>
+      </div>
+      <div class="sidebar-divider"></div>
+      <h3><%= t("debates.show.share") %></h3>
+      <%= social_share_button_tag(@debate.title) %>
+      <% if user_signed_in? %>
           <%= link_to t("debates.show.leave_comment"), "#comments", class: "leave-comment" %>
         <% else %>
           <%= link_to t("debates.show.login_to_comment"), new_user_session_path, class: "leave-comment" %>
         <% end %>
-      </div>
     </aside>
   </div>
 </section>
@@ -45,8 +55,5 @@
       <% end %>
       <%= render @debate.root_comments.recent %>
     </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>
+</section>

config/locales/en.yml

@@ -41,6 +41,7 @@ en:
       leave_comment: Write a comment
       login_to_comment: Log in to participate
       edit_debate_link: Edit
+      share: Share
     edit:
       editing: Edit debate
       show_link: Show debate

config/locales/es.yml

@@ -41,6 +41,7 @@ es:
       leave_comment: Deja tu comentario
       login_to_comment: Entra para participar
       edit_debate_link: Editar
+      share: Compartir
     edit:
       editing: Editar debate
       show_link: Ver debate