Merge pull request #4987 from galaxyproject/bilberry-catfish

some mobile/dark mode fixes

_includes/funding-statement.md

@@ -1,10 +1,6 @@
-{% if include.contributions.funding %}
-<div markdown="1">
-<h2 id="funding">{{locale['references']| default: "Funding" }}</h2>
-<p>These individuals or organisations provided funding support for the development of this resource</p>
-
+{% if include.funders %}
 <div class="d-flex flex-wrap">
-{% for id in include.contributions.funding %}
+{% for id in include.funders %}
 	{% assign name = site.data.contributors[id].name | default: id -%}
 	<a href="{{ site.baseurl }}/hall-of-fame/{{ id }}/" class="funder-badge">
 		{% assign pfo = site.data.funders[id] | default: site.data.organisations[id] | default: site.data.contributors[id] | default: nil %}
@@ -27,5 +23,4 @@
 	</a>
 {% endfor %}
 </div>
-</div>
 {% endif %}

_includes/tutorial_list.html

@@ -1,6 +1,7 @@
 {% assign page = include.page %}
+{% assign responsive = include.responsive | default:true %}
 
-<table class="table table-responsive table-striped">
+<table class="table table-responsive table-striped tutorials-list">
   <thead>
     <tr>
       {% if page.layout == 'event' and page.async != true %}
@@ -21,7 +22,7 @@
       {% endif %}
     </tr>
   </thead>
-  <tbody class="list tutorials-list">
+  <tbody class="list">
 
   {% assign subtopic_materials = include.sub[1].materials | default: include.sub %}
   {% for material in subtopic_materials %}
@@ -64,7 +65,7 @@
             {% endif %}
             </div>
 
-            <div class="duplicate">
+            <div class="duplicate" style="display: none;">
               <div class="btn-group" role="group" aria-label="Supporting materials for this resource">
               {% include _includes/resource-slides.html material=material topic=topic.name %}
               {% include _includes/resource-handson.html material=material topic=topic.name %}
@@ -101,5 +102,21 @@
   </tbody>
 </table>
 
-
-
+{% if responsive %}
+<style>
+@media (max-width:767px) {
+    table.table.table-responsive.tutorials-list  {
+        display: inline-table;
+    }
+    .tutorials-list tr th:not(:first-child) {
+        display: none;
+    }
+    .tutorials-list tr td:not(:first-child) {
+        display: none;
+    }
+    .tutorials-list .duplicate {
+        display: unset !important;
+    }
+}
+</style>
+{% endif %}

_layouts/event.html

@@ -29,8 +29,8 @@ <h1>{{ event.title }}</h1>
     </div>
     {% endif %}
 
-    <div class="row">
-	    <div class="col-md-9">
+    <div class="zrow">
+	    <div class="zcol-md-9">
 
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item" role="presentation">
@@ -94,7 +94,7 @@ <h3 id="Organisers">Organisers & Instructors</h3>
 
 
 	{% if event.contributions.funding %}
-	{% include _includes/funding-statement.md contributions=page.contributions %}
+	{% include _includes/funding-statement.md funders=page.contributions.funding %}
 	{% endif %}
 
 </section>
@@ -125,7 +125,7 @@ <h3 id="{{ section.section | slugify }}">{{ section.section }}</h3>
 
 	{% if section.tutorials %}
         {% assign material_list = site | convert_to_material_list: section.tutorials %}
-	{% include _includes/tutorial_list.html sub=material_list page=page %}
+	{% include _includes/tutorial_list.html sub=material_list page=page responsive=false %}
 	{% endif %}
     {% endfor %}
     {% endif %}
@@ -144,7 +144,7 @@ <h3>Get set up for the course!</h3>
     <div class="card setup-card">
 	  <div class="row no-gutters">
 		<div class="col-sm-3">
-		  <img src="{% link assets/images/galaxylogo.png %}" class="card-img" alt="Galaxy logo" style="width: 70%">
+		  <img src="{% link assets/images/galaxylogo.png %}" class="card-img" alt="Galaxy logo" style="max-height: 10em">
 		</div>
 		<div class="col-sm-9">
 		  <div class="card-body">
@@ -174,7 +174,7 @@ <h5 class="card-title">Create a Galaxy Account</h5>
     <div class="card setup-card">
 	  <div class="row no-gutters">
 		<div class="col-sm-3">
