adds partial for related content

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;
+  }
+}

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>

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>

config/locales/en/general.yml

@@ -812,3 +812,11 @@ en:
   invisible_captcha:
     sentence_for_humans: "If you are human, ignore this field"
     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}."

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}."