🆕 💄 layouts: Add dpg-report layout (see unicef/coach#1)

This commit creates a new custom layout for DPG report cards in the UNICEF Inventory theme. DPG report cards are at-a-glance views of a Venture Fund company's progress in meeting the DPG Standard. More context about this change is in unicef/coach#1. This commit should be merged once the idea is validated and the early prototyping phase is complete. Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>
unicef · Jan 12, 2022 · a1d05b3 · a1d05b3
1 parent 7c5ef71
commit a1d05b3
Show file tree

Hide file tree

Showing 5 changed files with 270 additions and 2 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -14,7 +14,6 @@ P {
 
 
 /* Alert Box */
-
 .col-fixed {
     width: 75%;
     /* min-height: 9rem;
@@ -38,9 +37,29 @@ P {
         display: grid !important;
     }
 }
+/* End of alert box */
 
+/* ===[ start: DPG Report styling ]=== */
+#report-dpg #report-dpg-header {
+    background-color: #cccccc;
+    color: var(--white-color);
+    font-weight: bold;
+    text-align: center;
+}
+#report-dpg .report-dpg-status1 {
+    background-color: #66cc00;
+    color: var(--text-color);
+}
+#report-dpg .report-dpg-status2 {
+    background-color: #ffcc00;
+    color: var(--text-color);
+}
+#report-dpg .report-dpg-status3 {
+    background-color: #ff0033;
+    color: var(--white-color);
+}
+/* ===[ end: DPG Report styling ]=== */
 
-/* End of alert box */
 
 h1,
 h2,

