Spearhead
/
spearhead-statuskit
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #29 from steveoh/affected-systems 

add affected systems to incident cards
This commit is contained in:
Jessica Parsons 2017-09-05 08:29:24 -07:00 committed by GitHub
parent 4ed4b7f384 783a480827
commit 9c6851ccbb
10 changed files with 8317 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8253
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
site/layouts/index.html
View File

@ -6,7 +6,7 @@
{{ partial "systems" (dict "content" . "incidents" $active) }} {{ partial "systems" (dict "content" . "incidents" $active) }}
{{ with $active }} {{ with $active }}
<div class="section-title">Active Incidents</div> <div class="section-title mute">Active Incidents</div>
{{ range $active }} {{ range $active }}
{{ partial "incident" . }} {{ partial "incident" . }}
{{ end }} {{ end }}

4
site/layouts/partials/footer.html
View File

@ -1,9 +1,9 @@
<div class="footer"> <div class="footer">
<p> <p>
<a href="https://www.netlify.com/statuskit"> <a class="mute" href="https://www.netlify.com/statuskit">
StatusKit by Netlify StatusKit by Netlify
</a> &#8226 </a> &#8226
<a href="https://github.com/netlify/netlify-statuskit"> <a class="mute" href="https://github.com/netlify/netlify-statuskit">
View on GitHub View on GitHub
</a> </a>
</p> </p>

8
site/layouts/partials/header.html
View File

@ -9,7 +9,7 @@
{{ $active := where $incidents "Params.resolved" "!=" true }} {{ $active := where $incidents "Params.resolved" "!=" true }}
{{ $major := where $active "Params.severity" "major-outage" }} {{ $major := where $active "Params.severity" "major-outage" }}
<html> <html lang="{{.Site.LanguageCode}}">
<head> <head>
<title>{{ $title }}</title> <title>{{ $title }}</title>
<link rel="stylesheet" href="/css/main.css"/> <link rel="stylesheet" href="/css/main.css"/>
@ -24,8 +24,10 @@
<body> <body>
<div class="gangsta-wrap"> <div class="gangsta-wrap">
<div class="header"> <div class="header">
<img src="{{ $logo }}" class="logo"/> <div>
<span class="title"><a href="/">{{ $title }}</a></span> <img src="{{ $logo }}" alt="logo" class="logo"/>
<span class="title"><a href="/">{{ $title }}</a></span>
</div>
<div class="right-links"> <div class="right-links">
{{ with $resources }} {{ with $resources }}
<a href="{{ . }}" class="button resources-link">Resources</a> <a href="{{ . }}" class="button resources-link">Resources</a>

24
site/layouts/partials/incident.html
View File

@ -1,15 +1,21 @@
{{- $severity := .Params.severity | default "under-maintenance" -}}
{{- $alert := index .Site.Data.severity.alerts $severity -}}
<div class="incident card"> <div class="incident card">
<div class="incident-header"> <div class="flex-out">
<p class="incident-title">{{ .Title }}</p> <h1 class="incident-title">{{ .Title }}</h1>
<p class="incident-date">{{ dateFormat "02 Jan 2006 15:04 MST" .Date }}</p> <p class="small mute">{{- dateFormat "02 Jan 2006 15:04 MST" .Date -}}</p>
</div> </div>
<div class="incident-description"> <div class="incident-description">
{{- .Content -}} {{- .Content -}}
</div> </div>
{{- $severity := .Params.severity | default "under-maintenance" -}} <div class="incident-status flex-out">
{{- $alert := index .Site.Data.severity.alerts $severity -}} <p class="color-{{ $alert }}">
{{- index .Site.Data.severity.descriptions $severity -}}
<p class="incident-status color-{{ $alert }}"> </p>
{{ index .Site.Data.severity.descriptions $severity }} <p class="small">Affected Systems:
</p> <span class="color-{{ $alert }}">
{{- delimit .Params.affectedsystems ", " -}}
</span>
</p>
</div>
</div> </div>

2
site/layouts/partials/status-badge.html
View File

@ -1,5 +1,5 @@
<div class="system-status-badge color-{{ .alert }}"> <div class="system-status-badge color-{{ .alert }}">
<!-- Depends on status --> <!-- Depends on status -->
<img src="/images/icon-{{ .alert }}.svg" /> <img src="/images/icon-{{ .alert }}.svg" alt="{{ .alert }}"/>
{{ .description }} {{ .description }}
</div> </div>

3
site/layouts/partials/systems.html
View File

@ -7,8 +7,7 @@
{{ $name := . }} {{ $name := . }}
<div class="system-operational"> <div class="system-operational">
<div class="card"> <div class="card">
{{ $name }} {{- $name -}}
{{ if $.incidents }} {{ if $.incidents }}
{{ range $.incidents }} {{ range $.incidents }}
{{ if in .Params.affectedsystems $name }} {{ if in .Params.affectedsystems $name }}