-		  <img src="{% link assets/images/galaxy-for-trainers.svg %}" class="card-img" alt="TIaaS" style="width:70%">
+		  <img src="{% link assets/images/galaxy-for-trainers.svg %}" class="card-img" alt="cartoon of a person standing in front of a blackboard" style="max-height: 10em">
 		</div>
 		<div class="col-sm-9">
 		  <div class="card-body">
@@ -208,7 +208,7 @@ <h5 class="card-title">Join Galaxy Training Group (TIaaS)</h5>
     <div class="card setup-card">
 	  <div class="row no-gutters">
 		<div class="col-sm-3">
-		  <img src="{% link assets/images/galaxy-for-developers.svg %}" class="card-img" alt="Galaxy logo">
+		  <img src="{% link assets/images/galaxy-for-developers.svg %}" class="card-img" alt="cartoon of a person leaning against a laptop" style="max-height:10em">
 		</div>
 		<div class="col-sm-9">
 		  <div class="card-body">
@@ -377,7 +377,7 @@ <h3>Promote the Event</h3>
 </div>
 
 	</div> <!-- col-md-9 -->
-	<div class="col-md-3">
+	<div class="zcol-md-3">
 
         <img class="event-image" src="{{site.baseurl}}/{{event.cover-image | default: '/assets/images/GTN-event-logo.png' }}" alt="{{event.cover-image-alt | default: 'event logo' }}">
         {% assign enddate = event.date_end | default: event.date_start %}
@@ -470,4 +470,27 @@ <h3>Promote the Event</h3>
 :target {
     scroll-margin-top: 24em;
 }
+
+
+.zrow {
+	display: grid;
+	grid-template-rows: 1fr;
+	gap: 1em 1em;
+	grid-template-columns: repeat(4, 1fr);
+	grid-template-areas:
+	  "Main Main Main Meta";
+}
+@media (max-width: 768px) {
+	.zrow {
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-areas:
+		  "Meta"
+		  "Main";
+	}
+}
+
+.zcol-md-9 { grid-area: Main; }
+.zcol-md-3 { grid-area: Meta; }
+
+
 </style>

_layouts/learning-pathway.html

@@ -73,10 +73,10 @@ <h2 id="editorial-board">Editorial Board</h2>
 	{% include _includes/contributor-list.html contributors=editorial_board badge=true %}
 
 	{% if pathway.funding %}
-	<h2 id="funders">Funders</h2>
-	<p>This material was funded by:</p>
+	<h2 id="funding">{{locale['references']| default: "Funding" }}</h2>
+	<p>These individuals or organisations provided funding support for the development of this resource</p>
 	{% assign funders = pathway.funding | sorted %}
-	{% include _includes/contributor-list.html contributors=funders badge=true %}
+	{% include _includes/funding-statement.md funders=funders %}
 	{% endif %}
 
 </section>

_layouts/news.html

@@ -55,7 +55,11 @@ <h2 id="bibliography">{{locale['references']| default: "References" }}</h2>
     {% endif %}
 
     {% if page.contributions %}
-    {% include _includes/funding-statement.md contributions=page.contributions %}
+    {% if page.contributions.funding %}
+	<h2 id="funding">{{locale['references']| default: "Funding" }}</h2>
+	<p>These individuals or organisations provided funding support for the development of this resource</p>
+    {% include _includes/funding-statement.md funders=page.contributions.funding %}
+    {% endif %}
     {% endif %}
   </div>
 

_layouts/slides-plain.html

@@ -92,6 +92,11 @@ <h2 id="bibliography">{{locale['references']| default: "References" }}</h2>
 {% bibliography --cited %}
 {% endif %}
 
+
 {% if page.contributions %}
-{% include _includes/funding-statement.md contributions=page.contributions %}
+{% if page.contributions.funding %}
+<h2 id="funding">{{locale['references']| default: "Funding" }}</h2>
+<p>These individuals or organisations provided funding support for the development of this resource</p>
+{% include _includes/funding-statement.md funders=page.contributions.funding %}
+{% endif %}
 {% endif %}

_layouts/topic.html

@@ -90,10 +90,10 @@ <h2 id="contributors">Contributors</h2>
     {% assign contributors_list_sorted = topic_material | identify_contributors: site %}
     {% include _includes/contributor-list.html contributors=contributors_list_sorted badge=true %}
 
