diff options
Diffstat (limited to 'layouts/partials')
| -rw-r--r-- | layouts/partials/index/components.html | 15 | ||||
| -rw-r--r-- | layouts/partials/meta.html | 9 |
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; } |