Merge pull request #5662 from galaxyproject/gtnlove

News layout same as LP layout
galaxyproject · Dec 20, 2024 · 290fdd1 · 290fdd1
2 parents 1b15ccc + 1503f8c
commit 290fdd1
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 36 deletions.
diff --git a/_includes/contributor-badge.html b/_includes/contributor-badge.html
@@ -3,11 +3,11 @@
 {%- else -%}
   {%- assign contributor_badge_entity = site | fetch_contributor: include.id -%}
   {%- assign name = contributor_badge_entity.short_name | default: contributor_badge_entity.name | default: include.id -%}
-  {% if include.small %}
-  <a href="{{ site.baseurl }}/hall-of-fame/{{ include.id }}/" class="contributor-badge contributor-{{ include.id }}">
-    {{ contributor_badge_entity | fetch_entity_avatar:include.id, 36 }}
+  {%- if include.small -%}
+  <a href="{{ site.baseurl }}/hall-of-fame/{{ include.id }}/" class="contributor-badge contributor-badge-small contributor-{{ include.id }}">
+    {{- contributor_badge_entity | fetch_entity_avatar:include.id, 36 -}}
   </a>
-  {% else %}
+  {%- else -%}
   <a href="{{ site.baseurl }}/hall-of-fame/{{ include.id }}/" class="contributor-badge contributor-{{ include.id }}">
     {%- if contributor_badge_entity.orcid -%}<img src="{% link assets/images/orcid.png %}" alt="orcid logo" width="36" height="36"/>{%- endif -%}
     {{ contributor_badge_entity | fetch_entity_avatar:include.id, 36 }}
@@ -16,5 +16,5 @@
   {%- include _includes/contributor-human-icons.html activity=include.activity -%}
   {%- endif -%}
   </a>
-  {% endif %}
+  {%- endif -%}
 {%- endif -%}
diff --git a/_includes/news-card.html b/_includes/news-card.html
@@ -1,4 +1,3 @@
-<article>
 {% assign n = include.news %}
 
 {% if n.cover %}
@@ -18,38 +17,46 @@
  {% assign coverimagealt = "GTN logo with a multi-coloured star and the words Galaxy Training Network" %}
 {% endif %}
 
-<div class="card newsitem">
- <div class="card-header">
-     <a href="{% if n.external %}{{ n.link }}{% else %}{{site.baseurl}}{{n.url}}{% endif %}"><h3 class="card-title">{{n.title}}</h3></a>
-  </div>
- <div class="row no-gutters">
-  <div class="col-sm-5">
-   <img class="card-img newscover" src="{% unless coverimage contains 'http' %}{{site.baseurl}}/{% endunless %}{{coverimage}}" alt="{{ coverimagealt }}" loading="lazy">
-  </div>
-  <div class="col-sm-7">
-   <div class="card-body">
-        <!--<a href="{{site.baseurl}}{{n.url}}"><h4 class="card-title">{{n.title}}</h4></a>-->
-        <div class="text-muted">
-        {{ n.date | date: "%-d %B %Y" }}
+
+<div class="pathwayitem col-md-4">
+    <div class="card d-flex">
+       <a href="{% if n.external %}{{ n.link }}{% else %}{{site.baseurl}}{{n.url}}{% endif %}">
+      <div class="d-flex align-items-center" style="height:200px;">
+      <img class="card-img-top pathwaycover" src="{% unless coverimage contains 'http' %}{{site.baseurl}}/{% endunless %}{{coverimage}}" alt="{{ coverimagealt }}" loading="lazy">
+      </div>
+      </a>
+      <div class="card-body d-flex flex-column">
+        <h5 class="card-title">{{n.title}}</h5>
+        <div class="card-text">
+          {% for id in n.contributions.authorship %}
+            {% include _includes/contributor-badge.html id=id small=true %}
+          {% endfor %}
+          <div class="text-muted">
+            {{ n.date | date: "%-d %B %Y" }}
+          </div>
+
+          <a href="{% if n.external %}{{ n.link }}{% else %}{{site.baseurl}}{{n.url}}{% endif %}">
+
+          {% if n.external %}
+            This is an external post, please follow the link to read it.
+          {% else %}
+            {{ n.excerpt | strip_html }}
+          {% endif %}
+          </a>
+
         </div>
-        {% include _includes/contributors-line.html page=n %}
 
+      </div>
+
+      <div class="card-footer">
         {% for tag in n.tags %}
         {% unless tag == 'already-on-hub' %}
 <span class="label label-default tutorial_tag" style="{{ tag | colour_tag }}">{{ tag  }}</span>
         {% endunless %}
         {% endfor %}
-    <hr/>
-    <p class="card-text">
-      {% if n.external %}
-        This is an external post, please follow the link to read it.
-      {% else %}
-        {{ n.excerpt | strip_html }}
-      {% endif %}
-    </p>
-    <a href="{% if n.external %}{{ n.link }}{% else %}{{site.baseurl}}{{n.url}}{% endif %}" class="btn btn-primary">Full Story</a>
-   </div>
-  </div>
- </div>
+      </div>
+
+    </div>
 </div>
-</article>
+
+
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -774,7 +774,7 @@ blockquote {
         vertical-align: center;
       }
       .card-title{
-        height: 5rem;
+        height: 6rem;
       }
       .card-header {
 	    background: var(--brand-color);
@@ -1220,6 +1220,11 @@ nav[data-toggle='toc'] {
     }
 }
 
+.contributor-badge-small{
+    border: none;
+    padding-right: 0em;
+}
+
 .contributor-badge-inline {
     /* prevent breaking across lines */
     white-space: nowrap;

diff --git a/news.md b/news.md
@@ -7,12 +7,13 @@ Keep an eye on this page for the latest news around the GTN. New tutorials, GTN
 
 Want to add your own news here (e.g. new tutorial, event, publication, anything else training related)? Check out how to do that in [this FAQ]({% link faqs/gtn/gtn_news_create_post.md %})
 
-<div class="newslist">
-{% for n in site.categories['news'] %}
+<div class="pathwaylist row">
 
+{% for n in site.categories['news'] %}
 
 {% include _includes/news-card.html news=n %}
 
 {% endfor %}
+
 </div>