Updated Datepicker / Model / Layout / Notifications

This commit is contained in:
Luke Vella 2015-02-03 22:27:27 +01:00
parent d04cb14e74
commit 024d97f67d
17 changed files with 264 additions and 131 deletions

View file

@ -24,10 +24,7 @@ var EventSchema = new Schema({
}, },
updated : Date, updated : Date,
title : String, title : String,
dates : [{ dates : [Date],
date : Date,
times : [Date]
}],
emails : [{ emails : [{
email : String email : String
}], }],

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,5 +1,5 @@
angular.module('rallly') angular.module('rallly')
.directive('datepicker', function(DatePickerService){ .directive('datepicker', function(){
return { return {
restrict : 'A', restrict : 'A',
require : 'ngModel', require : 'ngModel',
@ -7,44 +7,15 @@ angular.module('rallly')
model : '=ngModel', model : '=ngModel',
control : '=' control : '='
}, },
templateUrl: 'templates/directives/datePicker.html',
link : function(scope, el, attrs, ngModel){ link : function(scope, el, attrs, ngModel){
var dateService = new DatePickerService(scope.model); scope.model = scope.model || [];
angular.element(el).datepicker({
multidate : true,
todayHighlight: true
})
.on('changeDate', function(e){
var datePickerDates = e.dates;
if (datePickerDates.length > dateService.count()) {
var dateAdded = datePickerDates[datePickerDates.length-1];
dateService.addDate(dateAdded);
} else {
var dateRemoved = dateService.diffDates(datePickerDates);
if (dateRemoved)
dateService.removeDate(dateRemoved);
}
ngModel.$setViewValue(dateService.getDates())
});
var init = false;
scope.$watchCollection('model', function(newValue, oldValue){
if (newValue){
if (!init){
init = true;
dateService.setStore(newValue);
}
var modelDates = dateService.getDatesArray();
var datePickerDates = angular.element(el).datepicker('getDates');
if (datePickerDates.length != modelDates.length){
angular.element(el).datepicker('setDates', modelDates);
}
}
});
scope.control = scope.control || {}; scope.control = scope.control || {};
scope.control.unsetDate = function(date){
dateService.removeDate(date); scope.$watchCollection('model', function(newValue){
} ngModel.$setViewValue(newValue);
ngModel.$validate();
});
ngModel.$validators.required = function(modelValue, viewValue){ ngModel.$validators.required = function(modelValue, viewValue){
if (!modelValue || modelValue.length == 0){ if (!modelValue || modelValue.length == 0){
@ -53,62 +24,65 @@ angular.module('rallly')
return true; return true;
} }
} var today = Date.today(), activeDate = today.clone();
} var setMonth = function(toDate){
}) activeDate = toDate;
.service('DatePickerService', function(){ var startDate = activeDate.clone().moveToFirstDayOfMonth(),
return function(defaultStore){ startDateDOW = startDate.getDay();
startDate.add(startDateDOW - 7).days();
// Storage for the datepicker ui element scope.title = activeDate.toString('MMMM yyyy');
var store = defaultStore || []; var days = new Array(42);
var me = this; for (var i = 0; i < days.length; i++){
var date = startDate.clone().add(i).days()
this.count = function(){ days[i] = {
return store.length; date : date,
} isOutsideMonth : (date.getMonth() != activeDate.getMonth()) ? true : false,
this.setStore = function(newStore){ isToday : (Date.equals(date, today))
store = newStore;
}
this.addDate = function(date){
store.push({ date : date });
store.sort(function(a, b){
if (Date.compare(a.date, b.date) > 0) return true;
return false;
});
}
this.removeDate = function(date){
console.log('removing date');
var parsedDate = Date.parse(date);
for (var i = 0; i < store.length; i++){
if (Date.equals(store[i].date, parsedDate)){
store.splice(i,1);
}
}
}
// Returns the store
this.getDates = function(){
return (store.length > 0) ? store : null;
}
// Returns the store as an array of Dates
this.getDatesArray = function(){
var dates = [];
for (var i = 0; i < store.length; i++){
dates.push(Date.parse(store[i].date));
}
return dates;
}
// Takes two arrays of Dates and returns the first element in the first array that isn't in the second array
this.diffDates = function(smallArr){
var shouldReturn = true, bigArr = me.getDatesArray();
for (var i = 0; i < bigArr.length; i++){
shouldReturn = true;
for (var j = 0; j < smallArr.length; j++) {
if (Date.equals(bigArr[i], smallArr[j])) {
shouldReturn = false;
} }
} }
if (shouldReturn) return bigArr[i]; scope.days = days;
}
setMonth(activeDate);
scope.selectDay = function(dayObj){
if (dayObj.isOutsideMonth) {
setMonth(dayObj.date);
}
if ((index = scope.isActive(dayObj.date, true)) != -1) {
// Already selected
scope.model.splice(index, 1); // remove
} else {
// Not selected
var index = 0, inserted = false;
do {
if (scope.model[index] == undefined || Date.compare(Date.parse(scope.model[index]), dayObj.date) > 0){
scope.model.splice(index, 0, dayObj.date);
inserted = true;
}
index++;
} while (inserted == false);
}
}
scope.isActive = function(date, returnIndex){
scope.model = scope.model || [];
for (var i = 0; i < scope.model.length; i++){
if (Date.equals(Date.parse(scope.model[i]), date)){
return (returnIndex) ? i : true;
}
}
return (returnIndex) ? -1 : false;
}
scope.nextMonth = function(){
setMonth(activeDate.add(1).months());
}
scope.prevMonth = function(){
setMonth(activeDate.add(-1).months());
}
scope.control.removeDate = function(date){
if ((index = scope.isActive(Date.parse(date), true)) != -1) {
scope.model.splice(index, 1)
}
} }
} }
}; }
}); });

View file

@ -6,17 +6,18 @@ $templateCache.put("templates/home.html","<div class=\"page-placeholder\">\n
$templateCache.put("templates/newevent.html","<div ng-if=\"!eventUrl\">\n <div class=\"box\" ng-class=\"{\'animated shake\': form.$submitted && form.$invalid }\">\n\n <div class=\"box-title\">Schedule a New Event</div>\n <div class=\"box-description\">\n Fill in the form below to create your event and share it with your friends and colleagues.\n </div>\n\n <form novalidate autocomplete=\"off\" name=\"form\" ng-submit=\"submit()\">\n <div ng-if=\"page == 1\">\n\n <section class=\"box-section\" user-form form=\"form\" event=\"event\">\n\n </section>\n\n <section class=\"box-section\" event-form form=\"form\" event=\"event\">\n\n </section>\n </div>\n <div ng-if=\"page==2\">\n\n <section class=\"box-section\" date-form form=\"form\" event=\"event\">\n\n </section>\n\n <section class=\"box-section\" ng-show=\"event.dates.length\" time-form form=\"form\" event=\"event\">\n\n </section>\n </div>\n\n <div ng-if=\"page==3\">\n\n <section class=\"box-section\" participants-form form=\"form\" event=\"event\">\n\n </section>\n\n </div>\n\n\n <div class=\"box-controls box-bottom-sticky\">\n <button type=\"button\" ng-if=\"page!=1\" class=\"btn\" ng-click=\"prevPage()\">Back</button>\n <button type=\"button\" ng-if=\"page!=3\" class=\"btn\" ng-click=\"nextPage()\">Next</button>\n <button type=\"submit\" ng-if=\"page==3\" class=\"btn btn-primary\">Create Event</button>\n </div>\n\n </form>\n </div>\n\n</div>\n<div ng-if=\"eventUrl\" class=\"box\">\n <div class=\"box-message\">\n <div class=\"main-image\">\n <img src=\"/images/success_large.png\" width=\"100\" />\n </div>\n <div class=\"title\">Event Created</div>\n <div class=\"content\">\n Your event has been created successfully! You should receive an email shortly with instructions to verify your email address.\n </div>\n <div class=\"mini-divider\">\n </div>\n <div class=\"form-group\">\n <input type=\"text\" class=\"form-control\" disabled=\"true\" value=\"{{eventUrl}}\" />\n <a href=\"{{eventUrl}}\" class=\"btn form-btn\">GO</a>\n </div>\n </div>\n</div>\n"); $templateCache.put("templates/newevent.html","<div ng-if=\"!eventUrl\">\n <div class=\"box\" ng-class=\"{\'animated shake\': form.$submitted && form.$invalid }\">\n\n <div class=\"box-title\">Schedule a New Event</div>\n <div class=\"box-description\">\n Fill in the form below to create your event and share it with your friends and colleagues.\n </div>\n\n <form novalidate autocomplete=\"off\" name=\"form\" ng-submit=\"submit()\">\n <div ng-if=\"page == 1\">\n\n <section class=\"box-section\" user-form form=\"form\" event=\"event\">\n\n </section>\n\n <section class=\"box-section\" event-form form=\"form\" event=\"event\">\n\n </section>\n </div>\n <div ng-if=\"page==2\">\n\n <section class=\"box-section\" date-form form=\"form\" event=\"event\">\n\n </section>\n\n <section class=\"box-section\" ng-show=\"event.dates.length\" time-form form=\"form\" event=\"event\">\n\n </section>\n </div>\n\n <div ng-if=\"page==3\">\n\n <section class=\"box-section\" participants-form form=\"form\" event=\"event\">\n\n </section>\n\n </div>\n\n\n <div class=\"box-controls box-bottom-sticky\">\n <button type=\"button\" ng-if=\"page!=1\" class=\"btn\" ng-click=\"prevPage()\">Back</button>\n <button type=\"button\" ng-if=\"page!=3\" class=\"btn\" ng-click=\"nextPage()\">Next</button>\n <button type=\"submit\" ng-if=\"page==3\" class=\"btn btn-primary\">Create Event</button>\n </div>\n\n </form>\n </div>\n\n</div>\n<div ng-if=\"eventUrl\" class=\"box\">\n <div class=\"box-message\">\n <div class=\"main-image\">\n <img src=\"/images/success_large.png\" width=\"100\" />\n </div>\n <div class=\"title\">Event Created</div>\n <div class=\"content\">\n Your event has been created successfully! You should receive an email shortly with instructions to verify your email address.\n </div>\n <div class=\"mini-divider\">\n </div>\n <div class=\"form-group\">\n <input type=\"text\" class=\"form-control\" disabled=\"true\" value=\"{{eventUrl}}\" />\n <a href=\"{{eventUrl}}\" class=\"btn form-btn\">GO</a>\n </div>\n </div>\n</div>\n");
$templateCache.put("templates/notfound.html","<h1>Error 404</h1>\n<h2>Not Found</h2>\n"); $templateCache.put("templates/notfound.html","<h1>Error 404</h1>\n<h2>Not Found</h2>\n");
$templateCache.put("templates/notification.html","<div class=\"notification {{notification.type}}\" ng-click=\"notification.close()\">\n <div class=\"title\">\n {{notification.title}}\n </div>\n <div class=\"message\">\n {{notification.message}}\n </div>\n</div>\n"); $templateCache.put("templates/notification.html","<div class=\"notification {{notification.type}}\" ng-click=\"notification.close()\">\n <div class=\"title\">\n {{notification.title}}\n </div>\n <div class=\"message\">\n {{notification.message}}\n </div>\n</div>\n");
$templateCache.put("templates/directives/datePicker.html","<div class=\"date-picker\">\n <div class=\"wrapper\">\n <div class=\"date-picker-head\">\n <a href=\"#\" class=\"arrow\" ng-click=\"prevMonth()\">&#10094;</a>\n <span class=\"title\">\n <span class=\"title-text\">{{title}}</span>\n </span>\n <a href=\"#\" class=\"arrow\" ng-click=\"nextMonth()\">&#10095;</a>\n </div>\n <div class=\"dow\">\n <div class=\"day\">\n Sun\n </div>\n <div class=\"day\">\n Mon\n </div>\n <div class=\"day\">\n Tue\n </div>\n <div class=\"day\">\n Wed\n </div>\n <div class=\"day\">\n Thu\n </div>\n <div class=\"day\">\n Fri\n </div>\n <div class=\"day\">\n Sat\n </div>\n </div>\n <div class=\"values\">\n <div ng-repeat=\"day in days\" class=\"value\" ng-class=\"{ outside : day.isOutsideMonth, today : day.isToday, active : isActive(day.date) }\" ng-click=\"selectDay(day)\">\n {{day.date | date : \'d\' }}\n </div>\n </div>\n </div>\n</div>\n");
$templateCache.put("templates/directives/discussion.html","<ul class=\"comment-thread\" ng-show=\"event.comments.length\">\n <li ng-repeat=\"comment in event.comments\" class=\"comment\">\n <div class=\"avatar-section\">\n <img src=\"/images/avatar.png\" />\n </div>\n <div class=\"comment-section\">\n <a href=\"#\" class=\"comment-delete\" ng-click=\"deleteComment(comment)\">&times;</a>\n <div class=\"meta\">\n <span class=\"name\">{{comment.author.name}}</span>\n <span class=\"time\">{{comment.created | elapsed}}</span>\n </div>\n <div class=\"content\">{{comment.content}}</div>\n </div>\n </li>\n</ul>\n<form novalidate ng-submit=\"postComment()\" name=\"commentForm\" class=\"comment-form\">\n <div class=\"avatar-section\">\n <img src=\"/images/avatar.png\" />\n </div>\n <div class=\"input-section form-group\">\n <div class=\"content-section\">\n <textarea class=\"form-control\" required ng-model=\"comment.content\" placeholder=\"Write a comment...\"></textarea>\n </div>\n <div class=\"name-section\">\n <div class=\"name-container\">\n <input type=\"text\" class=\"form-control\" required placeholder=\"Your Name\" ng-model=\"comment.author.name\" />\n <button type=\"submit\" class=\"btn\">Post Comment</button>\n <span class=\"form-error\" ng-show=\"commentForm.$submitted && commentForm.$error\">\n <img src=\"/images/error.png\" width=\"14\" /> Make sure you fill in all the fields.\n </span>\n </div>\n </div>\n </div>\n</form>\n"); $templateCache.put("templates/directives/discussion.html","<ul class=\"comment-thread\" ng-show=\"event.comments.length\">\n <li ng-repeat=\"comment in event.comments\" class=\"comment\">\n <div class=\"avatar-section\">\n <img src=\"/images/avatar.png\" />\n </div>\n <div class=\"comment-section\">\n <a href=\"#\" class=\"comment-delete\" ng-click=\"deleteComment(comment)\">&times;</a>\n <div class=\"meta\">\n <span class=\"name\">{{comment.author.name}}</span>\n <span class=\"time\">{{comment.created | elapsed}}</span>\n </div>\n <div class=\"content\">{{comment.content}}</div>\n </div>\n </li>\n</ul>\n<form novalidate ng-submit=\"postComment()\" name=\"commentForm\" class=\"comment-form\">\n <div class=\"avatar-section\">\n <img src=\"/images/avatar.png\" />\n </div>\n <div class=\"input-section form-group\">\n <div class=\"content-section\">\n <textarea class=\"form-control\" required ng-model=\"comment.content\" placeholder=\"Write a comment...\"></textarea>\n </div>\n <div class=\"name-section\">\n <div class=\"name-container\">\n <input type=\"text\" class=\"form-control\" required placeholder=\"Your Name\" ng-model=\"comment.author.name\" />\n <button type=\"submit\" class=\"btn\">Post Comment</button>\n <span class=\"form-error\" ng-show=\"commentForm.$submitted && commentForm.$error\">\n <img src=\"/images/error.png\" width=\"14\" /> Make sure you fill in all the fields.\n </span>\n </div>\n </div>\n </div>\n</form>\n");
$templateCache.put("templates/directives/poll.html","<div class=\"poll-header\">\n <div class=\"header participants-header\">\n {{event.participants.length}} participants\n </div>\n <div class=\"header date-header\" ng-repeat=\"d in event.dates\">\n <div class=\"daticon\">\n <div class=\"dow\">\n {{d.date | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{d.date | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{d.date | date : \'MMM\'}}\n </div>\n <span class=\"count\" ng-show=\"selectedDate($index)\" ng-class={top:isTopDate($index)}>{{selectedDate($index)}}</span>\n </div>\n </div>\n <div class=\"header actions-header\">\n\n </div>\n</div>\n<div class=\"poll-body\">\n <div class=\"poll-entry\" ng-repeat=\"participant in event.participants\">\n <form novalidate ng-submit=\"update(participant); editMode = false\">\n <div class=\"cell name-cell\">\n <span class=\"avatar style-{{$index + 1}}\">\n <img src=\"/images/user.png\" width=\"11\" />\n </span>\n <input required autocomplete=\"off\" type=\"text\" class=\"form-control\" ng-model=\"participant.name\" ng-show=\"editMode\" value=\"participant.name\"/>\n <span ng-hide=\"editMode\" class=\"name editable\" ng-click=\"editMode = true && !event.isClosed; edit(participant)\">{{participant.name}}</span>\n </div>\n <div class=\"cell vote-cell\" ng-repeat=\"date in event.dates\">\n <img src=\"/images/tick@2x.png\" width=\"16\" ng-hide=\"editMode\" ng-if=\"participant.votes[$index]\" />\n <img src=\"/images/nope@2x.png\" width=\"8\" ng-hide=\"editMode\" ng-if=\"!participant.votes[$index]\" />\n <input ng-model=\"participant.votes[$index]\" ng-show=\"editMode\" ng-false-value=\"false\" type=\"checkbox\" />\n <div class=\"overlay\" ng-show=\"editMode\" ng-click=\"participant.votes[$index] = !participant.votes[$index]\"></div>\n </div>\n <div class=\"cell action-cell\" ng-hide=\"event.isClosed\">\n <button type=\"button\" ng-hide=\"editMode\" ng-click=\"editMode = true; edit(participant)\" class=\"btn hover\">Edit</button>\n <button type=\"button\" ng-hide=\"editMode\" ng-click=\"delete(participant)\" class=\"btn danger hover\">Delete</button>\n <button type=\"submit\" ng-show=\"editMode\" class=\"btn\">Save</button>\n <button type=\"button\" ng-show=\"editMode\" ng-click=\"editMode = false; cancel($index)\" class=\"btn\">Cancel</button>\n </div>\n </form>\n </div>\n <div class=\"poll-example\" ng-class=\"{hidden : event.participants.length > 0}\">\n <div class=\"poll-entry\" ng-repeat=\"example in examples\">\n <div class=\"cell name-cell\">\n <span class=\"avatar style-{{$index + 1}}\">\n <img src=\"/images/user.png\" width=\"11\" />\n </span>\n <span class=\"name\">{{example.name}}</span>\n </div>\n <div class=\"cell vote-cell\" ng-repeat=\"date in event.dates\">\n <img src=\"/images/tick@2x.png\" width=\"16\" ng-if=\"example.votes[$index]\" />\n <img src=\"/images/nope@2x.png\" width=\"8\" ng-if=\"!example.votes[$index]\" />\n </div>\n <div class=\"cell action-cell\">\n\n </div>\n </div>\n <div class=\"overlay\">\n <div class=\"overlay-text\">\n Fill in the form below to get started\n </div>\n </div>\n </div>\n <div ng-hide=\"event.isClosed\" class=\"poll-entry highlight\">\n <form novalidate name=\"formnew\" ng-submit=\"save()\">\n <div class=\"cell name-cell\">\n <span class=\"avatar style-{{participant.style}}\">\n <img src=\"/images/user.png\" width=\"11\" />\n </span>\n <input autocomplete=\"off\" name=\"username\" type=\"text\" class=\"form-control\" placeholder=\"Your name...\" ng-model=\"participant.name\" required value=\"participant.name\"/>\n </div>\n <div class=\"cell vote-cell\" ng-repeat=\"date in event.dates\">\n <input ng-model=\"participant.votes[$index]\" ng-false-value=\"false\" type=\"checkbox\" />\n <div class=\"overlay\" ng-click=\"participant.votes[$index] = !participant.votes[$index]\"></div>\n </div>\n <div class=\"cell action-cell\">\n <button type=\"submit\" ng-class=\"{ \'animated shake\' : formnew.$submitted && formnew.$invalid }\" class=\"btn\">Save</button>\n </div>\n </form>\n </div>\n</div>\n"); $templateCache.put("templates/directives/poll.html","<div class=\"poll-header\">\n <div class=\"header participants-header\">\n {{event.participants.length}} participants\n </div>\n <div class=\"header date-header\" ng-repeat=\"d in event.dates\">\n <div class=\"daticon\">\n <div class=\"dow\">\n {{d | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{d | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{d | date : \'MMM\'}}\n </div>\n <span class=\"count\" ng-show=\"selectedDate($index)\" ng-class={top:isTopDate($index)}>{{selectedDate($index)}}</span>\n </div>\n </div>\n <div class=\"header actions-header\">\n\n </div>\n</div>\n<div class=\"poll-body\">\n <div class=\"poll-entry\" ng-repeat=\"participant in event.participants\">\n <form novalidate ng-submit=\"update(participant); editMode = false\">\n <div class=\"cell name-cell\">\n <span class=\"avatar style-{{$index + 1}}\">\n <img src=\"/images/user.png\" width=\"11\" />\n </span>\n <input required autocomplete=\"off\" type=\"text\" class=\"form-control\" ng-model=\"participant.name\" ng-show=\"editMode\" value=\"participant.name\"/>\n <span ng-hide=\"editMode\" class=\"name editable\" ng-click=\"editMode = true && !event.isClosed; edit(participant)\">{{participant.name}}</span>\n </div>\n <div class=\"cell vote-cell\" ng-repeat=\"date in event.dates\">\n <img src=\"/images/tick@2x.png\" width=\"16\" ng-hide=\"editMode\" ng-if=\"participant.votes[$index]\" />\n <img src=\"/images/nope@2x.png\" width=\"8\" ng-hide=\"editMode\" ng-if=\"!participant.votes[$index]\" />\n <input ng-model=\"participant.votes[$index]\" ng-show=\"editMode\" ng-false-value=\"false\" type=\"checkbox\" />\n <div class=\"overlay\" ng-show=\"editMode\" ng-click=\"participant.votes[$index] = !participant.votes[$index]\"></div>\n </div>\n <div class=\"cell action-cell\" ng-hide=\"event.isClosed\">\n <button type=\"button\" ng-hide=\"editMode\" ng-click=\"editMode = true; edit(participant)\" class=\"btn hover\">Edit</button>\n <button type=\"button\" ng-hide=\"editMode\" ng-click=\"delete(participant)\" class=\"btn danger hover\">Delete</button>\n <button type=\"submit\" ng-show=\"editMode\" class=\"btn\">Save</button>\n <button type=\"button\" ng-show=\"editMode\" ng-click=\"editMode = false; cancel($index)\" class=\"btn\">Cancel</button>\n </div>\n </form>\n </div>\n <div class=\"poll-example\" ng-class=\"{hidden : event.participants.length > 0}\">\n <div class=\"poll-entry\" ng-repeat=\"example in examples\">\n <div class=\"cell name-cell\">\n <span class=\"avatar style-{{$index + 1}}\">\n <img src=\"/images/user.png\" width=\"11\" />\n </span>\n <span class=\"name\">{{example.name}}</span>\n </div>\n <div class=\"cell vote-cell\" ng-repeat=\"date in event.dates\">\n <img src=\"/images/tick@2x.png\" width=\"16\" ng-if=\"example.votes[$index]\" />\n <img src=\"/images/nope@2x.png\" width=\"8\" ng-if=\"!example.votes[$index]\" />\n </div>\n <div class=\"cell action-cell\">\n\n </div>\n </div>\n <div class=\"overlay\">\n <div class=\"overlay-text\">\n Fill in the form below to get started\n </div>\n </div>\n </div>\n <div ng-hide=\"event.isClosed\" class=\"poll-entry highlight\">\n <form novalidate name=\"formnew\" ng-submit=\"save()\">\n <div class=\"cell name-cell\">\n <span class=\"avatar style-{{participant.style}}\">\n <img src=\"/images/user.png\" width=\"11\" />\n </span>\n <input autocomplete=\"off\" name=\"username\" type=\"text\" class=\"form-control\" placeholder=\"Your name...\" ng-model=\"participant.name\" required value=\"participant.name\"/>\n </div>\n <div class=\"cell vote-cell\" ng-repeat=\"date in event.dates\">\n <input ng-model=\"participant.votes[$index]\" ng-false-value=\"false\" type=\"checkbox\" />\n <div class=\"overlay\" ng-click=\"participant.votes[$index] = !participant.votes[$index]\"></div>\n </div>\n <div class=\"cell action-cell\">\n <button type=\"submit\" ng-class=\"{ \'animated shake\' : formnew.$submitted && formnew.$invalid }\" class=\"btn\">Save</button>\n </div>\n </form>\n </div>\n</div>\n");
$templateCache.put("templates/directives/timePicker.html","<div class=\"time-picker\">\n <div class=\"time-picker-col\">\n <div class=\"daticon\">\n <div class=\"dow\">\n {{date | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{date | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{date | date : \'MMM\'}}\n </div>\n <!-- <span class=\"delete\" ng-click=\"datepicker.unsetDate(date)\"></span> -->\n </div>\n </div>\n <div class=\"time-picker-col\" ng-repeat=\"time in date.times track by $index\">\n <input type=\"text\" class=\"time-picker-input\" time-picker ng-model=\"time\" ng-model-options=\"{ updateOn: \'blur\' }\" />\n </div>\n</div>\n"); $templateCache.put("templates/directives/timePicker.html","<div class=\"time-picker\">\n <div class=\"time-picker-col\">\n <div class=\"daticon\">\n <div class=\"dow\">\n {{date | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{date | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{date | date : \'MMM\'}}\n </div>\n <!-- <span class=\"delete\" ng-click=\"datepicker.unsetDate(date)\"></span> -->\n </div>\n </div>\n <div class=\"time-picker-col\" ng-repeat=\"time in date.times track by $index\">\n <input type=\"text\" class=\"time-picker-input\" time-picker ng-model=\"time\" ng-model-options=\"{ updateOn: \'blur\' }\" />\n </div>\n</div>\n");
$templateCache.put("templates/newEvent/datetime.html","<section class=\"box-section\" date-form form=\"form\" event=\"event\">\n\n</section>\n\n<div class=\"box-controls box-bottom-sticky\">\n <button type=\"button\" class=\"btn\" ng-click=\"prevPage()\">Previous</button>\n <button type=\"submit\" class=\"btn\">Next</button>\n</div>\n"); $templateCache.put("templates/form/dateForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Choose Dates</div>\n <ul class=\"daticon-list\">\n <li ng-repeat=\"d in event.dates\">\n <div class=\"daticon\">\n <div class=\"dow\">\n {{d | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{d | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{d | date : \'MMM\'}}\n </div>\n <span class=\"delete\" ng-click=\"datepicker.removeDate(d)\"></span>\n </div>\n </li>\n </ul>\n</div>\n<div class=\"section-main\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"email\">Calendar</label>\n <span class=\"form-error\" ng-show=\"form.$submitted && form.datepicker.$error.required\">\n <img src=\"/images/error.png\" width=\"14\" /> You need to select a few dates\n </span>\n <div datepicker required name=\"datepicker\" control=\"datepicker\" ng-model=\"event.dates\">\n\n </div>\n </div>\n </div>\n</div>\n");
$templateCache.put("templates/newEvent/general.html","<section class=\"box-section\" user-form form=\"form\" event=\"event\">\n\n</section>\n\n<section class=\"box-section\" event-form form=\"form\" event=\"event\">\n\n</section>\n\n<div class=\"box-controls box-bottom-sticky\">\n <button type=\"submit\" class=\"btn\">Next Step</button>\n</div>\n");
$templateCache.put("templates/newEvent/invite.html","<section class=\"box-section\" participants-form form=\"form\" event=\"event\">\n\n</section>\n\n<div class=\"box-controls box-bottom-sticky\">\n <button type=\"button\" class=\"btn\" ng-click=\"prevPage()\">Previous</button>\n <button type=\"submit\" class=\"btn\">Create</button>\n</div>\n");
$templateCache.put("templates/newEvent/layout.html","<div class=\"box\">\n\n <div class=\"box-title\">Schedule a New Event</div>\n <div class=\"box-description\">\n Fill in the form below to create your event and share it with your friends and colleagues.\n </div>\n <ol class=\"box-steps\">\n <li class=\"step active\">\n General Details\n </li>\n <li class=\"step\" ng-class=\"{ active : page > 1 }\">\n Dates &amp; Times\n </li>\n <li class=\"step\" ng-class=\"{ active : page > 2 }\">\n Invites\n </li>\n <li class=\"step\" ng-class=\"{ active : page > 3 }\">\n Done\n </li>\n </ol>\n <form novalidate autocomplete=\"off\" name=\"form\" ng-submit=\"submit()\">\n <div ui-view>\n\n </div>\n </form>\n</div>\n");
$templateCache.put("templates/newEvent/success.html","<div class=\"box-message\">\n <div class=\"main-image\">\n <img src=\"/images/success_large.png\" width=\"100\" />\n </div>\n <div class=\"title\">Event Created</div>\n <div class=\"content\">\n Your event has been created successfully! You should receive an email shortly with instructions to verify your email address.\n </div>\n <div class=\"mini-divider\">\n </div>\n <div class=\"form-group\">\n <input type=\"text\" class=\"form-control\" disabled=\"true\" value=\"{{eventUrl}}\" />\n <a href=\"{{eventUrl}}\" class=\"btn form-btn\">GO</a>\n </div>\n</div>\n");
$templateCache.put("templates/form/dateForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Choose Dates</div>\n <ul class=\"daticon-list\">\n <li ng-repeat=\"d in event.dates\">\n <div class=\"daticon\">\n <div class=\"dow\">\n {{d.date | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{d.date | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{d.date | date : \'MMM\'}}\n </div>\n <span class=\"delete\" ng-click=\"datepicker.unsetDate(d.date)\"></span>\n </div>\n </li>\n </ul>\n</div>\n<div class=\"section-main\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"email\">Calendar</label>\n <span class=\"form-error\" ng-show=\"form.$submitted && form.datepicker.$error.required\">\n <img src=\"/images/error.png\" width=\"14\" /> You need to select a few dates\n </span>\n <div datepicker required name=\"datepicker\" control=\"datepicker\" ng-model=\"event.dates\">\n\n </div>\n </div>\n </div>\n</div>\n");
$templateCache.put("templates/form/eventForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Event Details</div>\n</div>\n<div class=\"section-main\">\n <div class=\"form-row\">\n <div class=\"form-col\">\n <div class=\"form-group\">\n <label for=\"title\">Title</label>\n <span class=\"form-error\" ng-show=\"(form.title.$touched || form.$submitted) && errors.title\">\n <img src=\"/images/error.png\" width=\"14\" /> {{errors.title}}\n </span>\n <input id=\"title\" name=\"title\" ng-maxlength=\"30\" required ng-model=\"event.title\" type=\"text\" placeholder=\"Monthly Meetup...\" class=\"form-control extend\"/>\n </div>\n </div>\n <div class=\"form-col\">\n <div class=\"form-group optional\">\n <label for=\"location\">Location</label>\n <span class=\"form-error\" ng-show=\"(form.location.$touched || form.$submitted) && errors.location\">\n <img src=\"/images/error.png\" width=\"14\" /> {{errors.location}}\n </span>\n <input id=\"location\" name=\"location\" ng-model=\"event.location\" ng-maxlength=\"50\" type=\"text\" placeholder=\"Rick\'s Cafe...\" class=\"form-control extend\"/>\n </div>\n </div>\n </div>\n <div class=\"form-row\">\n <div class=\"form-group optional\">\n <label for=\"description\" >Description</label>\n <textarea id=\"description\" name=\"description\" ng-model=\"event.description\" placeholder=\"Enter Description...\" class=\"form-control extend\"></textarea>\n </div>\n </div>\n</div>\n"); $templateCache.put("templates/form/eventForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Event Details</div>\n</div>\n<div class=\"section-main\">\n <div class=\"form-row\">\n <div class=\"form-col\">\n <div class=\"form-group\">\n <label for=\"title\">Title</label>\n <span class=\"form-error\" ng-show=\"(form.title.$touched || form.$submitted) && errors.title\">\n <img src=\"/images/error.png\" width=\"14\" /> {{errors.title}}\n </span>\n <input id=\"title\" name=\"title\" ng-maxlength=\"30\" required ng-model=\"event.title\" type=\"text\" placeholder=\"Monthly Meetup...\" class=\"form-control extend\"/>\n </div>\n </div>\n <div class=\"form-col\">\n <div class=\"form-group optional\">\n <label for=\"location\">Location</label>\n <span class=\"form-error\" ng-show=\"(form.location.$touched || form.$submitted) && errors.location\">\n <img src=\"/images/error.png\" width=\"14\" /> {{errors.location}}\n </span>\n <input id=\"location\" name=\"location\" ng-model=\"event.location\" ng-maxlength=\"50\" type=\"text\" placeholder=\"Rick\'s Cafe...\" class=\"form-control extend\"/>\n </div>\n </div>\n </div>\n <div class=\"form-row\">\n <div class=\"form-group optional\">\n <label for=\"description\" >Description</label>\n <textarea id=\"description\" name=\"description\" ng-model=\"event.description\" placeholder=\"Enter Description...\" class=\"form-control extend\"></textarea>\n </div>\n </div>\n</div>\n");
$templateCache.put("templates/form/participantsForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Invite Participants</div>\n</div>\n<div class=\"section-main\">\n <div class=\"form-row\">\n <div class=\"form-group optional\">\n <label>Participant\'s Emails</label>\n <tags-input max-length=\"50\" allowed-tags-pattern=\"{{emailRegex}}\" display-property=\"email\" ng-model=\"event.emails\" placeholder=\"Add an Email\" type=\"email\" autocomplete=\"off\"></tags-input>\n <input type=\"hidden\" name=\"shouldCreate\" value=\"true\" />\n\n </div>\n </div>\n</div>\n</section>\n"); $templateCache.put("templates/form/participantsForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Invite Participants</div>\n</div>\n<div class=\"section-main\">\n <div class=\"form-row\">\n <div class=\"form-group optional\">\n <label>Participant\'s Emails</label>\n <tags-input max-length=\"50\" allowed-tags-pattern=\"{{emailRegex}}\" display-property=\"email\" ng-model=\"event.emails\" placeholder=\"Add an Email\" type=\"email\" autocomplete=\"off\"></tags-input>\n <input type=\"hidden\" name=\"shouldCreate\" value=\"true\" />\n\n </div>\n </div>\n</div>\n</section>\n");
$templateCache.put("templates/form/settingsForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Settings</div>\n</div>\n<div class=\"section-main\">\n <div class=\"switch-row\">\n <div class=\"switch-details\">\n <div class=\"title\">\n Poll Status\n </div>\n <div class=\"description\">\n Let people vote on the poll.\n </div>\n </div>\n <div class=\"switch\">\n <div class=\"switch-value\">\n {{event.isClosed ? \'Closed\' : \'Open\' }}\n </div>\n <div switch-toggle ng-model=\"event.isClosed\" invert>\n </div>\n </div>\n </div>\n <div class=\"switch-row\">\n <div class=\"switch-details\">\n <div class=\"title\">\n Notifications\n </div>\n <div class=\"description\">\n Send email notifications to the creator of this event.\n </div>\n </div>\n <div class=\"switch\">\n <div class=\"switch-value\">\n {{event.creator.allowNotifications ? \'Enabled\' : \'Disabled\' }}\n </div>\n <div switch-toggle ng-model=\"event.creator.allowNotifications\">\n </div>\n </div>\n </div>\n <div class=\"switch-row\">\n <div class=\"switch-details\">\n <div class=\"title\">\n Delete Event\n </div>\n <div class=\"description\">\n Once you delete an event it will no longer be accessible.\n </div>\n </div>\n <div class=\"switch\">\n <button type=\"button\" ng-click=\"deleteEvent()\" class=\"btn\" ng-class=\"{danger : !deleteRequestSent, disabled : deleteRequestSent}\">{{deleteRequestSent ? \'Request Sent\' : \'Delete Event\' }}</button>\n </div>\n </div>\n</div>\n</section>\n"); $templateCache.put("templates/form/settingsForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Settings</div>\n</div>\n<div class=\"section-main\">\n <div class=\"switch-row\">\n <div class=\"switch-details\">\n <div class=\"title\">\n Poll Status\n </div>\n <div class=\"description\">\n Let people vote on the poll.\n </div>\n </div>\n <div class=\"switch\">\n <div class=\"switch-value\">\n {{event.isClosed ? \'Closed\' : \'Open\' }}\n </div>\n <div switch-toggle ng-model=\"event.isClosed\" invert>\n </div>\n </div>\n </div>\n <div class=\"switch-row\">\n <div class=\"switch-details\">\n <div class=\"title\">\n Notifications\n </div>\n <div class=\"description\">\n Send email notifications to the creator of this event.\n </div>\n </div>\n <div class=\"switch\">\n <div class=\"switch-value\">\n {{event.creator.allowNotifications ? \'Enabled\' : \'Disabled\' }}\n </div>\n <div switch-toggle ng-model=\"event.creator.allowNotifications\">\n </div>\n </div>\n </div>\n <div class=\"switch-row\">\n <div class=\"switch-details\">\n <div class=\"title\">\n Delete Event\n </div>\n <div class=\"description\">\n Once you delete an event it will no longer be accessible.\n </div>\n </div>\n <div class=\"switch\">\n <button type=\"button\" ng-click=\"deleteEvent()\" class=\"btn\" ng-class=\"{danger : !deleteRequestSent, disabled : deleteRequestSent}\">{{deleteRequestSent ? \'Request Sent\' : \'Delete Event\' }}</button>\n </div>\n </div>\n</div>\n</section>\n");
$templateCache.put("templates/form/timeForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Choose Times</div>\n</div>\n<div class=\"section-main\">\n <table class=\"time-form\">\n <thead>\n <tr>\n <th>\n\n </th>\n <th>\n Time 1\n </th>\n <th>\n Time 2\n </th>\n <th>\n Time 3\n </th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"d in event.dates\">\n <td>\n <div class=\"daticon\">\n <div class=\"dow\">\n {{d.date | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{d.date | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{d.date | date : \'MMM\'}}\n </div>\n <span class=\"delete\" ng-click=\"unsetDate(d.date)\"></span>\n </div>\n </td>\n <td ng-repeat=\"time in [1,2,3] track by $index\">\n <input type=\"text\" time-picker ng-model-options=\"{ updateOn: \'blur\' }\" ng-model=\"d.times[$index]\" class=\"time-picker-input\" />\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n"); $templateCache.put("templates/form/timeForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Choose Times</div>\n</div>\n<div class=\"section-main\">\n <table class=\"time-form\">\n <thead>\n <tr>\n <th>\n\n </th>\n <th>\n Time 1\n </th>\n <th>\n Time 2\n </th>\n <th>\n Time 3\n </th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"d in event.dates\">\n <td>\n <div class=\"daticon\">\n <div class=\"dow\">\n {{d.date | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{d.date | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{d.date | date : \'MMM\'}}\n </div>\n <span class=\"delete\" ng-click=\"unsetDate(d.date)\"></span>\n </div>\n </td>\n <td ng-repeat=\"time in [1,2,3] track by $index\">\n <input type=\"text\" time-picker ng-model-options=\"{ updateOn: \'blur\' }\" ng-model=\"d.times[$index]\" class=\"time-picker-input\" />\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n");
$templateCache.put("templates/form/userForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Your Details</div>\n</div>\n<div class=\"section-main\">\n <div class=\"form-row\">\n <div class=\"form-col\">\n <div class=\"form-group\">\n <label for=\"name\">Name</label>\n <span class=\"form-error\" ng-show=\"(form.name.$touched || form.$submitted) && errors.name\">\n <img src=\"/images/error.png\" width=\"14\" /> {{errors.name}}\n </span>\n <input id=\"name\" name=\"name\" ng-maxlength=\"30\" required ng-model=\"event.creator.name\" type=\"text\" placeholder=\"John Doe...\" class=\"form-control extend\"/>\n </div>\n </div>\n <div class=\"form-col\">\n <div class=\"form-group\">\n <label for=\"email\">Email</label>\n <span class=\"form-error\" ng-show=\"(form.email.$touched || form.$submitted) && errors.email\">\n <img src=\"/images/error.png\" width=\"14\" /> {{errors.email}}\n </span>\n <input type=\"email\" id=\"email\" name=\"email\" ng-pattern=\"emailRegex\" required ng-model=\"event.creator.email\" placeholder=\"john.doe@email.com...\" class=\"form-control extend\"/>\n </div>\n </div>\n </div>\n</div>\n");}]); $templateCache.put("templates/form/userForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Your Details</div>\n</div>\n<div class=\"section-main\">\n <div class=\"form-row\">\n <div class=\"form-col\">\n <div class=\"form-group\">\n <label for=\"name\">Name</label>\n <span class=\"form-error\" ng-show=\"(form.name.$touched || form.$submitted) && errors.name\">\n <img src=\"/images/error.png\" width=\"14\" /> {{errors.name}}\n </span>\n <input id=\"name\" name=\"name\" ng-maxlength=\"30\" required ng-model=\"event.creator.name\" type=\"text\" placeholder=\"John Doe...\" class=\"form-control extend\"/>\n </div>\n </div>\n <div class=\"form-col\">\n <div class=\"form-group\">\n <label for=\"email\">Email</label>\n <span class=\"form-error\" ng-show=\"(form.email.$touched || form.$submitted) && errors.email\">\n <img src=\"/images/error.png\" width=\"14\" /> {{errors.email}}\n </span>\n <input type=\"email\" id=\"email\" name=\"email\" ng-pattern=\"emailRegex\" required ng-model=\"event.creator.email\" placeholder=\"john.doe@email.com...\" class=\"form-control extend\"/>\n </div>\n </div>\n </div>\n</div>\n");
$templateCache.put("templates/newEvent/datetime.html","<section class=\"box-section\" date-form form=\"form\" event=\"event\">\n\n</section>\n\n<div class=\"box-controls box-bottom-sticky\">\n <button type=\"button\" class=\"btn\" ng-click=\"prevPage()\">Previous</button>\n <button type=\"submit\" class=\"btn\">Next</button>\n</div>\n");
$templateCache.put("templates/newEvent/general.html","<section class=\"box-section\" user-form form=\"form\" event=\"event\">\n\n</section>\n\n<section class=\"box-section\" event-form form=\"form\" event=\"event\">\n\n</section>\n\n<div class=\"box-controls box-bottom-sticky\">\n <button type=\"submit\" class=\"btn\">Next Step</button>\n</div>\n");
$templateCache.put("templates/newEvent/invite.html","<section class=\"box-section\" participants-form form=\"form\" event=\"event\">\n\n</section>\n\n<div class=\"box-controls box-bottom-sticky\">\n <button type=\"button\" class=\"btn\" ng-click=\"prevPage()\">Previous</button>\n <button type=\"submit\" class=\"btn\">Create</button>\n</div>\n");
$templateCache.put("templates/newEvent/layout.html","<div class=\"box\">\n\n <div class=\"box-title\">Schedule a New Event</div>\n <div class=\"box-description\">\n Fill in the form below to create your event and share it with your friends and colleagues.\n </div>\n <ol class=\"box-steps\">\n <li class=\"step active\">\n General Details\n </li>\n <li class=\"step\" ng-class=\"{ active : page > 1 }\">\n Dates &amp; Times\n </li>\n <li class=\"step\" ng-class=\"{ active : page > 2 }\">\n Invites\n </li>\n <li class=\"step\" ng-class=\"{ active : page > 3 }\">\n Done\n </li>\n </ol>\n <form novalidate autocomplete=\"off\" name=\"form\" ng-submit=\"submit()\">\n <div ui-view>\n\n </div>\n </form>\n</div>\n");
$templateCache.put("templates/newEvent/success.html","<div class=\"box-message\">\n <div class=\"main-image\">\n <img src=\"/images/success_large.png\" width=\"100\" />\n </div>\n <div class=\"title\">Event Created</div>\n <div class=\"content\">\n Your event has been created successfully! You should receive an email shortly with instructions to verify your email address.\n </div>\n <div class=\"mini-divider\">\n </div>\n <div class=\"form-group\">\n <input type=\"text\" class=\"form-control\" disabled=\"true\" value=\"{{eventUrl}}\" />\n <a href=\"{{eventUrl}}\" class=\"btn form-btn\">GO</a>\n </div>\n</div>\n");}]);

