Permalink
Browse files

fixed up some gui things for the customer section

  • Loading branch information...
1 parent 127e750 commit 9b871168291ccc24c5ee9193a4f85a1243841a69 @jbass86 committed Dec 5, 2013
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -20,8 +20,8 @@
left top,
color-stop(0.06, rgb(4,18,54)),
color-stop(0.63, rgb(99,111,122))*/
- transition: width 2s;
- -webkit-transition: width 2s;
+ transition: width 1s;
+ -webkit-transition: width 1s;
}
@@ -1,13 +1,13 @@
.customerUpdatePanel {
-
- background: rgb(252,255,244); /* Old browsers */
- background: -moz-radial-gradient(center, ellipse cover, rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(179,190,173,1) 100%); /* FF3.6+ */
- background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(252,255,244,1)), color-stop(40%,rgba(223,229,215,1)), color-stop(100%,rgba(179,190,173,1))); /* Chrome,Safari4+ */
- background: -webkit-radial-gradient(center, ellipse cover, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-radial-gradient(center, ellipse cover, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* Opera 12+ */
- background: -ms-radial-gradient(center, ellipse cover, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* IE10+ */
- background: radial-gradient(ellipse at center, rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+
+ background: rgb(69,72,77); /* Old browsers */
+ background: -moz-radial-gradient(center, ellipse cover, rgba(69,72,77,1) 24%, rgba(0,0,0,1) 100%); /* FF3.6+ */
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(24%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
+ background: -webkit-radial-gradient(center, ellipse cover, rgba(69,72,77,1) 24%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-radial-gradient(center, ellipse cover, rgba(69,72,77,1) 24%,rgba(0,0,0,1) 100%); /* Opera 12+ */
+ background: -ms-radial-gradient(center, ellipse cover, rgba(69,72,77,1) 24%,rgba(0,0,0,1) 100%); /* IE10+ */
+ background: radial-gradient(ellipse at center, rgba(69,72,77,1) 24%,rgba(0,0,0,1) 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
@@ -17,7 +17,7 @@
left: 30%;
width: 20%;
- height: 40%;
+ height: 385px;
z-index: 7;
@@ -52,14 +52,16 @@ define(["vendor/backbone",
@navBarExpanded = !@navBarExpanded;
if (@navBarExpanded)
+
@$el.css("width", "15%");
@currentView.$el.css("width", "85%");
@$el.find(".navBarLabel").css("display", "");
@$el.find(".section").css("display", "")
else
+
@$el.css("width", "1%");
@currentView.$el.css("width", "99%");
@$el.find(".navBarLabel").css("display", "none");
@$el.find(".section").css("display", "none");
- )
+ )
)
@@ -2,5 +2,14 @@
define(["vendor/handlebars"], function(Handlebars) {
return {
-"NavigationBar": Handlebars.template(function (Handlebars,depth0,helpers,partials,data) { this.compilerInfo = [2,'>= 1.0.0-rc.3'];helpers = helpers || Handlebars.helpers; data = data || {}; return "<div class=\"navigationBarTitle\"> <span class=\"navBarLabel\">Navigation Bar</span> <div class=\"expandButton\"> <span class=\"ui-icon ui-icon-arrow-4-diag\"></span> </div></div><div class=\"section\"> <span>Customer Section</span></div><div class=\"section\"> <span>Inventory Section</span></div><div class=\"section\"> <span>Order Section</span></div>"; })
+"NavigationBar": Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
+ this.compilerInfo = [2,'>= 1.0.0-rc.3'];
+helpers = helpers || Handlebars.helpers; data = data || {};
+
+
+
+ return "<div class=\"navigationBarTitle\">\r\n <span class=\"navBarLabel\">Navigation Bar</span>\r\n <div class=\"expandButton\">\r\n <span class=\"ui-icon ui-icon-arrow-4-diag\"></span>\r\n </div>\r\n</div>\r\n\r\n<div class=\"viewSelections\">\r\n\r\n <ul>\r\n \r\n\r\n <div class=\"section\">\r\n <li>\r\n <span>Customer Section</span>\r\n </li>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"section\">\r\n <li>\r\n <span>Inventory Section</span>\r\n </li>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"section\">\r\n <li>\r\n <span>Order Section</span>\r\n </li>\r\n </div>\r\n \r\n <ul>\r\n\r\n</div>\r\n\r\n\r\n\r\n";
+ }
+
+)
}});
@@ -2,9 +2,18 @@
width: 15%;
height: 100%;
- /*float: right;*/
- background-image: linear-gradient(right bottom, rgb(4,18,54) 6%, rgb(48,69,69) 63%);
+ background: rgb(69,72,77); /* Old browsers */
+ background: -moz-linear-gradient(top, rgba(69,72,77,1) 24%, rgba(0,0,0,1) 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(24%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, rgba(69,72,77,1) 24%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, rgba(69,72,77,1) 24%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, rgba(69,72,77,1) 24%,rgba(0,0,0,1) 100%); /* IE10+ */
+ background: linear-gradient(to bottom, rgba(69,72,77,1) 24%,rgba(0,0,0,1) 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
+
+
+ /*background-image: linear-gradient(right bottom, rgb(4,18,54) 6%, rgb(48,69,69) 63%);
background-image: -o-linear-gradient(right bottom, rgb(4,18,54) 6%, rgb(48,69,69) 63%);
background-image: -moz-linear-gradient(right bottom, rgb(4,18,54) 6%, rgb(48,69,69) 63%);
background-image: -webkit-linear-gradient(right bottom, rgb(4,18,54) 6%, rgb(48,69,69) 63%);
@@ -16,10 +25,10 @@
left top,
color-stop(0.06, rgb(4,18,54)),
color-stop(0.63, rgb(48,69,69))
- );
+ );*/
- transition: width 2s;
- -webkit-transition: width 2s;
+ transition: width 1s;
+ -webkit-transition: width 1s;
}
.expandButton{
@@ -31,20 +40,33 @@
float: right;
}
+
+.navigationBar .viewSelections{
+ padding-top: 30px;
+}
+
.navigationBar .section{
color: white;
- padding-top: 20px;
padding-left: 15px;
overflow: hidden;
- transition: background 1s, color 1s;
- -webkit-transition: background 1s, color 1s;
+ vertical-align: middle;
+
+ transition: background .5s, color .5s;
+ -webkit-transition: background .5s, color .5s;
}
+.section li{
+ padding-top: 15px;
+ padding-bottom: 15px;
+}
+
+
+
.section:hover{
- color:red;
- background: grey;
+ color: black;
+ background: orange;
}
.navigationBarTitle{
@@ -53,3 +75,4 @@
float: center;
}
+
@@ -5,19 +5,36 @@
</div>
</div>
-<div class="section">
- <span>Customer Section</span>
-</div>
+<div class="viewSelections">
+
+ <ul>
+
+
+ <div class="section">
+ <li>
+ <span>Customer Section</span>
+ </li>
+ </div>
-<div class="section">
- <span>Inventory Section</span>
-</div>
-<div class="section">
- <span>Order Section</span>
-</div>
+ <div class="section">
+ <li>
+ <span>Inventory Section</span>
+ </li>
+ </div>
+ <div class="section">
+ <li>
+ <span>Order Section</span>
+ </li>
+ </div>
+
+ <ul>
+
+</div>
+
+
@@ -36,11 +36,11 @@ a {
.mainArea {
/*background: red;*/
- background-image:url('../images/background.jpg');
+ background-image:url('../images/1280Slate.jpg');
/*background-image:url('../images/black_fabric_background.jpg');*/
/*background-image:url('../images/cute_background.jpg');*/
- background-size:100% 100%;
- background-repeat:no-repeat;
+ /*background-size:100% 100%;*/
+ /*background-repeat:no-repeat;*/
position: absolute;
top: 4%;

0 comments on commit 9b87116

Please sign in to comment.