-    <h2 id="funders">Funders</h2>
-    <p>This material was funded by:</p>
+	<h2 id="funding">{{locale['references']| default: "Funding" }}</h2>
+	<p>These individuals or organisations provided funding support for the development of this resource</p>
     {% assign funders_list_sorted = topic_material | identify_funders: site %}
-    {% include _includes/contributor-list.html contributors=funders_list_sorted badge=true %}
+    {% include _includes/funding-statement.md funders=funders_list_sorted %}
 
     {% if topic.references %}
     <h2 id="references">References</h2>

_layouts/tutorial_hands_on.html

@@ -424,8 +424,10 @@ <h1>{{locale['citing-tutorial'] | default: "Citing this Tutorial"}}</h1>
                    </p>
                 </blockquote>
 
+		<h2 id="funding">{{locale['references']| default: "Funding" }}</h2>
+		<p>These individuals or organisations provided funding support for the development of this resource</p>
                 {% if page.contributions %}
-                {% include _includes/funding-statement.md contributions=page.contributions %}
+                {% include _includes/funding-statement.md funders=page.contributions.funding %}
                 {% endif %}
 
 

assets/css/main.scss

@@ -710,17 +710,21 @@ blockquote {
     white-space: pre-wrap;
 }
 
-.card:not(.setup-card){
+.card{
 	background: transparent;
 	border: 1px solid var(--border-light);
 	.card-title {
-		background: var(--brand-color);
-		border-bottom: 1px solid var(--border-light);
-		padding: 1.25rem;
 		color: var(--brand-color-contrast);
 		// margin-left: -15px; // BS has a 15px margin on cards, this makes the card title fill the card.
 		// margin-right: -15px;
 	}
+}
+
+.card:not(.setup-card){
+	.card-title {
+		background: var(--brand-color);
+		padding: 1.25rem;
+	}
 
 	.card-body {
 		padding: 0em;
@@ -1719,31 +1723,6 @@ figure > a[target="_blank"]::after {
 	content: unset;
 }
 
-.tutorials-list {
-/* Big */
-@media (min-width:768px) {
-    .duplicate {
-        display: none;
-    }
-}
-
-/* Skinny */
-@media (max-width:767px) {
-    table.table.table-responsive {
-        display: inline-table;
-    }
-    tr th:not(:first-child) {
-        display: none;
-    }
-    tr td:not(:first-child) {
-        display: none;
-    }r
-    .duplicate {
-        display: unset;
-    }
-}
-}
-
 // For the git-gat learning pathway boxes
 #git-gat-timeline {
     display: flex;
@@ -1852,25 +1831,42 @@ section.event {
 
 }
 .nav-tabs {
+	// Tabs default to a text colour that isn't overridden somewhere else.
+
 	.nav-item {
 		margin-bottom: 0;
 		padding-bottom: 0;
-	}
-
-	button.nav-link{
-		border: none;
-		background: none;
-		font-size: 1.2rem;
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
+		border: 1px solid transparent;
 
 		&:hover {
 			color: var(--hyperlink-hover);
+			border: 1px solid var(--hyperlink-hover);
 		}
 
-		&.active {
-			background: var(--overview-color);
-			color: white;
+		button.nav-link{
+			color: var(--text-color);
+			cursor: pointer;
+			background: none;
+			font-size: 1.2rem;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+
+			&:hover {
+				color: var(--hyperlink-hover);
+			}
+
+			&.active {
+				background: var(--overview-color);
+				border: 1px solid var(--overview-color);
+				color: white;
+			}
 		}
 	}
+
+}
+
+body[data-brightness="dark"] {
+	img.invert-safe {
+		filter: invert(1);
+	}
 }

faqs/gtn/what-is-a-learning-pathway.md

@@ -7,7 +7,7 @@ contributors: [shiltemann]
 ---
 
 <div style="display:inline-block;vertical-align:top;width:10%">
-<img src="{{site.baseurl}}/assets/images/learning-pathway.png" alt="A graphic depicting a winding path from a start symbol to a trophy, with tutorials along the way" />
+<img src="{{site.baseurl}}/assets/images/learning-pathway.png" alt="A graphic depicting a winding path from a start symbol to a trophy, with tutorials along the way" class="invert-safe" />
 </div>
 <div  style="display:inline-block; margin-left: 2em; width:70%">
 We recommend you follow the tutorials in the order presented on this page. They have been selected to fit together and build up your knowledge step by step. If a lesson has both slides and a tutorial, we recommend you start with the slides, then proceed with the tutorial.