Overview: Link to learning objectives as well as prep (#875)

* Rewrap to one line * Qualify local context with $prep * Remove with block * Add learning objective link * little tweak to make this clearer to me * add in a bunch of comments I just keep forgetting this isn't looping over sprints so I presume others will too * time for an actual mini layout * Update org-cyf-itp/content/overview/_index.md Co-authored-by: Daniel Wagner-Hall <[email protected]> --------- Co-authored-by: Sally McGrath <[email protected]>
CodeYourFuture · Sep 3, 2024 · 4130665 · 4130665
1 parent 3290ce2
commit 4130665
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 47 deletions.
diff --git a/common-theme/assets/styles/02-variables/colors.scss b/common-theme/assets/styles/02-variables/colors.scss
@@ -46,8 +46,8 @@
   // backdrop
   --theme-color--block: hsla(var(--hsl), var(--alpha));
   --theme-color--outline: hsl(var(--hsl), 1);
-  --theme-color--backdrop-from: hsl(var(--hsl) / 0.25);
-  --theme-color--backdrop-to: hsl(var(--hsl) / 0.2);
+  --theme-color--backdrop-from: hsla(var(--hsl), 0.25);
+  --theme-color--backdrop-to: hsla(var(--hsl), 0.2);
 
   // signals
 

diff --git a/common-theme/assets/styles/03-elements/lists.scss b/common-theme/assets/styles/03-elements/lists.scss
@@ -0,0 +1,13 @@
+ul[class],
+ol[class],
+li[class] {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+ul.e-list,
+ol.e-list {
+  margin: revert;
+  line-height: 1.5;
+}
diff --git a/common-theme/assets/styles/03-elements/misc-phrasing.scss b/common-theme/assets/styles/03-elements/misc-phrasing.scss
@@ -5,13 +5,6 @@
 p {
   line-height: 1.5;
 }
-ul[class],
-ol[class],
-li[class] {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
 
 blockquote {
   font-size: var(--theme-type-size--4);

diff --git a/common-theme/assets/styles/04-components/overview.scss b/common-theme/assets/styles/04-components/overview.scss
@@ -0,0 +1,25 @@
+.c-overview {
+  display: grid;
+  // smallest gaps here so this view is very skimmable
+  --gap: var(--theme-spacing--1);
+  gap: var(--gap);
+  padding: var(--gap) var(--gap) var(--gap) 0;
+  max-width: var(--theme-spacing--linelength);
+
+  &__module {
+    font-weight: 600;
+    color: var(--theme-color--ink);
+    background-color: var(--theme-color--block);
+  }
+  &__subheading,
+  &__nav {
+    display: flex;
+    gap: var(--gap);
+    justify-content: space-between;
+  }
+  &__subheading {
+    @media (max-width: $c-min) {
+      flex-flow: row wrap;
+    }
+  }
+}
diff --git a/common-theme/layouts/_default/overview.html b/common-theme/layouts/_default/overview.html
@@ -3,47 +3,72 @@
 
   {{ partial "page-header.html" . }}
 
-  {{ .Page.Content }}
+  {{ with .Page.Content }}<section class="c-copy">{{ . }}</section>{{ end }}
   {{ $overviewMenu := .Page.Params.overview_menu }}
   {{ if not $overviewMenu }}
     {{ errorf "You must define a menu in your overview_menu front matter param" }}
   {{ end }}
+
   {{ range index .Site.Menus $overviewMenu }}
-    {{ $moduleURL := .URL }}
-    {{ $moduleTitle := .Page.Params.Title }}
-    <!-- We lazily show the module title only if there's actual content under it.-->
-    {{ $hasShownModuleTitle := false }}
-
-    {{ range where $site.Pages "Section" .Page.Section }}
-      {{ $thisSection := .Section }}
+    <section class="c-overview">
+      {{/* ===========================
+        for each module in the menu
+        ==============================
+      */}}
+      {{ $moduleURL := .URL }}
+      {{ $moduleTitle := .Page.Params.Title }}
+      {{ $moduleEmoji := .Page.Params.Emoji }}
+      {{/*  <!-- We lazily show the module title only if there's actual content under it.-->  */}}
+      {{ $hasShownModuleTitle := false }}
+      {{ range where $site.Pages "Section" .Page.Section }}
+        {{/* ==========================================
+          for each page in each sprint in the module <= this isn't looping over the sprints, it's a level higher
+          =============================================
+        */}}
+          {{ $thisSection := .Section }}
+          {{ if or (not .Params.Theme) (not (in .Params.menu_level "module")) }}
+            {{ continue }}
+          {{ end }}
+          {{ $themePage := . }}
+          {{ $relevantBlocksPage := or .Params.blocks_page_for_overview "prep" }}
+          {{/* this is the same strategy used on success page. Look there for how to add extra pages */}}
+          {{ $prep := .Site.GetPage (printf "%sprep/index.md" .CurrentSection.RelPermalink) }}
+          {{ $success := .Site.GetPage (printf "%ssuccess/index.md" .CurrentSection.RelPermalink) }}
+          {{ if not $hasShownModuleTitle }}
+            <h3 class="c-overview__module e-heading__4">
+              {{ $moduleEmoji }}
+              <a href="{{ $moduleURL }}">{{ $moduleTitle }}</a>
+            </h3>
+            {{ $hasShownModuleTitle = true }}
 
-      {{ if or (not .Params.Theme) (not (in .Params.menu_level "module")) }}
-        {{ continue }}
-      {{ end }}
-      {{ $themePage := . }}
-      {{ $relevantBlocksPage := or .Params.blocks_page_for_overview "prep" }}
-      {{/* this is the same strategy used on success page. Look there for how to add extra pages */}}
-      {{ $prep := .Site.GetPage (printf "%sprep/index.md"
-        .CurrentSection.RelPermalink)
-      }}
-      {{ with $prep }}
-        {{ if not $hasShownModuleTitle }}
-          <h4><a href="{{ $moduleURL }}">{{ $moduleTitle }}</a></h4>
-          {{ $hasShownModuleTitle = true }}
-        {{ end }}
-        <h5>
-          <a href="{{ $prep.Permalink }}">{{ $themePage.Params.Theme }}</a>
-        </h5>
-        <ol>
-          {{ range .Params.blocks }}
-            {{ $block := ($site.GetPage .src) }}
-            {{ if or $block.Params.hide_from_overview (strings.Contains .src "https:") }}
-              {{ continue }}
-            {{ end }}
-            <li>{{ $block.Title }}</li>
           {{ end }}
-        </ol>
+          <div class="c-overview__subheading">
+          <h4 class="c-overview__sprint e-heading__5">
+            {{ $themePage.Params.Emoji |default "⏱️"}}
+            <a href="{{ .CurrentSection.RelPermalink }}"
+              >{{ $themePage.Params.Theme }}</a
+            >
+          </h4>
+          <nav class="c-overview__nav">
+            <a class="e-button" href="{{ $success.Permalink }}"
+              >✅ Objectives</a
+            >
+            <a class="e-button" href="{{ $prep.Permalink }}">🧑🏾‍💻 Prep</a>
+          </nav>
+          </div>
+         {{ with $prep.Params.blocks}} 
+         <ol class="c-overview__list">
+            {{ range $prep.Params.blocks }}
+              {{ $block := ($site.GetPage .src) }}
+              {{ if or $block.Params.hide_from_overview (strings.Contains .src "https:") }}
+                {{ continue }}
+              {{ end }}
+              <li>{{ $block.Title }}</li>
+            {{ end }}
+          </ol>
+         {{end}}
       {{ end }}
-    {{ end }}
+      </section>
   {{ end }}
+    </section>
 {{ end }}
diff --git a/org-cyf-itp/content/overview/_index.md b/org-cyf-itp/content/overview/_index.md
@@ -2,14 +2,15 @@
 title="Course overview"
 layout="overview"
 overview_menu="programming"
+emoji="🦉"
 +++
 
-## Objective
+### Objective
 
-The objective of this course is to train people with no prior software development experience to get a good job in technology.
+The objective of this course is to give people with no prior software development experience an introduction to programming and thinking about data. Common next-steps after this course are to get an entry level job in tech or IT, or to continue learning more advanced software engineering techniques to prepare for a software engineering job.
 
-Primarily this is achieved by teaching programming concepts using JavaScript (both client-side and server-side).
+Primarily this is achieved by teaching programming concepts with JavaScript, and data concepts with SQL.
 
 A pre-requisite of this course is having completed [Code Your Future's Intro to Digital course](https://codeyourfuture.io/itc/) which teaches the basics of HTML and CSS.
 
-## Modules
+### Modules