aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--exampleSite/config.yml6
-rw-r--r--layouts/partials/index/components.html8
-rw-r--r--layouts/partials/index/summary.html2
-rw-r--r--layouts/partials/meta.html26
4 files changed, 30 insertions, 12 deletions
diff --git a/exampleSite/config.yml b/exampleSite/config.yml
index 8b45b9b..a45d06d 100644
--- a/exampleSite/config.yml
+++ b/exampleSite/config.yml
@@ -109,6 +109,8 @@ params:
systems:
- name: Gateway
category: North Coast
+ - name: Backup Gateway
+ category: East Coast
- name: API
description: The guts of the application.
category: Uncategorized
@@ -119,10 +121,12 @@ params:
categories:
- name: North Coast
description: The worst one. Or the best one.
- closed: true
+ closed: true
+ - name: East Coast
- name: Uncategorized
untitled: true
+
# What date format to use?
#
diff --git a/layouts/partials/index/components.html b/layouts/partials/index/components.html
index 392acb7..47da96c 100644
--- a/layouts/partials/index/components.html
+++ b/layouts/partials/index/components.html
@@ -13,8 +13,10 @@
{{ range $categories }}
<div class="category">
{{ if not .untitled }}
- <div class="bold" style="margin: 12px 0">
- {{ if .closed }}⯈{{ else }}⯆{{ end }}
+ <div class="bold padding clicky category__head" onclick="document.querySelector('#{{ .name | urlize }}').classList.toggle('hidden'); document.querySelector('#{{ .name | urlize }}-toggle').classList.toggle('hidden')">
+ <span class="hide-without-js" id="{{ .name | urlize }}-toggle">
+ {{ if .closed }}⯈{{ else }}⯆{{ end }}
+ </span>
<b>{{ .name }}</b>
@@ -35,7 +37,7 @@
{{ $categorySystems := where $systems "category" "=" .name }}
- <div class="components">
+ <div class="components {{ if .closed }}hidden{{ end }}" id="{{ .name | urlize }}">
{{ range $categorySystems }}
{{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}
diff --git a/layouts/partials/index/summary.html b/layouts/partials/index/summary.html
index d8e3108..de6bceb 100644
--- a/layouts/partials/index/summary.html
+++ b/layouts/partials/index/summary.html
@@ -20,5 +20,5 @@
{{ end }}{{ end }}{{ end }}
</strong>
- <span class="summary__date float-right" onclick="location.reload()"></span>
+ <div class="summary__date clicky float-right" onclick="location.reload()"></div>
</div> \ No newline at end of file
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index ad4655a..9acc554 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -20,6 +20,8 @@
var themeNoticeColor = '#{{ .Site.Params.notice }}';
var themeDisruptedColor = '#{{ .Site.Params.disrupted }}';
var themeDownColor = '#{{ .Site.Params.down }}';
+
+
</script>
<!-- Sources -->
<style>
@@ -110,6 +112,21 @@
.padding-s { padding: 6px; }
.padding { padding: 12px; }
+ .clicky { cursor: pointer; }
+ .hidden { display: none; }
+
+
+
+ /**
+ * Categories
+ */
+
+
+ .hide-without-js { display: none; }
+ .js span.hide-without-js { display: inline; }
+ .js div.hide-without-js { display: block; }
+
+
/**
* UI elements
*/
@@ -182,11 +199,6 @@
color: #fff;
}
- .summary__date {
- display: block;
- cursor: pointer;
- }
-
.summary__date:hover {
color: #ccc;
}
@@ -268,8 +280,8 @@
*/
.issue { display: block; padding: 14px 24px; }
- .issue:hover { background: #f5f5f5; }
- .issue:active { background: #eee; }
+ .issue:hover, .category__head:hover { background: #f5f5f5; }
+ .issue:active, .category__head:active { background: #eee; }
.issue h3 { line-height: 1.25; }