Adds vertical scrollbar to news (#729)

alshedivat · Jun 27, 2022 · 032f0e6 · 032f0e6
1 parent bcd43a1
commit 032f0e6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/_config.yml b/_config.yml
@@ -123,7 +123,8 @@ collections:
     output: true
     permalink: /projects/:path/
 
-news_limit: 5
+news_scrollable: true # adds a vertical scroll bar if there are more than 3 news items
+news_limit: 5 # leave blank to include all the news in the `_news` folder
 
 # -----------------------------------------------------------------------------
 # Jekyll settings

diff --git a/_includes/news.html b/_includes/news.html
@@ -2,10 +2,16 @@
           <div class="news">
             <h2>news</h2>
             {% if site.news != blank -%} 
-            <div class="table-responsive">
+            {%- assign news_size = site.news | size -%}
+            <div class="table-responsive" {% if site.news_scrollable and news_size > 3 %}style="max-height: 10vw"{% endif %}>
               <table class="table table-sm table-borderless">
-              {%- assign news = site.news | reverse -%} 
-              {% for item in news limit: site.news_limit %} 
+              {%- assign news = site.news | reverse -%}
+              {% if site.news_limit %}
+              {% assign news_limit = site.news_limit %}
+              {% else %}
+              {% assign news_limit = news_size %}
+              {% endif %}
+              {% for item in news limit: news_limit %} 
                 <tr>
                   <th scope="row">{{ item.date | date: "%b %-d, %Y" }}</th>
                   <td>