Merge pull request #350 from CodeYourFuture/feature/pd-tabs

Feature/pd tabs
CodeYourFuture · Nov 3, 2023 · 8127ced · 8127ced
2 parents 6d5ba13 + cfa5442
commit 8127ced
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 62 deletions.
diff --git a/assets/styles/04-components/block.scss b/assets/styles/04-components/block.scss
@@ -45,17 +45,14 @@
 
   .c-block__series--timeline & {
     box-shadow: var(--theme-box-shadow--slim);
-
-    .c-block {
-      box-shadow: none;
-    }
-
-    &__lastmod {
-      display: none;
-    }
-
     &__time {
       font-size: var(--theme-type-size--6);
     }
   }
+
+  &--pd.c-block {
+    box-shadow: none;
+    border: none;
+    padding-bottom: 0;
+  }
 }
diff --git a/assets/styles/04-components/tabs.scss b/assets/styles/04-components/tabs.scss
@@ -2,7 +2,8 @@
   display: block;
   --outset: calc(-1 * var(--theme-spacing--gutter));
   --tabline: 1px;
-  margin: 0 var(--outset) calc(2.5 * var(--outset));
+  margin: 0 var(--outset) var(--theme-spacing--gutter);
+
   &__list {
     display: flex;
   }
@@ -24,7 +25,9 @@
     &:hover,
     &:focus {
       z-index: 2;
-      transform: translateY(3px);
+      transform: translateY(3px) scale(1.01);
+      box-shadow: 0 -2px 0 var(--theme-color--accent);
+      font-weight: 600;
     }
   }
   &__group {
@@ -46,9 +49,15 @@
       opacity: 1;
       z-index: 1;
     }
-  }
-  // a much subtler tab style for module indices so info can be loaded in without overwhelming
-  &--module {
-    margin: 0 0 var(--theme-spacing--6);
+    //not keen on this, might be time to start breaking out these components
+    .c-block__series--timeline & {
+      margin-bottom: var(--outset);
+      box-shadow: var(--theme-box-shadow--top);
+    }
+    &--pd {
+      .c-block__series--timeline & {
+        box-shadow: var(--theme-box-shadow--slim);
+      }
+    }
   }
 }
diff --git a/layouts/partials/block/issue.html b/layouts/partials/block/issue.html
@@ -3,7 +3,7 @@
 {{ $response := getJSON $blockData.api $blockData.headers }}
 
 {{ if $response }}
-  <section class="c-block">
+  <section class="c-block c-block--{{ $blockData.type }}">
     <header class="c-block__header">
       <h2
         class="c-block__title e-heading__2"

diff --git a/layouts/partials/block/local.html b/layouts/partials/block/local.html
@@ -2,7 +2,7 @@
 {{ $block := .Page.Site.GetPage $blockData.api }}
 
 
-<section class="c-block">
+<section class="c-block c-block--{{ $blockData.type }}">
   <header class="c-block__header">
     <h2 class="c-block__title e-heading__2" id="{{ $blockData.name |urlize }}">
       {{ $block.Title }}

diff --git a/layouts/partials/block/pd.html b/layouts/partials/block/pd.html
@@ -1,7 +1,13 @@
 {{ $blockData := .Page.Scratch.Get "blockData" }}
 {{ $response := getJSON $blockData.api $blockData.headers }}
-
+{{ $block := $blockData }}
+{{ $tab_set_id := $blockData.name | anchorize}}
 {{ if $response }}
+{{/*  Here we are decoding the content from the base64 readme API
+  and turning it back into a Hugo doc with front matter
+An improvement on this would likely be to 
+find out how to make Hugo recognise this as a valid Hugo doc directly 
+Have a crack!  */}}
   {{ $decodedContent := $response.content | base64Decode }}
   {{ $placeholder := "UNIQUE_PLACEHOLDER" }}
   {{ $decodedContentWithPlaceholder :=
@@ -15,60 +21,77 @@
   }}
   {{ $markdownContent := index $contentParts 1 }}
   {{ $parsedFrontMatter := $frontMatter | transform.Unmarshal }}
+
   {{/* We get PD times from the font-matter in the PD CMS, not the block's own front-matter */}}
   {{ .Page.Scratch.SetInMap "blockData" "time" $parsedFrontMatter.time }}
-  {{ $block := $parsedFrontMatter | default $blockData }}
+  {{ $block = $parsedFrontMatter | default $blockData }}
 
-
-  <section class="c-block c-block--pd">
+  <section class="c-block c-block--{{$blockData.type}}">
     <header class="c-block__header">
       <h2
         class="c-block__title e-heading__2"
         id="{{ $blockData.name |urlize }}">
-        <a href="{{ $response.html_url }}">{{ $parsedFrontMatter.title }} 🔗</a>
+        <a href="{{ $response.html_url }}">{{ $block.title }} 🔗</a>
       </h2>
       {{ partial "time.html" . }}
 
     </header>
 
