Merge pull request #4276 from shiltemann/pathwaycards

Update Pathways Page
galaxyproject · Jul 13, 2023 · 04bacc5 · 04bacc5
2 parents 3050d8e + 0d78c8e
commit 04bacc5
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 43 deletions.
diff --git a/_includes/pathway-card.html b/_includes/pathway-card.html
@@ -0,0 +1,32 @@
+{% assign path = include.path %}
+
+{% assign coverimage = path.coverimage | default: "/assets/images/GTNLogo1000.png" %}
+{% assign coverimagealt = path.coverimagealt | default: "GTN logo with a multi-coloured star and the words Galaxy Training Network"%}
+
+
+  <div class="pathwayitem col-md-4">
+    <a href="{{site.baseurl}}{{path.url}}">
+    <div class="card d-flex">
+      <div class="d-flex align-items-center" style="height:200px;">
+      {% if path.cover-image %}
+      <img class="pathwaycover card-img-top" src="{{site.baseurl}}/{{path.cover-image}}" alt="{{ path.cover-image-alt }}" loading="lazy">
+      {% else %}
+      <img class="pathwaycover card-img-top" src="{{site.baseurl}}{{coverimage}}" alt="{{ coverimagealt }}" loading="lazy">
+      {% endif %}
+      </div>
+      <div class="card-body d-flex flex-column">
+        <h5 class="card-title">{{path.title}}</h5>
+        <p class="card-text">
+          {{path.description}}
+        </p>
+      </div>
+      <div class="card-footer">
+        {% for tag in path.tags %}
+        <span class="label label-default tutorial_tag" style="{{ tag | colour_tag }}">{{ tag }}</span>
+        {% endfor %}
+      </div>
+    </div>
+    </a>
+  </div>
+
+
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -572,27 +572,39 @@ blockquote {
 	}
 }
 
