Skip to content

Commit 9c6851c

Browse files
verythoroughverythorough
authored
Merge pull request #29 from steveoh/affected-systems
add affected systems to incident cards
2 parents 4ed4b7f + 783a480 commit 9c6851c

File tree

10 files changed

+8317
-41
lines changed

10 files changed

+8317
-41
lines changed

‎package-lock.json

Lines changed: 8253 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/layouts/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{{ partial "systems" (dict "content" . "incidents" $active) }}
77

88
{{ with $active }}
9-
<div class="section-title">Active Incidents</div>
9+
<div class="section-title mute">Active Incidents</div>
1010
{{ range $active }}
1111
{{ partial "incident" . }}
1212
{{ end }}

‎site/layouts/partials/footer.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<div class="footer">
22
<p>
3-
<a href="https://www.netlify.com/statuskit">
3+
<a class="mute" href="https://www.netlify.com/statuskit">
44
StatusKit by Netlify
55
</a> &#8226
6-
<a href="https://github.com/netlify/netlify-statuskit">
6+
<a class="mute" href="https://github.com/netlify/netlify-statuskit">
77
View on GitHub
88
</a>
99
</p>

‎site/layouts/partials/header.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
{{ $active := where $incidents "Params.resolved" "!=" true }}
1010
{{ $major := where $active "Params.severity" "major-outage" }}
1111

12-
<html>
12+
<html lang="{{.Site.LanguageCode}}">
1313
<head>
1414
<title>{{ $title }}</title>
1515
<link rel="stylesheet" href="/css/main.css"/>
@@ -24,8 +24,10 @@
2424
<body>
2525
<div class="gangsta-wrap">
2626
<div class="header">
27-
<img src="{{ $logo }}" class="logo"/>
28-
<span class="title"><a href="/">{{ $title }}</a></span>
27+
<div>
28+
<img src="{{ $logo }}" alt="logo" class="logo"/>
29+
<span class="title"><a href="/">{{ $title }}</a></span>
30+
</div>
2931
<div class="right-links">
3032
{{ with $resources }}
3133
<a href="{{ . }}" class="button resources-link">Resources</a>

‎site/layouts/partials/incident.html

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
1+
{{- $severity := .Params.severity | default "under-maintenance" -}}
2+
{{- $alert := index .Site.Data.severity.alerts $severity -}}
13
<div class="incident card">
2-
<div class="incident-header">
3-
<p class="incident-title">{{ .Title }}</p>
4-
<p class="incident-date">{{ dateFormat "02 Jan 2006 15:04 MST" .Date }}</p>
4+
<div class="flex-out">
5+
<h1 class="incident-title">{{ .Title }}</h1>
6+
<p class="small mute">{{- dateFormat "02 Jan 2006 15:04 MST" .Date -}}</p>
57
</div>
68
<div class="incident-description">
79
{{- .Content -}}
810
</div>
9-
{{- $severity := .Params.severity | default "under-maintenance" -}}
10-
{{- $alert := index .Site.Data.severity.alerts $severity -}}
11-
12-
<p class="incident-status color-{{ $alert }}">
13-
{{ index .Site.Data.severity.descriptions $severity }}
14-
</p>
11+
<div class="incident-status flex-out">
12+
<p class="color-{{ $alert }}">
13+
{{- index .Site.Data.severity.descriptions $severity -}}
14+
</p>
15+
<p class="small">Affected Systems:
16+
<span class="color-{{ $alert }}">
17+
{{- delimit .Params.affectedsystems ", " -}}
18+
</span>
19+
</p>
20+
</div>
1521
</div>

‎site/layouts/partials/status-badge.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="system-status-badge color-{{ .alert }}">
22
<!-- Depends on status -->
3-
<img src="/images/icon-{{ .alert }}.svg" />
3+
<img src="/images/icon-{{ .alert }}.svg" alt="{{ .alert }}"/>
44
{{ .description }}
55
</div>

‎site/layouts/partials/systems.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@
77
{{ $name := . }}
88
<div class="system-operational">
99
<div class="card">
10-
{{ $name }}
11-
10+
{{- $name -}}
1211
{{ if $.incidents }}
1312
{{ range $.incidents }}
1413
{{ if in .Params.affectedsystems $name }}

