From 203bc740ac4bc423c5af2c07b07d2e252ea6a826 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= <m@martingonzalez.net>
Date: Thu, 12 Jan 2017 10:54:39 +0100
Subject: [PATCH 01/10] Adjust home and process index styles

---
 app/assets/stylesheets/legislation.scss       |   4 +-
 .../stylesheets/legislation_process.scss      | 117 +++++++++++-------
 .../legislation/processes/_key_dates.html.erb |  59 ++++-----
 .../legislation/processes/_process.html.erb   |   5 +-
 .../processes/phase_empty.html.erb            |   4 +-
 .../processes/phase_not_open.html.erb         |   4 +-
 app/views/legislation/processes/show.html.erb |   4 +-
 7 files changed, 115 insertions(+), 82 deletions(-)

diff --git a/app/assets/stylesheets/legislation.scss b/app/assets/stylesheets/legislation.scss
index c53216dd9..950f9ce23 100644
--- a/app/assets/stylesheets/legislation.scss
+++ b/app/assets/stylesheets/legislation.scss
@@ -9,7 +9,7 @@
 // -----------------
 .brand-heading {
   background: $brand;
-  margin-bottom: 2rem;
+  margin-bottom: 5rem;
   
   .column {
     padding-top: 10rem;
@@ -58,7 +58,7 @@
 // 03. Legislation cards
 // -----------------
 .legislation {
-  margin: 0 0 4rem 0;
+  margin: 0 0 5rem 0;
   background: white;
   border: 1px solid;
   border-color: #e5e6e9 #dfe0e4 #d0d1d5;
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index d5ab74130..db6c9718e 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -34,6 +34,8 @@
   font-weight: 700;
 }
 
+$epigraph-font-size: rem-calc(15);
+
 // 02. Hero
 // -----------------
 .legislation-hero {
@@ -63,7 +65,9 @@
 
   #debate-info {
     display: none;
-    margin-top: 1rem;
+    margin-top: 3rem;
+    padding-top: 4rem;
+    border-top: 1px solid darken($border, 10%);
 
     @include breakpoint(medium) {
       margin-bottom: 2rem;
@@ -80,6 +84,7 @@
       }
 
       p {
+        font-size: $base-font-size;
         @include breakpoint(medium) {
           margin-left: 25%;
         }
@@ -97,7 +102,7 @@
   }
 
   .center .button {
-    background: #004A83;
+    background: $brand;
     margin-bottom: 0;
   }
 
@@ -112,6 +117,14 @@
 
   .description {
     margin-bottom: 1rem;
+    
+    p {
+      font-size: $epigraph-font-size;
+    }
+    
+    h4 {
+      font-size: $base-font-size;
+    }
 
     @include breakpoint(medium) {
         margin-bottom: 0;
@@ -145,61 +158,75 @@
 // -----------------
 .legislation-process-categories {
   position: relative;
-
-  svg {
-    position: absolute;
-    top: 1.5rem;
-    left: 0;
-
-    @include breakpoint(medium) {
-      transform: rotate(-8deg);
-      top: 0.75rem;
-    }
-  }
-
-  ul {
-    padding-top: 4rem;
-    list-style: none;
-    margin-left: 0;
-    padding-left: 0;
+  
+  .legislation-process-list {
     border-bottom: 1px solid $medium-gray;
-
-    li {
-      cursor: pointer;
+    margin: 0 1rem 1rem 1rem;
+    
+    @include breakpoint(medium) {
       margin-left: 0;
-      display: inline-block;
-      margin-bottom: 1rem;
-      margin-right: 1rem;
+    }
+    
+    ul {
+      max-width: 75rem;
+      margin-left: auto;
+      margin-right: auto;
+      list-style: none;
+      padding-top: 4rem;
+      padding-left: 0;
+      margin-bottom: 0;
+      
+      @include breakpoint(medium) {
+        padding-left: 1rem;
+      }
+      
+      svg {
+        position: absolute;
+        top: 1.5rem;
 
-      @media (min-width: 950px) {
-        margin-right: 0;
-        margin-left: 3rem;
-        margin-bottom: 0;
+        @include breakpoint(medium) {
+          transform: rotate(-8deg);
+          top: 0.75rem;
+        }
       }
 
-      a,
-      h4 {
-        color: #6D6D6D;
-        margin-bottom: 0;
-      }
-
-      a {
-        &:hover, &:active {
-          text-decoration: none;
+      li {
+        cursor: pointer;
+        display: inline-block;
+        margin: 0 1rem 1rem 0;
+        
+        &:first-of-type {
+          margin-left: 0;
         }
 
-        p {
-          margin-bottom: 0;
+        @media (min-width: 950px) {
+          margin: 0 0 0 3rem;
+        }
 
-          @include breakpoint(medium) {
-            margin-bottom: 1rem;
+        a,
+        h4 {
+          color: #6D6D6D;
+          margin-bottom: 0;
+        }
+
+        a {
+          &:hover, &:active {
+            text-decoration: none;
+          }
+
+          p {
+            margin-bottom: 0;
+
+            @include breakpoint(medium) {
+              margin-bottom: 1rem;
+            }
           }
         }
       }
-    }
 
-    .active {
-      border-bottom: 2px solid $brand;
+      .active {
+        border-bottom: 2px solid $brand;
+      }
     }
   }
 }
diff --git a/app/views/legislation/processes/_key_dates.html.erb b/app/views/legislation/processes/_key_dates.html.erb
index a6d921c35..e64d99f08 100644
--- a/app/views/legislation/processes/_key_dates.html.erb
+++ b/app/views/legislation/processes/_key_dates.html.erb
@@ -1,29 +1,32 @@
-<nav class="legislation-process-categories">
-  <%= render 'legislation/processes/key_dates_svg' %>
-  <ul>
-    <li <%= "class=active" if phase == :debate %>>
-      <%= link_to process do %>
-        <h4><%= t('legislation.processes.shared.debate_dates') %></h4>
-        <p><%= format_date(process.debate_start_date) %> - <%= format_date(process.debate_end_date) %></p>
-      <% end %>
-    </li>
-    <li <%= "class=active" if phase == :draft_publication %>>
-      <%= link_to legislation_process_draft_publication_path(process) do %>
-        <h4><%= t('legislation.processes.shared.draft_publication_date') %></h4>
-        <p><%= format_date(process.draft_publication_date) %></p>
-      <% end %>
-    </li>
-    <li <%= "class=active" if phase == :allegations %>>
-      <%= link_to legislation_process_allegations_path(process) do %>
-        <h4><%= t('legislation.processes.shared.allegations_dates') %></h4>
-        <p><%= format_date(process.allegations_start_date) %> - <%= format_date(process.allegations_end_date) %></p>
-      <% end %>
-    </li>
-    <li <%= "class=active" if phase == :final_version_publication %>>
-      <%= link_to legislation_process_final_version_publication_path(process) do %>
-        <h4><%= t('legislation.processes.shared.final_publication_date') %></h4>
-        <p><%= format_date(process.final_publication_date) %></p>
-      <% end %>
-    </li>
-  </ul>
+<nav class="legislation-process-categories">  
+  <div class="legislation-process-list">
+    <ul>
+      <%= render 'legislation/processes/key_dates_svg' %>
+      
+      <li <%= "class=active" if phase == :debate %>>
+        <%= link_to process do %>
+          <h4><%= t('legislation.processes.shared.debate_dates') %></h4>
+          <p><%= format_date(process.debate_start_date) %> - <%= format_date(process.debate_end_date) %></p>
+        <% end %>
+      </li>
+      <li <%= "class=active" if phase == :draft_publication %>>
+        <%= link_to legislation_process_draft_publication_path(process) do %>
+          <h4><%= t('legislation.processes.shared.draft_publication_date') %></h4>
+          <p><%= format_date(process.draft_publication_date) %></p>
+        <% end %>
+      </li>
+      <li <%= "class=active" if phase == :allegations %>>
+        <%= link_to legislation_process_allegations_path(process) do %>
+          <h4><%= t('legislation.processes.shared.allegations_dates') %></h4>
+          <p><%= format_date(process.allegations_start_date) %> - <%= format_date(process.allegations_end_date) %></p>
+        <% end %>
+      </li>
+      <li <%= "class=active" if phase == :final_version_publication %>>
+        <%= link_to legislation_process_final_version_publication_path(process) do %>
+          <h4><%= t('legislation.processes.shared.final_publication_date') %></h4>
+          <p><%= format_date(process.final_publication_date) %></p>
+        <% end %>
+      </li>
+    </ul>
+  </div>
 </nav>
diff --git a/app/views/legislation/processes/_process.html.erb b/app/views/legislation/processes/_process.html.erb
index 87c10cc4c..9911b28a2 100644
--- a/app/views/legislation/processes/_process.html.erb
+++ b/app/views/legislation/processes/_process.html.erb
@@ -3,7 +3,6 @@
     <div class="small-12 medium-8 column">
       <div class="legislation-text">
         <h3><%= link_to process.title, process %></h3>
-        <%= markdown(first_paragraph(process.description)) %>
       </div>
     </div>
 
@@ -12,6 +11,10 @@
         <span class="icon-comments"></span>&nbsp; <%= t('.see_latest_comments') %>
       <% end %>
     </div>
+
+    <div class="small-12 medium-11 column end">
+      <%= markdown(first_paragraph(process.description)) %>
+    </div>
   </div>
 
   <div class="column row">
diff --git a/app/views/legislation/processes/phase_empty.html.erb b/app/views/legislation/processes/phase_empty.html.erb
index 6fb588faf..d0534d59c 100644
--- a/app/views/legislation/processes/phase_empty.html.erb
+++ b/app/views/legislation/processes/phase_empty.html.erb
@@ -2,9 +2,9 @@
 
 <%= render 'legislation/processes/header', process: @process, header: :full %>
 
-<div class="row">
-  <%= render 'legislation/processes/key_dates', process: @process, phase: @phase %>
+<%= render 'legislation/processes/key_dates', process: @process, phase: @phase %>
 
+<div class="row">
   <div class="debate-chooser">
     <div class="row">
       <p><%= t(".empty") %></p>
diff --git a/app/views/legislation/processes/phase_not_open.html.erb b/app/views/legislation/processes/phase_not_open.html.erb
index 0b3b90f01..0b20c83f8 100644
--- a/app/views/legislation/processes/phase_not_open.html.erb
+++ b/app/views/legislation/processes/phase_not_open.html.erb
@@ -2,9 +2,9 @@
 
 <%= render 'legislation/processes/header', process: @process, header: :full %>
 
-<div class="row">
-  <%= render 'legislation/processes/key_dates', process: @process, phase: @phase %>
+<%= render 'legislation/processes/key_dates', process: @process, phase: @phase %>
 
+<div class="row">
   <div class="debate-chooser">
     <div class="row">
       <div class="debate-draft">
diff --git a/app/views/legislation/processes/show.html.erb b/app/views/legislation/processes/show.html.erb
index 410068831..5b29dc292 100644
--- a/app/views/legislation/processes/show.html.erb
+++ b/app/views/legislation/processes/show.html.erb
@@ -2,9 +2,9 @@
 
 <%= render 'legislation/processes/header', process: @process, header: :full %>
 
-<div class="row">
-  <%= render 'key_dates', process: @process, phase: :debate %>
+<%= render 'key_dates', process: @process, phase: :debate %>
 
+<div class="row">
   <div class="debate-chooser">
     <div class="row">
       <%= render 'debate', process: @process %>

From be024f0fe133ecda1bee4fc5918f0bcae34f48f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= <m@martingonzalez.net>
Date: Thu, 12 Jan 2017 11:19:30 +0100
Subject: [PATCH 02/10] Push legislation comments style fixes

---
 app/assets/stylesheets/legislation_process.scss | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index db6c9718e..1e3fc8bb1 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -310,6 +310,7 @@ $epigraph-font-size: rem-calc(15);
     }
 
     .quiz-next-link {
+      display: block;
 
       &:hover, &:active {
         text-decoration: none;
@@ -484,15 +485,12 @@ $epigraph-font-size: rem-calc(15);
     }
 
     span {
-      margin-left: 0.75rem;
+      margin-left: 0.25rem;
       font-style: italic;
       font-size: $small-font-size;
       color: $text-medium;
       vertical-align: top;
-
-      @include breakpoint(medium) {
-        margin-left: 1rem;
-      }
+      line-height: 2.35rem;
     }
 
     .select-box {
@@ -547,17 +545,14 @@ $epigraph-font-size: rem-calc(15);
     // Panel calcs for desktop
     @media screen and (min-width: 40em) {
       .calc-index {
-        transition: all 0.25s;
         width: calc(35% - 25px);
       }
 
       .calc-text {
-        transition: all 0.25s;
         width: calc(65% - 25px)
       }
 
       .calc-comments {
-        transition: all 0.25s;
         cursor: pointer;
         background: #F2F2F2;
         width: 50px;

From a0011b7c5c8ce3283acf9fefd0f787f31fa11139 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= <m@martingonzalez.net>
Date: Thu, 12 Jan 2017 11:55:12 +0100
Subject: [PATCH 03/10] More css fixes

---
 app/assets/stylesheets/legislation_process.scss  | 11 +++++++++++
 app/views/legislation/processes/_header.html.erb |  2 +-
 app/views/legislation/questions/show.html.erb    |  5 +++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 1e3fc8bb1..2c0dfc672 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -280,6 +280,9 @@ $epigraph-font-size: rem-calc(15);
 // 05. Debate quiz
 // -----------------
 .debate-quiz {
+  .comments {
+    margin-top: 4rem;
+  }
 
   .quiz-header {
     margin-bottom: 2rem;
@@ -349,6 +352,10 @@ $epigraph-font-size: rem-calc(15);
   .debate-questions {
     position: relative;
     list-style: none;
+    
+    .participation-not-allowed {
+      padding-bottom: 3rem;
+    }
 
     .control {
       position: relative;
@@ -430,6 +437,10 @@ $epigraph-font-size: rem-calc(15);
 
   .headline {
     margin-bottom: 0;
+    
+    .headline-small {
+      padding-top: 0.75rem;
+    }
   }
 
   .button-circle {
diff --git a/app/views/legislation/processes/_header.html.erb b/app/views/legislation/processes/_header.html.erb
index c73c732af..5d18217bc 100644
--- a/app/views/legislation/processes/_header.html.erb
+++ b/app/views/legislation/processes/_header.html.erb
@@ -2,7 +2,7 @@
   <div class="legislation-hero legislation-allegation no-margin-top grey-heading" data-target="legislation-header-small">
     <div class="row headline">
       <div class="small-12 medium-7 column">
-        <h3><%= process.title %></h3>
+        <h3 class="headline-small"><%= process.title %></h3>
       </div>
       <div class="small-12 medium-4 column right">
         <a class="button-subscribed expanded button strong" title="Suscríbete al proceso" data-remote="true" rel="nofollow" data-method="post" href="#">
diff --git a/app/views/legislation/questions/show.html.erb b/app/views/legislation/questions/show.html.erb
index 4ad67a546..2e79136b3 100644
--- a/app/views/legislation/questions/show.html.erb
+++ b/app/views/legislation/questions/show.html.erb
@@ -47,6 +47,7 @@
         </div>
     </div>
   </div>
+  
+  <%= render 'legislation/shared/comments', commentable: @question %>
+  
 </section>
-
-<%= render 'legislation/shared/comments', commentable: @question %>

From 495c7e8099b1f211a929d001c9badf5068d5f1a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= <m@martingonzalez.net>
Date: Thu, 12 Jan 2017 12:16:45 +0100
Subject: [PATCH 04/10] Key dates SVG fix

---
 app/assets/stylesheets/legislation_process.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 2c0dfc672..201d83fcb 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -168,6 +168,7 @@ $epigraph-font-size: rem-calc(15);
     }
     
     ul {
+      position: relative;
       max-width: 75rem;
       margin-left: auto;
       margin-right: auto;
@@ -182,10 +183,11 @@ $epigraph-font-size: rem-calc(15);
       
       svg {
         position: absolute;
-        top: 1.5rem;
+        top: 1.25rem;
+        left: -1rem;
 
         @include breakpoint(medium) {
-          transform: rotate(-8deg);
+          transform: rotate(-6deg);
           top: 0.75rem;
         }
       }

From 046bcbfb0f74704c647095443ffaaade758f2dd7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= <m@martingonzalez.net>
Date: Thu, 12 Jan 2017 12:48:14 +0100
Subject: [PATCH 05/10] Fix small header toggle

---
 app/assets/javascripts/legislation.js.coffee     |  8 +++++---
 app/assets/stylesheets/legislation_process.scss  | 12 +++++++++++-
 app/views/legislation/processes/_header.html.erb | 11 ++++++++++-
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/legislation.js.coffee b/app/assets/javascripts/legislation.js.coffee
index 26c0185c1..cf2dfabd1 100644
--- a/app/assets/javascripts/legislation.js.coffee
+++ b/app/assets/javascripts/legislation.js.coffee
@@ -4,6 +4,11 @@ App.Legislation =
     $('#js-toggle-debate').on
       click: ->
         $('#debate-info').toggle()
+        
+    $('#js-toggle-small-debate').on
+      click: ->
+        $('#debate-info').toggle()
+        $('span').toggleClass('icon-angle-up')
 
     $('form#new_legislation_answer input.button').hide()
     $('form#new_legislation_answer input[type=radio]').on
@@ -17,7 +22,4 @@ App.Legislation =
 
     $('#js-toggle-legislation-process-header').on
       click: ->
-        $('[data-target="legislation-header-small"]').toggle()
         $('[data-target="legislation-header-full"]').toggle()
-
-
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 201d83fcb..ba506dc37 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -447,8 +447,18 @@ $epigraph-font-size: rem-calc(15);
 
   .button-circle {
     line-height: 0;
-    padding: 0.5em;
+    padding: 0em;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
+    
+    span {
+      padding-left: 1px;
+      
+      &:before {
+        line-height: 1.55;
+      }
+    }
   }
 
   .icon-checkmark-circle {
diff --git a/app/views/legislation/processes/_header.html.erb b/app/views/legislation/processes/_header.html.erb
index 5d18217bc..b59969b81 100644
--- a/app/views/legislation/processes/_header.html.erb
+++ b/app/views/legislation/processes/_header.html.erb
@@ -11,8 +11,17 @@
         </a>
       </div>
     </div>
+    
+    <div class="row description">
+      <div id="debate-info" style="display: none" class="small-12 column">
+        <div class="debate-info-wrapper">
+          <%= markdown process.additional_info if process.additional_info %>
+        </div>
+      </div>
+    </div>
+    
     <div class="center half-gradient">
-      <a class="button big center button-circle" title="<%= t('.view_process_information') %>" id="js-toggle-legislation-process-header">
+      <a class="button big center button-circle" title="<%= t('.view_process_information') %>" id="js-toggle-small-debate">
         <span class="icon-angle-down" aria-hidden="true"></span>
       </a>
     </div>

From 1cf074a297e4ef7d2aa74656c866ccf9fd37ec2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= <m@martingonzalez.net>
Date: Fri, 13 Jan 2017 15:41:23 +0100
Subject: [PATCH 06/10] Fix identation and markup issue on the legislation
 question page

---
 app/views/legislation/questions/show.html.erb | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/views/legislation/questions/show.html.erb b/app/views/legislation/questions/show.html.erb
index 2e79136b3..8ba698899 100644
--- a/app/views/legislation/questions/show.html.erb
+++ b/app/views/legislation/questions/show.html.erb
@@ -39,13 +39,13 @@
       <div id="social-share" class="sidebar-divider"></div>
       <h3><%= t('.share') %></h3>
       <div class="social-share-full">
-          <div class="social-share-button" data-title="<%= @question.title.truncate(115) %>" data-img="" data-url="" data-desc="" data-via="">
-            <a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" title="<%= t('.share_twitter') %>" href="#"><span class="sr-only">twitter</span></a>
-            <a rel="nofollow " data-site="facebook" class="ssb-icon ssb-facebook" onclick="return SocialShareButton.share(this);" title="<%= t('.share_facebook') %>" href="#"><span class="sr-only">facebook</span></a>
-            <a rel="nofollow " data-site="google_plus" class="ssb-icon ssb-google_plus" onclick="return SocialShareButton.share(this);" title="<%= t('.share_gplus') %>" href="#"><span class="sr-only">google_plus</span></a>
-          </div>
+        <div class="social-share-button" data-title="<%= @question.title.truncate(115) %>" data-img="" data-url="" data-desc="" data-via="">
+          <a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" title="<%= t('.share_twitter') %>" href="#"><span class="sr-only">twitter</span></a>
+          <a rel="nofollow " data-site="facebook" class="ssb-icon ssb-facebook" onclick="return SocialShareButton.share(this);" title="<%= t('.share_facebook') %>" href="#"><span class="sr-only">facebook</span></a>
+          <a rel="nofollow " data-site="google_plus" class="ssb-icon ssb-google_plus" onclick="return SocialShareButton.share(this);" title="<%= t('.share_gplus') %>" href="#"><span class="sr-only">google_plus</span></a>
         </div>
-    </div>
+      </div>
+    </aside>
   </div>
   
   <%= render 'legislation/shared/comments', commentable: @question %>

From 3f956294ed8c87aa8521d04e905d220c52bed215 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?=
 <martgnz@users.noreply.github.com>
Date: Fri, 13 Jan 2017 15:51:12 +0100
Subject: [PATCH 07/10] Fix legislation question comments markup

---
 app/views/legislation/questions/show.html.erb | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/views/legislation/questions/show.html.erb b/app/views/legislation/questions/show.html.erb
index 2e79136b3..b2e83fc3c 100644
--- a/app/views/legislation/questions/show.html.erb
+++ b/app/views/legislation/questions/show.html.erb
@@ -39,14 +39,13 @@
       <div id="social-share" class="sidebar-divider"></div>
       <h3><%= t('.share') %></h3>
       <div class="social-share-full">
-          <div class="social-share-button" data-title="<%= @question.title.truncate(115) %>" data-img="" data-url="" data-desc="" data-via="">
-            <a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" title="<%= t('.share_twitter') %>" href="#"><span class="sr-only">twitter</span></a>
-            <a rel="nofollow " data-site="facebook" class="ssb-icon ssb-facebook" onclick="return SocialShareButton.share(this);" title="<%= t('.share_facebook') %>" href="#"><span class="sr-only">facebook</span></a>
-            <a rel="nofollow " data-site="google_plus" class="ssb-icon ssb-google_plus" onclick="return SocialShareButton.share(this);" title="<%= t('.share_gplus') %>" href="#"><span class="sr-only">google_plus</span></a>
-          </div>
+        <div class="social-share-button" data-title="<%= @question.title.truncate(115) %>" data-img="" data-url="" data-desc="" data-via="">
+          <a rel="nofollow " data-site="twitter" class="ssb-icon ssb-twitter" onclick="return SocialShareButton.share(this);" title="<%= t('.share_twitter') %>" href="#"><span class="sr-only">twitter</span></a>
+          <a rel="nofollow " data-site="facebook" class="ssb-icon ssb-facebook" onclick="return SocialShareButton.share(this);" title="<%= t('.share_facebook') %>" href="#"><span class="sr-only">facebook</span></a>
+          <a rel="nofollow " data-site="google_plus" class="ssb-icon ssb-google_plus" onclick="return SocialShareButton.share(this);" title="<%= t('.share_gplus') %>" href="#"><span class="sr-only">google_plus</span></a>
         </div>
-    </div>
-  </div>
+      </div>
+    </aside>
   
   <%= render 'legislation/shared/comments', commentable: @question %>
   

From 02d49266e0af210a6a9ea5b6df0a5a42b0d3d510 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= <m@martingonzalez.net>
Date: Fri, 13 Jan 2017 16:14:44 +0100
Subject: [PATCH 08/10] Increase margin on questions to fix a cosmetic issue

---
 app/assets/stylesheets/legislation_process.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index ba506dc37..b2cb4e527 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -369,6 +369,7 @@ $epigraph-font-size: rem-calc(15);
       border-radius: 4px;
       padding: 0.75rem 2.5rem;
       margin-right: 1.5rem;
+      margin-bottom: 0.5rem;
     }
 
     .active {

From 5a5fed975a5e49d60331cc744cd7f73e08be3014 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= <m@martingonzalez.net>
Date: Fri, 13 Jan 2017 16:19:57 +0100
Subject: [PATCH 09/10] Push changes

---
 app/views/legislation/questions/show.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/legislation/questions/show.html.erb b/app/views/legislation/questions/show.html.erb
index 8ba698899..d12296a2f 100644
--- a/app/views/legislation/questions/show.html.erb
+++ b/app/views/legislation/questions/show.html.erb
@@ -49,5 +49,5 @@
   </div>
   
   <%= render 'legislation/shared/comments', commentable: @question %>
-  
+
 </section>

From eadf933c22a4bc594f508ca6110f56bb5400a19d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Gonz=C3=A1lez?= <m@martingonzalez.net>
Date: Fri, 13 Jan 2017 16:42:59 +0100
Subject: [PATCH 10/10] Change debate questions class to avoid colliding with
 other CSS

---
 app/assets/stylesheets/legislation_process.scss | 2 +-
 app/views/legislation/questions/show.html.erb   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index b2cb4e527..6de923542 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -281,7 +281,7 @@ $epigraph-font-size: rem-calc(15);
 
 // 05. Debate quiz
 // -----------------
-.debate-quiz {
+.debate-questions {
   .comments {
     margin-top: 4rem;
   }
diff --git a/app/views/legislation/questions/show.html.erb b/app/views/legislation/questions/show.html.erb
index d12296a2f..c74bd9efa 100644
--- a/app/views/legislation/questions/show.html.erb
+++ b/app/views/legislation/questions/show.html.erb
@@ -1,6 +1,6 @@
 <% provide :title do %><%= @question.title %><% end %>
 
-<section class="debate-quiz">
+<section class="debate-questions">
   <div class="quiz-header row small-collapse">
     <div class="small-12 medium-9 column">
       <div class="quiz-title">