Merge branch 'affected-systems' of https://github.com/steveoh/netlify-statuskit into affected-systems

This commit is contained in:
steveoh 2017-08-30 16:54:10 -06:00
commit 0f60b7dd96
3 changed files with 18 additions and 6 deletions

View File

@ -1,6 +1,6 @@
{{ partial "header" . }} {{ partial "header" . }}
{{ $incidents := where .Site.Pages.ByDate.Reverse "Section" "incidents" }} {{ $incidents := where .Site.RegularPages.ByDate.Reverse "Section" "incidents" }}
{{ $active := where $incidents "Params.resolved" "!=" true }} {{ $active := where $incidents "Params.resolved" "!=" true }}
{{ partial "systems" (dict "content" . "incidents" $active) }} {{ partial "systems" (dict "content" . "incidents" $active) }}

View File

@ -1,14 +1,18 @@
{{- $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="incident-header">
<p class="incident-title">{{ .Title }}</p> <p class="incident-title">{{ .Title }}</p>
<p class="incident-date">{{ dateFormat "02 Jan 2006 15:04 MST" .Date }}</p> <div class="pull-right">
<p class="affected-systems">Affected Systems: <span class="incident-status color-{{ $alert }}">{{ delimit .Params.affectedsystems ", " }}</span>
</p>
<p class=incident-date>{{- dateFormat "02 Jan 2006 15:04 MST" .Date -}}</p>
</div>
</div> </div>
<div class="incident-description"> <div class="incident-description">
{{- .Content -}} {{- .Content -}}
</div> </div>
{{- $alert := index .Site.Data.severity.alerts .Params.severity -}}
<p class="incident-status color-{{ $alert }}"> <p class="incident-status color-{{ $alert }}">
{{ index .Site.Data.severity.descriptions .Params.severity }} {{- index .Site.Data.severity.descriptions $severity -}}
</p> </p>
</div> </div>

View File

@ -147,12 +147,20 @@ a:active {
text-transform: capitalize; text-transform: capitalize;
} }
.incident-date { .pull-right {
float: right; float: right;
}
.incident-date {
font-size: 14px; font-size: 14px;
opacity: 0.3; opacity: 0.3;
} }
.affected-systems {
font-size: 14px;
opacity: 0.7;
}
@media (max-width: 450px) { @media (max-width: 450px) {
.incident-date { .incident-date {
width: 100%; width: 100%;