Skip to content

Commit a1d05b3

Browse files
justjwheelinjustjwheelin
committed
🆕 💄 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] <[email protected]>
1 parent 7c5ef71 commit a1d05b3

File tree

5 files changed

+270
-2
lines changed

5 files changed

+270
-2
lines changed

‎assets/css/style.css

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ P {
1414

1515

1616
/* Alert Box */
17-
1817
.col-fixed {
1918
width: 75%;
2019
/* min-height: 9rem;
@@ -38,9 +37,29 @@ P {
3837
display: grid !important;
3938
}
4039
}
40+
/* End of alert box */
4141

42+
/* ===[ start: DPG Report styling ]=== */
43+
#report-dpg #report-dpg-header {
44+
background-color: #cccccc;
45+
color: var(--white-color);
46+
font-weight: bold;
47+
text-align: center;
48+
}
49+
#report-dpg .report-dpg-status1 {
50+
background-color: #66cc00;
51+
color: var(--text-color);
52+
}
53+
#report-dpg .report-dpg-status2 {
54+
background-color: #ffcc00;
55+
color: var(--text-color);
56+
}
57+
#report-dpg .report-dpg-status3 {
58+
background-color: #ff0033;
59+
color: var(--white-color);
60+
}
61+
/* ===[ end: DPG Report styling ]=== */
4262

43-
/* End of alert box */
4463

4564
h1,
4665
h2,

‎data/dpg_standards.yaml

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
req1:
3+
sequence: "1"
4+
description: Relevance to Sustainable Development Goals
5+
req2:
6+
sequence: "2"
7+
description: Use of Approved Open Licenses
8+
req3:
9+
sequence: "3"
10+
description: Clear Ownership
11+
req4:
12+
sequence: "4"
13+
description: Platform Independence
14+
req5:
15+
sequence: "5"
16+
description: Documentation
17+
req6:
18+
sequence: "6"
19+
description: Mechanism for Extracting Data
20+
req7:
21+
sequence: "7"
22+
description: Adherence to Privacy and Applicable Laws
23+
req8:
24+
sequence: "8"
25+
description: Adherence to Standards & Best Practices
26+
req9:
27+
sequence: "9"
28+
description: Do No Harm by Design
29+
req9a:
30+
sequence: "9a"
31+
description: Data Privacy & Security
32+
req9b:
33+
sequence: "9b"
34+
description: Inappropriate & Illegal Content
35+
req9c:
36+
sequence: "9c"
37+
description: Protection from Harassment

‎layouts/_default/dpg-report.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{{ define "main" }}
2+
{{ partial "dpg-report.html" . }}
3+
{{ end }}

