Lets get the status page looking right

2014-12-05 13:38:07 +00:00
parent 8a0e827907
commit da7a0cd351
3 changed files with 157 additions and 3 deletions
--- a/app/assets/sass/application.scss
+++ b/app/assets/sass/application.scss
@@ -0,0 +1,152 @@
+body {
+    color: #333333;
+    font-size: 1.4em;
+    font-weight: 300;
+}
+
+hr {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+.text-success, .text-component-1 {
+    color: #4cae4c;
+}
+
+.text-info, .text-component-2 {
+    color: #46b8da;
+}
+
+.text-alert, .text-component-3 {
+    color: #F9BF3B;
+}
+
+.text-danger, .text-component-4 {
+    color: #D91E18;
+}
+
+.container {
+    max-width: 960px;
+}
+
+.page-header {
+    margin-top: 10px;
+}
+
+.alert {
+    margin-top: 20px;
+    border-radius: 0;
+    font-size: 1.2em;
+    &.alert-success {
+        background-color: #8DCD8D;
+        border-color: #4cae4c;
+        color: white;
+    }
+
+    &.alert-info {
+        background: #8CD3E8;
+        border-color: #46b8da;
+        color: #FFF;
+    }
+
+    &.alert-danger {
+        background: #D91E18;
+        border-color: #CF000F;
+        color: #FFF;
+    }
+}
+
+.badge {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
+    &.badge-incident-1 {
+        background-color: #F27935;
+    }
+    &.badge-incident-2 {
+        background-color: #F9BF3B;
+    }
+    &.badge-incident-3 {
+        background-color: #46b8da;
+    }
+    &.badge-incident-4 {
+        background-color: #4cae4c;
+    }
+}
+
+.list-group {
+    margin-bottom: 20px;
+    padding-left: 0;
+    border-radius: 0;
+
+    .list-group-item {
+        border-radius: 0;
+        background-color: #ffffff;
+        border: 1px solid #BDC3C7;
+        font-size: 1.1em;
+
+        span.badge {
+            position: absolute;
+            top: 0;
+            right: 0;
+            border-radius: 0;
+            display: block;
+        }
+
+        i.glyphicon {
+            font-size: 1.4em;
+        }
+
+        h1, h2, h3, h4 {
+            margin-bottom: 2px;
+        }
+
+        h4 {
+            font-weight: 400;
+            max-width: 90%;
+        }
+
+        p, time {
+            margin-bottom: 0;
+            line-height: 1.3em;
+        }
+
+        time {
+            color: #6C7A89;
+            // letter-spacing: 0.02em;
+            font-weight: 300;
+            font-size: 1.1em;
+        }
+
+        &.active {
+            background-color: #F2F1EF;
+            h3 {
+                color: #22313F;
+                padding-top: 6px;
+                padding-bottom: 6px;
+                font-weight: 300;
+                font-size: 1.6em;
+            }
+
+            &:hover {
+                color: inherit;
+                border-color: #BDC3C7;
+            }
+        }
+    }
+
+    &.components {
+        margin-bottom: 30px;
+        p {
+            margin-bottom: 10px;
+        }
+        .badge {
+            color: transparent;
+        }
+    }
+}
--- a/app/views/layout/master.blade.php
+++ b/app/views/layout/master.blade.php
@@ -11,11 +11,11 @@

    <link href='http://fonts.googleapis.com/css?family=Raleway:400,700,300,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
-    <link rel="stylesheet" href="{{ elixir('css/all.css') }}">
+    <link rel="stylesheet" href="/css/application.css">

    <script src="{{ elixir('js/all.js') }}"></script>
 </head>
-<body>
+<body class='status-page'>
    <div class='container'>
    @yield('content')
    </div>
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -18,4 +18,6 @@ elixir(function(mix) {
     .version(['public/css/all.css', 'public/js/all.js'], 'public')
     .copy('app/assets/bower_components/bootstrap/dist/fonts/', 'public/build/fonts')
     .copy('app/assets/bower_components/fontawesome/fonts/', 'public/build/fonts');
-});
+
+  mix.sass('application.scss');
+});