From f079bdac8a00a6c608d3c239e8b1496afaf42df2 Mon Sep 17 00:00:00 2001
From: Alberto Garcia Cabeza <alberto@decabeza.es>
Date: Sat, 23 Apr 2016 00:40:28 +0200
Subject: [PATCH] Improves styles for retire proposals

---
 app/assets/stylesheets/layout.scss        | 22 ++++++++++++++++------
 app/assets/stylesheets/participation.scss |  4 ++++
 app/views/proposals/_retired.html.erb     | 14 +++++++-------
 app/views/proposals/retire_form.html.erb  | 21 +++++++++++----------
 app/views/proposals/show.html.erb         | 14 +++++++++-----
 app/views/users/_proposals.html.erb       |  6 +++---
 6 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index fdaf2dd30..2040a02ce 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -545,7 +545,7 @@ footer {
 // 04. Tags
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.tags a , .tag-cloud a, .categories a, .geozone a {
+.tags a , .tag-cloud a, .categories a, .geozone a, .sidebar-links a {
   background: #ececec;
   border-radius: rem-calc(6);
   color: $text;
@@ -1730,9 +1730,12 @@ table {
     border: 0;
 
     td {
-      padding-left: $line-height*1.5;
       position: relative;
-      word-break: break-all;
+
+      &:first-child {
+        padding-left: $line-height*1.5;
+        width: 80%;
+      }
 
       &:before {
         color: $brand;
@@ -1753,9 +1756,16 @@ table {
       top: 14px;
     }
 
-    &.activity-proposals td:first-child:before {
-      content: "h";
-      top: 18px;
+    &.activity-proposals {
+
+      td:first-child:before {
+        content: "h";
+        top: 18px;
+      }
+
+      .retired {
+        text-decoration: line-through;
+      }
     }
 
     &.activity-investment-projects td:first-child:before {
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 8ede20c2b..7ceaf7b99 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -343,6 +343,10 @@
     word-wrap: break-word;
   }
 
+  .callout.proposal-retired {
+    font-size: $base-font-size;
+  }
+
   .social-share-full .social-share-button {
     display:inline;
   }
diff --git a/app/views/proposals/_retired.html.erb b/app/views/proposals/_retired.html.erb
index ddf1dc36d..4ab1aba98 100644
--- a/app/views/proposals/_retired.html.erb
+++ b/app/views/proposals/_retired.html.erb
@@ -1,13 +1,13 @@
 <div class="sidebar-divider"></div>
 <h3 class="sidebar-title"><%= t("proposals.index.retired_proposals") %></h3>
 
-<p>
 <% if params[:retired].blank? %>
-  <%= link_to t("proposals.index.retired_proposals_link"), proposals_path(retired: 'all'), class: "small" %><br>
+  <p><%= link_to t("proposals.index.retired_proposals_link"), proposals_path(retired: 'all'), class: "small" %></p>
 <% else %>
-  <%= link_to t("proposals.index.retired_links.all"), proposals_path(retired: 'all'), ({class: "small"} unless params[:retired] == 'all') %><br>
-  <% Proposal::RETIRE_OPTIONS.each do |option| %>
-    <%= link_to t("proposals.index.retired_links.#{option}"), proposals_path(retired: option), ({class: "small"} unless params[:retired] == option) %><br>
-  <% end %>
+  <div class="sidebar-links">
+    <%= link_to t("proposals.index.retired_links.all"), proposals_path(retired: 'all'), ({class: "small"} unless params[:retired] == 'all') %>
+    <% Proposal::RETIRE_OPTIONS.each do |option| %>
+      <%= link_to t("proposals.index.retired_links.#{option}"), proposals_path(retired: option), ({class: "small"} unless params[:retired] == option) %>
+    <% end %>
+  </div>
 <% end %>
-</p>
diff --git a/app/views/proposals/retire_form.html.erb b/app/views/proposals/retire_form.html.erb
index 293e523bb..d56277cb3 100644
--- a/app/views/proposals/retire_form.html.erb
+++ b/app/views/proposals/retire_form.html.erb
@@ -2,33 +2,34 @@
 
   <div class="small-12 column">
 
-    <div class="float-right">
-      <%= link_to @proposal.title, @proposal %>
-    </div>
+    <h1 class="inline-block"><%= t("proposals.retire_form.title") %></h1>
 
-    <h1><%= t("proposals.retire_form.title") %></h1>
+    <h3><%= link_to @proposal.title, @proposal %></h3>
 
-    <div data-alert class="callout primary">
+    <div data-alert class="callout warning">
      <%= t("proposals.retire_form.warning") %>
     </div>
 
     <%= form_for(@proposal, url: retire_proposal_path(@proposal)) do |f| %>
       <%= render 'shared/errors', resource: @proposal %>
       <div class="row">
-
-        <div class="small-12 medium-6 column">
+        <div class="small-12 medium-6 large-4 column">
           <%= f.label :retired_reason,  t("proposals.retire_form.retired_reason_label") %>
           <%= f.select :retired_reason, retire_proposals_options, {include_blank: t("proposals.retire_form.retired_reason_blank"), label: false} %>
         </div>
+      </div>
 
-        <div class="small-12 column">
+      <div class="row">
+        <div class="small-12 medium-9 column">
           <%= f.label :retired_explanation, t("proposals.retire_form.retired_explanation_label") %>
           <%= f.text_area :retired_explanation, rows: 4, maxlength: 500, label: false,
                           placeholder: t('proposals.retire_form.retired_explanation_placeholder') %>
         </div>
+      </div>
 
-        <div class="actions small-12 column">
-          <%= f.submit(class: "button", value: t("proposals.retire_form.submit_button")) %>
+      <div class="row">
+        <div class="actions small-12 medium-3 column">
+          <%= f.submit(class: "button expanded", value: t("proposals.retire_form.submit_button")) %>
         </div>
       </div>
     <% end %>
diff --git a/app/views/proposals/show.html.erb b/app/views/proposals/show.html.erb
index 8fc01b7b4..c319c1409 100644
--- a/app/views/proposals/show.html.erb
+++ b/app/views/proposals/show.html.erb
@@ -23,8 +23,11 @@
 
         <h1><%= @proposal.title %></h1>
         <% if @proposal.retired? %>
-          <div data-alert class="callout alert margin-top">
-            <strong><%= t("proposals.show.retired_warning") %> <%= link_to t("proposals.show.retired_warning_link_to_explanation"), "#retired_explanation" %></strong>
+          <div data-alert class="callout alert margin-top proposal-retired">
+            <strong>
+              <%= t("proposals.show.retired_warning") %><br>
+              <%= link_to t("proposals.show.retired_warning_link_to_explanation"), "#retired_explanation" %>
+            </strong>
           </div>
         <% elsif @proposal.conflictive? %>
           <div data-alert class="callout alert margin-top">
@@ -79,9 +82,10 @@
         <h4><%= @proposal.question %></h4>
 
         <% if @proposal.retired? %>
-          <a id="retired_explanation"></a>
-          <h2><%= t('proposals.show.retired') %>: <%= t("proposals.retire_options.#{@proposal.retired_reason}") unless @proposal.retired_reason == 'other' %></h2>
-          <%= simple_format text_with_links(@proposal.retired_explanation), {}, sanitize: false %>
+          <div id="retired_explanation" class="callout">
+            <h2><%= t('proposals.show.retired') %>: <%= t("proposals.retire_options.#{@proposal.retired_reason}") unless @proposal.retired_reason == 'other' %></h2>
+            <%= simple_format text_with_links(@proposal.retired_explanation), {}, sanitize: false %>
+          </div>
         <% end %>
 
         <%= render 'shared/tags', taggable: @proposal %>
diff --git a/app/views/users/_proposals.html.erb b/app/views/users/_proposals.html.erb
index c3aa55ed1..9ec1368bd 100644
--- a/app/views/users/_proposals.html.erb
+++ b/app/views/users/_proposals.html.erb
@@ -2,13 +2,13 @@
   <% @proposals.each do |proposal| %>
     <tr id="proposal_<%= proposal.id %>">
       <td>
-        <%= link_to proposal.title, proposal, proposal.retired? ? {class: 'delete'} : {} %>
+        <%= link_to proposal.title, proposal, proposal.retired? ? {class: 'retired'} : {} %>
         <br>
         <%= proposal.summary %>
       </td>
-      <td>
+      <td class="text-center">
         <% if proposal.retired? %>
-          <%= t('users.show.retired') %>
+          <span class="label alert"><%= t('users.show.retired') %></span>
         <% else %>
           <%= link_to t('users.show.retire'),
                       retire_form_proposal_path(proposal),