Merge pull request #5 from jasonthomas/ui-updates

update site UI
jasonthomas · Dec 8, 2014 · a3e7e66 · a3e7e66
2 parents ff9e3b1 + f6b0f9a
commit a3e7e66
Show file tree

Hide file tree

Showing 14 changed files with 417 additions and 9,728 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -17,6 +17,10 @@ module.exports = function(grunt) {
       bootstrapVars: {
         src: 'application_styles/variables.less',
         dest: 'bower_components/bootstrap/less/variables.less'
+      },
+      bootstrapJS: {
+        src: 'bower_components/bootstrap/dist/js/bootstrap.min.js',
+        dest: 'board/static/js/libs/bootstrap.min.js'
       }
     },
     autoprefixer: {
@@ -32,6 +36,6 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-autoprefixer');
 
-  grunt.registerTask('css',['copy','less','autoprefixer']);
+  grunt.registerTask('default',['copy','less','autoprefixer']);
 
 };
diff --git a/README.md b/README.md
@@ -22,10 +22,28 @@ You might need to install [pip](http://www.pip-installer.org/en/latest/installin
 Back on the admin home page, click on "services" and add the things you want to report the status of (website, API etc).
 To change the status of a service add an event for it.
 
+CSS
+---
+
+The CSS for this site is written in LESS and has several dependencies. To edit you will need NPM, Bower and Grunt installed. 
+
+    brew install npm
+    npm install -g bower
+    npm install -g grunt
+
+To modify CSS, begin by installing npm and bower dependencies from the `whiskerboard` directory.
+
+    npm install
+    bower install
+
+The only files that should be manipulated are `application_styles/main.less` and `application_styles/variables.less`. 
+
+To compile changes to LESS, use the `grunt` command.
+
+
 API Documentation
 -----------------
 
 Visit the [wiki](http://github.com/sijis/whiskerboard/wiki) page on details about the API.
 
 You may also find useful the [whiskerboard-tools](http://github.com/sijis/whiskerboard-tools) repository.
-
diff --git a/application_styles/main.css b/application_styles/main.css
@@ -2,6 +2,14 @@ html,
 body {
   font-family: 'Fira Sans', sans-serif;
 }
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.site-content {
+  flex: 1;
+}
 h1,
 h2,
 h3,
@@ -14,62 +22,77 @@ h6 {
   padding: 10px 0;
 }
 .jumbotron a {
-  text-decoration: none;
   color: #424f5a;
+  text-decoration: none;
 }
 #services-table {
-  background: #fff;
+  background: white;
   border: 1px solid #c1c1c1;
 }
 #services-table td,
 #services-table th {
+  border-bottom: 1px dotted #c1c1c1;
+  border: none;
   font-size: 18px;
-  padding: 10px !important;
-  border: 1px solid #c1c1c1;
+  padding: 10px;
+  vertical-align: middle;
 }
-#event-log h2 {
-  padding: 20px;
-  background: white;
-  border: 1px solid #c1c1c1;
-  margin: 0;
+#services-table td span,
+#services-table th span {
+  border-radius: 16px;
+  display: block;
+  padding: 12px;
 }
-#event-log .event {
-  margin-left: 20px;
-  padding: 20px;
-  border-left: 1px solid #c1c1c1;
-  position: relative;
+#services-table td {
+  border-radius: 10px;
+  padding: 15px;
+}
+#contact-block {
+  margin: 50px 0;
 }
-#event-log .event:before {
-  content: '';
+#contact-block a {
   display: block;
-  width: 15px;
-  height: 15px;
-  border-radius: 50%;
-  position: absolute;
-  left: -8px;
-  top: 22px !important;
-}
-#event-log .event.null:before {
-  background: #c1c1c1;
-  border: 1px solid #424f5a;
-}
-#event-log .event.danger {
+  margin: 0 auto;
+}
+#contact-block button {
+  display: block;
+  margin: 0 auto;
+  text-decoration: none;
+  transition: all 250ms;
+  width: 100%;
+}
+#event-log h2 {
+  font-size: 48px;
+  margin-bottom: 30px;
+}
+#event-log .event-date {
+  margin: 0 0 20px 0;
+}
+#event-log .event-date .date {
   border: 1px solid #c1c1c1;
-  background: #fff;
-  padding: 20px;
+  margin-left: 0px;
+  padding: 5px;
 }
-#event-log .event.danger h3,
-#event-log .event.danger h6,
-#event-log .event.danger p {
+#event-log .event {
+  background: white;
+  border-bottom: 1px solid #c1c1c1;
+  border-radius: 2px;
+  margin: 10px 0;
+  padding: 10px;
+}
+#event-log h3 {
   font-weight: 300;
-  margin: 10px;
+  margin: 10px 0;
 }
