[WDTK] Added article section in frontpage

[WTDK] Added articles into frontpage_extra file [WTDK] Get articles information from JSON API
mysociety · Jan 11, 2023 · 1251855 · 1251855
1 parent aa2f6c2
commit 1251855
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 0 deletions.
diff --git a/app/assets/stylesheets/responsive/custom.scss b/app/assets/stylesheets/responsive/custom.scss
@@ -1385,6 +1385,55 @@ p.locale-list-trigger {
 
 }
 
+.homepage-article-section {
+  padding: 2em 0;
+  border-bottom: 1px solid darken($color_light_grey, 7%);;
+  margin-bottom: 2rem;
+  .ar-content__headings {
+    text-align: center;
+    margin-bottom: 3rem;
+    h2 {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+  }
+  .col-2-grid {
+    margin-bottom: 3rem;
+  }
+}
+
+.article-grid__item {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  .item-content__img {
+    max-width: 25%;
+    object-fit: contain;
+    margin-right: 1rem;
+  }
+  .item-content__heading {
+    margin-top: 0;
+    font-size: 1.1em;
+  }
+}
+
+.col-2-grid {
+  display: grid;
+  column-gap: 4rem;
+  row-gap: 2rem;
+  padding: 0 0.9375rem; //same as foundation's screen-edge gutter;
+  @media (min-width: $main_menu-mobile_menu_cutoff ) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.cta-button-wrapper {
+  text-align: center;
+  a.button {
+    margin-right: 0.25rem;
+  }
+}
+
 /* Help pages */
 
 .help-sidebar {

diff --git a/lib/views/general/_frontpage_articles.html.erb b/lib/views/general/_frontpage_articles.html.erb
@@ -0,0 +1,24 @@
+<%  @research_articles = JSON.parse(Net::HTTP.get(URI('https://research.mysociety.org/embed/foi/limit:10/format:json/'))). with_indifferent_access[:items]. map { |item| item.slice(:title, :url, :thumbnail) } %>
+
+<div class="homepage-article-section" id="homepage-article">
+    <div class="row homepage-article-section__ar-contet">
+        <div class="ar-content__headings ">
+            <h2><%= _("Our Freedom of Information Research") %></h2>
+        </div>
+        <div class="ar-content__article-grid col-2-grid">
+            <% @research_articles.sample(6).each do |article| %>
+                <div class="article-grid__item">
+                <img class="item-content__img" src="<%= image_path(article[:thumbnail]) %>" alt="Cover for: <%= article[:title] %>" loading="lazy">
+                    <div class="article-grid__item-content">
+                        <h3 class="item-content__heading"><%= article[:title] %></h3>
+                        <a href="<%= article[:url] %>" target="_blank">Read article</a>
+                    </div>
+                </div>
+            <% end %>
+        </div>
+        <div class="cta-button-wrapper">
+            <a class="button" href="https://www.mysociety.org/donate/?utm_medium=link&how-much=10">Donate £10</a>
+            <span>to support our research or <a href="https://research.mysociety.org/section/foi">Browse more</a></span>
+        </div>
+    </div>
+</div>
diff --git a/lib/views/general/_frontpage_extra.html.erb b/lib/views/general/_frontpage_extra.html.erb
@@ -0,0 +1 @@
+<%= render :partial => "frontpage_articles" %>