From f92a7ade5571ecacef93fcd711e20e74eb57514c Mon Sep 17 00:00:00 2001
From: decabeza <alberto@decabeza.es>
Date: Wed, 6 Dec 2017 13:22:19 +0100
Subject: [PATCH] adds partial for related content

---
 app/assets/stylesheets/layout.scss         | 54 +++++++++++++++++++++
 app/views/proposals/show.html.erb          |  2 +
 app/views/shared/_related_content.html.erb | 55 ++++++++++++++++++++++
 config/locales/en/general.yml              | 10 +++-
 config/locales/es/general.yml              |  8 ++++
 5 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 app/views/shared/_related_content.html.erb

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index a2ddea800..29173bb8a 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -20,6 +20,7 @@
 // 18. Banners
 // 19. Recommended Section Home
 // 20. Documents
+// 21. Related content
 //
 
 // 01. Global styles
@@ -2382,3 +2383,56 @@ table {
   background: #fafafa;
   border-bottom: 1px solid #eee;
 }
+
+// 21. Related content
+// -------------------
+
+.related-content {
+  border-top: 1px solid $border;
+
+  h2 {
+    font-size: rem-calc(24);
+
+    span {
+      color: #4f4f4f;
+      font-weight: normal;
+    }
+  }
+}
+
+.add-related-content {
+  display: block;
+
+  @include breakpoint(medium) {
+    float: right;
+  }
+}
+
+.related-content-list {
+  list-style-type: none;
+  margin-left: 0;
+
+  li {
+    border-bottom: 1px solid $border;
+    padding: $line-height / 4;
+
+    &:first-child {
+      border-top: 1px solid $border;
+    }
+  }
+
+  h3 {
+    font-size: $base-font-size;
+    font-weight: normal;
+  }
+
+  span {
+    color: #4f4f4f;
+    font-size: rem-calc(12);
+    text-transform: uppercase;
+  }
+
+  .flag {
+    margin-top: $line-height / 2;
+  }
+}
diff --git a/app/views/proposals/show.html.erb b/app/views/proposals/show.html.erb
index ade0972d8..4a559cfd8 100644
--- a/app/views/proposals/show.html.erb
+++ b/app/views/proposals/show.html.erb
@@ -106,6 +106,8 @@
 
         <%= render 'shared/geozone', geozonable: @proposal %>
 
+        <%= render 'shared/related_content', relationable: @proposal %>
+
         <div class="js-moderator-proposal-actions margin">
           <%= render 'proposals/actions', proposal: @proposal %>
         </div>
diff --git a/app/views/shared/_related_content.html.erb b/app/views/shared/_related_content.html.erb
new file mode 100644
index 000000000..abe21e0f2
--- /dev/null
+++ b/app/views/shared/_related_content.html.erb
@@ -0,0 +1,55 @@
+<div class="related-content padding">
+
+  <div class="margin-bottom">
+    <h2 class="inline-block">
+      <%= t("related_content.title") %>&nbsp;<span>(6)</span> <!-- Change number to related_content.count -->
+    </h2>
+
+    <a data-toggle="related_content" class="add-related-content">
+      <%= t("related_content.add") %>
+    </a>
+  </div>
+
+  <form id="related_content" class="hide" data-toggler=".hide"> <!-- Change to rails form, maintaining all Id/Classes -->
+
+    <label><%= t("related_content.label") %></label>
+
+    <p class="help-text" id="related_content_help_text">
+      <%= t("related_content.help", org: setting['org_name']) %>
+    </p>
+
+    <div class="input-group">
+      <div class="input-group-field">
+        <input type="text" name="related-content"
+                           aria-describedby="related_content_help_text"
+                           placeholder="<%= t("related_content.placeholder", url: setting['url']) %>">
+      </div>
+      <div class="input-group-button">
+        <input type="submit" class="button" value="<%= t("related_content.submit") %>">
+      </div>
+    </div>
+  </form>
+
+  <!-- Flash error -->
+  <div class="callout alert">
+    <%= t("related_content.error", url: setting['url']) %>
+  </div>
+  <!-- /. Flash error -->
+
+  <ul class="related-content-list">
+    <!-- Each related item do -->
+    <li>
+      <a href="#" class="float-right flag">
+        <span class="icon-flag"></span> <!-- This should be similar to comments/flag_actions -->
+      </a>
+      <span>DEBATE</span><br> <!-- This name has to change depending of item type -->
+      <h3 class="inline-block">
+        <%= link_to "Título del contenido relacionado", "#" %>
+      </h3>
+    </li>
+    <!-- /.Each related item do -->
+  </ul>
+
+  <!-- Add pagination here -->
+
+</div>
diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml
index 6e87e6983..2062e8d3a 100644
--- a/config/locales/en/general.yml
+++ b/config/locales/en/general.yml
@@ -811,4 +811,12 @@ en:
       user_permission_votes: Participate on final voting
   invisible_captcha:
     sentence_for_humans: "If you are human, ignore this field"
-    timestamp_error_message: "Sorry, that was too quick! Please resubmit."
\ No newline at end of file
+    timestamp_error_message: "Sorry, that was too quick! Please resubmit."
+  related_content:
+    title: "Related content"
+    add: "Add related content"
+    label: "Link to related content"
+    placeholder: "%{url}"
+    help: "Yuo can add any link inside of %{org}."
+    submit: "Add"
+    error: "Link not valid. Remember to start with %{url}."
diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml
index 0d0b4b849..25e73edfc 100644
--- a/config/locales/es/general.yml
+++ b/config/locales/es/general.yml
@@ -809,3 +809,11 @@ es:
   invisible_captcha:
     sentence_for_humans: "Si eres humano, por favor ignora este campo"
     timestamp_error_message: "Eso ha sido demasiado rápido. Por favor, reenvía el formulario."
+  related_content:
+    title: "Contenido relacionado"
+    add: "Añadir contenido relacionado"
+    label: "Enlace a contenido relacionado"
+    placeholder: "%{url}"
+    help: "Puedes introducir cualquier enlace que esté dentro de %{org}."
+    submit: "Añadir"
+    error: "Enlace no válido. Recuerda que debe empezar por %{url}."
\ No newline at end of file