-#event-log .event.danger:before {
-  background: #d74345;
+#event-log p {
+  margin: 0;
+}
+#event-log .event-desc {
+  max-width: 60%;
 }
 .service-status {
+  color: white;
   padding: 20px;
-  color: #fff;
 }
 .service-status h3,
 .service-status p {
@@ -82,16 +105,24 @@ h6 {
   background: #d74345;
 }
 .white-box {
-  background: #fff;
+  background: white;
   padding: 20px;
 }
 .metric {
   margin: 0 auto;
 }
 #metrics-area {
+  background: white;
   margin: 50px 0;
   padding: 20px 0;
-  background: #fff;
+}
+#bug-submission {
+  background: white;
+  border: 1px solid #c1c1c1;
+  padding: 20px;
+}
+#bug-submission label {
+  display: block;
 }
 .footer {
   margin: 50px 0 0 0;

diff --git a/application_styles/main.less b/application_styles/main.less
@@ -1,78 +1,109 @@
 @import "variables.less";
 
+
 html, body {
-  font-family: 'Fira Sans',sans-serif;
+  font-family: 'Fira Sans', sans-serif;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.site-content {
+  flex: 1;
 }
 
-h1,h2,h3,h4,h4,h6 {
+h1,
+h2,
+h3,
+h4,
+h4,
+h6 {
   font-wieght: 400 !important;
 }
 
 .jumbotron {
   padding: 10px 0;
   a {
-    text-decoration: none;
     color: @gray-dark;
+    text-decoration: none;
   }
 }
 
 #services-table {
-  background: #fff;
+  background: white;
   border: 1px solid @gray;
   td,
   th {
+    border-bottom: 1px dotted @gray;
+    border: none;
     font-size: 18px;
-    padding: 10px !important;
-    border: 1px solid @gray;
+    padding: 10px;
+    vertical-align: middle;
+    span {
+      border-radius: 16px;
+      display: block;
+      padding: 12px;
+    }
+  }
+  td {
+    border-radius: 10px;
+    padding: 15px;
+  }
+}
+
+#contact-block {
+  margin: 50px 0;
+  a {
+    display: block;
+    margin: 0 auto;
+  }
+  button {
+    display: block;
+    margin: 0 auto;
+    text-decoration: none;
+    transition: all 250ms;
+    width: 100%;
   }
 }
 
 #event-log {
   h2 {
-    padding: 20px;
-    background: white;
-    border: 1px solid @gray;
-    margin:0;
+    font-size: 48px;
+    margin-bottom: 30px;
   }
-  .event {
-    margin-left: 20px;
-    padding: 20px;
-    border-left: 1px solid @gray;
-    position: relative;
-    &:before {
-      content: '';
-      display: block;
-      width: 15px;
-      height: 15px;
-      border-radius: 50%;
-      position: absolute;
-      left: -8px;
-      top: 22px !important;
-    } 
-    &.null{
-      &:before {
-        background: @gray;
-        border: 1px solid @gray-dark;
-      }
-    }
-    &.danger{
+  .event-date {
+    margin: 0 0 20px 0;
+    .date {
       border: 1px solid @gray;
-      h3,h6,p {
-        font-weight: 300;
-        margin: 10px;
-      }
-      background: #fff;
-      padding: 20px;
-      &:before {
-        background: @brand-danger;
-      }
-    }      
+      margin-left: 0px;
+      padding: 5px;
+    }
+  }
+  .event {
+    background: white;
+    border-bottom: 1px solid @gray;
+    border-radius: @border-radius-base;
+    margin: 10px 0;
+    padding: 10px;
+  }
+  h3 {
+    font-weight: 300;
+    margin: 10px 0;
+  }
+  p {
+    margin: 0;
+  }
+  .event-desc {
+    max-width: 60%;
   }
 }
 
 .service-status {
+  color: white;
   padding: 20px;
-  color: #fff;
   h3,p {
     margin: 5px 0;
   }
@@ -85,7 +116,7 @@ h1,h2,h3,h4,h4,h6 {
 }
 
 .white-box {
-  background: #fff;
+  background: white;
   padding: 20px;
 }
 
@@ -94,11 +125,19 @@ h1,h2,h3,h4,h4,h6 {
 }
 
 #metrics-area {
+  background: white;
   margin: 50px 0;
   padding: 20px 0;
-  background: #fff;
 }
 
+#bug-submission {
+  background: white;
+  border: 1px solid @gray;
+  padding: 20px;
+  label {
+    display: block;
+  }
+}
 
 .footer {
   margin: 50px 0 0 0;
@@ -114,3 +153,4 @@ h1,h2,h3,h4,h4,h6 {
     color: @gray-light;
   }
 }
+