From e85c71fe9a38d639e7e1f424ba37457ff708ea23 Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Fri, 25 Aug 2017 13:45:50 +0200
Subject: [PATCH] improves styles for external links on proposal show

---
 app/assets/stylesheets/_consul_settings.scss |  1 +
 app/assets/stylesheets/participation.scss    | 25 +++++++++-----------
 app/views/proposals/show.html.erb            | 11 ++++++++-
 config/locales/en/general.yml                |  2 ++
 config/locales/es/general.yml                |  2 ++
 5 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index 6d0f37559..0844f861f 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -43,6 +43,7 @@ $budget:            #7e328a;
 $budget-hover:      #7571bf;
 
 $highlight:         #e7f2fc;
+$highlight-soft:    #f3f8fd;
 $light:             #f5f7fa;
 $featured:          #ffdc5c;
 
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index b4a511c85..be5cb4a7c 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -428,33 +428,30 @@
 
   .document-link,
   .video-link {
-    border: 1px solid $border;
+    background: $highlight-soft;
+    border: 1px solid $highlight;
     display: block;
     margin: $line-height / 2 0;
     padding: $line-height / 2;
     position: relative;
 
     a {
-      padding-left: rem-calc(24);
+      word-wrap: break-word;
     }
 
-    ::before {
-      color: #007bb7;
-      content: 'G';
-      font-family: "icons" !important;
+    [class^="icon-"] {
+      display: inline-block;
       font-size: rem-calc(24);
-      left: rem-calc(6);
-      padding-top: rem-calc(3);
-      position: absolute;
-      top: 0;
+      line-height: $line-height;
+      vertical-align: middle;
     }
-  }
 
-  .video-link {
+    .icon-document {
+      color: #007bb7;
+    }
 
-    ::before {
+    .icon-video {
       color: #cc181e;
-      content: 'D';
     }
   }
 
diff --git a/app/views/proposals/show.html.erb b/app/views/proposals/show.html.erb
index cf22ad315..75c07873a 100644
--- a/app/views/proposals/show.html.erb
+++ b/app/views/proposals/show.html.erb
@@ -77,14 +77,23 @@
 
         <% if @proposal.external_url.present? %>
           <div class="document-link">
-            <%= text_with_links @proposal.external_url %>
+            <p>
+              <span class="icon-document"></span>&nbsp;
+              <strong><%= t('proposals.show.title_external_url') %></strong>
+            </p>
+              <%= text_with_links @proposal.external_url %>
           </div>
         <% end %>
 
         <% if @proposal.video_url.present? %>
           <div class="video-link">
+            <p>
+              <span class="icon-video"></span>&nbsp;
+              <strong><%= t('proposals.show.title_video_url') %></strong>
+            </p>
             <%= text_with_links @proposal.video_url %>
           </div>
+
         <% end %>
 
         <h4><%= @proposal.question %></h4>
diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml
index aea5c65c8..6e68dd686 100644
--- a/config/locales/en/general.yml
+++ b/config/locales/en/general.yml
@@ -406,6 +406,8 @@ en:
       send_notification: Send notification
       no_notifications: "This proposal has any notifications."
       embed_video_title: "Video on %{proposal}"
+      title_external_url: "Additional documentation"
+      title_video_url: "External video"
     update:
       form:
         submit_button: Save changes
diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml
index 6a3972128..1277d5fbc 100644
--- a/config/locales/es/general.yml
+++ b/config/locales/es/general.yml
@@ -406,6 +406,8 @@ es:
       share: Compartir
       no_notifications: "Esta propuesta no tiene notificaciones."
       embed_video_title: "Vídeo en %{proposal}"
+      title_external_url: "Documentación adicional"
+      title_video_url: "Vídeo externo"
     update:
       form:
         submit_button: Guardar cambios