‎layouts/partials/dpg-report.html

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
{{ "<!-- enable tooltips for status field in DPG report card. -->" | safeHTML }}
2+
<script>
3+
$(document).ready(function(){
4+
$('[data-toggle="tooltip"]').tooltip();
5+
});
6+
</script>
7+
8+
{{ "<!-- details page -->" | safeHTML }}
9+
<section class="single section-sm main-section" id="section">
10+
<div class="container">
11+
<div class="row">
12+
13+
<div class="col-lg-3">
14+
<div class="sidebar">
15+
<a class="back-btn" href="{{ .Site.BaseURL | relLangURL }}" aria-label="back"></a>
16+
<ul class="list-styled">
17+
{{ $currentNode := . }}
18+
{{range .Site.Home.Sections.ByWeight}}
19+
{{ if eq .FirstSection $currentNode.FirstSection }}
20+
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode}}
21+
{{ end }}
22+
{{ end }}
23+
{{ if .Content }}
24+
{{ if eq .Params.downloadBtn "true" }}
25+
<div>
26+
<button class="btn btn-primary btn-block" id="generatePDF" > Get Pdf </button>
27+
</div>
28+
{{ end }}
29+
{{ end }}
30+
</ul>
31+
</div>
32+
</div>
33+
34+
<div class="col-lg-9">
35+
{{ "<!-- breadcrumbs -->" | safeHTML }}
36+
<div class="bg-white" style="margin:auto">
37+
{{ partial "breadcrumb.html" . }}
38+
</div>
39+
{{ "<!-- /breadcrumbs -->" | safeHTML }}
40+
41+
<div class="p-lg-5 p-4 bg-white" id="content">
42+
<h2 class="mb-5" id="title">{{ .Title }}</h2>
43+
<div class="content">
44+
{{ partial "header-link.html" .Content }}
45+
46+
<!-- DPG report card. -->
47+
<div class="container" id="report-dpg">
48+
<div class="row" id="report-dpg-header">
49+
<div class="col-sm">Req. &#35;</div>
50+
<div class="col-sm col-md-3">Indicator</div>
51+
<div class="col-sm">Status</div>
52+
<div class="col-sm col-md-5">Evidence</div>
53+
</div>
54+
55+
<!-- Each DPG Standard requirement. This should be refactored using the `range` function in Hugo to improve maintainability. -->
56+
<div class="row" id="report-dpg-req1">
57+
<div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req1.sequence }}</div>
58+
<div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req1.description }}</div>
59+
<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>
60+
<div class="col-sm col-md-5">{{ .Param "dpg_report.req1.evidence" | markdownify }}</div>
61+
</div>
62+
<div class="row" id="report-dpg-req2">
63+
<div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req2.sequence }}</div>
64+
<div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req2.description }}</div>
65+
<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>
66+
<div class="col-sm col-md-5">{{ .Param "dpg_report.req2.evidence" | markdownify }}</div>
67+
</div>
68+
<div class="row" id="report-dpg-req3">
69+
<div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req3.sequence }}</div>
70+
<div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req3.description }}</div>
71+
<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>
72+
<div class="col-sm col-md-5">{{ .Param "dpg_report.req3.evidence" | markdownify }}</div>
73+
</div>
74+
<div class="row" id="report-dpg-req4">
75+
<div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req4.sequence }}</div>
76+
<div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req4.description }}</div>
77+
<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>
78+
<div class="col-sm col-md-5">{{ .Param "dpg_report.req4.evidence" | markdownify }}</div>
79+
</div>
80+
<div class="row" id="report-dpg-req5">
81+
<div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req5.sequence }}</div>
82+
<div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req5.description }}</div>
83+
<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>
84+
<div class="col-sm col-md-5">{{ .Param "dpg_report.req5.evidence" | markdownify }}</div>
85+
</div>
86+
<div class="row" id="report-dpg-req6">
87+
<div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req6.sequence }}</div>
88+
<div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req6.description }}</div>
89+
<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>
90+
<div class="col-sm col-md-5">{{ .Param "dpg_report.req6.evidence" | markdownify }}</div>
91+
</div>
92+
<div class="row" id="report-dpg-req7">
93+
<div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req7.sequence }}</div>
94+
<div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req7.description }}</div>
95+
<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>
96+
<div class="col-sm col-md-5">{{ .Param "dpg_report.req7.evidence" | markdownify }}</div>
97+
</div>
98+
<div class="row" id="report-dpg-req8">
99+
<div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req8.sequence }}</div>
100+
<div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req8.description }}</div>
101+
<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>
102+
<div class="col-sm col-md-5">{{ .Param "dpg_report.req8.evidence" | markdownify }}</div>
103+
</div>
104+
<div class="row" id="report-dpg-req9">
105+
<div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req9.sequence }}</div>
106+
<div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req9.description }}</div>
107+
<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>
108+
<div class="col-sm col-md-5">{{ .Param "dpg_report.req9.evidence" | markdownify }}</div>
109+
</div>
110+
<div class="row" id="report-dpg-req9a">
111+
<div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req9a.sequence }}</div>
112+
<div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req9a.description }}</div>
113+
<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>
114+
<div class="col-sm col-md-5">{{ .Param "dpg_report.req9a.evidence" | markdownify }}</div>
115+
</div>
116+
<div class="row" id="report-dpg-req9b">
117+
<div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req9b.sequence }}</div>
118+
<div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req9b.description }}</div>
119+
<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>
120+
<div class="col-sm col-md-5">{{ .Param "dpg_report.req9b.evidence" | markdownify }}</div>
121+
</div>
122+
<div class="row" id="report-dpg-req9c">
123+
<div class="col-sm text-center font-weight-bold">{{ .Site.Data.dpg_standards.req9c.sequence }}</div>
124+
<div class="col-sm text-center col-md-3">{{ .Site.Data.dpg_standards.req9c.description }}</div>
125+
<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>
126+
<div class="col-sm col-md-5">{{ .Param "dpg_report.req9c.evidence" | markdownify }}</div>
127+
</div>
128+
</div>
129+
</div>
130+
<p class="post-meta border-bottom pb-3 mb-0 mt-3">Updated on {{ .Lastmod.Format "02 Jan 2006" }}</p>
131+
132+
<nav class="pagination mt-3">
133+
<!-- Next prev page -->
134+
{{ $currentNode := . }}
135+
{{ template "menu-nextprev" dict "menu" .Site.Home "currentnode" $currentNode }}
136+
{{ define "menu-nextprev" }}
137+
{{$currentNode := .currentnode }}
138+
{{ if ne .menu.Params.hidden true}}
139+
{{if hasPrefix $currentNode.Permalink .menu.Permalink }}
140+
{{ $currentNode.Scratch.Set "NextPageOK" "OK" }}
141+
{{ $currentNode.Scratch.Set "prevPage" ($currentNode.Scratch.Get "prevPageTmp") }}
142+
{{else}}
143+
{{if eq ($currentNode.Scratch.Get "NextPageOK") "OK"}}
144+
{{ $currentNode.Scratch.Set "NextPageOK" nil }}
145+
{{ $currentNode.Scratch.Set "nextPage" .menu }}
146+
{{end}}
147+
{{end}}
148+
{{ $currentNode.Scratch.Set "prevPageTmp" .menu }}
149+
150+
{{ $currentNode.Scratch.Set "pages" .menu.Pages }}
151+
{{ if .menu.IsHome}}
152+
{{ $currentNode.Scratch.Set "pages" .menu.Sections }}
153+
{{ else if .menu.Sections}}
154+
{{ $currentNode.Scratch.Set "pages" (.menu.Pages | union .menu.Sections) }}
155+
{{end}}
156+
{{ $pages := ($currentNode.Scratch.Get "pages") }}
157+
158+
{{ range $pages.ByWeight }}
159+
{{ template "menu-nextprev" dict "menu" . "currentnode" $currentNode }}
160+
{{end}}
161+
{{ end }}
162+
{{ end }}
163+
164+
{{with ($.Scratch.Get "prevPage")}}
165+
<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>
166+
{{end}}
167+
{{with ($.Scratch.Get "nextPage")}}
168+
<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>
169+
{{end}}
170+
</nav>
171+
</div>
172+
</div>
173+
</div>
174+
</div>
175+
</section>
176+
{{ "<!-- /details page -->" | safeHTML }}
177+
178+
<!-- templates -->
179+
{{ define "section-tree-nav" }}
180+
{{ $showvisitedlinks := .showvisitedlinks }}
181+
{{ $currentNode := .currentnode }}
182+
{{with .sect}}
183+
{{safeHTML .Params.head}}
184+
{{ $fileUniqueID := "" }}
185+
{{ with .File }}{{ $fileUniqueID = .UniqueID }}{{ end }}
186+
{{ $currentNodeFileUniqueID := "" }}
187+
{{ with $currentNode.File }}{{ $currentNodeFileUniqueID = .UniqueID }}{{ end }}
188+
<li data-nav-id="{{.Permalink}}" title="{{.Title}}" class="sidelist
189+
{{if eq $fileUniqueID $currentNodeFileUniqueID}}active{{end}}">
190+
<a href="{{.Permalink}}">
191+
{{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML .Params.Post}}
192+
</a>
193+
{{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
194+
{{ if ne $numberOfPages 0 }}
195+
<ul>
196+
{{ range .Pages.ByWeight }}
197+
{{ if and .Params.hidden (not $.showhidden) }}
198+
{{else}}
199+
{{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode }}
200+
{{end}}
201+
{{end}}
202+
</ul>
203+
{{ end }}
204+
</li>
205+
{{ end }}
206+
{{ end }}

‎layouts/partials/head.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@
5757
{{ "<!-- Bootstrap JS -->" | safeHTML }}
5858
<script src="{{ `plugins/bootstrap/bootstrap.min.js` | absURL }}"></script>
5959

60+
{{ "<!-- PopperJS -->" | safeHTML }}
61+
<script src="https://unpkg.com/@popperjs/core@2"></script>
62+
6063
{{ "<!-- match-height JS -->" | safeHTML }}
6164
<script src="{{ `plugins/match-height/jquery.matchHeight-min.js` | absURL }}"></script>
6265

0 commit comments

Comments
 (0)