aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMantas <11616378+mistermantas@users.noreply.github.com>2019-05-07 22:29:51 +0300
committerMantas <11616378+mistermantas@users.noreply.github.com>2019-05-07 22:29:51 +0300
commit81b078a04d0555de9658898d4da73e0ac83bd31c (patch)
treeeae3905dcf6913563210f1be3a6d1c6139745a5a
parent64a1be9790bfe98e99a12136c1f16684de25de17 (diff)
First working example of categories
-rw-r--r--exampleSite/config.yml13
-rw-r--r--layouts/partials/index/components.html115
-rw-r--r--layouts/partials/meta.html5
3 files changed, 90 insertions, 43 deletions
diff --git a/exampleSite/config.yml b/exampleSite/config.yml
index 74d30b4..8b45b9b 100644
--- a/exampleSite/config.yml
+++ b/exampleSite/config.yml
@@ -99,6 +99,8 @@ baseURL: https://cstate.mnts.lt
############################################################
params:
+ enableCategories: false
+
# These are your systems. Change them to
# change the amount of components.
#
@@ -106,10 +108,21 @@ params:
# https://github.com/cstate/cstate/wiki/Customization
systems:
- name: Gateway
+ category: North Coast
- name: API
description: The guts of the application.
+ category: Uncategorized
- name: Media Proxy
description: This is the service responsible for serving images, audio, and video. It is reliant on our CDN.
+ category: Uncategorized
+
+ categories:
+ - name: North Coast
+ description: The worst one. Or the best one.
+ closed: true
+ - name: Uncategorized
+ untitled: true
+
# What date format to use?
#
diff --git a/layouts/partials/index/components.html b/layouts/partials/index/components.html
index 128b887..392acb7 100644
--- a/layouts/partials/index/components.html
+++ b/layouts/partials/index/components.html
@@ -5,49 +5,82 @@
{{ $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 }}
+
+ {{ range $categories }}
+ <div class="category">
+ {{ if not .untitled }}
+ <div class="bold" style="margin: 12px 0">
+ {{ if .closed }}⯈{{ else }}⯆{{ end }}
+
+ <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 }}
+
+ <div class="components">
+ {{ range $categorySystems }}
+ {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}
- {{ with .partial }}
- <div>
- {{ partial . . }}
+ {{ $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
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index 6a6f790..ad4655a 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -27,7 +27,7 @@
margin: 0;
background: #fff;
color: #4d4d4d;
- font: 100%/1.5 BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ font: 100%/1.5 'Inter UI', BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0, 0.25);
}
@@ -64,7 +64,8 @@
h1, h2, h4 {
font-weight: normal;
color: #000;
- font-family: "Segoe UI", BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ font-family: 'Inter UI', "Segoe UI", BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ letter-spacing: -1px;
}
h3 {