mirror of
https://github.com/lukevella/rallly.git
synced 2025-05-16 18:36:24 +02:00
Updates to Event Form
This commit is contained in:
Luke Vella
parent
f776756798
commit
e61ef151f6
43 changed files with 736 additions and 484 deletions
|
|
@ -21,6 +21,8 @@
|
|||
"angular-ui-router": "~0.2.13",
|
||||
"angular-resource": "~1.3.6",
|
||||
"ngFx": "~1.0.5",
|
||||
"angular-modal": "~0.4.0"
|
||||
"angular-modal": "~0.4.0",
|
||||
"jquery": "~2.1.3",
|
||||
"angular-hotkeys": "~0.2.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
12
gulpfile.js
12
gulpfile.js
|
|
@ -5,6 +5,7 @@ var ngAnnotate = require('gulp-ng-annotate');
|
|||
var sourcemaps = require('gulp-sourcemaps');
|
||||
var sass = require('gulp-sass');
|
||||
var notify = require('gulp-notify');
|
||||
var templateCache = require('gulp-angular-templatecache');
|
||||
|
||||
gulp.task('js', function () {
|
||||
gulp.src(['public/js/**/module.js', 'public/js/**/*.js'])
|
||||
|
|
@ -32,7 +33,18 @@ gulp.task('sass', function(){
|
|||
.pipe(gulp.dest('public/css'))
|
||||
});
|
||||
|
||||
gulp.task('templates', function(){
|
||||
gulp.src('public/templates/**/*.html')
|
||||
.pipe(templateCache({
|
||||
module : 'rallly',
|
||||
root : 'templates'
|
||||
}))
|
||||
.pipe(notify("Templates compiled!"))
|
||||
.pipe(gulp.dest('public/js'))
|
||||
});
|
||||
|
||||
gulp.task('watch', ['js','sass'], function () {
|
||||
gulp.watch('public/scss/**/*.scss', ['sass'])
|
||||
gulp.watch('public/templates/**/*.html', ['templates'])
|
||||
gulp.watch('public/js/**/*.js', ['js'])
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,10 +17,11 @@
|
|||
"mongoose": "^3.8.19",
|
||||
"mongoose-shortid": "^0.4.2",
|
||||
"morgan": "~1.3.0",
|
||||
"serve-favicon": "~2.1.3"
|
||||
"serve-favicon": "^2.1.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp": "^3.8.10",
|
||||
"gulp-angular-templatecache": "^1.5.0",
|
||||
"gulp-concat": "^2.4.2",
|
||||
"gulp-ng-annotate": "^0.4.0",
|
||||
"gulp-notify": "^2.0.1",
|
||||
|
|
|
|||
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
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 555 B After Width: | Height: | Size: 561 B |
|
|
@ -1,5 +1,4 @@
|
|||
angular.module('rallly')
|
||||
.controller('AboutCtrl', function(){
|
||||
$(".nav-link").removeClass('active');
|
||||
$(".nav-link[href='/about']").addClass('active');
|
||||
.controller('AboutCtrl', function(Title){
|
||||
Title.set('About Rallly')
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
angular.module('rallly')
|
||||
.controller('EditEventCtrl', function($scope, $http, $state, $timeout, Event, ConfirmModal){
|
||||
.controller('EditEventCtrl', function($scope, $http, $state, $timeout, Event, ConfirmModal, Title){
|
||||
var id = $state.params.id
|
||||
$scope.event = Event.get({id:id}, function(data){
|
||||
var dates = [];
|
||||
for (var i = 0; i < data.dates.length; i++){
|
||||
dates.push(new Date(data.dates[i]));
|
||||
}
|
||||
$("[data-datepicker]").datepicker('setDates',dates);
|
||||
Title.set("Edit: " + $scope.event.title);
|
||||
$scope.master = angular.copy($scope.event);
|
||||
}, function(e){
|
||||
$state.go('notfound');
|
||||
});
|
||||
$scope.undoChanges = function(){
|
||||
$scope.event = angular.copy($scope.master);
|
||||
resetDates();
|
||||
}
|
||||
$scope.didChange = function(){
|
||||
return JSON.stringify($scope.master) != JSON.stringify($scope.event);
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@ angular.module('rallly')
|
|||
return JSON.stringify($scope.master.dates) != JSON.stringify($scope.event.dates);
|
||||
}
|
||||
$scope.submit = function(){
|
||||
if ($scope.didChange()){
|
||||
if ($scope.form.$valid){
|
||||
if ($scope.didChangeDates() ){
|
||||
var modal = new ConfirmModal({
|
||||
title : 'Hold up!',
|
||||
|
|
@ -26,14 +26,20 @@ angular.module('rallly')
|
|||
confirmText : 'Yes, I\'m sure',
|
||||
isDestructive : true,
|
||||
confirm : function(){
|
||||
$scope.event.participants = [];
|
||||
update();
|
||||
}
|
||||
});
|
||||
modal.show();
|
||||
|
||||
} else {
|
||||
update();
|
||||
}
|
||||
} else {
|
||||
var modal = new ConfirmModal({
|
||||
title : 'Not so fast!',
|
||||
message : 'Make sure you fill in all the required fields and try again.',
|
||||
cancelText : 'OK'
|
||||
});
|
||||
}
|
||||
}
|
||||
var update = function(){
|
||||
|
|
@ -41,7 +47,15 @@ angular.module('rallly')
|
|||
id : id
|
||||
}, $scope.event,
|
||||
function(){
|
||||
$timeout.cancel($scope.didSave);
|
||||
var modal = new ConfirmModal({
|
||||
title : 'Event Updated',
|
||||
message : 'Your changes have been saved successfully!',
|
||||
confirmText : 'Back to Event Page',
|
||||
cancelText : 'Stay here',
|
||||
confirm : function(){
|
||||
$state.go('event',{id : $scope.event._id});
|
||||
}
|
||||
});
|
||||
$scope.master = angular.copy($scope.event);
|
||||
$scope.didSave = $timeout(function(){
|
||||
$scope.didSave = false;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
angular.module('rallly')
|
||||
.controller('EventCtrl', function($scope, $http, $state, Event, Participant, ConfirmModal){
|
||||
$(".nav-link").removeClass('active');
|
||||
.controller('EventCtrl', function($scope, $http, $state, Title, Event){
|
||||
var id = $state.params.id;
|
||||
$scope.participant = {};
|
||||
$scope.event = Event.get({id:id}, function(data){
|
||||
Title.set($scope.event.title);
|
||||
$scope.eventUrl = $state.href('event', {
|
||||
id: $scope.event._id
|
||||
}, {
|
||||
|
|
@ -12,49 +12,74 @@ angular.module('rallly')
|
|||
}, function(e){
|
||||
$state.go('notfound');
|
||||
});
|
||||
$scope.delete = function(participant){
|
||||
var modal = new ConfirmModal({
|
||||
title : 'Delete "'+participant.name+'"?',
|
||||
message : 'Are you sure you want to remove '+participant.name+' from the poll?',
|
||||
confirmText : 'Yes - delete',
|
||||
cancelText : 'No - nevermind',
|
||||
isDestructive : true,
|
||||
confirm : function(){
|
||||
Participant.remove({ id : id , pid : participant._id }, function(event){
|
||||
$scope.event = event;
|
||||
});
|
||||
}
|
||||
});
|
||||
modal.show();
|
||||
}
|
||||
|
||||
$scope.defaults = [];
|
||||
|
||||
$scope.editEvent = function(){
|
||||
$state.go('editevent', { id : $scope.event._id });
|
||||
}
|
||||
|
||||
$scope.update = function(participant){
|
||||
})
|
||||
.directive('poll', function(Event, Participant, ConfirmModal){
|
||||
return {
|
||||
restrict : 'A',
|
||||
templateUrl : 'templates/directives/poll.html',
|
||||
scope : {
|
||||
'event' : '=',
|
||||
'participant' : '='
|
||||
},
|
||||
link : function(scope, el, attrs){
|
||||
scope.defaults = [];
|
||||
var datesCount = [];
|
||||
scope.delete = function(participant){
|
||||
var modal = new ConfirmModal({
|
||||
title : 'Delete ' + participant.name + '?',
|
||||
message : 'Are you sure you want to remove '+participant.name+' from the poll?',
|
||||
confirmText : 'Yes - delete',
|
||||
cancelText : 'No - nevermind',
|
||||
isDestructive : true,
|
||||
confirm : function(){
|
||||
Participant.remove({ id : scope.event._id , pid : participant._id }, function(event){
|
||||
scope.event = event;
|
||||
});
|
||||
}
|
||||
});
|
||||
modal.show();
|
||||
}
|
||||
scope.isTopDate = function(index){
|
||||
var count = datesCount[index];
|
||||
for (var i = 0; i < datesCount.length; i++){
|
||||
if (datesCount[i] > count) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
scope.selectedDate = function(index){
|
||||
datesCount[index] = 0;
|
||||
for (var i = 0; i < scope.event.participants.length; i++){
|
||||
if (scope.event.participants[i].dates[index]) datesCount[index]++;
|
||||
}
|
||||
return datesCount[index];
|
||||
}
|
||||
scope.update = function(participant){
|
||||
Participant.update({
|
||||
id : $scope.event._id,
|
||||
id : scope.event._id,
|
||||
pid : participant._id
|
||||
}, participant);
|
||||
}
|
||||
$scope.edit = function(participant){
|
||||
$scope.defaults[$scope.event.participants.indexOf(participant)] = angular.copy(participant);
|
||||
scope.edit = function(participant){
|
||||
scope.defaults[scope.event.participants.indexOf(participant)] = angular.copy(participant);
|
||||
}
|
||||
|
||||
$scope.cancel = function(index){
|
||||
$scope.event.participants[index] = $scope.defaults[index];
|
||||
scope.cancel = function(index){
|
||||
scope.event.participants[index] = scope.defaults[index];
|
||||
}
|
||||
|
||||
$scope.save = function(participant){
|
||||
scope.save = function(participant){
|
||||
if (scope.formnew.$valid){
|
||||
var participant = new Participant(participant);
|
||||
participant.$save({id:id}, function(event){
|
||||
$scope.event = event;
|
||||
$scope.participant = {};
|
||||
participant.$save({id:scope.event._id}, function(event){
|
||||
scope.event = event;
|
||||
scope.participant = {};
|
||||
});
|
||||
scope.formnew.$setPristine();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}).controller('DeleteModalCtrl', function(){
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
angular.module('rallly')
|
||||
.controller('HomeCtrl', function($scope, $state){
|
||||
.controller('HomeCtrl', function($scope, $state, Title){
|
||||
Title.set('Rallly - Collaborative Scheduling')
|
||||
|
||||
$scope.newEvent = function(){
|
||||
$state.go('newevent');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,19 @@
|
|||
angular.module('rallly')
|
||||
.controller('NewEventCtrl', function($scope, $http, $state, Event){
|
||||
$(".nav-link").removeClass('active');
|
||||
$(".nav-link[href='/']").addClass('active');
|
||||
.controller('NewEventCtrl', function($scope, $http, $state, Event, ConfirmModal){
|
||||
|
||||
$scope.title = "Schedule a New Event";
|
||||
$scope.description = "Fill in the form below to create your event and share it with your friends and colleagues.";
|
||||
|
||||
var showModal = function(title, message){
|
||||
var modal = new ConfirmModal({
|
||||
title : title || 'Not so fast!',
|
||||
message : message || 'Make sure you fill in all the required fields and try again.',
|
||||
cancelText : 'OK'
|
||||
});
|
||||
}
|
||||
|
||||
$scope.submit = function(){
|
||||
if ($scope.form.$valid){
|
||||
$http.post('/api/event', $scope.event)
|
||||
.success(function(event, status, headers, config){
|
||||
$scope.event = event;
|
||||
|
|
@ -12,41 +22,14 @@ angular.module('rallly')
|
|||
}, {
|
||||
absolute : true
|
||||
});
|
||||
// $state.go('event',{id : data.event._id});
|
||||
})
|
||||
.error(function(data, status, headers, config){
|
||||
$scope.errors = data.errors;
|
||||
})
|
||||
.error(function(){
|
||||
showModal('Uh oh!', 'There was an error creating your event. Please try again later.');
|
||||
});
|
||||
} else {
|
||||
showModal();
|
||||
}
|
||||
}
|
||||
$scope.clearDates = null
|
||||
})
|
||||
.directive('datepicker', function(){
|
||||
return {
|
||||
restrict : 'A',
|
||||
require : 'ngModel',
|
||||
link : function(scope, el, attrs, ngModel){
|
||||
angular.element(el).datepicker({
|
||||
multidate : true,
|
||||
todayHighlight: true,
|
||||
format : 'dd/mm/yyyy'
|
||||
})
|
||||
.on('changeDate', function(e){
|
||||
var dates = e.dates;
|
||||
dates.sort(function(a, b){
|
||||
if (a.getTime() > b.getTime()) return true;
|
||||
return false;
|
||||
});
|
||||
ngModel.$setViewValue(dates, e);
|
||||
});
|
||||
|
||||
scope.clearDates = function(){
|
||||
angular.element(el).datepicker('setDate', null)
|
||||
};
|
||||
scope.unsetDate = function(date){
|
||||
angular.element(el).datepicker('setDates', scope.event.dates.filter(function(el){
|
||||
return el != date;
|
||||
}));
|
||||
};
|
||||
}
|
||||
}
|
||||
$scope.clearDates = null
|
||||
});
|
||||
|
|
|
|||
50
public/js/directives/datepicker.directive.js
Normal file
50
public/js/directives/datepicker.directive.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
angular.module('rallly')
|
||||
.directive('datepicker', function(){
|
||||
return {
|
||||
restrict : 'A',
|
||||
require : 'ngModel',
|
||||
scope : {
|
||||
model : '=ngModel',
|
||||
control : '='
|
||||
},
|
||||
link : function(scope, el, attrs, ngModel){
|
||||
scope.model = scope.model || [];
|
||||
angular.element(el).datepicker({
|
||||
multidate : true,
|
||||
todayHighlight: true
|
||||
})
|
||||
.on('changeDate', function(e){
|
||||
var dates = e.dates;
|
||||
dates.sort(function(a, b){
|
||||
if (a.getTime() > b.getTime()) return true;
|
||||
return false;
|
||||
});
|
||||
ngModel.$setViewValue(dates, e);
|
||||
});
|
||||
|
||||
var update = function(modelValue, oldValue){
|
||||
if (!modelValue || !oldValue || (modelValue.length == oldValue.length)) return;
|
||||
var dates = [];
|
||||
for (var i = 0; i < modelValue.length; i++){
|
||||
dates.push(new Date(modelValue[i]));
|
||||
}
|
||||
angular.element(el).datepicker('setDates', dates);
|
||||
}
|
||||
scope.$watchCollection('model', update);
|
||||
|
||||
scope.control = scope.control || {};
|
||||
scope.control.unsetDate = function(date){
|
||||
var index = scope.model.indexOf(date);
|
||||
scope.model.splice(index, 1);
|
||||
}
|
||||
|
||||
ngModel.$validators.required = function(modelValue, viewValue){
|
||||
if (!modelValue || modelValue.length == 0){
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
70
public/js/directives/form.directive.js
Normal file
70
public/js/directives/form.directive.js
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
angular.module('rallly')
|
||||
.service('FormHelper', function(){
|
||||
this.prettyError = function(errors, field){
|
||||
if (errors.required) return field + " is required";
|
||||
if (errors.pattern) return field + " is invalid" ;
|
||||
if (errors.maxlength) return field + " is too long";
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.directive('userForm', function(FormHelper){
|
||||
return {
|
||||
scope : {
|
||||
event : '=',
|
||||
form : '='
|
||||
},
|
||||
templateUrl : 'templates/directives/eventForm/userForm.html',
|
||||
link : function(scope, el, attrs) {
|
||||
scope.errors = {};
|
||||
|
||||
scope.emailRegex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
|
||||
|
||||
scope.$watchCollection('form.name.$error',function(errors){
|
||||
scope.errors.name = FormHelper.prettyError(errors, "Name");
|
||||
});
|
||||
|
||||
scope.$watchCollection('form.email.$error',function(errors){
|
||||
scope.errors.email = FormHelper.prettyError(errors, "Email");
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
.directive('eventForm', function(FormHelper){
|
||||
return {
|
||||
scope : {
|
||||
event : '=',
|
||||
form : '='
|
||||
},
|
||||
templateUrl : 'templates/directives/eventForm/eventForm.html',
|
||||
link : function(scope, el, attrs) {
|
||||
scope.errors = {};
|
||||
|
||||
scope.$watchCollection('form.title.$error',function(errors){
|
||||
scope.errors.title = FormHelper.prettyError(errors, "Title");
|
||||
});
|
||||
|
||||
scope.$watchCollection('form.location.$error',function(errors){
|
||||
scope.errors.location = FormHelper.prettyError(errors, "Location");
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
.directive('dateForm', function(){
|
||||
return {
|
||||
scope : {
|
||||
event : '=',
|
||||
form : '='
|
||||
},
|
||||
templateUrl : 'templates/directives/eventForm/dateForm.html'
|
||||
}
|
||||
})
|
||||
.directive('participantsForm', function(){
|
||||
return {
|
||||
scope : {
|
||||
event : '=',
|
||||
form : '='
|
||||
},
|
||||
templateUrl : 'templates/directives/eventForm/participantsForm.html'
|
||||
}
|
||||
});
|
||||
|
|
@ -22,16 +22,16 @@ angular.module('rallly', ['ui.router','ngResource','ngFx','btford.modal'])
|
|||
url : '/notfound',
|
||||
templateUrl : 'templates/notfound.html'
|
||||
})
|
||||
.state('editevent', {
|
||||
url: '/:id/edit',
|
||||
templateUrl : 'templates/editevent.html',
|
||||
controller : 'EditEventCtrl'
|
||||
})
|
||||
.state('event',{
|
||||
url : '/:id',
|
||||
templateUrl : 'templates/event.html',
|
||||
controller : 'EventCtrl'
|
||||
})
|
||||
.state('editevent', {
|
||||
url: '/:id/edit',
|
||||
templateUrl : 'templates/editevent.html',
|
||||
controller : 'EditEventCtrl'
|
||||
})
|
||||
})
|
||||
.factory('Event', function($resource){
|
||||
return $resource('/api/event/:id', { id : '@_id' }, {
|
||||
|
|
@ -42,4 +42,11 @@ angular.module('rallly', ['ui.router','ngResource','ngFx','btford.modal'])
|
|||
return $resource('/api/event/:id/participant/:pid', { id: '@_id', pid : '@pid'}, {
|
||||
'update' : { method : 'PUT' }
|
||||
});
|
||||
})
|
||||
.factory('Title', function(){
|
||||
return {
|
||||
set : function(title){
|
||||
document.title = title;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,19 +9,15 @@ angular.module('rallly')
|
|||
controller : function(){
|
||||
this.title = config.title
|
||||
this.message = config.message;
|
||||
this.confirm = function(){
|
||||
if (config.confirm) config.confirm();
|
||||
modal.deactivate();
|
||||
}
|
||||
this.confirm = (config.confirm) ? function(){config.confirm(); modal.deactivate()} : false;
|
||||
this.cancel = modal.deactivate;
|
||||
this.confirmText = config.confirmText || 'Confirm';
|
||||
this.cancelText = config.cancelText || 'Cancel';
|
||||
this.isDestructive = config.isDestructive;
|
||||
}
|
||||
});
|
||||
this.show = function(){
|
||||
modal.activate();
|
||||
}
|
||||
|
||||
this.destroy = function(){
|
||||
modal.deactivate();
|
||||
}
|
||||
|
|
|
|||
12
public/js/templates.js
Normal file
12
public/js/templates.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
angular.module("rallly").run(["$templateCache", function($templateCache) {$templateCache.put("templates/about.html","<div style=\"max-width:600px\">\n <h1>What is Rallly?</h1>\n <div class=\"rl-page-desc\">Rallly is a collaborative scheduling service that makes deciding on a date fast and easy.</div>\n <h2>Hi, I\'m Luke!</h2>\n <p>\n I created Rallly as side project to help me learn some new technologies. I decided to publish it because I thought other people might find it useful. Rallly is a completely free service. In fact it is even open source. You can look at the latest source code on Github.\n </p>\n</div>\n");
|
||||
$templateCache.put("templates/confirmmodal.html","<div class=\"rl-modal-overlay\" ng-click=\"modal.cancel()\"></div>\n\n<div class=\"rl-modal\">\n <div class=\"rl-modal-title\">{{modal.title}}</div>\n <div class=\"rl-modal-message\">\n {{modal.message}}\n </div>\n <div class=\"rl-modal-actions\">\n <button ng-click=\"modal.confirm()\" ng-show=\"modal.confirm\" class=\"btn\" ng-class=\"{danger : modal.isDestructive}\">{{modal.confirmText}}</button>\n <button ng-click=\"modal.cancel()\" class=\"btn\">{{modal.cancelText}}</button>\n </div>\n</div>\n");
|
||||
$templateCache.put("templates/editevent.html","<div ng-show=\"event._id\">\n <div class=\"box\">\n\n <div class=\"box-title\">Edit Event</div>\n <div class=\"box-description\">\n You can makes changes to your existing event by changing the fields in the form below.\n </div>\n\n <form novalidate name=\"form\" ng-submit=\"submit()\">\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 <section class=\"box-section\" date-form form=\"form\" event=\"event\">\n\n </section>\n <div class=\"box-controls box-bottom-sticky\">\n <button type=\"submit\" ng-show=\"didChange()\" class=\"btn btn-primary\" ng-class=\"{disabled : !didChange()}\">\n Save Changes\n </button>\n <button ng-click=\"undoChanges()\" class=\"btn\" ng-show=\"didChange()\">Undo Changes</button>\n <a href=\"/{{event._id}}\" class=\"btn\" ng-hide=\"didChange()\">Done</a>\n </div>\n\n </form>\n\n </div>\n\n</div>\n");
|
||||
$templateCache.put("templates/event.html","<div ng-show=\"event._id\">\n <div class=\"box \">\n <div class=\"event-header\">\n <div class=\"avatar\">\n <img src=\"/images/eventicon.png\" width=\"32 \" />\n </div>\n <div class=\"details\">\n <div class=\"title\">\n {{event.title}}\n </div>\n <div class=\"subtitle\">\n Created by <a href=\"mailto:{{event.creator.email}}\">{{event.creator.name}}</a> • {{event.created | elapsed}}\n </div>\n </div>\n <div class=\"actions\">\n <button class=\"btn\" ng-click=\"editEvent()\">Edit Event</button>\n </div>\n </div>\n <div class=\"box-side-sticky event-description\" ng-show=\"event.description\">{{event.description}}</div>\n <div class=\"box-bottom-sticky event-location\" ng-show=\"event.location\">\n <img src=\"/images/location.png\" width=\"18\" /><a href=\"http://google.com/maps?q={{event.location}}\" target=\"_blank\">{{event.location}}</a>\n </div>\n\n </div>\n <div class=\"box box-x-scroll\">\n <div poll event=\"event\" class=\"poll\" participant=\"participant\">\n </div>\n </div>\n</div>\n");
|
||||
$templateCache.put("templates/home.html","<div class=\"page-placeholder\">\n <div class=\"image\">\n <img src=\"/images/mark_large.png\" width=\"67\" />\n </div>\n <div class=\"title\">\n Schedule an Event\n </div>\n <div class=\"content\">\n Want to host an event but can’t decide on a date? Click on the button below to start!\n </div>\n <button ng-click=\"newEvent()\" class=\"btn\">Schedule New Event</button>\n</div>\n");
|
||||
$templateCache.put("templates/newevent.html","<div ng-hide=\"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 name=\"form\" ng-submit=\"submit()\">\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\n <section class=\"box-section\" date-form form=\"form\" event=\"event\">\n\n </section>\n\n <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=\"submit\" class=\"btn btn-primary\">Create Event</button>\n </div>\n\n </form>\n </div>\n</div>\n<div ng-show=\"eventUrl\" class=\"box fx-fade-up\">\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! Make sure you visit the page yourself and fill in the poll.\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/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=\"date in event.dates\">\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=\"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\" ng-click=\"editMode = true; 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.dates[$index]\" />\n <img src=\"/images/nope@2x.png\" width=\"8\" ng-hide=\"editMode\" ng-if=\"!participant.dates[$index]\" />\n <input ng-model=\"participant.dates[$index]\" ng-show=\"editMode\" ng-false-value=\"false\" type=\"checkbox\" />\n <div class=\"overlay\" ng-show=\"editMode\" ng-click=\"participant.dates[$index] = !participant.dates[$index]\"></div>\n </div>\n <div class=\"cell action-cell\">\n <a href=\"#\" ng-hide=\"editMode\" ng-click=\"editMode = true; edit(participant)\" class=\"btn hover\">Edit</a>\n <a href=\"#\" ng-hide=\"editMode\" ng-click=\"delete(participant)\" class=\"btn danger hover\">Delete</a>\n <button ng-show=\"editMode\" type=\"submit\" class=\"btn\">Save</button>\n <a href=\"#\" ng-show=\"editMode\" ng-click=\"editMode = false; cancel($index)\" class=\"btn\">Cancel</a>\n </div>\n </form>\n </div>\n <div class=\"poll-entry highlight\">\n <form novalidate name=\"formnew\" ng-submit=\"save(participant)\">\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.dates[$index]\" ng-false-value=\"false\" type=\"checkbox\" />\n <div class=\"overlay\" ng-click=\"participant.dates[$index] = !participant.dates[$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/eventForm/dateForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Choose Dates</div>\n <ul class=\"daticon-list\">\n <li ng-repeat=\"date in event.dates\">\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 </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.datepicker.$dirty || 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/directives/eventForm/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/directives/eventForm/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 for=\"emails\">Participant\'s Emails</label>\n <textarea id=\"emails\" ng-list ng-model=\"event.emails\" placeholder=\"Enter Emails...\" class=\"form-control extend\"></textarea>\n </div>\n </div>\n</div>\n</section>\n");
|
||||
$templateCache.put("templates/directives/eventForm/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");}]);
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
$dark-blue-clr: #2E3A54;
|
||||
$green-clr: #6EBC48;
|
||||
$pink-clr: #E55A84;
|
||||
$red-clr: #BF3A61;
|
||||
$red-clr: #E06488;
|
||||
$blue-clr: #5AC4E5;
|
||||
$light-blue-clr: #F5F6F8;
|
||||
|
||||
|
|
@ -12,3 +12,5 @@ $text-3-clr: #AEB4BE;
|
|||
$border-clr: #D9DDE3;
|
||||
$navigation-bg-clr: $dark-blue-clr;
|
||||
$background-clr: $light-blue-clr;
|
||||
|
||||
$color-collection: (#8A75AE, #80A1DA, #B3DD8B, #7EE4E4, #FCD285, #F7967F, #E8669D, #F7B6E7, #F99D7B, #88D0CB);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
$navigation-width: 100%;
|
||||
$top-bar-height: 50px;
|
||||
$min-width: 820px;
|
||||
|
||||
.outer-container {
|
||||
width:100%;
|
||||
|
|
@ -7,10 +8,12 @@ $top-bar-height: 50px;
|
|||
}
|
||||
body {
|
||||
background: $background-clr;
|
||||
color: $text-clr;
|
||||
min-width: $min-width;
|
||||
}
|
||||
.main-navigation {
|
||||
width: $navigation-width;
|
||||
min-width: $navigation-width;
|
||||
min-width:$min-width;
|
||||
color: white;
|
||||
.wrapper {
|
||||
width: $navigation-width;
|
||||
|
|
@ -20,14 +23,13 @@ body {
|
|||
|
||||
.main-content {
|
||||
background: $background-clr;
|
||||
height:100%;
|
||||
min-height:100%;
|
||||
.main-view {
|
||||
height: 100%;
|
||||
position:relative;
|
||||
padding: 160px 40px 40px 40px;
|
||||
width:100%;
|
||||
min-height: 400px;
|
||||
min-width: 600px;
|
||||
min-height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
$nav-padding: 40px;
|
||||
$vertical-space: 20px;
|
||||
$top-space: 15px;
|
||||
|
||||
.main-navigation {
|
||||
|
|
@ -7,6 +5,7 @@ $top-space: 15px;
|
|||
width:100%;
|
||||
z-index: 1000;
|
||||
.wrapper {
|
||||
min-width:600px;
|
||||
background: $navigation-bg-clr;
|
||||
height: em(60px);
|
||||
}
|
||||
|
|
@ -28,7 +27,7 @@ $top-space: 15px;
|
|||
display:inline-block;
|
||||
li {
|
||||
display:inline-block;
|
||||
margin-right:em(30px);
|
||||
margin-right:em(20px);
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
@ -74,27 +73,28 @@ $top-space: 15px;
|
|||
// border-bottom:1px solid lighten($navigation-bg-clr, 5%);
|
||||
a {
|
||||
display:block;
|
||||
@include transition(background-color 0.1s ease-in-out);
|
||||
color:tint($green-clr,90%);
|
||||
text-align:center;
|
||||
border-radius: 2px;
|
||||
background: $green-clr;
|
||||
@include linear-gradient(lighten($green-clr,8%), lighten($green-clr,2%));
|
||||
text-decoration:none;
|
||||
font-size:12px;
|
||||
font-weight: 600;
|
||||
padding: 6px 15px 10px 15px;
|
||||
font-weight: bold;
|
||||
// text-shadow: 0 1px 1px darken($green-clr, 10%);
|
||||
padding: 8px 15px 10px 12px;
|
||||
&:hover {
|
||||
background: lighten($green-clr, 5%);
|
||||
|
||||
}
|
||||
&:active {
|
||||
opacity:0.9;
|
||||
box-shadow: inset 0 2px 5px rgba(black,0.1), 0 0 0 1px darken($navigation-bg-clr, 8%);
|
||||
}
|
||||
img {
|
||||
display:none;
|
||||
vertical-align:middle;
|
||||
margin-right: 5px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
span {
|
||||
vertical-align:middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
background: $background-clr;
|
||||
border-top: 1px solid $border-clr;
|
||||
margin-top: 20px;
|
||||
margin-bottom:-20px;
|
||||
}
|
||||
|
||||
.event-location {
|
||||
|
|
@ -93,7 +94,7 @@
|
|||
}
|
||||
}
|
||||
.actions {
|
||||
visibility:hidden;
|
||||
// visibility:hidden;
|
||||
float: right;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,29 @@
|
|||
$box-v-pad: 20px;
|
||||
$box-h-pad: 25px;
|
||||
|
||||
.box {
|
||||
background: white;
|
||||
border: 1px solid $border-clr;
|
||||
border-radius: 3px;
|
||||
margin: 0 auto 20px auto;
|
||||
max-width: 800px;
|
||||
padding: 20px 30px;
|
||||
padding: $box-v-pad $box-h-pad;
|
||||
&.box-x-scroll {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
&.invisible {
|
||||
background: transparent;
|
||||
border:0;
|
||||
padding: 0;
|
||||
margin-bottom:40px;
|
||||
}
|
||||
&.highlight {
|
||||
border-color: $blue-clr;
|
||||
box-shadow: 0 0 3px rgba($blue-clr, 0.5);
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-title {
|
||||
|
|
@ -16,9 +35,18 @@
|
|||
|
||||
.box-description {
|
||||
font-size: 14px;
|
||||
color: $text-3-clr;
|
||||
color: $text-2-clr;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid $border-clr;
|
||||
margin-top: -20px;
|
||||
margin-bottom: 20px;
|
||||
a {
|
||||
color: $text-clr;
|
||||
text-decoration:none;
|
||||
&:hover {
|
||||
border: 1px solid $border-clr;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-section {
|
||||
padding-top: 20px;
|
||||
|
|
@ -35,3 +63,61 @@
|
|||
@include span-columns(9);
|
||||
}
|
||||
}
|
||||
|
||||
.box-message {
|
||||
text-align:center;
|
||||
padding:40px;
|
||||
max-width:450px;
|
||||
margin:0 auto;
|
||||
.main-image {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: em(24px);
|
||||
color: $text-clr;
|
||||
margin-bottom: em(10px);
|
||||
}
|
||||
.content {
|
||||
font-size: em(14px);
|
||||
color: $text-2-clr;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mini-divider:after {
|
||||
content: "";
|
||||
display:inline-block;
|
||||
width:200px;
|
||||
height:1px;
|
||||
background: $border-clr;
|
||||
margin:20px auto;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.box-side-sticky {
|
||||
padding: $box-v-pad $box-h-pad;
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
margin-left: $box-h-pad * -1;
|
||||
|
||||
}
|
||||
|
||||
.box-bottom-sticky {
|
||||
padding: $box-v-pad $box-h-pad;
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
margin-top:20px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-top: 1px solid $border-clr;
|
||||
margin-bottom: $box-v-pad * -1;
|
||||
margin-left: $box-h-pad * -1;
|
||||
}
|
||||
|
||||
.box-controls {
|
||||
text-align: right;
|
||||
box-shadow: inset 0 1px 0 white;
|
||||
background: lighten($background-clr, 1%);
|
||||
margin-top: $box-v-pad;
|
||||
padding: 15px $box-h-pad;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,19 @@
|
|||
.btn {
|
||||
$btn-top-clr: #FAFAFA;
|
||||
$btn-bottom-clr: #EFF1F3;
|
||||
border:1px solid #E0E3E9;
|
||||
display:inline-block;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 1px 0 white, 0 1px 1px rgba(black, 0.1);
|
||||
@include background-image(linear-gradient(#FAFAFA, #EFF1F3));
|
||||
@include linear-gradient($btn-top-clr, $btn-bottom-clr);
|
||||
font-size: em(12px);
|
||||
font-weight:600;
|
||||
color: $text-2-clr;
|
||||
text-decoration:none;
|
||||
padding: em(8px) em(15px);
|
||||
&:hover {
|
||||
@include linear-gradient(lighten($btn-top-clr,0.5%), lighten($btn-bottom-clr,1%));
|
||||
}
|
||||
&.disabled {
|
||||
cursor:default;
|
||||
opacity: 0.5;
|
||||
|
|
@ -22,6 +28,6 @@
|
|||
outline:0;
|
||||
}
|
||||
&:active {
|
||||
box-shadow: inset 0 0 5px rgba(black, 0.1);
|
||||
box-shadow: inset 0 0 2px rgba(black, 0.1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.error > .datepicker {
|
||||
border-color: $red-clr;
|
||||
.ng-submitted .ng-invalid > .datepicker {
|
||||
border-color: $pink-clr;
|
||||
}
|
||||
.datepicker {
|
||||
width:100%;
|
||||
border:1px solid #eee;
|
||||
border:1px solid rgba($border-clr, 0.5);
|
||||
border-radius: 3px;
|
||||
background:white;
|
||||
padding: em(10px);
|
||||
|
|
@ -24,6 +24,7 @@
|
|||
}
|
||||
.prev, .next {
|
||||
opacity: 0.5;
|
||||
color: $text-2-clr;
|
||||
cursor: pointer;
|
||||
border-radius:5px;
|
||||
position:relative;
|
||||
|
|
@ -46,7 +47,8 @@
|
|||
margin-top:$size * -0.5;
|
||||
left:50%;
|
||||
top:50%;
|
||||
border-radius:100%;
|
||||
border-radius:3px;
|
||||
@include transition(background-color 0.1s ease-in-out);
|
||||
}
|
||||
}
|
||||
.datepicker-switch {
|
||||
|
|
@ -55,6 +57,7 @@
|
|||
font-size:em(18px);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
@include transition(background-color 0.1s ease-in-out);
|
||||
&:hover {
|
||||
background: rgba($border-clr, 0.4);
|
||||
}
|
||||
|
|
@ -65,7 +68,7 @@
|
|||
text-transform: uppercase;
|
||||
color: $pink-clr;
|
||||
font-size: em(14px);
|
||||
border-bottom: 2px solid #eee;
|
||||
border-bottom: 2px solid rgba($border-clr, 0.3);
|
||||
}
|
||||
.dow, .day {
|
||||
padding:em(15px);
|
||||
|
|
@ -108,6 +111,7 @@
|
|||
}
|
||||
&:after {
|
||||
content: " ";
|
||||
@include transition(all 0.1s ease-in-out);
|
||||
cursor:pointer;
|
||||
opacity: 0;
|
||||
position:absolute;
|
||||
|
|
@ -118,7 +122,7 @@
|
|||
margin-top:$size * -0.5;
|
||||
left:50%;
|
||||
top:50%;
|
||||
border-radius:100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
.month, .year {
|
||||
|
|
@ -128,10 +132,11 @@
|
|||
font-size: em(14px);
|
||||
padding:em(20px);
|
||||
cursor:pointer;
|
||||
@include transition(background-color 0.1s ease-in-out);
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
&:hover {
|
||||
background: rgba($border-clr, 0.1);
|
||||
background: rgba($border-clr, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -184,6 +189,7 @@
|
|||
}
|
||||
.delete {
|
||||
text-align:center;
|
||||
border:0;
|
||||
$size: 18px;
|
||||
width: em($size);
|
||||
height: em($size);
|
||||
|
|
@ -200,6 +206,28 @@
|
|||
background-color: rgba($border-clr, 0.8)
|
||||
}
|
||||
}
|
||||
.count {
|
||||
text-align:center;
|
||||
border:0;
|
||||
$size: 18px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
position:absolute;
|
||||
top: $size * -0.4;
|
||||
right: $size * -0.4;
|
||||
border-radius:100%;
|
||||
font-weight:bold;
|
||||
display:inline-block;
|
||||
background: darken($border-clr, 10%);
|
||||
color:white;
|
||||
font-size: 9px;
|
||||
line-height: $size;
|
||||
@include transition(background-color 0.2s ease-in-out);
|
||||
&.top {
|
||||
background: #FF5D5D;
|
||||
}
|
||||
|
||||
}
|
||||
&:hover {
|
||||
.delete {
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,12 @@
|
|||
form {
|
||||
margin:0;
|
||||
&.ng-submitted {
|
||||
.ng-invalid {
|
||||
border-color: $pink-clr !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width:100%;
|
||||
}
|
||||
|
|
@ -20,33 +29,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
.form-big-col {
|
||||
@include span-columns(12);
|
||||
}
|
||||
|
||||
.form-small-col {
|
||||
@include span-columns(2);
|
||||
}
|
||||
|
||||
.form-error-msg {
|
||||
color: $red-clr;
|
||||
font-size: em(12px);
|
||||
padding: em(5px);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
& > label {
|
||||
font-size:em(12px);
|
||||
color: $text-3-clr;
|
||||
display:block;
|
||||
display:inline-block;
|
||||
line-height:em(30px);
|
||||
&:after {
|
||||
content: "*";
|
||||
color: $red-clr;
|
||||
margin-left:5px;
|
||||
|
||||
}
|
||||
&.optional:after {
|
||||
content: "";
|
||||
.form-error {
|
||||
font-size: em(12px);
|
||||
color: $red-clr;
|
||||
float: right;
|
||||
img {
|
||||
vertical-align:bottom;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
&.optional > label:after {
|
||||
content: " (optional)";
|
||||
}
|
||||
&.error {
|
||||
input.form-control, textarea.form-control {
|
||||
|
||||
border-color: $pink-clr;
|
||||
background: rgba($pink-clr,0.02);
|
||||
}
|
||||
}
|
||||
input.form-control, textarea.form-control {
|
||||
|
|
@ -54,7 +61,7 @@
|
|||
border: 1px solid $border-clr;
|
||||
font-size:em(18px);
|
||||
&.ng-pristine {
|
||||
background: $background-clr;
|
||||
background: lighten($background-clr,1%);
|
||||
}
|
||||
@include transition(border-color 0.1s ease-in-out);
|
||||
&:focus {
|
||||
|
|
@ -70,23 +77,23 @@
|
|||
color: rgba($text-3-clr,0.7);
|
||||
}
|
||||
}
|
||||
&.error {
|
||||
input.form-control, textarea.form-control {
|
||||
|
||||
border-color: $red-clr;
|
||||
background: rgba($red-clr,0.02);
|
||||
}
|
||||
.form-btn {
|
||||
padding: em(12px) em(15px);
|
||||
}
|
||||
input.form-control {
|
||||
vertical-align:middle;
|
||||
padding: em(5px) em(10px);
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
min-height: 100px;
|
||||
min-height: 135px;
|
||||
font-size: em(18px);
|
||||
padding: em(8px) em(10px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.form-submit-message {
|
||||
display:inline-block;
|
||||
margin-left: em(5px);
|
||||
|
|
|
|||
|
|
@ -12,8 +12,13 @@ body {
|
|||
@import "partials/applayout";
|
||||
@import "partials/navigation";
|
||||
@import "partials/topbar";
|
||||
@import "partials/pages/home";
|
||||
@import "partials/ui/animations";
|
||||
@import "partials/ui/buttons";
|
||||
@import "partials/ui/form";
|
||||
@import "partials/ui/box";
|
||||
@import "partials/ui/datepicker";
|
||||
@import "partials/ui/modal";
|
||||
@import "partials/ui/poll";
|
||||
|
||||
@import "partials/pages/home";
|
||||
@import "partials/pages/event";
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{{modal.message}}
|
||||
</div>
|
||||
<div class="rl-modal-actions">
|
||||
<button ng-click="modal.confirm()" class="btn-primary" ng-class="{danger : modal.isDestructive}">{{modal.confirmText}}</button>
|
||||
<button ng-click="modal.cancel()" class="btn-primary">{{modal.cancelText}}</button>
|
||||
<button ng-click="modal.confirm()" ng-show="modal.confirm" class="btn" ng-class="{danger : modal.isDestructive}">{{modal.confirmText}}</button>
|
||||
<button ng-click="modal.cancel()" class="btn">{{modal.cancelText}}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
32
public/templates/directives/eventForm/dateForm.html
Normal file
32
public/templates/directives/eventForm/dateForm.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<div class="section-details">
|
||||
<div class="section-title">Choose Dates</div>
|
||||
<ul class="daticon-list">
|
||||
<li ng-repeat="date in event.dates">
|
||||
<div class="daticon">
|
||||
<div class="dow">
|
||||
{{date | date: 'EEE'}}
|
||||
</div>
|
||||
<div class="day">
|
||||
{{date | date: 'd'}}
|
||||
</div>
|
||||
<div class="month">
|
||||
{{date | date : 'MMM'}}
|
||||
</div>
|
||||
<span class="delete" ng-click="datepicker.unsetDate(date)"></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section-main">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="email">Calendar</label>
|
||||
<span class="form-error" ng-show="(form.datepicker.$dirty || form.$submitted) && form.datepicker.$error.required">
|
||||
<img src="/images/error.png" width="14" /> You need to select a few dates
|
||||
</span>
|
||||
<div datepicker required name="datepicker" control="datepicker" ng-model="event.dates">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
31
public/templates/directives/eventForm/eventForm.html
Normal file
31
public/templates/directives/eventForm/eventForm.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<div class="section-details">
|
||||
<div class="section-title">Event Details</div>
|
||||
</div>
|
||||
<div class="section-main">
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="form-group">
|
||||
<label for="title">Title</label>
|
||||
<span class="form-error" ng-show="(form.title.$touched || form.$submitted) && errors.title">
|
||||
<img src="/images/error.png" width="14" /> {{errors.title}}
|
||||
</span>
|
||||
<input id="title" name="title" ng-maxlength="30" required ng-model="event.title" type="text" placeholder="Monthly Meetup..." class="form-control extend"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<div class="form-group optional">
|
||||
<label for="location">Location</label>
|
||||
<span class="form-error" ng-show="(form.location.$touched || form.$submitted) && errors.location">
|
||||
<img src="/images/error.png" width="14" /> {{errors.location}}
|
||||
</span>
|
||||
<input id="location" name="location" ng-model="event.location" ng-maxlength="50" type="text" placeholder="Rick's Cafe..." class="form-control extend"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group optional">
|
||||
<label for="description" >Description</label>
|
||||
<textarea id="description" name="description" ng-model="event.description" placeholder="Enter Description..." class="form-control extend"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
12
public/templates/directives/eventForm/participantsForm.html
Normal file
12
public/templates/directives/eventForm/participantsForm.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<div class="section-details">
|
||||
<div class="section-title">Invite Participants</div>
|
||||
</div>
|
||||
<div class="section-main">
|
||||
<div class="form-row">
|
||||
<div class="form-group optional">
|
||||
<label for="emails">Participant's Emails</label>
|
||||
<textarea id="emails" ng-list ng-model="event.emails" placeholder="Enter Emails..." class="form-control extend"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
25
public/templates/directives/eventForm/userForm.html
Normal file
25
public/templates/directives/eventForm/userForm.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<div class="section-details">
|
||||
<div class="section-title">Your Details</div>
|
||||
</div>
|
||||
<div class="section-main">
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<span class="form-error" ng-show="(form.name.$touched || form.$submitted) && errors.name">
|
||||
<img src="/images/error.png" width="14" /> {{errors.name}}
|
||||
</span>
|
||||
<input id="name" name="name" ng-maxlength="30" required ng-model="event.creator.name" type="text" placeholder="John Doe..." class="form-control extend"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<span class="form-error" ng-show="(form.email.$touched || form.$submitted) && errors.email">
|
||||
<img src="/images/error.png" width="14" /> {{errors.email}}
|
||||
</span>
|
||||
<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"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -24,10 +24,10 @@
|
|||
<div class="poll-entry" ng-repeat="participant in event.participants">
|
||||
<form novalidate ng-submit="update(participant); editMode = false">
|
||||
<div class="cell name-cell">
|
||||
<span class="avatar style-{{participant.style + 1}}">
|
||||
<span class="avatar style-{{$index + 1}}">
|
||||
<img src="/images/user.png" width="11" />
|
||||
</span>
|
||||
<input required type="text" class="form-control" ng-model="participant.name" ng-show="editMode" value="participant.name"/>
|
||||
<input required autocomplete="off" type="text" class="form-control" ng-model="participant.name" ng-show="editMode" value="participant.name"/>
|
||||
<span ng-hide="editMode" class="name" ng-click="editMode = true; edit(participant)">{{participant.name}}</span>
|
||||
</div>
|
||||
<div class="cell vote-cell" ng-repeat="date in event.dates">
|
||||
|
|
@ -50,14 +50,14 @@
|
|||
<span class="avatar style-{{participant.style}}">
|
||||
<img src="/images/user.png" width="11" />
|
||||
</span>
|
||||
<input name="username" type="text" class="form-control" placeholder="Your name..." ng-model="participant.name" required value="participant.name"/>
|
||||
<input autocomplete="off" name="username" type="text" class="form-control" placeholder="Your name..." ng-model="participant.name" required value="participant.name"/>
|
||||
</div>
|
||||
<div class="cell vote-cell" ng-repeat="date in event.dates">
|
||||
<input ng-model="participant.dates[$index]" ng-false-value="false" type="checkbox" />
|
||||
<div class="overlay" ng-click="participant.dates[$index] = !participant.dates[$index]"></div>
|
||||
</div>
|
||||
<div class="cell action-cell">
|
||||
<button type="submit" class="btn">Save</button>
|
||||
<button type="submit" ng-class="{ 'animated shake' : formnew.$submitted && formnew.$invalid }" class="btn">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,91 +1,33 @@
|
|||
<h1>Edit Event</h1>
|
||||
<div class="rl-page-desc">
|
||||
You can makes changes to your existing event by changing the fields in the form below. When you're ready click save.
|
||||
</div>
|
||||
<section class="rl-section">
|
||||
<aside class="rl-section-details">
|
||||
<h2>Your Details</h2>
|
||||
</aside>
|
||||
<div class="rl-section-main">
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="form-group" ng-class="{error:errors['creator.name']}">
|
||||
<label for="name">Name</label>
|
||||
<input id="name" ng-model="event.creator.name" type="text" placeholder="John Doe..." class="form-control extend"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<div class="form-group" ng-class="{error:errors['creator.email']}">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" ng-model="event.creator.email" type="text" placeholder="john.doe@email.com..." class="form-control extend"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="rl-section">
|
||||
<aside class="rl-section-details">
|
||||
<h2>Event Details</h2>
|
||||
</aside>
|
||||
<div class="rl-section-main">
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="form-group" ng-class="{error:errors.title}">
|
||||
<label for="title">Title</label>
|
||||
<input id="title" ng-model="event.title" type="text" placeholder="Monthly Meetup..." class="form-control extend"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<div class="form-group">
|
||||
<label for="location" class="optional">Location</label>
|
||||
<input id="location" ng-model="event.location" type="text" placeholder="Rick's Cafe..." class="form-control extend"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="description" class="optional">Description</label>
|
||||
<textarea id="description" ng-model="event.description" placeholder="Enter Description..." class="form-control extend"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="rl-section">
|
||||
<aside class="rl-section-details">
|
||||
<h2>Change Dates</h2>
|
||||
</aside>
|
||||
<div class="rl-section-main">
|
||||
<div class="form-row">
|
||||
<div data-datepicker ng-model="event.dates" ng-class="{error:errors.dates}">
|
||||
<div ng-show="event._id">
|
||||
<div class="box">
|
||||
|
||||
<div class="box-title">Edit Event</div>
|
||||
<div class="box-description">
|
||||
You can makes changes to your existing event by changing the fields in the form below.
|
||||
</div>
|
||||
<ul class="daticon-list">
|
||||
<li ng-repeat="date in event.dates">
|
||||
<div class="daticon">
|
||||
<div class="dow">
|
||||
{{date | date: 'EEE'}}
|
||||
</div>
|
||||
<div class="day">
|
||||
{{date | date: 'd'}}
|
||||
</div>
|
||||
<div class="month">
|
||||
{{date | date : 'MMM'}}
|
||||
</div>
|
||||
<span class="delete" ng-click="unsetDate(date)"></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>
|
||||
|
||||
<button type="submit" ng-show="didChange()" ng-click="submit()" class="btn btn-primary" ng-class="{disabled : !didChange()}">
|
||||
<form novalidate name="form" ng-submit="submit()">
|
||||
|
||||
<section class="box-section" user-form form="form" event="event">
|
||||
|
||||
</section>
|
||||
|
||||
<section class="box-section" event-form form="form" event="event">
|
||||
|
||||
</section>
|
||||
<section class="box-section" date-form form="form" event="event">
|
||||
|
||||
</section>
|
||||
<div class="box-controls box-bottom-sticky">
|
||||
<button type="submit" ng-show="didChange()" class="btn btn-primary" ng-class="{disabled : !didChange()}">
|
||||
Save Changes
|
||||
</button>
|
||||
<a href="/{{event._id}}" class="btn-primary danger" ng-show="didChange()">Cancel Changes</a>
|
||||
<a href="/{{event._id}}" class="btn-primary" ng-hide="didChange()">Done</a>
|
||||
<span ng-show="errors" class="form-submit-message error fx-fade-normal fx-speed-100"><img src="/images/error@2x.png" width="22" height="22" /> Oops! Looks like you missed something!</span>
|
||||
<span ng-show="didSave" class="form-submit-message fx-fade-normal fx-speed-100"><img src="/images/success@2x.png" width="22" height="22" /> Changes saved successfully!</span>
|
||||
</p>
|
||||
<button ng-click="undoChanges()" class="btn" ng-show="didChange()">Undo Changes</button>
|
||||
<a href="/{{event._id}}" class="btn" ng-hide="didChange()">Done</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,83 +1,29 @@
|
|||
<div ng-show="event._id">
|
||||
<div class="event-details">
|
||||
<h1 class="fx-rotate-clock">{{event.title}}</h1>
|
||||
<ul class="event-detail-list">
|
||||
<li class="event-created-by">
|
||||
Created by <a href="{{event.creator.email}}">{{event.creator.name}}</a> - {{event.created | elapsed}}
|
||||
</li>
|
||||
<li ng-show="event.updated">
|
||||
Updated {{event.updated | elapsed}}
|
||||
</li>
|
||||
<li ng-show="event.location" class="event-location">
|
||||
{{event.location}}
|
||||
</li>
|
||||
</ul>
|
||||
<div ng-show="event.description" class="event-description">{{event.description}}</div>
|
||||
<div class="box ">
|
||||
<div class="event-header">
|
||||
<div class="avatar">
|
||||
<img src="/images/eventicon.png" width="32 " />
|
||||
</div>
|
||||
<div class="details">
|
||||
<div class="title">
|
||||
{{event.title}}
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
Created by <a href="mailto:{{event.creator.email}}">{{event.creator.name}}</a> • {{event.created | elapsed}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn" ng-click="editEvent()">Edit Event</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-side-sticky event-description" ng-show="event.description">{{event.description}}</div>
|
||||
<div class="box-bottom-sticky event-location" ng-show="event.location">
|
||||
<img src="/images/location.png" width="18" /><a href="http://google.com/maps?q={{event.location}}" target="_blank">{{event.location}}</a>
|
||||
</div>
|
||||
|
||||
<h2>When can you make it?</h2>
|
||||
<section class="rl-section">
|
||||
<form ng-submit="save(participant)">
|
||||
<table class="event-poll">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="event-poll-participants">
|
||||
{{event.participants.length}} participants
|
||||
</th>
|
||||
<th width="70" class="center" ng-repeat="date in event.dates">
|
||||
<div class="daticon">
|
||||
<div class="dow">
|
||||
{{date | date: 'EEE'}}
|
||||
</div>
|
||||
<div class="day">
|
||||
{{date | date: 'd'}}
|
||||
</div>
|
||||
<div class="month">
|
||||
{{date | date : 'MMM'}}
|
||||
<div class="box box-x-scroll">
|
||||
<div poll event="event" class="poll" participant="participant">
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<th width="160">
|
||||
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="event-poll-entry" ng-repeat="participant in event.participants" ng-model="participant">
|
||||
<td class="event-poll-user">
|
||||
<img src="/images/user_gray@2x.png" width="11" />
|
||||
<input type="text" class="form-control" ng-model="participant.name" ng-show="editMode" value="participant.name"/>
|
||||
<span ng-hide="editMode" class="event-poll-name">{{participant.name}}</span>
|
||||
</td>
|
||||
<td class="center" ng-repeat="date in event.dates">
|
||||
<img src="/images/tick@2x.png" width="16" ng-hide="editMode" ng-if="participant.dates[$index]" />
|
||||
<img src="/images/nope@2x.png" width="8" ng-hide="editMode" ng-if="!participant.dates[$index]" />
|
||||
<input ng-model="participant.dates[$index]" ng-show="editMode" ng-false-value="false" type="checkbox" />
|
||||
</td>
|
||||
<td>
|
||||
<a ng-hide="editMode" href="javascript:" ng-click="editMode = true; edit(participant)" class="btn-primary hover">Edit</a>
|
||||
<a ng-hide="editMode" href="javascript:" ng-click="delete(participant)" class="btn-primary danger hover">Delete</a>
|
||||
<a ng-show="editMode" href="javascript:" ng-click="editMode = false; update(participant)" class="btn-primary">Save</a>
|
||||
<a ng-show="editMode" href="javascript:" ng-click="editMode = false; cancel($index)" class="btn-primary">Cancel</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="event-poll-input">
|
||||
<td class="event-poll-user">
|
||||
<img src="/images/user_gray@2x.png" width="11" />
|
||||
<input type="text" class="form-control" ng-model="participant.name" placeholder="Your name..."/>
|
||||
</td>
|
||||
<td class="center" ng-repeat="date in event.dates">
|
||||
<input ng-model="participant.dates[$index]" ng-false-value="false" type="checkbox" />
|
||||
</td>
|
||||
<td>
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
</section>
|
||||
<p>
|
||||
<button class="btn-primary" ng-click="editEvent()">Edit Event</button>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,119 +1,49 @@
|
|||
<div class="box" ng-hide="eventUrl">
|
||||
<div ng-hide="eventUrl">
|
||||
<div class="box" ng-class="{'animated shake': form.$submitted && form.$invalid }">
|
||||
|
||||
<div class="box-title">Schedule a New Event</div>
|
||||
<div class="box-description">
|
||||
Fill in the form below to create your event and share it with your friends and colleagues.
|
||||
</div>
|
||||
<section class="box-section">
|
||||
<div class="section-details">
|
||||
<div class="section-title">1. Your Details</div>
|
||||
</div>
|
||||
<div class="section-main">
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="form-group" ng-class="{error:errors['creator.name']}">
|
||||
<label for="name">Name</label>
|
||||
<input id="name" ng-model="event.creator.name" type="text" placeholder="John Doe..." class="form-control extend"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<div class="form-group" ng-class="{error:errors['creator.email']}">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" ng-model="event.creator.email" type="email" placeholder="john.doe@email.com..." class="form-control extend"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form novalidate name="form" ng-submit="submit()">
|
||||
<section class="box-section" user-form form="form" event="event">
|
||||
|
||||
</section>
|
||||
|
||||
<section class="box-section" event-form form="form" event="event">
|
||||
|
||||
</section>
|
||||
|
||||
<section class="box-section" date-form form="form" event="event">
|
||||
|
||||
</section>
|
||||
|
||||
<section class="box-section" participants-form form="form" event="event">
|
||||
|
||||
</section>
|
||||
|
||||
<div class="box-controls box-bottom-sticky">
|
||||
<button type="submit" class="btn btn-primary">Create Event</button>
|
||||
</div>
|
||||
<div class="box" ng-hide="eventUrl">
|
||||
<section class="box-section">
|
||||
<div class="section-details">
|
||||
<div class="section-title">2. Event Details</div>
|
||||
</div>
|
||||
<div class="section-main">
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="form-group" ng-class="{error:errors.title}">
|
||||
<label for="title">Title</label>
|
||||
<input id="title" ng-model="event.title" type="text" placeholder="Monthly Meetup..." class="form-control extend"/>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<div ng-show="eventUrl" class="box fx-fade-up">
|
||||
<div class="box-message">
|
||||
<div class="main-image">
|
||||
<img src="/images/success_large.png" width="100" />
|
||||
</div>
|
||||
<div class="title">Event Created</div>
|
||||
<div class="content">
|
||||
Your event has been created successfully! Make sure you visit the page yourself and fill in the poll.
|
||||
</div>
|
||||
<div class="mini-divider">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="location" class="optional">Location</label>
|
||||
<input id="location" ng-model="event.location" type="text" placeholder="Rick's Cafe..." class="form-control extend"/>
|
||||
<input type="text" class="form-control" disabled="true" value="{{eventUrl}}" />
|
||||
<a href="{{eventUrl}}" class="btn form-btn">GO</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="description" class="optional">Description</label>
|
||||
<textarea id="description" ng-model="event.description" placeholder="Enter Description..." class="form-control extend"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="box">
|
||||
<section class="box-section">
|
||||
<div class="section-details">
|
||||
<div class="section-title">3. Choose Dates</div>
|
||||
<ul class="daticon-list">
|
||||
<li ng-repeat="date in event.dates">
|
||||
<div class="daticon">
|
||||
<div class="dow">
|
||||
{{date | date: 'EEE'}}
|
||||
</div>
|
||||
<div class="day">
|
||||
{{date | date: 'd'}}
|
||||
</div>
|
||||
<div class="month">
|
||||
{{date | date : 'MMM'}}
|
||||
</div>
|
||||
<span class="delete" ng-click="unsetDate(date)"></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section-main">
|
||||
<div class="form-row">
|
||||
<div data-datepicker ng-model="event.dates" ng-class="{error:errors.dates}">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="box">
|
||||
<section class="box-section">
|
||||
<div class="section-details">
|
||||
<div class="section-title">4. Invite Participants</div>
|
||||
</div>
|
||||
<div class="section-main">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="emails" class="optional">Participant's emails (Separate emails with a comma)</label>
|
||||
<textarea id="emails" ng-list ng-model="event.emails" placeholder="Enter Emails..." class="form-control extend"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" ng-click="submit()" class="btn btn-primary">Create & Send</button>
|
||||
<span ng-show="errors" class="form-submit-message error fx-fade-normal fx-speed-100"><img src="/images/error@2x.png" width="22" height="22" /> Oops! Looks like you missed something!</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div ng-show="eventUrl" class="form-success fx-fade-up">
|
||||
<img src="/images/success_large@2x.png" width="128" height="128" />
|
||||
<h1>Good Job!</h1>
|
||||
<p>
|
||||
Your event has been created. An email has been sent to all the participants with a link to the event page. Make sure you visit the page and vote on the dates yourself.
|
||||
</p>
|
||||
<p>
|
||||
<input type="text" class="form-success-url" disabled="true" value="{{eventUrl}}" />
|
||||
</p>
|
||||
<p>
|
||||
<a href="{{eventUrl}}">Go to the event page.</a>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
10
public/vendor/jquery/.bower.json
vendored
10
public/vendor/jquery/.bower.json
vendored
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "jquery",
|
||||
"version": "2.1.2",
|
||||
"version": "2.1.3",
|
||||
"main": "dist/jquery.js",
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
|
|
@ -25,13 +25,13 @@
|
|||
"library"
|
||||
],
|
||||
"homepage": "https://github.com/jquery/jquery",
|
||||
"_release": "2.1.2",
|
||||
"_release": "2.1.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "2.1.2",
|
||||
"commit": "a04f5ff9795fd6292117563623db44cf3f875868"
|
||||
"tag": "2.1.3",
|
||||
"commit": "8f2a9d9272d6ed7f32d3a484740ab342c02541e0"
|
||||
},
|
||||
"_source": "git://github.com/jquery/jquery.git",
|
||||
"_target": ">= 1.9.1",
|
||||
"_target": ">=1.7.1",
|
||||
"_originalSource": "jquery"
|
||||
}
|
||||
2
public/vendor/jquery/bower.json
vendored
2
public/vendor/jquery/bower.json
vendored
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "jquery",
|
||||
"version": "2.1.2",
|
||||
"version": "2.1.3",
|
||||
"main": "dist/jquery.js",
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
|
|
|
|||
8
public/vendor/jquery/dist/jquery.js
vendored
8
public/vendor/jquery/dist/jquery.js
vendored
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* jQuery JavaScript Library v2.1.2
|
||||
* jQuery JavaScript Library v2.1.3
|
||||
* http://jquery.com/
|
||||
*
|
||||
* Includes Sizzle.js
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
* Released under the MIT license
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* Date: 2014-12-17T14:01Z
|
||||
* Date: 2014-12-18T15:11Z
|
||||
*/
|
||||
|
||||
(function( global, factory ) {
|
||||
|
|
@ -67,7 +67,7 @@ var
|
|||
// Use the correct document accordingly with window argument (sandbox)
|
||||
document = window.document,
|
||||
|
||||
version = "2.1.2",
|
||||
version = "2.1.3",
|
||||
|
||||
// Define a local copy of jQuery
|
||||
jQuery = function( selector, context ) {
|
||||
|
|
@ -7572,7 +7572,7 @@ var
|
|||
allTypes = "*/".concat( "*" ),
|
||||
|
||||
// Document location
|
||||
ajaxLocation = location.href,
|
||||
ajaxLocation = window.location.href,
|
||||
|
||||
// Segment location into parts
|
||||
ajaxLocParts = rurl.exec( ajaxLocation.toLowerCase() ) || [];
|
||||
|
|
|
|||
6
public/vendor/jquery/dist/jquery.min.js
vendored
6
public/vendor/jquery/dist/jquery.min.js
vendored
File diff suppressed because one or more lines are too long
2
public/vendor/jquery/dist/jquery.min.map
vendored
2
public/vendor/jquery/dist/jquery.min.map
vendored
File diff suppressed because one or more lines are too long
2
public/vendor/jquery/src/ajax.js
vendored
2
public/vendor/jquery/src/ajax.js
vendored
|
|
@ -41,7 +41,7 @@ var
|
|||
allTypes = "*/".concat( "*" ),
|
||||
|
||||
// Document location
|
||||
ajaxLocation = location.href,
|
||||
ajaxLocation = window.location.href,
|
||||
|
||||
// Segment location into parts
|
||||
ajaxLocParts = rurl.exec( ajaxLocation.toLowerCase() ) || [];
|
||||
|
|
|
|||
|
|
@ -1,7 +1,25 @@
|
|||
<html ng-app="rallly">
|
||||
<head>
|
||||
<title>Rallly - Collabrative Scheduling</title>
|
||||
<title>Rallly - Collaborative Scheduling</title>
|
||||
<base href="/">
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/images/favicon/apple-touch-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/images/favicon/apple-touch-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/images/favicon/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/images/favicon/apple-touch-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/images/favicon/apple-touch-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/images/favicon/apple-touch-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/images/favicon/apple-touch-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/images/favicon/apple-touch-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon-180x180.png">
|
||||
<link rel="shortcut icon" href="/images/favicon/favicon.ico">
|
||||
<link rel="icon" type="image/png" href="/images/favicon/favicon-192x192.png" sizes="192x192">
|
||||
<link rel="icon" type="image/png" href="/images/favicon/favicon-160x160.png" sizes="160x160">
|
||||
<link rel="icon" type="image/png" href="/images/favicon/favicon-96x96.png" sizes="96x96">
|
||||
<link rel="icon" type="image/png" href="/images/favicon/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="icon" type="image/png" href="/images/favicon/favicon-32x32.png" sizes="32x32">
|
||||
<meta name="msapplication-TileColor" content="#2b5797">
|
||||
<meta name="msapplication-TileImage" content="/images/favicon/mstile-144x144.png">
|
||||
<meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
|
||||
<link rel="stylesheet" href="/css/style.css" media="screen" charset="utf-8">
|
||||
<script type="text/javascript" src="/vendor/jquery/dist/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
|
||||
|
|
@ -10,6 +28,7 @@
|
|||
<script type="text/javascript" src="/vendor/angular-ui-router/release/angular-ui-router.min.js"></script>
|
||||
<script type="text/javascript" src="/vendor/ngFx/dist/ngFx.min.js"></script>
|
||||
<script type="text/javascript" src="/vendor/angular-modal/modal.min.js"></script>
|
||||
<script type="text/javascript" src="/vendor/angular-hotkeys/angular-hotkeys.min.js"></script>
|
||||
<script type="text/javascript" src="/build/app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -31,15 +50,15 @@
|
|||
<li>
|
||||
<a href="/about" ng-class="{active: isActive('/about')}">
|
||||
<i back-img="lightbulb" class="icon"></i>
|
||||
<span class="text">What is this?</span>
|
||||
<span class="text">About</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="create-new">
|
||||
<a href="/new" rel="nofollow">
|
||||
<a href="/new" target="_blank" rel="nofollow">
|
||||
<img src="/images/add.png" width="12" />
|
||||
<span>Create New</span>
|
||||
<span>New Event</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue