Permalink
Browse files

made updates to the customer update panel.

  • Loading branch information...
1 parent 97f3f0b commit ef75569435ecde0d6f4217a76d431cdb92e4482f @jbass86 committed Dec 1, 2013
View
6 public/javascripts/plugins/CustomerSection/view/CustomerUpdatePanelView.coffee
@@ -54,6 +54,10 @@ define(["vendor/backbone",
###
realized: () ->
- @$el.find(".birthdayArea").datepicker();
+ @$el.find(".birthdayArea").datepicker();
+
+ console.log(@$el.find(".updateButton"));
+ @$el.find(".updateButton").button();
+ @$el.find(".cancelButton").button();
)
)
View
5 public/javascripts/plugins/CustomerSection/view/CustomerUpdatePanelView.js
@@ -41,7 +41,10 @@ define(["vendor/backbone", "plugins/CustomerSection/view/Templates", "css!plugin
*/
realized: function() {
- return this.$el.find(".birthdayArea").datepicker();
+ this.$el.find(".birthdayArea").datepicker();
+ console.log(this.$el.find(".updateButton"));
+ this.$el.find(".updateButton").button();
+ return this.$el.find(".cancelButton").button();
}
});
});
View
2 public/javascripts/plugins/CustomerSection/view/Templates.js
@@ -18,7 +18,7 @@ helpers = helpers || Handlebars.helpers; data = data || {};
- return "\r\n<div class=\"infoPanel\">\r\n <div><span class=\"label\">First Name:</span> \r\n <input type=\"text\" class=\"firstNameArea\">\r\n </div>\r\n\r\n <div><span class=\"label\">Last Name:</span> \r\n <input type=\"text\" class=\"lastNameArea\">\r\n </div>\r\n\r\n <div><span class=\"label\">Nickname:</span> \r\n <input type=\"text\" class=\"nickNameArea\">\r\n </div>\r\n\r\n <div><span class=\"label\">Email:</span> \r\n <input type=\"text\" class=\"emailArea\">\r\n </div>\r\n\r\n <div><span class=\"label\">Country:</span> \r\n <input type=\"text\" class=\"countryArea\">\r\n </div>\r\n\r\n <div> \r\n <p><span class=\"label\">Birthday:</span> \r\n <input type=\"text\" class=\"birthdayArea\" id=\"datepicker\"></p> \r\n </div>\r\n</div>";
+ return "\r\n<div class=\"headerDiv\">\r\n <span>Update Customer</span>\r\n <div class=\"closeButton\">\r\n <span class=\"ui-icon ui-icon-closethick\"></span>\r\n </div>\r\n</div>\r\n\r\n<div class=\"infoPanel\">\r\n <div><span class=\"label\">First Name:</span> \r\n <input type=\"text\" class=\"firstNameArea\">\r\n </div>\r\n\r\n <div><span class=\"label\">Last Name:</span> \r\n <input type=\"text\" class=\"lastNameArea\">\r\n </div>\r\n\r\n <div><span class=\"label\">Nickname:</span> \r\n <input type=\"text\" class=\"nickNameArea\">\r\n </div>\r\n\r\n <div><span class=\"label\">Email:</span> \r\n <input type=\"text\" class=\"emailArea\">\r\n </div>\r\n\r\n <div><span class=\"label\">Country:</span> \r\n <input type=\"text\" class=\"countryArea\">\r\n </div>\r\n\r\n <div> \r\n <p><span class=\"label\">Birthday:</span> \r\n <input type=\"text\" class=\"birthdayArea\" id=\"datepicker\"></p> \r\n </div>\r\n</div>\r\n\r\n<div class=\"finishButtons\">\r\n <button id=\"button\" class=\"ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only updateButton\" role=\"button\" aria-disabled=\"false\">\r\n <span class=\"ui-button-text\">Update</span>\r\n </button>\r\n <button id=\"button\" class=\"ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only cancelButton\" role=\"button\" aria-disabled=\"false\">\r\n <span class=\"ui-button-text\">Cancel</span>\r\n </button>\r\n</div>";
}
)
View
2 public/javascripts/plugins/CustomerSection/view/res/css/customerSection.css
@@ -18,6 +18,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;
}
View
49 public/javascripts/plugins/CustomerSection/view/res/css/customerUpdatePanel.css
@@ -1,9 +1,17 @@
.customerUpdatePanel {
- /*background: -moz-linear-gradient(top, rgb(0, 0, 99), rgb(0, 0, 33));*/
- /*background: -moz-radial-gradient(#777, #333);*/
- background: DarkSlateGray;
-
+ 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 */
+
+
+
+
position: absolute;
top: 10%;
left: 30%;
@@ -16,11 +24,40 @@
color: white;
}
+.customerUpdatePanel .headerDiv{
+ height: 7%;
+ width: 100%;
+
+ color: white;
+
+ background: rgb(149,149,149); /* Old browsers */
+ background: -moz-linear-gradient(top, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 31%, rgba(27,27,27,1) 32%, rgba(10,10,10,1) 44%, rgba(1,1,1,1) 46%, rgba(10,10,10,1) 46%, rgba(78,78,78,1) 77%, rgba(56,56,56,1) 87%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(31%,rgba(13,13,13,1)), color-stop(32%,rgba(27,27,27,1)), color-stop(44%,rgba(10,10,10,1)), color-stop(46%,rgba(1,1,1,1)), color-stop(46%,rgba(10,10,10,1)), color-stop(77%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1))); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 31%,rgba(27,27,27,1) 32%,rgba(10,10,10,1) 44%,rgba(1,1,1,1) 46%,rgba(10,10,10,1) 46%,rgba(78,78,78,1) 77%,rgba(56,56,56,1) 87%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 31%,rgba(27,27,27,1) 32%,rgba(10,10,10,1) 44%,rgba(1,1,1,1) 46%,rgba(10,10,10,1) 46%,rgba(78,78,78,1) 77%,rgba(56,56,56,1) 87%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 31%,rgba(27,27,27,1) 32%,rgba(10,10,10,1) 44%,rgba(1,1,1,1) 46%,rgba(10,10,10,1) 46%,rgba(78,78,78,1) 77%,rgba(56,56,56,1) 87%); /* IE10+ */
+ background: linear-gradient(to bottom, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 31%,rgba(27,27,27,1) 32%,rgba(10,10,10,1) 44%,rgba(1,1,1,1) 46%,rgba(10,10,10,1) 46%,rgba(78,78,78,1) 77%,rgba(56,56,56,1) 87%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#383838',GradientType=0 ); /* IE6-9 */
+
+}
+
+.customerUpdatePanel .headerDiv .closeButton{
+
+ width: 16px;
+ height: 16px;
+ right: 0px;
+
+ color: white;
+
+ float: right;
+}
+
+
.customerUpdatePanel .infoPanel{
- padding-top: 50px;
+ padding-top: 25px;
}
-.customerUpdatePanel span{
+.customerUpdatePanel .infoPanel span{
padding-top: 5px;
width: 20%;
}
View
16 public/javascripts/plugins/CustomerSection/view/res/templates/customerUpdatePanel.html
@@ -1,4 +1,11 @@
+<div class="headerDiv">
+ <span>Update Customer</span>
+ <div class="closeButton">
+ <span class="ui-icon ui-icon-closethick"></span>
+ </div>
+</div>
+
<div class="infoPanel">
<div><span class="label">First Name:</span>
<input type="text" class="firstNameArea">
@@ -24,4 +31,13 @@
<p><span class="label">Birthday:</span>
<input type="text" class="birthdayArea" id="datepicker"></p>
</div>
+</div>
+
+<div class="finishButtons">
+ <button id="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only updateButton" role="button" aria-disabled="false">
+ <span class="ui-button-text">Update</span>
+ </button>
+ <button id="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only cancelButton" role="button" aria-disabled="false">
+ <span class="ui-button-text">Cancel</span>
+ </button>
</div>
View
2 public/javascripts/plugins/NavigationBar/view/NavigationBarView.coffee
@@ -53,10 +53,12 @@ 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");
)
View
2 public/javascripts/plugins/NavigationBar/view/NavigationBarView.js
@@ -43,10 +43,12 @@ define(["vendor/backbone", "plugins/CustomerSection/model/CustomerSectionModel",
this.navBarExpanded = !this.navBarExpanded;
if (this.navBarExpanded) {
this.$el.css("width", "15%");
+ this.currentView.$el.css("width", "85%");
this.$el.find(".navBarLabel").css("display", "");
return this.$el.find(".section").css("display", "");
} else {
this.$el.css("width", "1%");
+ this.currentView.$el.css("width", "99%");
this.$el.find(".navBarLabel").css("display", "none");
return this.$el.find(".section").css("display", "none");
}
View
11 public/javascripts/plugins/NavigationBar/view/Templates.js
@@ -2,14 +2,5 @@
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\">\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=\"section\">\r\n <span>Customer Section</span>\r\n</div>\r\n\r\n<div class=\"section\">\r\n <span>Inventory Section</span>\r\n</div>\r\n\r\n<div class=\"section\">\r\n <span>Order Section</span>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n";
- }
-
-)
+"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>"; })
}});
View
1 public/javascripts/plugins/NavigationBar/view/res/css/navigationBar.css
@@ -36,6 +36,7 @@
color: white;
padding-top: 20px;
padding-left: 15px;
+ overflow: hidden;
transition: background 1s, color 1s;
-webkit-transition: background 1s, color 1s;

0 comments on commit ef75569

Please sign in to comment.