-.pathway{
+.pathwaylist{
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     justify-content: space-around;
     margin-bottom: 2rem;
 
     .pathwayitem {
-      width: 100%;
       background: transparent;
-      border: 1px solid var(--border-light);
+
+      .card{
+        margin-bottom: 1em;
+      }
+      .card-body{
+        height: 17rem;
+        overflow: hidden;
+      }
+      .card-text{
+        margin: 1rem;
+        vertical-align: center;
+      }
+      .card-title{
+        height: 5rem;
+      }
       .card-header {
-	background: var(--brand-color);
-	border-bottom: 1px solid var(--border-light);
+	    background: var(--brand-color);
+	    border-bottom: 1px solid var(--border-light);
       }
     }
     .pathwaycover {
         width: 100%;
         object-fit: cover;
-        margin-top: auto;
-        margin-bottom: auto;
+        margin-top: 1em;
         background-color: white;
         border-radius: 2rem;;
         padding: 1rem;

diff --git a/learning-pathways/admin-training.md b/learning-pathways/admin-training.md
@@ -1,6 +1,7 @@
 ---
 layout: learning-pathway
 title: Admin Training Course
+type: admin-dev
 description: |
   Learn how to setup, configure, and maintain your own Galaxy server. This learning pathway
   will guide you through all the steps required to setup your own Galaxy server with Ansible,

diff --git a/learning-pathways/genome-annotation-eukaryote.md b/learning-pathways/genome-annotation-eukaryote.md
@@ -3,6 +3,7 @@ layout: learning-pathway
 title: Genome annotation for eukaryotes
 description: |
   Learn how to annotate an eukaryotic genome sequence: identify repeated regions, find the position and function of genes, and even set up a manual curation environment with Apollo.
+type: use
 tags: [genome annotation, eukaryote]
 
 cover-image: assets/images/gga.png
@@ -12,6 +13,8 @@ maintainers:
 funding:
 - erasmusplus
 
+
+
 pathway:
   - section: "Module 1: Introduction"
     description: |

diff --git a/learning-pathways/genome-annotation-prokaryote.md b/learning-pathways/genome-annotation-prokaryote.md
@@ -3,6 +3,7 @@ layout: learning-pathway
 title: Genome annotation for prokaryotes
 description: |
   Learn how to annotate a prokaryotic genome sequence: find the position and function of genes, and even set up a manual curation environment with Apollo.
+type: use
 tags: [genome annotation, prokaryote]
 
 cover-image: assets/images/gga.png

diff --git a/learning-pathways/index.md b/learning-pathways/index.md
@@ -2,46 +2,40 @@
 layout: page
 ---
 
-{% assign pathways = site.pages | where: "layout", "learning-pathway" | sort: "priority", "last" %}
+{% assign pathways_science = site.pages | where: "layout", "learning-pathway" | where: "type", "use" | sort: "priority", "last" %}
+
+{% assign pathways_other = site.pages | where: "layout", "learning-pathway" | where_exp: "item", "item.type != 'use'" | sort: "priority", "last" %}
 
 
 # Learning Pathways
 
 Learning pathways are sets of tutorials curated for you by community experts to form a coherent set of lessons around a topic, building up knowledge as you go. We always recommend to follow the tutorials in the order they are listed in the pathway.
 
+## For Scientists
+
+
 <!-- list all available pathways as cards  -->
-<div class="pathway">
-{% for path in pathways %}
-
-{% assign coverimage = path.coverimage | default: "/assets/images/GTNLogo1000.png" %}
-{% assign coverimagealt = path.coverimagealt | default: "GTN logo with a multi-coloured star and the words Galaxy Training Network"%}
-<div class="card pathwayitem">
- <div class="card-header">
-   <a href="{{site.baseurl}}{{path.url}}"><h3 class="card-title">{{path.title}}</h3></a>
- </div>
- <div class="row no-gutters">
-  <div class="col-sm-5">
-   {% if path.cover-image %}
-   <img class="card-img pathwaycover" src="{{site.baseurl}}/{{path.cover-image}}" alt="{{ path.cover-image-alt }}" loading="lazy">
-   {% else %}
-   <img class="card-img pathwaycover" src="{{site.baseurl}}{{coverimage}}" alt="{{ coverimagealt }}" loading="lazy">
-   {% endif %}
-  </div>
-  <div class="col-sm-7">
-   <div class="card-body">
-   <p></p>
-   {% for tag in path.tags %}
-   <span class="label label-default tutorial_tag" style="{{ tag | colour_tag }}">{{ tag  }}</span>
-    {% endfor %}
-   <hr/>
-   <p class="card-text">
-     {{ path.description }}
-   </p>
-   <a href="{{site.baseurl}}{{path.url}}" class="btn btn-primary">View Learning Pathway</a>
-   </div>
-  </div>
- </div>
+<div class="pathwaylist row">
+
+
+{% for path in pathways_science %}
+
+{% include _includes/pathway-card.html path=path %}
+
+{% endfor %}
+
 </div>
 
+
+## For Teachers, Developers and System Administrators
+
+<!-- list all available pathways as cards  -->
+<div class="pathwaylist row">
+
+{% for path in pathways_other %}
+
+{% include _includes/pathway-card.html path=path %}
+
 {% endfor %}
+
 </div>
diff --git a/learning-pathways/intro-to-galaxy-and-ecology.md b/learning-pathways/intro-to-galaxy-and-ecology.md
@@ -1,6 +1,7 @@
 ---
 layout: learning-pathway
 tags: [beginner]
+type: use
 
 maintainers:
 - yvanlebras

diff --git a/learning-pathways/intro-to-galaxy-and-genomics.md b/learning-pathways/intro-to-galaxy-and-genomics.md
@@ -1,6 +1,7 @@
 ---
 layout: learning-pathway
 tags: [beginner]
+type: use
 
 maintainers:
 - shiltemann

diff --git a/learning-pathways/intro-to-r-and-ml.md b/learning-pathways/intro-to-r-and-ml.md
@@ -1,6 +1,7 @@
 ---
 layout: learning-pathway
 tags: [beginner]
+type: use
 
 maintainers:
 - fpsom

diff --git a/learning-pathways/metagenomics.md b/learning-pathways/metagenomics.md
@@ -1,5 +1,6 @@
 ---
 layout: learning-pathway  # (uncomment this line to activate it)
+type: use
 
 maintainers:
 - bebatut
@@ -54,7 +55,7 @@ pathway:
     description: |
         This module covers the following questions:
         - Which species (or genera, families, ...) are present in my sample?
-        - What are the different approaches and tools to get the community profile of my sample? 
+        - What are the different approaches and tools to get the community profile of my sample?
         - How can we visualize and compare community profiles?
 
         This module will cover taxonomic profiling in theory and also with an example tutorial.
@@ -67,15 +68,15 @@ pathway:
         #description: Application tutorial
 
   #- section: "Module 6: Taxonomic binning"
-  #  description: 
+  #  description:
   #
   #  tutorials:
   #    - name: learner_participation_engagement
   #      topic: metagenomics
 
-  
+
   #- section: "Module 7: Community Biodiversity"
-  #  description: 
+  #  description:
   #
   #  tutorials:
   #    - name: learner_participation_engagement

diff --git a/learning-pathways/pathway-example.md b/learning-pathways/pathway-example.md
@@ -6,6 +6,8 @@ description: |
   Description of the pathway. What will be covered, what are the learning objectives, etc?
   Make this as thorough as possible, 1-2 paragraphs. This appears on the index page that
   lists all the learning paths, and at the top of the pathway page
+
+type: use  # 'use' for science topics, or admin-dev or instructors
 tags: [some, keywords, here ]
 
 cover-image: assets/images/gat.png # optional, define your own cover image for the pathway index page, default is the GTN logo

diff --git a/learning-pathways/train-the-trainers.md b/learning-pathways/train-the-trainers.md
@@ -1,5 +1,6 @@
 ---
 layout: learning-pathway  # (uncomment this line to activate it)
+type: instructors
 
 title: Train the Trainers
 description: |