Tabs for showreels

vvvv · May 3, 2024 · a3c76dc · a3c76dc
1 parent 355e030
commit a3c76dc
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 10 deletions.
diff --git a/assets/scss/_showcase.scss b/assets/scss/_showcase.scss
@@ -62,8 +62,16 @@
 
   button
   {
-    background: inherit;
+    // background: inherit;
     border: none;
+    background-color: #333;
+    color: #bbb;
+
+    &.active
+      {
+        color: #333;
+        background-color: #ddd;
+      }
   }
 
   .carousel-control-prev

diff --git a/config.toml b/config.toml
@@ -137,9 +137,15 @@ blog = '/blog/:sections[1]/:slug'
 
 		[params.Showcase]
 		headline = "Showcase"
-		showreelHeadline = "Showreel 2018 - 2024"
-		showreelSubline = "Works in this reel were realized in the past ~6 years and thus include both vvvv beta as well as pure vvvv gamma projects."
-		vimeo = 930568091
+			[params.Showcase.Showreel2]
+			title = "2018 - 2024"
+			alt = "Works in this reel were realized in the past ~6 years and thus include both vvvv beta as well as pure vvvv gamma projects."
+			vimeo = 930568091
+
+			[params.Showcase.Showreel1]
+			title = "2002 - 2019"
+			alt = "Projects in this showreel were realized mostly with vvvv beta within the past few years."
+			vimeo = 371511910
 
 		[params.Blog]
 		Title = "Blog"

diff --git a/layouts/partials/showcase.html b/layouts/partials/showcase.html
@@ -43,21 +43,40 @@ <h2 class="section-heading">{{ .headline }}</h2>
 
             </div>
         </div>
+    {{ with .Site.Params.Showcase }}
         <div class="row justify-content-center mb-3">
             <div class="col-11 col-xl-9">
                 <div class="row">
                     <div class="col d-flex">
-                        <div class="label py-1 px-2 text-center">Showreel</div>
+                        <div class="label py-1 px-2 text-center">Showreels</div>
                     </div>
                 </div>
             </div>
-        </div>
-    {{ with .Site.Params.Showcase }}
-        <div class="row mt-2 px-3 justify-content-center">
-            <div class="col-11 col-xl-9 mx-2 text-center px-0 mediaShadow">
-                {{ partial "vimeo" .vimeo }}
+            <div class="col-11 col-xl-9 mt-2">
+                <ul class="nav nav-pills" id="showreel-pills" role="tablist">
+                    {{ with .Showreel2}}
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link active mr-2" href="#showreel-2" data-toggle="pill" data-target="#showreel-2" role="tab" aria-controls="showreel-2" aria-selected="true" alt="{{ .alt }}">{{ .title }}</button >
+                        </li>
+                    {{ end }}
+                    {{ with .Showreel1}}
+                        <li class="nav-item" role="presentation">
+                            <button class="nav-link" href="#showreel-1" data-toggle="pill" data-target="#showreel-1" role="tab" aria-controls="showreel-1" aria-selected="false" alt="{{ .alt }}">{{ .title }}</button >
+                        </li>
+                    {{ end }}
+                </ul>
             </div>
         </div>
+        <div class="row mt-2 px-3 justify-content-center" id="showreel-content">
+            <div class="tab-content col-11 col-xl-9 mx-2 text-center px-0">
+                <div class="mediaShadow tab-pane fade show active" id="showreel-2" role="tabpanel" aria-labelledby="pills-showreel2-tab">
+                    {{ partial "vimeo" .Showreel2.vimeo }}
+                </div>
+                <div class="mediaShadow tab-pane fade" id="showreel-1" role="tabpanel" aria-labelledby="pills-showreel1-tab">
+                    {{ partial "vimeo" .Showreel1.vimeo }}
+                </div>
+            </div> 
+        </div>
     {{ end }}
     </div>
 </section>