From 0ebf900bbfb3bd2d9dda8b35d8251a39fce8baad Mon Sep 17 00:00:00 2001
From: DallonF <dallonfdev@gmail.com>
Date: Thu, 20 Dec 2012 13:47:35 -0700
Subject: [PATCH] Added more customization options to basic dashboard

---
 lib/internal-resources/dashboard/basic.html   | 12 +++-
 lib/internal-resources/dashboard/js/basic.js  |  9 ++-
 .../dashboard/stylesheets/deployments.less    |  8 ---
 .../dashboard/stylesheets/style.css           | 70 +++++++++++++------
 .../dashboard/stylesheets/style.less          | 22 ++++++
 5 files changed, 89 insertions(+), 32 deletions(-)

diff --git a/lib/internal-resources/dashboard/basic.html b/lib/internal-resources/dashboard/basic.html
index 909e0b8..7a512cf 100644
--- a/lib/internal-resources/dashboard/basic.html
+++ b/lib/internal-resources/dashboard/basic.html
@@ -1,14 +1,22 @@
 <div class="well hide" id="basic-dashboard">
-  <h3>Config</h3>
   <form class="form-horizontal" id="settings-form">
     <div class="form-actions" id="save-button-container">
       <button class="btn btn-success" type="submit" id="save-button" disabled="disabled"><i class="icon-white icon-ok"></i> Save</button>
       <button class="btn" type="button" id="cancel-button"><i class="icon-remove"></i> Cancel</button>
     </div>
   </form>
-  
 </div>
 
+<script type="text/html" id="basic-dashboard-header-template">
+  <% if (dashboard.image) { %> <img class="dashboard-img" src="<%= dashboard.image %>" width="100" height="100" /> <% } %>
+  <h3><%= dashboard.title || "Config" %></h3>
+  <% if (dashboard.author) { %> <div class="author">by <%= dashboard.author %></div> <% } %>
+  <% if (dashboard.url) { %> <p><a href="<%= dashboard.url %>"><%= dashboard.url %></a></p> <% } %>
+  <% if (dashboard.description) { %> <p><%= dashboard.description %></p> <% } %>
+
+  <% if (dashboard.image || dashboard.description) { %> <hr /> <% } %>
+</script>
+
 <script type="text/html" id="property-template">
   <div class="control-group">
     <label class="control-label code" for="prop-<%- name %>"><%- name %></label>
diff --git a/lib/internal-resources/dashboard/js/basic.js b/lib/internal-resources/dashboard/js/basic.js
index 3934b3e..f1ad3c6 100644
--- a/lib/internal-resources/dashboard/js/basic.js
+++ b/lib/internal-resources/dashboard/js/basic.js
@@ -1,7 +1,7 @@
 (function() {
 
 var propertyTemplate = _.template($('#property-template').html())
-  , timeouts = {}
+  , basicDashboardHeaderTemplate = _.template($('#basic-dashboard-header-template').html())
   , propertyValues = {}
   , data
   , config;
@@ -87,8 +87,15 @@ window.onbeforeunload = function() {
   }
 };
 
+function createHeader() {
+  $('#basic-dashboard').prepend(basicDashboardHeaderTemplate({
+    dashboard: Context.basicDashboard
+  }));
+}
+
 config.get(function(res, err) {
   data = res;
+  createHeader();
   createForm();
 });
 
diff --git a/lib/internal-resources/dashboard/stylesheets/deployments.less b/lib/internal-resources/dashboard/stylesheets/deployments.less
index e50b632..63bfb99 100644
--- a/lib/internal-resources/dashboard/stylesheets/deployments.less
+++ b/lib/internal-resources/dashboard/stylesheets/deployments.less
@@ -41,12 +41,6 @@
     margin-bottom: 0;
   }
 
-  hr {
-    border-bottom: none;
-    border-width: 1px;
-    border-top-color: #555 
-  }
-
   #deployments-empty {
 
     overflow: visible;
@@ -55,8 +49,6 @@
       overflow-y: visible;
     }
 
-    
-
     hr {
       border-top-color: #ccc; 
     }
