Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Mar 11, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 21 additions & 2 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ P {


/* Alert Box */

.col-fixed {
width: 75%;
/* min-height: 9rem;
Expand All @@ -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,
Expand Down
37 changes: 37 additions & 0 deletions data/dpg_standards.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
3 changes: 3 additions & 0 deletions layouts/_default/dpg-report.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{{ define "main" }}
{{ partial "dpg-report.html" . }}
{{ end }}
206 changes: 206 additions & 0 deletions layouts/partials/dpg-report.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }}
3 changes: 3 additions & 0 deletions layouts/partials/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down