cState v4.0 Final (#82)

cState v4.0 Final

1 files changed, 89 insertions, 41 deletions

diff --git a/layouts/partials/index/components.html b/layouts/partials/index/components.html
index 128b887..135349a 100644
--- a/layouts/partials/index/components.html
+++ b/layouts/partials/index/components.html
@@ -5,49 +5,97 @@
 {{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }}
 {{ $isDown := where $active "Params.severity" "=" "down" }}
 
-<div class="components">
-    {{ $systems := .Site.Params.systems }}
-    {{ range $systems }}
-      {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}
-
-      {{ $thisIsNotice := where $activeComponentIssues "Params.severity" "=" "notice" }}
-      {{ $thisIsDisrupted := where $activeComponentIssues "Params.severity" "=" "disrupted" }}
-      {{ $thisIsDown := where $activeComponentIssues "Params.severity" "=" "down" }}
-
-      <div class="component" data-status="{{ if $thisIsDown }}down{{ else }}{{ if $thisIsDisrupted }}disrupted{{ else }}{{ if $thisIsNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">
-        <a href="/affected/{{ .name | urlize }}" class="no-underline">
-          {{ .name }}
-        </a>
-
-        {{ with .description }}
-          <span class="tooltip tooltip--small">
-            &nbsp; <span class="faded">(?)</span>
-
-            <span class="tooltip__text">
-              {{ . }}
-            </span>
+<!-- Individual info -->
+<div class="categories">
+  {{ $systems := .Site.Params.systems }}
+  {{ $categories := .Site.Params.categories }}
+
+  <script>
+  function toggleCategoryHead(el) {
+    if (el.parentNode.className == 'category category--open') {
+      el.parentNode.className = 'category category--closed';
+    } else {
+      el.parentNode.className = 'category category--open';
+    }
+  }
+  </script>
+
+  {{ range $categories }}
+    <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="toggleCategoryHead(this)">
+        <span class="hide-without-js">
+          <span class="category__closed-marker">⯈</span>
+          <span class="category__open-marker">⯆</span>
+        </span>
+
+      <b>
+        {{ .name }}
+      </b>
+      
+      {{ with .description }}
+        <span class="tooltip tooltip--small">
+          &nbsp; <span class="faded">(?)</span>
+
+          <span class="tooltip__text">
+            {{ . }}
           </span>
-        {{ end }}
-
-        <span class="component-status">
-          {{ if $thisIsDown }}
-            <b>{{ T "thisIsDown" }}</b>
-          {{ else }}
-          {{ if $thisIsDisrupted }}
-            <b>{{ T "thisIsDisrupted" }}</b>
-          {{ else }}
-          {{ if $thisIsNotice }}
-            <b>{{ T "thisIsNotice" }}</b>
-          {{ else }}
-            {{ T "thisIsOk" }}
-          {{ end }}{{ end }}{{ end }}
         </span>
+      {{ end }}
+
+      </div>
+      {{ else }}
+      <div class="padding"></div>
+      {{ end }}
+
+      {{ $categorySystems := where $systems "category" "=" .name }}
 
-        {{ with .partial }}
-        <div>
-          {{ partial . . }}
+      <div class="components">
+      {{ range $categorySystems }}
+        {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}
+
+        {{ $thisIsNotice := where $activeComponentIssues "Params.severity" "=" "notice" }}
+        {{ $thisIsDisrupted := where $activeComponentIssues "Params.severity" "=" "disrupted" }}
+        {{ $thisIsDown := where $activeComponentIssues "Params.severity" "=" "down" }}
+
+        <div class="component" data-status="{{ if $thisIsDown }}down{{ else }}{{ if $thisIsDisrupted }}disrupted{{ else }}{{ if $thisIsNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">
+          <a href="/affected/{{ .name | urlize }}" class="no-underline">
+            {{ .name }}
+          </a>
+
+          {{ with .description }}
+            <span class="tooltip tooltip--small">
+              &nbsp; <span class="faded">(?)</span>
+
+              <span class="tooltip__text">
+                {{ . }}
+              </span>
+            </span>
+          {{ end }}
+
+          <span class="component-status">
+            {{ if $thisIsDown }}
+              {{ T "thisIsDown" }}
+            {{ else }}
+            {{ if $thisIsDisrupted }}
+              {{ T "thisIsDisrupted" }}
+            {{ else }}
+            {{ if $thisIsNotice }}
+              {{ T "thisIsNotice" }}
+            {{ else }}
+              {{ T "thisIsOk" }}
+            {{ end }}{{ end }}{{ end }}
+          </span>
+
+          {{ with .partial }}
+          <div>
+            {{ partial . . }}
+          </div>
+          {{ end }}
         </div>
-        {{ end }}
+      {{ end }}
       </div>
-    {{ end }}
-  </div>
\ No newline at end of file
+    </div>
+  {{ end }}
+
+</div>
\ No newline at end of file