diff --git a/lib/internal-resources/dashboard/stylesheets/style.css b/lib/internal-resources/dashboard/stylesheets/style.css
index d877ff9..4ca76f6 100644
--- a/lib/internal-resources/dashboard/stylesheets/style.css
+++ b/lib/internal-resources/dashboard/stylesheets/style.css
@@ -125,8 +125,11 @@ textarea {
 
   /* Makes inputs behave like true block-level elements */
 
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
+  box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
@@ -1992,7 +1995,7 @@ table .span24 {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
   border-color: #e6e6e6 #e6e6e6 #bfbfbf;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
   border: 1px solid #cccccc;
   border-bottom-color: #b3b3b3;
   -webkit-border-radius: 4px;
@@ -2105,7 +2108,7 @@ table .span24 {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#429e96', endColorstr='#428f9e', GradientType=0);
   border-color: #428f9e #428f9e #2b5e68;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
 }
 .btn-primary:hover,
 .btn-primary:active,
@@ -2130,7 +2133,7 @@ table .span24 {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe7f1c', endColorstr='#cc5a01', GradientType=0);
   border-color: #cc5a01 #cc5a01 #803801;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
 }
 .btn-warning:hover,
 .btn-warning:active,
@@ -2155,7 +2158,7 @@ table .span24 {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8b0e0c', endColorstr='#8b0e0c', GradientType=0);
   border-color: #8b0e0c #8b0e0c #450706;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
 }
 .btn-danger:hover,
 .btn-danger:active,
@@ -2180,7 +2183,7 @@ table .span24 {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#668731', endColorstr='#82ac3f', GradientType=0);
   border-color: #82ac3f #82ac3f #58742a;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
 }
 .btn-success:hover,
 .btn-success:active,
@@ -2205,7 +2208,7 @@ table .span24 {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#429e96', endColorstr='#59bab1', GradientType=0);
   border-color: #59bab1 #59bab1 #3a8c85;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
 }
 .btn-info:hover,
 .btn-info:active,
@@ -2230,7 +2233,7 @@ table .span24 {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0);
   border-color: #222222 #222222 #000000;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
 }
 .btn-inverse:hover,
 .btn-inverse:active,
@@ -2846,7 +2849,7 @@ input[type="submit"].btn.btn-mini {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#363535', endColorstr='#363535', GradientType=0);
   border-color: #363535 #363535 #0f0f0f;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
   -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
@@ -3761,8 +3764,11 @@ a.thumbnail:hover {
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
+  box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -webkit-transition: width 0.6s ease;
@@ -4111,8 +4117,11 @@ body {
   min-height: 100%;
   width: 100%;
   min-width: 1000px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
+  box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-flex: 1;
@@ -4209,8 +4218,11 @@ body {
   display: -ms-box;
   display: -o-box;
   width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
+  box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
@@ -4295,11 +4307,6 @@ body {
 #deployments #deploy-new-form {
   margin-bottom: 0;
 }
-#deployments hr {
-  border-bottom: none;
-  border-width: 1px;
-  border-top-color: #555555;
-}
 #deployments #deployments-empty {
   overflow: visible;
 }
@@ -4717,7 +4724,7 @@ li.L9 {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
   border-color: #e6e6e6 #e6e6e6 #bfbfbf;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
   border: 1px solid #cccccc;
   border-bottom-color: #b3b3b3;
   -webkit-border-radius: 4px;
@@ -4764,8 +4771,11 @@ li.L9 {
   background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
   background-image: linear-gradient(top, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
   border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
   border: 1px solid #cccccc;
   border-bottom-color: #b3b3b3;
   -webkit-border-radius: 4px;
@@ -4789,7 +4799,7 @@ li.L9 {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#429e96', endColorstr='#428f9e', GradientType=0);
   border-color: #428f9e #428f9e #2b5e68;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
 }
 .confirmation .actions button.ok:hover,
 .confirmation .actions button.ok:active,
@@ -5016,12 +5026,12 @@ li.L9 {
   -moz-backface-visibility: hidden;
 }
 .card .back {
-  -webkit-transform: rotateY(180deg);
-  -moz-transform: rotateY(180deg);
+  -webkit-transform: rotatey(180deg);
+  -moz-transform: rotatey(180deg);
 }
 .card.flipped .wrapper {
-  -webkit-transform: rotateY(180deg);
-  -moz-transform: rotateY(180deg);
+  -webkit-transform: rotatey(180deg);
+  -moz-transform: rotatey(180deg);
 }
 /* sideflip effect */
 .card.sideflip .wrapper {
@@ -5029,8 +5039,8 @@ li.L9 {
   -moz-transform-origin: right center;
 }
 .card.sideflip.flipped .wrapper {
-  -webkit-transform: translateX(-100%) rotateY(180deg);
-  -moz-transform: translateX(-100%) rotateY(180deg);
+  -webkit-transform: translatex(-100%) rotatey(180deg);
+  -moz-transform: translatex(-100%) rotatey(180deg);
 }
 body {
   background: url(../img/outlets.png) #030202;
@@ -5101,6 +5111,11 @@ p a {
 .well {
   padding: 10px 20px 20px;
 }
+.well hr {
+  border-bottom: none;
+  border-width: 1px;
+  border-top-color: #333;
+}
 h3 {
   color: #ffffff;
 }
@@ -5807,6 +5822,19 @@ pre {
 #basic-dashboard {
   width: 485px;
 }
+#basic-dashboard .dashboard-img {
+  float: left;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+#basic-dashboard .author {
+  margin-top: -10px;
+  margin-bottom: 10px;
+  font-style: italic;
+}
+#basic-dashboard hr {
+  clear: both;
+}
 #basic-dashboard #settings-form {
   margin-bottom: 0;
 }
diff --git a/lib/internal-resources/dashboard/stylesheets/style.less b/lib/internal-resources/dashboard/stylesheets/style.less
index edd5958..ea70be8 100644
--- a/lib/internal-resources/dashboard/stylesheets/style.less
+++ b/lib/internal-resources/dashboard/stylesheets/style.less
@@ -85,6 +85,12 @@ p a {
   padding: 10px 20px 20px;
 }
 
+.well hr {
+  border-bottom: none;
+  border-width: 1px;
+  border-top-color: #333;
+}
+
 h3 {color: @bodyBackground}
 
 table, th, tr, td, {border-color: @black !important;}
@@ -861,6 +867,22 @@ pre {
 #basic-dashboard {
   width: 485px;
 
+  .dashboard-img {
+    float: left;
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+
+  .author {
+    margin-top: -10px;
+    margin-bottom: 10px;
+    font-style: italic;
+  }
+
+  hr {
+    clear: both;
+  }
+
   #settings-form {
     margin-bottom: 0;
   }