diff --git a/data/dpg_standards.yaml b/data/dpg_standards.yaml
@@ -0,0 +1,37 @@
+---
+req1:
+  sequence: "1"
+  description: Relevance to Sustainable Development Goals
+req2:
+  sequence: "2"
+  description: Use of Approved Open Licenses
+req3:
+  sequence: "3"
+  description: Clear Ownership
+req4:
+  sequence: "4"
+  description: Platform Independence
+req5:
+  sequence: "5"
+  description: Documentation
+req6:
+  sequence: "6"
+  description: Mechanism for Extracting Data
+req7:
+  sequence: "7"
+  description: Adherence to Privacy and Applicable Laws
+req8:
+  sequence: "8"
+  description: Adherence to Standards & Best Practices
+req9:
+  sequence: "9"
+  description: Do No Harm by Design
+req9a:
+  sequence: "9a"
+  description: Data Privacy & Security
+req9b:
+  sequence: "9b"
+  description: Inappropriate & Illegal Content
+req9c:
+  sequence: "9c"
+  description: Protection from Harassment
diff --git a/layouts/_default/dpg-report.html b/layouts/_default/dpg-report.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+{{ partial "dpg-report.html" . }}
+{{ end }}
diff --git a/layouts/partials/dpg-report.html b/layouts/partials/dpg-report.html
@@ -0,0 +1,206 @@
+{{ "<!-- enable tooltips for status field in DPG report card. -->" | safeHTML }}
+<script>
+$(document).ready(function(){
+  $('[data-toggle="tooltip"]').tooltip();
+});
+</script>
+
+{{ "<!-- details page -->" | safeHTML }}
+<section class="single section-sm main-section" id="section">
+  <div class="container">
+    <div class="row">
+
+      <div class="col-lg-3">
+        <div class="sidebar">
+        <a class="back-btn" href="{{ .Site.BaseURL | relLangURL }}" aria-label="back"></a>
+          <ul class="list-styled">
+            {{ $currentNode := . }}
+            {{range .Site.Home.Sections.ByWeight}}
+              {{ if eq .FirstSection $currentNode.FirstSection }}
+              {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode}}
+              {{ end }}
+            {{ end }}
+            {{ if .Content }}
+              {{ if eq .Params.downloadBtn "true" }}
+                <div>
+                    <button class="btn btn-primary btn-block" id="generatePDF" > Get Pdf  </button>
+                </div>
+              {{ end }}
+            {{ end }}
+          </ul>
+        </div>
+      </div>
+
+      <div class="col-lg-9">
+        {{ "<!-- breadcrumbs -->" | safeHTML }}
+        <div class="bg-white" style="margin:auto">
+          {{ partial "breadcrumb.html" . }}
+        </div>
+        {{ "<!-- /breadcrumbs -->" | safeHTML }}
+
+        <div class="p-lg-5 p-4 bg-white" id="content">
+          <h2 class="mb-5" id="title">{{ .Title }}</h2>
+          <div class="content">
+            {{ partial "header-link.html" .Content }}
+
+            <!-- DPG report card. -->
+            <div class="container" id="report-dpg">
+              <div class="row" id="report-dpg-header">
+                <div class="col-sm">Req. &#35;</div>
+                <div class="col-sm col-md-3">Indicator</div>
+                <div class="col-sm">Status</div>
+                <div class="col-sm col-md-5">Evidence</div>
+              </div>
+
+              <!-- Each DPG Standard requirement. This should be refactored using the `range` function in Hugo to improve maintainability. -->
+              <div class="row" id="report-dpg-req1">
+                <div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req1.sequence }}</div>
+                <div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req1.description }}</div>
+                <div class="col-sm report-dpg-status{{ .Param "dpg_report.req1.status" }}" data-toggle="tooltip" data-placement="top" title="{{ range (.Param "dpg_report.req1.context") }}{{ . }} {{ end }}"></div>
+                <div class="col-sm col-md-5">{{ .Param "dpg_report.req1.evidence" | markdownify }}</div>
+              </div>
+              <div class="row" id="report-dpg-req2">
+                <div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req2.sequence }}</div>
+                <div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req2.description }}</div>
+                <div class="col-sm report-dpg-status{{ .Param "dpg_report.req1.status" }}" data-toggle="tooltip" data-placement="top" title="{{ range (.Param "dpg_report.req2.context") }}{{ . }} {{ end }}"></div>
+                <div class="col-sm col-md-5">{{ .Param "dpg_report.req2.evidence" | markdownify }}</div>
+              </div>
+              <div class="row" id="report-dpg-req3">
+                <div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req3.sequence }}</div>
+                <div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req3.description }}</div>
+                <div class="col-sm report-dpg-status{{ .Param "dpg_report.req1.status" }}" data-toggle="tooltip" data-placement="top" title="{{ range (.Param "dpg_report.req3.context") }}{{ . }} {{ end }}"></div>
+                <div class="col-sm col-md-5">{{ .Param "dpg_report.req3.evidence" | markdownify }}</div>
+              </div>
+              <div class="row" id="report-dpg-req4">
+                <div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req4.sequence }}</div>
+                <div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req4.description }}</div>
+                <div class="col-sm report-dpg-status{{ .Param "dpg_report.req1.status" }}" data-toggle="tooltip" data-placement="top" title="{{ range (.Param "dpg_report.req4.context") }}{{ . }} {{ end }}"></div>
+                <div class="col-sm col-md-5">{{ .Param "dpg_report.req4.evidence" | markdownify }}</div>
+              </div>
+              <div class="row" id="report-dpg-req5">
+                <div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req5.sequence }}</div>
+                <div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req5.description }}</div>
+                <div class="col-sm report-dpg-status{{ .Param "dpg_report.req1.status" }}" data-toggle="tooltip" data-placement="top" title="{{ range (.Param "dpg_report.req5.context") }}{{ . }} {{ end }}"></div>
+                <div class="col-sm col-md-5">{{ .Param "dpg_report.req5.evidence" | markdownify }}</div>
+              </div>
+              <div class="row" id="report-dpg-req6">
+                <div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req6.sequence }}</div>
+                <div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req6.description }}</div>
+                <div class="col-sm report-dpg-status{{ .Param "dpg_report.req1.status" }}" data-toggle="tooltip" data-placement="top" title="{{ range (.Param "dpg_report.req6.context") }}{{ . }} {{ end }}"></div>
+                <div class="col-sm col-md-5">{{ .Param "dpg_report.req6.evidence" | markdownify }}</div>
+              </div>
+              <div class="row" id="report-dpg-req7">
+                <div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req7.sequence }}</div>
+                <div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req7.description }}</div>
+                <div class="col-sm report-dpg-status{{ .Param "dpg_report.req1.status" }}" data-toggle="tooltip" data-placement="top" title="{{ range (.Param "dpg_report.req7.context") }}{{ . }} {{ end }}"></div>
+                <div class="col-sm col-md-5">{{ .Param "dpg_report.req7.evidence" | markdownify }}</div>
+              </div>
+              <div class="row" id="report-dpg-req8">
+                <div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req8.sequence }}</div>
+                <div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req8.description }}</div>
+                <div class="col-sm report-dpg-status{{ .Param "dpg_report.req1.status" }}" data-toggle="tooltip" data-placement="top" title="{{ range (.Param "dpg_report.req8.context") }}{{ . }} {{ end }}"></div>
+                <div class="col-sm col-md-5">{{ .Param "dpg_report.req8.evidence" | markdownify }}</div>
+              </div>
+              <div class="row" id="report-dpg-req9">
+                <div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req9.sequence }}</div>
+                <div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req9.description }}</div>
+                <div class="col-sm report-dpg-status{{ .Param "dpg_report.req1.status" }}" data-toggle="tooltip" data-placement="top" title="{{ range (.Param "dpg_report.req9.context") }}{{ . }} {{ end }}"></div>
+                <div class="col-sm col-md-5">{{ .Param "dpg_report.req9.evidence" | markdownify }}</div>
+              </div>
+              <div class="row" id="report-dpg-req9a">
+                <div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req9a.sequence }}</div>
+                <div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req9a.description }}</div>
+                <div class="col-sm report-dpg-status{{ .Param "dpg_report.req1.status" }}" data-toggle="tooltip" data-placement="top" title="{{ range (.Param "dpg_report.req9a.context") }}{{ . }} {{ end }}"></div>
+                <div class="col-sm col-md-5">{{ .Param "dpg_report.req9a.evidence" | markdownify }}</div>
+              </div>
+              <div class="row" id="report-dpg-req9b">
+                <div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req9b.sequence }}</div>
+                <div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req9b.description }}</div>
+                <div class="col-sm report-dpg-status{{ .Param "dpg_report.req1.status" }}" data-toggle="tooltip" data-placement="top" title="{{ range (.Param "dpg_report.req9b.context") }}{{ . }} {{ end }}"></div>
+                <div class="col-sm col-md-5">{{ .Param "dpg_report.req9b.evidence" | markdownify }}</div>
+              </div>
+              <div class="row" id="report-dpg-req9c">
+                <div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req9c.sequence }}</div>
+                <div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req9c.description }}</div>
+                <div class="col-sm report-dpg-status{{ .Param "dpg_report.req1.status" }}" data-toggle="tooltip" data-placement="top" title="{{ range (.Param "dpg_report.req9c.context") }}{{ . }} {{ end }}"></div>
+                <div class="col-sm col-md-5">{{ .Param "dpg_report.req9c.evidence" | markdownify }}</div>
+              </div>
+            </div>
+          </div>
+          <p class="post-meta border-bottom pb-3 mb-0 mt-3">Updated on {{ .Lastmod.Format "02 Jan 2006" }}</p>
+
+          <nav class="pagination mt-3">
+            <!-- Next prev page -->
+            {{ $currentNode := . }}
+            {{ template "menu-nextprev" dict "menu" .Site.Home "currentnode" $currentNode }}
+            {{ define "menu-nextprev" }}
+            {{$currentNode := .currentnode }}
+            {{ if ne .menu.Params.hidden true}}
+            {{if hasPrefix $currentNode.Permalink .menu.Permalink }}
+            {{ $currentNode.Scratch.Set "NextPageOK" "OK" }}
+            {{ $currentNode.Scratch.Set "prevPage" ($currentNode.Scratch.Get "prevPageTmp") }}
+            {{else}}
+            {{if eq ($currentNode.Scratch.Get "NextPageOK") "OK"}}
+            {{ $currentNode.Scratch.Set "NextPageOK" nil }}
+            {{ $currentNode.Scratch.Set "nextPage" .menu }}
+            {{end}}
+            {{end}}
+            {{ $currentNode.Scratch.Set "prevPageTmp" .menu }}
+
+            {{ $currentNode.Scratch.Set "pages" .menu.Pages }}
+            {{ if .menu.IsHome}}
+            {{ $currentNode.Scratch.Set "pages" .menu.Sections }}
+            {{ else if .menu.Sections}}
+            {{ $currentNode.Scratch.Set "pages" (.menu.Pages | union .menu.Sections) }}
+            {{end}}
+            {{ $pages := ($currentNode.Scratch.Get "pages") }}
+
+            {{ range $pages.ByWeight  }}
+            {{ template "menu-nextprev" dict "menu" . "currentnode" $currentNode }}
+            {{end}}
+            {{ end }}
+            {{ end }}
+
+            {{with ($.Scratch.Get "prevPage")}}
+            <a class="nav nav-prev" href="{{.Permalink }}" aria-label="Previous page" ><i class="ti-arrow-left mr-2"></i> <span class="d-none d-md-block">{{.Title}}</span></a>
+            {{end}}
+            {{with ($.Scratch.Get "nextPage")}}
+            <a class="nav nav-next" href="{{.Permalink }}" aria-label="Previous page" > <span class="d-none d-md-block">{{.Title}}</span><i class="ti-arrow-right ml-2"></i></a>
+            {{end}}
+          </nav>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+{{ "<!-- /details page -->" | safeHTML }}
+
+<!-- templates -->
+{{ define "section-tree-nav" }}
+{{ $showvisitedlinks := .showvisitedlinks }}
+{{ $currentNode := .currentnode }}
+{{with .sect}}
+{{safeHTML .Params.head}}
+{{ $fileUniqueID := "" }}
+{{ with .File }}{{ $fileUniqueID = .UniqueID }}{{ end }}
+{{ $currentNodeFileUniqueID := "" }}
+{{ with $currentNode.File }}{{ $currentNodeFileUniqueID = .UniqueID }}{{ end }}
+<li data-nav-id="{{.Permalink}}" title="{{.Title}}" class="sidelist
+  {{if eq $fileUniqueID $currentNodeFileUniqueID}}active{{end}}">
+  <a href="{{.Permalink}}">
+    {{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML .Params.Post}}
+  </a>
+  {{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
+  {{ if ne $numberOfPages 0 }}
+    <ul>
+      {{ range .Pages.ByWeight }}
+        {{ if and .Params.hidden (not $.showhidden) }}
+        {{else}}
+          {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode }}
+        {{end}}
+      {{end}}
+    </ul>
+  {{ end }}
+</li>
+{{ end }}
+{{ end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -57,6 +57,9 @@
 {{ "<!-- Bootstrap JS -->" | safeHTML }}
 <script src="{{ `plugins/bootstrap/bootstrap.min.js` | absURL }}"></script>
 
+{{ "<!-- PopperJS -->" | safeHTML }}
+<script src="https://unpkg.com/@popperjs/core@2"></script>
+
 {{ "<!-- match-height JS -->" | safeHTML }}
 <script src="{{ `plugins/match-height/jquery.matchHeight-min.js` | absURL }}"></script>