aboutsummaryrefslogtreecommitdiff
path: root/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'layouts')
-rw-r--r--layouts/partials/index/components.html15
-rw-r--r--layouts/partials/meta.html9
2 files changed, 15 insertions, 9 deletions
diff --git a/layouts/partials/index/components.html b/layouts/partials/index/components.html
index 47da96c..803c44f 100644
--- a/layouts/partials/index/components.html
+++ b/layouts/partials/index/components.html
@@ -11,14 +11,17 @@
{{ $categories := .Site.Params.categories }}
{{ range $categories }}
- <div class="category">
+ <div class="category {{ if .closed }}category--closed{{ else }}category--open{{ end }}" id="{{ .name | urlize }}">
{{ if not .untitled }}
- <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 }}
+ <div class="bold padding clicky category__head" onclick="this.parentNode.classList.toggle('category--closed'); this.parentNode.classList.toggle('category--open')">
+ <span class="hide-without-js">
+ <span class="category__closed-marker">⯈</span>
+ <span class="category__open-marker">⯆</span>
</span>
- <b>{{ .name }}</b>
+ <b>
+ {{ .name }}
+ </b>
{{ with .description }}
<span class="tooltip tooltip--small">
@@ -37,7 +40,7 @@
{{ $categorySystems := where $systems "category" "=" .name }}
- <div class="components {{ if .closed }}hidden{{ end }}" id="{{ .name | urlize }}">
+ <div class="components">
{{ range $categorySystems }}
{{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index 9acc554..1acf474 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -111,17 +111,20 @@
.right { text-align: right; }
.padding-s { padding: 6px; }
.padding { padding: 12px; }
-
.clicky { cursor: pointer; }
- .hidden { display: none; }
-
/**
* Categories
*/
+ /* Categories themselves */
+ .js .category--open .category__closed-marker { display: none; }
+ .js .category--closed .components { display: none; }
+ .js .category--closed .category__open-marker { display: none; }
+ /* Markers */
+ .js .hidden-with-js { display: none; }
.hide-without-js { display: none; }
.js span.hide-without-js { display: inline; }
.js div.hide-without-js { display: block; }