Merge pull request #4967 from galaxyproject/akita-turtle

Fix slide/youtube selector when included multiple times
galaxyproject · May 29, 2024 · 4e12291 · 4e12291
2 parents 342364a + 2cf0c36
commit 4e12291
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 25 deletions.
diff --git a/_includes/slides-youtube-selector.html b/_includes/slides-youtube-selector.html
@@ -1,19 +1,19 @@
 <blockquote class="agenda">
 	<div class="box-title hands-on-title" id="slides-{{ include.slides }}">{{ include.title }}</div>
 	<p class="text-muted">This content is available in multiple, equivalent formats. Choose your preferred format below.</p>
-<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
+<ul class="nav nav-tabs" id="{{include.id}}-pills-tab" role="tablist">
   <li class="nav-item" role="presentation">
-    <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Teacher Recording</button>
+    <button class="nav-link active" id="{{include.id}}-pills-home-tab" data-toggle="pill" data-target="#{{include.id}}-pills-home" type="button" role="tab" aria-controls="{{include.id}}-pills-home" aria-selected="true">Teacher Recording</button>
   </li>
   <li class="nav-item" role="presentation">
-    <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Slides</button>
+    <button class="nav-link" id="{{include.id}}-pills-profile-tab" data-toggle="pill" data-target="#{{include.id}}-pills-profile" type="button" role="tab" aria-controls="{{include.id}}-pills-profile" aria-selected="false">Slides</button>
   </li>
   <li class="nav-item" role="presentation">
-    <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Plain Text</button>
+    <button class="nav-link" id="{{include.id}}-pills-contact-tab" data-toggle="pill" data-target="#{{include.id}}-pills-contact" type="button" role="tab" aria-controls="{{include.id}}-pills-contact" aria-selected="false">Plain Text</button>
   </li>
 </ul>
-<div class="tab-content" id="pills-tabContent">
-  <div class="tab-pane show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
+<div class="tab-content" id="{{include.id}}-pills-tabContent">
+  <div class="tab-pane show active" id="{{include.id}}-pills-home" role="tabpanel" aria-labelledby="{{include.id}}-pills-home-tab">
     <div class="embed-responsive embed-responsive-16by9">
     <iframe class="embed-responsive-item"
       credentialless
@@ -28,7 +28,7 @@
       loading="lazy"></iframe>
     </div>
   </div>
-  <div class="tab-pane" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
+  <div class="tab-pane" id="{{include.id}}-pills-profile" role="tabpanel" aria-labelledby="{{include.id}}-pills-profile-tab">
     <a href="{{ site.baseurl }}/{{ include.slides }}/slides.html">Open in new tab</a><br/>
     <div class="embed-responsive embed-responsive-16by9">
     <iframe class="embed-responsive-item"
@@ -38,7 +38,7 @@
       loading="lazy"></iframe>
     </div>
   </div>
-  <div class="tab-pane" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
+  <div class="tab-pane" id="{{include.id}}-pills-contact" role="tabpanel" aria-labelledby="{{include.id}}-pills-contact-tab">
     <a href="{{ site.baseurl }}/{{ include.slides }}/slides-plain.html">Open in new tab</a><br/>
     <div class="embed-responsive embed-responsive-16by9">
     <iframe class="embed-responsive-item"

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -1855,27 +1855,32 @@ section.event {
 	}
 
 	.nav-tabs {
-		.nav-item {
-			margin-bottom: 0;
-			padding-bottom: 0;
+		button.nav-link {
+			font-weight: 800;
 		}
+	}
 
-		button.nav-link{
-			border: none;
-			background: none;
-			font-size: 1.2rem;
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-			font-weight: 800;
+}
+.nav-tabs {
+	.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;
 
-			&:hover {
-				color: var(--hyperlink-hover);
-			}
+		&:hover {
+			color: var(--hyperlink-hover);
+		}
 
-			&.active {
-				background: var(--overview-color);
-				color: white;
-			}
+		&.active {
+			background: var(--overview-color);
+			color: white;
 		}
 	}
 }