Merge pull request #49 from ELIXIR-Belgium/news-improv

Adding support for collapsible news items

Author: bedroesb

_data/news.yml

@@ -4,3 +4,22 @@
 - name: News title 2
   date: 2021-09-20
   description:  Example Description with [link](about)
+- name: News title 3
+  date: 2021-09-20
+  linked_pr: 2
+  description:  >
+   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean magna massa, vestibulum ut leo eget, fermentum molestie mauris. Cras facilisis libero non sodales lobortis. Proin eu ultricies lacus. Sed posuere orci id tincidunt sollicitudin. Phasellus sit amet justo turpis. Vestibulum non volutpat libero. Donec mattis elementum sem nec posuere. Donec vitae libero sed mi faucibus tempus.
+   Talks included<span>:</span>
+      * Curabitur faucibus lectus a sem posuere tempus
+      * [Vivamus et dignissim nulla](/)
+      * Curabitur faucibus lectus a sem posuere tempus
+      * [Vivamus et dignissim nulla](/)
+  
+   Donec sagittis laoreet leo, eu tincidunt nulla pulvinar a. Aenean diam orci, rhoncus et imperdiet eget, sodales eget massa. Pellentesque lobortis egestas consequat.
+- name: News title 4
+  date: 2021-09-20
+  linked_pr: 2
+  description:  >
+   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean magna massa, vestibulum ut leo eget, fermentum molestie mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean magna massa, vestibulum ut leo eget, fermentum molestie mauris.
+   
+

_includes/events.html

@@ -16,7 +16,7 @@ <h2>{{include.event_type | replace: "_", " " | capitalize}}s</h2>
       {%- endif %}
       {%- if event.description %}
       {%- assign word_count = event.description | split: " " | size %}
-      {%- if include.truncate == "true" and  word_count > 20 %}
+      {%- if include.truncate == "true" and  word_count > 40 %}
       <p class="mb-0"><a data-bs-toggle="collapse" href="#collapse-{{count}}" role="button" aria-expanded="false" aria-controls="collapse-{{count}}">
         View description
       </a>

_includes/news.html

@@ -9,7 +9,20 @@ <h2>Whats new?</h2>
     <li>
       <span class="title mb-1">{{ new.name | escape }}</span>
       <p class="text-muted"><i class="far fa-calendar me-2"></i><time>{{ new.date | date_to_long_string }}</time>{% if new.linked_pr %}<b> - </b><i class="fas fa-code-branch"></i><a href="{{ site.github.repository_url | append: '/pull/' | append: new.linked_pr }}">{{new.linked_pr }}</a>{% endif %}</p>
+      {%- if new.description %}
+      {%- assign word_count = new.description | split: " " | size %}
+      {%- if include.truncate == "true" and  word_count > 40 %}
+      <p class="mb-0"><a data-bs-toggle="collapse" href="#collapse-{{count}}" role="button" aria-expanded="false" aria-controls="collapse-{{count}}">
+        View description
+      </a>
+      </p>
+      <div class="full-description collapse" id="collapse-{{count}}">
+        {{ new.description | markdownify }}
+      </div>
+      {%- else %}
       {{ new.description | markdownify }}
+      {%- endif %}
+      {%- endif %}
     </li>
     {%- assign count = count | plus: 1 %}
     {%- if include.limit and count == include.limit %}

_sass/_custom_variables.scss

@@ -10,7 +10,6 @@ $btn-primary-color-hover: $white;
 $topnav-bg: $light;
 $topnav-title-color: $primary;
 $topnav-brand-height: 44px;
-$topnav-border: 0;
 
 /*-----Search-----*/
 $search-result-color: $primary;
@@ -27,7 +26,6 @@ $sidebar-color-active: $white;
 
 /*-----TOC-----*/
 $toc-bg: $light;
-$toc-border: 0;
 
 /*-----Section navigation tiles-----*/
 $nav-card-bg: $white;
@@ -54,6 +52,8 @@ $contr-crown-color: $white;
 
 /*-----Events & news-----*/
 $news-title-bg: $primary;
+$news-border-color: $light;
+$news-title-color: $white;
 
 /*-----Default badge-----*/
 $badge-color: $body-color;
@@ -67,5 +67,4 @@ $footer-color: $dark;
 $footer-link-color: $dark;
 $footer-link-color-hover: $primary;
 $footer-copyright-bg: $gray-200;
-$footer-border: 0;
 

assets/css/main.scss

@@ -133,7 +133,6 @@ pre code {
 
 header .navbar {
     background-color: $topnav-bg;
-    border-bottom: $topnav-border;
     .navbar-brand {
         color: $topnav-title-color;
         img {
@@ -344,7 +343,6 @@ header .navbar {
 
 #toc {
     background-color: $toc-bg;
-    border: $toc-border;
     // Indent the lists and reset any other padding
 
     ul {
@@ -421,7 +419,6 @@ footer {
     font-size: 0.9em;
     line-height: 24px;
     background-color: $footer-bg;
-    border-top: $footer-border;
     color: $footer-color;
 
     a {
@@ -531,7 +528,6 @@ footer {
     position: fixed;
     background-color: $footer-bg;
     color: $footer-color;
-    border-top: $footer-border;
     bottom: 0;
     left: 0;
     width: 100%;
@@ -589,7 +585,7 @@ li.past_event,
 
 .events > ul > li,
 .news > ul > li {
-    border-left: $light 5px solid;
+    border-left: $news-border-color 5px solid;
     border-radius: $border-radius;
     padding: 0px 11px;
 
@@ -601,11 +597,10 @@ li.past_event,
     .title {
         background-color: $news-title-bg;
         font-weight: 600;
-        color: $white;
+        color: $news-title-color;
         padding: 0px 11px;
         border-radius: 0px 4px 4px 0px;
         margin-left: -11px;
-        border: 1px solid $news-title-bg;
         display: inline-block;
     }
 

pages/example_pages/news.md

@@ -3,4 +3,4 @@ title: News
 toc: false
 ---
 
-{% include news.html %}
+{% include news.html truncate="true" caption="true" %}