View file

@ -32,7 +32,7 @@ $nav-pad: 20px;
padding : 10px $nav-pad; padding : 10px $nav-pad;
border-bottom: 1px solid darken($navigation-bg-clr, 3%); border-bottom: 1px solid darken($navigation-bg-clr, 3%);
margin-top:20px; margin-top:20px;
margin-bottom:20px; margin-bottom:10px;
} }
.create-new { .create-new {
display:block; display:block;
@ -58,7 +58,8 @@ $nav-pad: 20px;
text-decoration: none; text-decoration: none;
color: #616F8D; color: #616F8D;
line-height: em(40px); line-height: em(40px);
font-size: em(14px); font-size: em(12px);
font-weight:bold;
&:hover { &:hover {
opacity: 1; opacity: 1;
color:white; color:white;

View file

@ -136,10 +136,13 @@ $box-h-pad: 25px;
color: $text-2-clr; color: $text-2-clr;
font-size: em(14px); font-size: em(14px);
margin: 0 0 0 0; margin: 0 0 0 0;
padding: 0 0 10px 0; padding: 0 0 10px 10px;
border-bottom:2px solid $border-clr; border-bottom:2px solid $border-clr;
position:relative; position:relative;
@include transition(all 0.2s ease-in-out); @include transition(all 0.2s ease-in-out);
&:first-child {
padding-left : 0;
}
&:after { &:after {
content: ""; content: "";
position:absolute; position:absolute;
@ -152,7 +155,6 @@ $box-h-pad: 25px;
} }
&.active { &.active {
color: $text-clr; color: $text-clr;
font-weight:bold;
&:after { &:after {
width:100%; width:100%;
} }

View file

@ -4,7 +4,7 @@
border:1px solid #E0E3E9; border:1px solid #E0E3E9;
display:inline-block; display:inline-block;
border-radius: 2px; border-radius: 2px;
box-shadow: inset 0 1px 0 white, 0 1px 0 rgba($border-clr,0.5); box-shadow: inset 0 1px 0 white, 0 1px 1px rgba($border-clr,0.5);
@include linear-gradient($btn-top-clr, $btn-bottom-clr); @include linear-gradient($btn-top-clr, $btn-bottom-clr);
font-size: em(12px); font-size: em(12px);
font-weight:600; font-weight:600;
@ -28,6 +28,6 @@
outline:0; outline:0;
} }
&:active { &:active {
box-shadow: inset 0 0 2px rgba(black, 0.1); box-shadow: none;
} }
} }

View file

@ -28,7 +28,6 @@
} }
.form-control { .form-control {
font-size: em(14px) !important; font-size: em(14px) !important;
border-width: 2px !important;
} }
textarea.form-control { textarea.form-control {
min-height: 0; min-height: 0;

View file

@ -1,3 +1,119 @@
.ng-submitted .ng-invalid > .date-picker {
border-color: $pink-clr;
}
.date-picker {
border: 1px solid $border-clr;
border-radius: 2px;
@include transition(border-color 0.2s ease-in-out);
.wrapper {
padding:20px;
}
.date-picker-head {
display:table;
width:100%;
margin-bottom:30px;
text-align:center;
.title {
display:inline-block;
width:200px;
margin: 0 20px;
font-weight:bold;
font-size: em(18px);
}
.arrow {
text-decoration:none;
color: $text-3-clr;
position:relative;
border: 1px solid $border-clr;
display:inline-block;
width: 25px;
border-radius: 2px;
font-size: 12px;
line-height:25px;
text-align:center;
float:left;
box-shadow: 0 1px 1px rgba($border-clr,0.5);
margin:0 20px;
&:last-child {
float:right;
}
&:hover {
color: $text-clr;
}
&:active {
box-shadow:none;
}
}
}
.dow {
font-size:0;
padding-bottom: 10px;
border-bottom: 2px solid $border-clr;
margin-bottom: 10px;
.day {
text-transform:uppercase;
font-size: 14px;
display:inline-block;
width: (100% / 7);
text-align:center;
color: $pink-clr;
}
}
.values {
.value {
display:inline-block;
width: (100% / 7);
text-align:center;
font-size: em(14px);
line-height:em(55px);
position:relative;
font-weight: bold;
&.today {
color:#818176;
&:after {
opacity:1;
background: rgba(yellow, 0.1);
}
}
&.outside {
color: $text-3-clr;
font-weight:normal;
}
&:after {
content: " ";
cursor:pointer;
opacity: 0;
position:absolute;
$size: em(42px);
width:$size;
height:$size;
margin-left:$size * -0.5;
margin-top:$size * -0.5;
left:50%;
top:50%;
border-radius: 2px;
}
&:hover {
&:after {
opacity:1;
background: rgba($border-clr,0.4);
}
cursor: pointer;
}
&.active {
background:white;
color: $green-clr;
&:after {
opacity:1;
background: rgba($green-clr,0.1);
}
}
}
}
}
.ng-submitted .ng-invalid > .datepicker { .ng-submitted .ng-invalid > .datepicker {
border-color: $pink-clr; border-color: $pink-clr;
} }

View file

@ -1,11 +1,14 @@
.notification { .notification {
position: fixed; position: fixed;
top: 0; top: 80px;
left: 0; $not-width: 300px;
width: 100%; right: 0;
width: $not-width;
z-index: 3000; z-index: 3000;
padding: 12px 40px; padding: 12px 20px;
background: $text-2-clr; background: $text-2-clr;
border-top-left-radius:2px;
border-bottom-left-radius:2px;
color: white; color: white;
@include transition(all 0.3s ease-in-out); @include transition(all 0.3s ease-in-out);
&.success { &.success {
@ -15,15 +18,15 @@
background: $red-clr; background: $red-clr;
} }
&.ng-enter { &.ng-enter {
top: -100px; right: -$not-width;
opacity:0; opacity:0;
} }
&.ng-enter-active { &.ng-enter-active {
top:0; right:0;
opacity:1; opacity:1;
} }
&.ng-leave-active { &.ng-leave-active {
top:-100px; right:-$not-width;
opacity:1; opacity:1;
} }
.title { .title {

View file

@ -47,6 +47,7 @@ $name-col-width: 235px;
left:0; left:0;
width:100%; width:100%;
height: 100%; height: 100%;
border-bottom:1px solid $border-clr;
background: rgba(white, 0.75); background: rgba(white, 0.75);
text-align: center; text-align: center;
.overlay-text { .overlay-text {

View file

@ -0,0 +1,39 @@
<div class="date-picker">
<div class="wrapper">
<div class="date-picker-head">
<a href="#" class="arrow" ng-click="prevMonth()">&#10094;</a>
<span class="title">
<span class="title-text">{{title}}</span>
</span>
<a href="#" class="arrow" ng-click="nextMonth()">&#10095;</a>
</div>
<div class="dow">
<div class="day">
Sun
</div>
<div class="day">
Mon
</div>
<div class="day">
Tue
</div>
<div class="day">
Wed
</div>
<div class="day">
Thu
</div>
<div class="day">
Fri
</div>
<div class="day">
Sat
</div>
</div>
<div class="values">
<div ng-repeat="day in days" class="value" ng-class="{ outside : day.isOutsideMonth, today : day.isToday, active : isActive(day.date) }" ng-click="selectDay(day)">
{{day.date | date : 'd' }}
</div>
</div>
</div>
</div>

View file

@ -5,13 +5,13 @@
<div class="header date-header" ng-repeat="d in event.dates"> <div class="header date-header" ng-repeat="d in event.dates">
<div class="daticon"> <div class="daticon">
<div class="dow"> <div class="dow">
{{d.date | date: 'EEE'}} {{d | date: 'EEE'}}
</div> </div>
<div class="day"> <div class="day">
{{d.date | date: 'd'}} {{d | date: 'd'}}
</div> </div>
<div class="month"> <div class="month">
{{d.date | date : 'MMM'}} {{d | date : 'MMM'}}
</div> </div>
<span class="count" ng-show="selectedDate($index)" ng-class={top:isTopDate($index)}>{{selectedDate($index)}}</span> <span class="count" ng-show="selectedDate($index)" ng-class={top:isTopDate($index)}>{{selectedDate($index)}}</span>
</div> </div>

View file

@ -4,15 +4,15 @@
<li ng-repeat="d in event.dates"> <li ng-repeat="d in event.dates">
<div class="daticon"> <div class="daticon">
<div class="dow"> <div class="dow">
{{d.date | date: 'EEE'}} {{d | date: 'EEE'}}
</div> </div>
<div class="day"> <div class="day">
{{d.date | date: 'd'}} {{d | date: 'd'}}
</div> </div>
<div class="month"> <div class="month">
{{d.date | date : 'MMM'}} {{d | date : 'MMM'}}
</div> </div>
<span class="delete" ng-click="datepicker.unsetDate(d.date)"></span> <span class="delete" ng-click="datepicker.removeDate(d)"></span>
</div> </div>
</li> </li>
</ul> </ul>

View file

@ -64,7 +64,7 @@
</ul> </ul>
</nav> </nav>
<div class="menu-section"> <div class="menu-section">
Link
</div> </div>
<a class="create-new" href="/new">Schedule an event</a> <a class="create-new" href="/new">Schedule an event</a>
</div> </div>