-    <section class="c-copy">{{ $markdownContent | markdownify }}</section>
+    {{ with $markdownContent }}<section class="c-copy">{{ . | markdownify }}</section>{{ end}}
+
+
+{{/*  These tabs are based on tabs.html and provision the same web component */}}
+
+  <tab-panels class="c-tabs c-tabs--pd">
+    <div class="c-tabs__list" id="{{$tab_set_id }}" role="tablist">
+      <button data-toggle="tab" id="tab-label-intro" class="c-tabs__tab is-active e-heading__5" role="tab" aria-controls="{{$tab_set_id }}-intro" aria-selected="true">👉🏽 PD Session</button>
+      {{ range $index, $item := $block.exercises}}
+      <button data-toggle="tab" id="tab-label-{{$item.name | anchorize}}" class="c-tabs__tab e-heading__5" role="tab" aria-controls="{{$tab_set_id }}-{{ $item.name | anchorize }}" aria-selected="false">🧩 {{add 1 $index}}) {{ trim $item.name " "  | truncate 20 }}</button>
+        {{- end -}}
+      {{- end -}}
+    </div>
+    <div class="c-tabs__group" id="{{ $tab_set_id }}">
+      {{/*  First tab is all the setup  */}}
+    <div id="{{$tab_set_id }}-intro" class="c-tabs__panel c-tabs__panel--pd is-active" role="tabpanel" aria-labelledby='tab-label-intro'>
+      {{ with $block.objectives }}
+        <details class="c-objectives">
+          <summary>
+            <h3 class="c-objectives__title e-heading__5">Learning Objectives</h3>
+          </summary>
+          {{ partial "objectives/block.html" . }}
+        </details>
+      {{ end }}
+      {{ with $block.prep }}
+        <section class="c-copy">
+          <h3>Preparation</h3>
+          <div class="c-copy__node">{{ . | markdownify }}</div>
+        </section>
+      {{ end }}
+      {{ with $block.introduction }}
+        <section class="c-copy">
+          <h3>Introduction</h3>
+          <div class="c-copy__node">{{ . | markdownify }}</div>
+        </section>
+      {{ end }}
+    </div>
+
 
-    {{ with $parsedFrontMatter.objectives }}
-      <details class="c-objectives">
-        <summary>
-          <h3 class="c-objectives__title e-heading__5">Learning Objectives</h3>
-        </summary>
-        {{ partial "objectives/block.html" . }}
-      </details>
-    {{ end }}
-    {{ with $parsedFrontMatter.prep }}
-      <section class="c-copy">
-        <h3>Preparation</h3>
-        <div class="c-copy__node">{{ . | markdownify }}</div>
-      </section>
-    {{ end }}
-    {{ with $parsedFrontMatter.introduction }}
-      <section class="c-copy">
-        <h3>Introduction</h3>
-        <div class="c-copy__node">{{ . | markdownify }}</div>
-      </section>
-    {{ end }}
-    {{ with $parsedFrontMatter.exercises }}
-      <section class="c-copy">
-        <h3>Exercises</h3>
-        {{ range . }}
-          <section class="c-note c-note--exercise">
-            <h4 class="c-note__title e-heading e-heading__4">{{ .name }}</h4>
-            <div class="c-note__text">
-              <p>
-                <strong>Goal: </strong>{{ .goal | markdownify }}
-                {{ with .time }}({{ . }} minutes){{ end }}
-              </p>
-              {{ .content | markdownify }}
+    {{/*  Now we go to range over exercises  */}}
+      {{ with $block.exercises }}
+          {{ range . }}
+          {{ $tab_set_id := $tab_set_id }}
+            <div id="{{$tab_set_id }}-{{ .name | anchorize }}" class="c-tabs__panel c-tabs__panel--pd" role="tabpanel" aria-labelledby='tab-label-{{.name | anchorize}}'>
+
+                <h4 class="e-heading e-heading__4">{{ .name }}</h4>
+                  <p>🎯 
+                    <strong>Goal: </strong>{{ .goal | markdownify }}
+                    {{ with .time }}({{ . }} minutes){{ end }}
+                  </p>
+                  {{ .content | markdownify }}
+
             </div>
-          </section>
-        {{ end }}
-      </section>
-    {{ end }}
-  </section>
+          {{ end }}
+      </div>
+  </tab-panels>
+</section>
 {{ end }}
diff --git a/layouts/partials/block/readme.html b/layouts/partials/block/readme.html
@@ -2,7 +2,7 @@
 {{ $response := getJSON $blockData.api $blockData.headers }}
 
 {{ if $response }}
-  <section class="c-block">
+  <section class="c-block c-block--{{ $blockData.type }}">
     <header class="c-block__header">
       <h2
         class="c-block__title e-heading__2"

diff --git a/layouts/partials/block/youtube.html b/layouts/partials/block/youtube.html
@@ -1,5 +1,5 @@
 {{ $blockData := .Page.Scratch.Get "blockData" }}
-<section class="c-block c-block--youtube">
+<section class="c-block c-block--{{ $blockData.type }}">
   {{ if not $blockData.isShortcode }}
     <h2
       class="c-block__title e-heading__2 is-invisible"