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) @foreach($incidents as $incident)
<h3><span class='label {{ $incident->labelColor }}'>{{ $incident->humanStatus }}</span> {{ $incident->name }}</h3> <h3><span class='label {{ $incident->labelColor }}'>{{ $incident->humanStatus }}</span> {{ $incident->name }}</h3>
<p>{{ $incident->message }}</p> <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 @endforeach
@endif @endif

View File

@@ -1,38 +1,30 @@
@extends('layout.master') @extends('layout.master')
@section('content') @section('content')
<div class='row'> <div class='page-header'>
<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='alert alert-{{ $systemStatus }}'>{{ $systemMessage }}</div> <div class='alert alert-{{ $systemStatus }}'>{{ $systemMessage }}</div>
</div> </div>
<div class='row'> <ul class='list-group'>
<ul class='list-group'> @foreach(Component::get() as $component)
@foreach(Component::get() as $component) <li class='list-group-item'>
<li class='list-group-item'> <div class='row'>
{{ $component->name }} <div class='col-md-8'>
@if($component->description) <h4>{{ $component->name }}</h4>
<small>{{ $component->description }}</small> @if($component->description)
@endif <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> <h1>Past Incidents</h1>
</li> @for($i=0; $i <= 7; $i++)
@endforeach @include('incident', array('i', $i))
</ul> @endfor
</div>
<div class='row'>
<h1>Past Incidents</h1>
@for($i=0; $i <= 7; $i++)
@include('incident', array('i', $i))
@endfor
</div>
@stop @stop

View File

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

View File

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

View File

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