4
site/layouts/section/incidents.html
View File

@ -2,11 +2,11 @@
<div class="incidents"> <div class="incidents">
{{ range (.Paginate .Data.Pages.ByPublishDate 15 ).Pages }} {{ range (.Paginate .Data.Pages.ByPublishDate 15 ).Pages }}
<div class="incident-summary"> <div class="incident-summary flex-out">
<a href="{{ .Permalink }}" class="article article-title"> <a href="{{ .Permalink }}" class="article article-title">
{{ .Title }} {{ .Title }}
</a> </a>
<span class="article-date"> <span class="article-date mute">
{{ dateFormat "02 Jan 2006 15:04 MST" .Date }} {{ dateFormat "02 Jan 2006 15:04 MST" .Date }}
</span> </span>
</div> </div>

2
site/layouts/shortcodes/track.html
View File

@ -1 +1 @@
<span class="incident-date">{{ dateFormat "02 Jan 2006 15:04 MST" (.Get 0) }}</span> <p class="small mute separate">{{ dateFormat "02 Jan 2006 15:04 MST" (.Get 0) }}</p>

56
src/css/main.css
View File

@ -28,6 +28,9 @@ a:active {
margin-bottom: 40px; margin-bottom: 40px;
padding: 16px 0 24px 0; padding: 16px 0 24px 0;
border-bottom: 2px solid #F7F7F8; border-bottom: 2px solid #F7F7F8;
display: flex;
flex-direction: row;
justify-content: space-between;
} }
.logo { .logo {
@ -52,18 +55,14 @@ a:active {
text-decoration: none; text-decoration: none;
} }
.right-links {
float: right;
}
@media (max-width: 450px) { @media (max-width: 450px) {
.right-links { .right-links {
float: left;
margin-top: 24px; margin-top: 24px;
} }
.header { .header {
padding-bottom: 68px; padding-bottom: 68px;
flex-direction: column;
} }
} }
@ -109,8 +108,8 @@ a:active {
padding: 16px; padding: 16px;
border-radius: 10px; border-radius: 10px;
background: #fff; background: #fff;
box-shadow: 0px 4px 8px 0px rgba(0,0,0,.05); box-shadow: 0px 4px 8px 0px rgba(0,0,0,.1);
border: 1px solid #fbfbfb; border: 1px solid #eaeaea;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
@ -138,25 +137,27 @@ a:active {
height: 16px; height: 16px;
} }
.incident h1 {
font-size: 1.5em;
margin-top: 0;
}
.incident { .incident {
color: #202020; color: #202020;
} }
.incident-title { .incident-title {
float: left;
text-transform: capitalize; text-transform: capitalize;
width: 75%;
} }
.incident-date { @media (max-width: 725px) {
float: right;
font-size: 14px;
opacity: 0.3;
}
@media (max-width: 450px) {
.incident-date { .incident-date {
width: 100%; width: 100%;
} }
.incident-title {
width: 100%;
}
} }
.incident-description { .incident-description {
@ -164,10 +165,22 @@ a:active {
font-weight: 400; font-weight: 400;
} }
.separate {
text-align: right;
padding-bottom: 1em;
border-bottom: 2px solid #F7F7F8;
}
.incident-status { .incident-status {
margin: 24px 0 0 0; margin: 24px 0 0 0;
} }
.flex-out {
display: flex;
flex-direciton: row;
justify-content: space-between;
}
.system-check-ok { .system-check-ok {
margin: 80px auto 104px auto; margin: 80px auto 104px auto;
width: 100%; width: 100%;
@ -190,7 +203,6 @@ a:active {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
border-bottom: 2px solid #F7F7F8; border-bottom: 2px solid #F7F7F8;
color: #bbb;
} }
.see-more { .see-more {
@ -218,6 +230,14 @@ a:active {
color: #BD1F1A; color: #BD1F1A;
} }
.mute {
opacity: 0.7;
}
.small {
font-size: 14px;
}
.incident-summary { .incident-summary {
margin-bottom: 24px; margin-bottom: 24px;
overflow: hidden; overflow: hidden;
@ -225,16 +245,13 @@ a:active {
.article-title { .article-title {
width: 70%; width: 70%;
float: left;
text-transform: capitalize; text-transform: capitalize;
} }
.article-date { .article-date {
width: 29%; width: 29%;
float: right;
text-align: right; text-align: right;
font-size: 14px; font-size: 14px;
opacity: 0.3;
} }
.pagination, .pagination,
@ -283,7 +300,6 @@ a:active {
.footer a { .footer a {
color: #202020; color: #202020;
opacity: 0.3;
transition: all 0.3s ease; transition: all 0.3s ease;
} }