Added more customization options to basic dashboard

This commit is contained in:
DallonF
2012-12-20 13:47:35 -07:00
parent 5c75680be8
commit 0ebf900bbf
5 changed files with 89 additions and 32 deletions

View File

@@ -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>

View File

@@ -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();
});

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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;
}