‎site/layouts/section/incidents.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
<div class="incidents">
44
{{ range (.Paginate .Data.Pages.ByPublishDate 15 ).Pages }}
5-
<div class="incident-summary">
5+
<div class="incident-summary flex-out">
66
<a href="{{ .Permalink }}" class="article article-title">
77
{{ .Title }}
88
</a>
9-
<span class="article-date">
9+
<span class="article-date mute">
1010
{{ dateFormat "02 Jan 2006 15:04 MST" .Date }}
1111
</span>
1212
</div>

‎site/layouts/shortcodes/track.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<span class="incident-date">{{ dateFormat "02 Jan 2006 15:04 MST" (.Get 0) }}</span>
1+
<p class="small mute separate">{{ dateFormat "02 Jan 2006 15:04 MST" (.Get 0) }}</p>

‎src/css/main.css

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ a:active {
2828
margin-bottom: 40px;
2929
padding: 16px 0 24px 0;
3030
border-bottom: 2px solid #F7F7F8;
31+
display: flex;
32+
flex-direction: row;
33+
justify-content: space-between;
3134
}
3235

3336
.logo {
@@ -52,18 +55,14 @@ a:active {
5255
text-decoration: none;
5356
}
5457

55-
.right-links {
56-
float: right;
57-
}
58-
5958
@media (max-width: 450px) {
6059
.right-links {
61-
float: left;
6260
margin-top: 24px;
6361
}
6462

6563
.header {
6664
padding-bottom: 68px;
65+
flex-direction: column;
6766
}
6867
}
6968

@@ -109,8 +108,8 @@ a:active {
109108
padding: 16px;
110109
border-radius: 10px;
111110
background: #fff;
112-
box-shadow: 0px 4px 8px 0px rgba(0,0,0,.05);
113-
border: 1px solid #fbfbfb;
111+
box-shadow: 0px 4px 8px 0px rgba(0,0,0,.1);
112+
border: 1px solid #eaeaea;
114113

115114
font-size: 16px;
116115
font-weight: 500;
@@ -138,36 +137,50 @@ a:active {
138137
height: 16px;
139138
}
140139

140+
.incident h1 {
141+
font-size: 1.5em;
142+
margin-top: 0;
143+
}
144+
141145
.incident {
142146
color: #202020;
143147
}
144148

145149
.incident-title {
146-
float: left;
147150
text-transform: capitalize;
151+
width: 75%;
148152
}
149153

150-
.incident-date {
151-
float: right;
152-
font-size: 14px;
153-
opacity: 0.3;
154-
}
155-
156-
@media (max-width: 450px) {
154+
@media (max-width: 725px) {
157155
.incident-date {
158156
width: 100%;
159157
}
158+
.incident-title {
159+
width: 100%;
160+
}
160161
}
161162

162163
.incident-description {
163164
font-size: 14px;
164165
font-weight: 400;
165166
}
166167

168+
.separate {
169+
text-align: right;
170+
padding-bottom: 1em;
171+
border-bottom: 2px solid #F7F7F8;
172+
}
173+
167174
.incident-status {
168175
margin: 24px 0 0 0;
169176
}
170177

178+
.flex-out {
179+
display: flex;
180+
flex-direciton: row;
181+
justify-content: space-between;
182+
}
183+
171184
.system-check-ok {
172185
margin: 80px auto 104px auto;
173186
width: 100%;
@@ -190,7 +203,6 @@ a:active {
190203
font-size: 16px;
191204
font-weight: 500;
192205
border-bottom: 2px solid #F7F7F8;
193-
color: #bbb;
194206
}
195207

196208
.see-more {
@@ -218,23 +230,28 @@ a:active {
218230
color: #BD1F1A;
219231
}
220232

233+
.mute {
234+
opacity: 0.7;
235+
}
236+
237+
.small {
238+
font-size: 14px;
239+
}
240+
221241
.incident-summary {
222242
margin-bottom: 24px;
223243
overflow: hidden;
224244
}
225245

226246
.article-title {
227247
width: 70%;
228-
float: left;
229248
text-transform: capitalize;
230249
}
231250

232251
.article-date {
233252
width: 29%;
234-
float: right;
235253
text-align: right;
236254
font-size: 14px;
237-
opacity: 0.3;
238255
}
239256

240257
.pagination,
@@ -283,7 +300,6 @@ a:active {
283300

284301
.footer a {
285302
color: #202020;
286-
opacity: 0.3;
287303
transition: all 0.3s ease;
288304
}
289305

0 commit comments

Comments
 (0)