Compile some CSS to start working on the design

This commit is contained in:
James Brooks
2014-11-19 12:46:29 +00:00
parent 3571cb79a5
commit 6c2a022ef2
5 changed files with 115 additions and 91 deletions

View File

@@ -10,6 +10,6 @@
@foreach($incidents as $incident)
<h3><span class='label {{ $incident->labelColor }}'>{{ $incident->humanStatus }}</span> {{ $incident->name }}</h3>
<p>{{ $incident->message }}</p>
<h4><time>{{ $incident->created_at->format('H:i:s A') }} {{ Config::get('app.timezone') }}</time></h4>
<h4><small><time>{{ $incident->created_at->format('H:i:s A') }} {{ Config::get('app.timezone') }}</time></small></h4>
@endforeach
@endif

View File

@@ -1,38 +1,30 @@
@extends('layout.master')
@section('content')
<div class='row'>
<div class='masthead-container'>
<div class='masthead'>
<div class='text-container'>
<span class='page-name font-largest'><a href='#'>{{ Setting::get('site_name') }}</a></span>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='page-header'>
<div class='alert alert-{{ $systemStatus }}'>{{ $systemMessage }}</div>
</div>
<div class='row'>
<ul class='list-group'>
@foreach(Component::get() as $component)
<li class='list-group-item'>
{{ $component->name }}
@if($component->description)
<small>{{ $component->description }}</small>
@endif
<ul class='list-group'>
@foreach(Component::get() as $component)
<li class='list-group-item'>
<div class='row'>
<div class='col-md-8'>
<h4>{{ $component->name }}</h4>
@if($component->description)
<p>{{ $component->description }}</p>
@endif
</div>
<div class='col-md-4'>
<p class='text-right'>{{ $component->humanStatus }}</p>
</div>
</div>
</li>
@endforeach
</ul>
<span class='pull-right'>{{ $component->humanStatus }}</span>
</li>
@endforeach
</ul>
</div>
<div class='row'>
<h1>Past Incidents</h1>
@for($i=0; $i <= 7; $i++)
@include('incident', array('i', $i))
@endfor
</div>
<h1>Past Incidents</h1>
@for($i=0; $i <= 7; $i++)
@include('incident', array('i', $i))
@endfor
@stop

View File

@@ -2,29 +2,47 @@ body {
color: #333333;
}
h4 {
margin-top: 25px;
.alert {
&.alert-success {
background-color: #8DCD8D;
border-color: #4cae4c;
color: white;
}
&.alert-info {
background: #8CD3E8;
border-color: #46b8da;
color: #FFF;
}
}
.row {
margin-bottom: 20px;
}
.list-group {
margin-bottom: 20px;
padding-left: 0;
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
a.list-group-item {
color: #030303;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #ffffff;
border: 1px solid #95a5a6;
hr {
margin-top: 40px;
margin-bottom: 40px;
h4 {
&.list-group-item-heading {
color: inherit;
margin-top: 0px;
margin-bottom: 5px;
}
}
p {
margin-bottom: 0;
line-height: 1.3;
}
}
}

View File

@@ -1,24 +1,31 @@
body {
color: #333333; }
h4 {
margin-top: 25px; }
.alert.alert-success {
background-color: #8DCD8D;
border-color: #4cae4c;
color: white; }
.alert.alert-info {
background: #8CD3E8;
border-color: #46b8da;
color: #FFF; }
.row {
margin-bottom: 20px; }
.row .row {
margin-top: 10px;
margin-bottom: 0; }
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86, 61, 124, 0.15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, 0.2); }
hr {
margin-top: 40px;
margin-bottom: 40px; }
.list-group {
margin-bottom: 20px;
padding-left: 0; }
.list-group a.list-group-item {
color: #030303; }
.list-group .list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #ffffff;
border: 1px solid #95a5a6; }
.list-group .list-group-item h4.list-group-item-heading {
color: inherit;
margin-top: 0px;
margin-bottom: 5px; }
.list-group .list-group-item p {
margin-bottom: 0;
line-height: 1.3; }

View File

@@ -1,24 +1,31 @@
body {
color: #333333; }
h4 {
margin-top: 25px; }
.alert.alert-success {
background-color: #8DCD8D;
border-color: #4cae4c;
color: white; }
.alert.alert-info {
background: #8CD3E8;
border-color: #46b8da;
color: #FFF; }
.row {
margin-bottom: 20px; }
.row .row {
margin-top: 10px;
margin-bottom: 0; }
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86, 61, 124, 0.15);
border: 1px solid #ddd;
border: 1px solid rgba(86, 61, 124, 0.2); }
hr {
margin-top: 40px;
margin-bottom: 40px; }
.list-group {
margin-bottom: 20px;
padding-left: 0; }
.list-group a.list-group-item {
color: #030303; }
.list-group .list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #ffffff;
border: 1px solid #95a5a6; }
.list-group .list-group-item h4.list-group-item-heading {
color: inherit;
margin-top: 0px;
margin-bottom: 5px; }
.list-group .list-group-item p {
margin-bottom: 0;
line-height: 1.3; }