Categories working except for the arrow

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; }