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

add affected systems to incident cards

Browse Source 
closes #12
This commit is contained in:
steveoh 2017-08-29 21:52:54 -06:00
parent 4ed4b7f384
commit c6e5108b44
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +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>
{{- $severity := .Params.severity | default "under-maintenance" -}}
{{- $alert := index .Site.Data.severity.alerts $severity -}}
<p class="incident-status color-{{ $alert }}"> <p class="incident-status color-{{ $alert }}">
{{ index .Site.Data.severity.descriptions $severity }} {{- index .Site.Data.severity.descriptions $severity -}}
</p> </p>
</div> </div>

10
src/css/main.css
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%;