lucas.mathieu/cachet-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign status page

Browse Source
This commit is contained in:
Joseph Cohen
2014-12-27 23:43:31 -06:00
parent f859597336
commit ba27c96568
12 changed files with 191 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/sass/_palette.scss
View File

@@ -19,5 +19,5 @@ $dark-pink: darken($pink, 10%);
$grey: #ecf0f1;
$dark-grey: darken($grey, 10%);
$orange: #E87E04;
$orange: #FF8800;
$dark-orange: darken($orange, 10%);

86
app/assets/sass/_status-page.scss
View File

@@ -1,7 +1,8 @@
@import 'palette';
body.status-page {
font-family: 'Lato';
font-family: 'Open Sans', sans-serif;
background-color: #F0F3F4;
color: #333333;
font-size: 1.4em;
font-weight: 300;
@@ -99,79 +100,96 @@ body.status-page {
&:before {
content: '';
position: absolute;
left: 25px;
left: 26px;
top: 5px;
width: 3px;
width: 2px;
height: 100%;
background: #eee;
background: #7266BA;
}
.icon {
background: #000;
background: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid #e8e8e8;
position: absolute;
left: 24px;
top: 4px;
left: 25px;
top: 14px;
.fa {
color: #fff;
position: absolute;
&.fa-flag {
top: 10px;
left: 11px;
left: 9px;
}
&.fa-warning {
top: 10px;
left: 11px;
left: 9px;
}
&.fa-eye {
top: 10px;
left: 11px;
left: 9px;
}
&.fa-check {
top: 10px;
left: 11px;
left: 9px;
}
}
&.status-1 {
background-color: $orange;
color: $orange;
}
&.status-2 {
background-color: $yellow;
color: $yellow;
}
&.status-3 {
background-color: $blue;
color: $blue;
}
&.status-4 {
background-color: $green;
color: $green;
}
}
&.last:before {
background: #fff;
}
.message .content {
float: left;
width: 80%;
p {
margin-top: 15px;
color: #555;
.date {
display: block;
color: $dark-grey;
margin-bottom: 6px;
font-size: 13px;
}
.panel {
margin: 0;
border-radius: 2px;
}
.panel-body {
border-top: 1px solid #eee;
}
.panel-message {
border: 1px solid #e8e8e8;
.date {
color: #c7c7c7;
}
}
.panel-message:before {
position: absolute;
top: 16px;
left: 1px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 0 solid #e8e8e8;
border-right: 15px solid #e8e8e8;
border-bottom: 15px solid transparent;
content: " ";
}
.panel-message:after {
position: absolute;
top: 17px;
left: 2px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 0 solid #fff;
border-right: 14px solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
}
}
@media (max-width: 991px) {
.timeline .moment .icon {
left: 17px;
}
}
@media (max-width: 767px) {
.timeline .moment .message .content {
.timeline .moment .content {
width: 100%;
}
}

1
app/lang/en/cachet.php
View File

@@ -18,6 +18,7 @@ return [
3 => 'Watching',
4 => 'Fixed',
],
'none' => 'Nothing to report',
],
// Service Status
'service' => [

9
app/models/Incident.php
View File

@@ -61,4 +61,13 @@ class Incident extends Eloquent implements \Dingo\Api\Transformer\TransformableI
{
return new CachetHQ\Cachet\Transformers\IncidentTransformer();
}
/**
* Check if Incident has message.
* @return boolean
*/
public function hasMessage()
{
return ($this->message !== '');
}
}

4
app/views/index.blade.php
View File

@@ -9,7 +9,7 @@
@include('partials.graphs')
@endif
@for($i=0; $i <= 7; $i++)
@foreach(range(0, 7) as $i => $v)
@include('partials.incident', array('i', $i))
@endfor
@endforeach
@stop

2
app/views/layout/master.blade.php
View File

@@ -10,7 +10,7 @@
<title>{{ isset($pageTitle) ? $pageTitle : Setting::get('app_name') }} | Cachet</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,300,600' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ elixir('css/all.css') }}">
@include('partials.stylesheet')

32
app/views/partials/incident.blade.php
View File

@@ -1,29 +1,39 @@
<?php
$incidentDate = Carbon::now()->subDays($i);
$incidents = Incident::whereRaw('DATE(created_at) = "' . $incidentDate->format('Y-m-d') . '"')->orderBy('created_at', 'desc')->get();
$incidents = Incident::whereRaw('DATE(created_at) = "' . $incidentDate->format('Y-m-d') . '"')
->orderBy('created_at', 'desc')->get();
?>
<h3>{{ $incidentDate->format('jS M Y') }}</h3>
<div class='timeline'>
<div class='content-wrapper'>
@foreach($incidents as $incidentID => $incident)
<div class='moment {{ $incidentID === 0 ? "first" : null }}'>
@forelse($incidents as $incidentID => $incident)
<div class="moment {{ $incidentID === 0 ? "first" : null }}">
<div class="row event clearfix">
<div class="col-sm-1">
<div class="icon status-{{ $incident->status }}">
<i class="{{ $incident->icon }}"></i>
</div>
</div>
<div class="col-sm-11 message">
<div class="content">
<strong>{{ $incident->name }}</strong>
<p>
<span class='date'>{{ $incident->created_at->diffForHumans() }}</span>
{{ $incident->message }}
</p>
<div class="col-xs-10 col-xs-offset-2 col-sm-11 col-sm-offset-0">
<div class="panel panel-message">
<div class="panel-heading">
{{ $incident->name }}
<br>
<small class='date'>{{ $incident->created_at->diffForHumans() }}</small>
</div>
@if($incident->hasMessage())
<div class="panel-body">
<p>
{{ $incident->message }}
</p>
</div>
@endif
</div>
</div>
</div>
</div>
@endforeach
@empty
{{ Lang::get('cachet.incident.none') }}
@endforelse
</div>
</div>

79
public/build/css/all-301b2b9a.css → public/build/css/all-2dfaf63f.css
View File

@@ -4378,7 +4378,8 @@ body.dashboard .content {
margin-top: 0; }
body.status-page {
font-family: 'Lato';
font-family: 'Open Sans', sans-serif;
background-color: #F0F3F4;
color: #333333;
font-size: 1.4em;
font-weight: 300; }
@@ -4444,61 +4445,75 @@ body.status-page {
body.status-page .timeline .moment:before {
content: '';
position: absolute;
left: 25px;
left: 26px;
top: 5px;
width: 3px;
width: 2px;
height: 100%;
background: #eee; }
background: #7266BA; }
body.status-page .timeline .moment .icon {
background: #000;
background: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid #e8e8e8;
position: absolute;
left: 24px;
top: 4px; }
left: 25px;
top: 14px; }
body.status-page .timeline .moment .icon .fa {
color: #fff;
position: absolute; }
body.status-page .timeline .moment .icon .fa.fa-flag {
top: 10px;
left: 11px; }
left: 9px; }
body.status-page .timeline .moment .icon .fa.fa-warning {
top: 10px;
left: 11px; }
left: 9px; }
body.status-page .timeline .moment .icon .fa.fa-eye {
top: 10px;
left: 11px; }
left: 9px; }
body.status-page .timeline .moment .icon .fa.fa-check {
top: 10px;
left: 11px; }
left: 9px; }
body.status-page .timeline .moment .icon.status-1 {
background-color: #E87E04; }
color: #FF8800; }
body.status-page .timeline .moment .icon.status-2 {
background-color: #F7CA18; }
color: #F7CA18; }
body.status-page .timeline .moment .icon.status-3 {
background-color: #3498db; }
color: #3498db; }
body.status-page .timeline .moment .icon.status-4 {
background-color: #2ECC71; }
color: #2ECC71; }
body.status-page .timeline .moment.last:before {
background: #fff; }
body.status-page .timeline .moment .message .content {
float: left;
width: 80%; }
body.status-page .timeline .moment .message .content p {
margin-top: 15px;
color: #555; }
body.status-page .timeline .moment .message .content p .date {
display: block;
color: #cfd9db;
margin-bottom: 6px;
font-size: 13px; }
@media (max-width: 991px) {
body.status-page .timeline .moment .icon {
left: 17px; }
}
body.status-page .timeline .moment .panel {
margin: 0;
border-radius: 2px; }
body.status-page .timeline .moment .panel-body {
border-top: 1px solid #eee; }
body.status-page .timeline .moment .panel-message {
border: 1px solid #e8e8e8; }
body.status-page .timeline .moment .panel-message .date {
color: #c7c7c7; }
body.status-page .timeline .moment .panel-message:before {
position: absolute;
top: 16px;
left: 1px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 0 solid #e8e8e8;
border-right: 15px solid #e8e8e8;
border-bottom: 15px solid transparent;
content: " "; }
body.status-page .timeline .moment .panel-message:after {
position: absolute;
top: 17px;
left: 2px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 0 solid #fff;
border-right: 14px solid #fff;
border-bottom: 14px solid transparent;
content: " "; }
@media (max-width: 767px) {
body.status-page .timeline .moment .message .content {
body.status-page .timeline .moment .content {
width: 100%; }
}
body.status-page .list-group {

79
public/build/css/all.css
View File

@@ -4378,7 +4378,8 @@ body.dashboard .content {
margin-top: 0; }
body.status-page {
font-family: 'Lato';
font-family: 'Open Sans', sans-serif;
background-color: #F0F3F4;
color: #333333;
font-size: 1.4em;
font-weight: 300; }
@@ -4444,61 +4445,75 @@ body.status-page {
body.status-page .timeline .moment:before {
content: '';
position: absolute;
left: 25px;
left: 26px;
top: 5px;
width: 3px;
width: 2px;
height: 100%;
background: #eee; }
background: #7266BA; }
body.status-page .timeline .moment .icon {
background: #000;
background: #fff;
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid #e8e8e8;
position: absolute;
left: 24px;
top: 4px; }
left: 25px;
top: 14px; }
body.status-page .timeline .moment .icon .fa {
color: #fff;
position: absolute; }
body.status-page .timeline .moment .icon .fa.fa-flag {
top: 10px;
left: 11px; }
left: 9px; }
body.status-page .timeline .moment .icon .fa.fa-warning {
top: 10px;
left: 11px; }
left: 9px; }
body.status-page .timeline .moment .icon .fa.fa-eye {
top: 10px;
left: 11px; }
left: 9px; }
body.status-page .timeline .moment .icon .fa.fa-check {
top: 10px;
left: 11px; }
left: 9px; }
body.status-page .timeline .moment .icon.status-1 {
background-color: #E87E04; }
color: #FF8800; }
body.status-page .timeline .moment .icon.status-2 {
background-color: #F7CA18; }
color: #F7CA18; }
body.status-page .timeline .moment .icon.status-3 {
background-color: #3498db; }
color: #3498db; }
body.status-page .timeline .moment .icon.status-4 {
background-color: #2ECC71; }
color: #2ECC71; }
body.status-page .timeline .moment.last:before {
background: #fff; }
body.status-page .timeline .moment .message .content {
float: left;
width: 80%; }
body.status-page .timeline .moment .message .content p {
margin-top: 15px;
color: #555; }
body.status-page .timeline .moment .message .content p .date {
display: block;
color: #cfd9db;
margin-bottom: 6px;
font-size: 13px; }
@media (max-width: 991px) {
body.status-page .timeline .moment .icon {
left: 17px; }
}
body.status-page .timeline .moment .panel {
margin: 0;
border-radius: 2px; }
body.status-page .timeline .moment .panel-body {
border-top: 1px solid #eee; }
body.status-page .timeline .moment .panel-message {
border: 1px solid #e8e8e8; }
body.status-page .timeline .moment .panel-message .date {
color: #c7c7c7; }
body.status-page .timeline .moment .panel-message:before {
position: absolute;
top: 16px;
left: 1px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 0 solid #e8e8e8;
border-right: 15px solid #e8e8e8;
border-bottom: 15px solid transparent;
content: " "; }
body.status-page .timeline .moment .panel-message:after {
position: absolute;
top: 17px;
left: 2px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 0 solid #fff;
border-right: 14px solid #fff;
border-bottom: 14px solid transparent;
content: " "; }
@media (max-width: 767px) {
body.status-page .timeline .moment .message .content {
body.status-page .timeline .moment .content {
width: 100%; }
}
body.status-page .list-group {

8
public/build/js/all-d8f5640f.js → public/build/js/all-5a1e1732.js
View File

File diff suppressed because one or more lines are too long

8
public/build/js/all.js
View File

File diff suppressed because one or more lines are too long

4
public/build/rev-manifest.json
View File

@@ -1,4 +1,4 @@
{
"css/all.css": "css/all-301b2b9a.css",
"js/all.js": "js/all-d8f5640f.js"
"css/all.css": "css/all-2dfaf63f.css",
"js/all.js": "js/all-5a1e1732.js"
}