diff options
| -rw-r--r-- | exampleSite/config.yml | 6 | ||||
| -rw-r--r-- | layouts/partials/index/components.html | 8 | ||||
| -rw-r--r-- | layouts/partials/index/summary.html | 2 | ||||
| -rw-r--r-- | layouts/partials/meta.html | 26 |
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; } |