This commit is contained in:
Luke Vella 2015-01-12 12:09:09 +01:00
parent b72dfc474e
commit aff8ee6124
10 changed files with 232 additions and 108 deletions

View file

@ -49,6 +49,7 @@ exports.deleteParticipant = function(req, res, next){
}); });
} }
function handleError(res, err) { function handleError(res, err) {
return res.status(500).send(err); return res.status(500).send(err);
} }

View file

@ -2,7 +2,9 @@ module.exports = function(app) {
// Insert routes below // Insert routes below
app.use('/api/event', require('../api/event')); app.use('/api/event', require('../api/event'));
app.use('/about', function(req, res){
res.render('about.ejs');
});
// All undefined asset or api routes should return a 404 // All undefined asset or api routes should return a 404
// app.route('/:url(api|auth|components|app|bower_components|assets)/*') // app.route('/:url(api|auth|components|app|bower_components|assets)/*')
// .get(errors[404]); // .get(errors[404]);

View file

@ -0,0 +1,10 @@
.form-global-error {
display:inline-block;
margin-left: em(5px);
font-size: em(12px);
color: $red-clr;
img {
vertical-align:middle;
margin-right: em(5px);
}
}

View file

@ -9,9 +9,8 @@ h1 {
h2 { h2 {
font-weight:600; font-weight:600;
font-size:em(18px); font-size:em(14px);
color: $text-clr; color: $text-clr;
border-bottom: 1px solid #ddd;
padding-bottom:5px; padding-bottom:5px;
small { small {
margin-left: em(10px); margin-left: em(10px);
@ -33,4 +32,7 @@ h2 {
p { p {
color: $body-clr; color: $body-clr;
a {
color: $primary-clr;
}
} }

View file

@ -4,7 +4,7 @@ $primary-font: "Source Sans Pro";
/****** BASIC *******/ /****** BASIC *******/
/****** COLORS *******/ /****** COLORS *******/
$primary-clr: #5A98E5; $primary-clr: #60DF9D;
$dark-gray-clr: #969FA9; $dark-gray-clr: #969FA9;
$light-gray-clr: #f9f9f9; $light-gray-clr: #f9f9f9;
$text-clr: #3D4752; $text-clr: #3D4752;

View file

@ -4,14 +4,14 @@
@import "partials/normalize"; @import "partials/normalize";
@import "bourbon/bourbon"; @import "bourbon/bourbon";
@import "neat/neat"; @import "neat/neat";
$mobile: new-breakpoint(max-width 1000px 4); $mobile: new-breakpoint(max-width 768px 4);
body { body {
font-size: em(18px); font-size: em(18px);
@include font(); @include font();
color: $text-clr; color: $text-clr;
@include media($mobile){ @include media($mobile) {
font-size: em(14px); font-size: em(15px);
} }
} }
@import "partials/header"; @import "partials/header";
@ -20,8 +20,34 @@ body {
@import "partials/form"; @import "partials/form";
@import "partials/datepicker"; @import "partials/datepicker";
@import "partials/event"; @import "partials/event";
@import "partials/newevent";
@import "partials/eventsuccess";
.container { .container {
@include outer-container(); @include outer-container(800px);
padding: 40px; padding: em(30px) em(40px);
}
.rl-section {
@include outer-container(800px);
border-top:1px solid #ddd;
padding-top: em(20px);
margin-bottom: em(20px);
}
.rl-section-details {
@include span-columns(3);
h2 {
margin-top: em(5px);
}
}
.rl-section-main {
@include span-columns(9);
}
.rl-page-desc {
font-size: em(21px);
color: $body-clr;
margin-bottom: em(20px);
} }

View file

@ -1,51 +1,79 @@
<div ng-show="event"> <div ng-show="event">
<aside class="event-sidebar"> <div class="event-details">
<h1>{{event.title}}</h1> <h1>{{event.title}}</h1>
<div class="event-author">Created by <a href="mailto:{{event.creator.email}}">{{event.creator.name}}</a></div> <ul class="event-detail-list">
<div class="event-description">{{event.description}}</div> <li class="event-created-by">
<h2>Comments</h2> Created by <a href="{{event.creator.email}}">{{event.creator.name}}</a>
</aside> </li>
<section class="event-main"> <li ng-show="event.location" class="event-location">
<h2>When can you make it?</h2> {{event.location}}
<form ng-submit="save(participant)"> </li>
<table class="event-poll"> <li ng-show="event.participants.length">
<thead> {{event.participants.length}} participants
<tr> </li>
<th> </ul>
<div ng-show="event.description" class="event-description">{{event.description}}</div>
</div>
</th> <h2>When can you make it?</h2>
<th ng-repeat="date in event.dates"> <section class="rl-section">
<div class="daticon"> <form ng-submit="save(participant)">
<div class="day"> <table class="event-poll">
{{date | date: 'd'}} <thead>
<tr>
<th class="event-poll-participants">
{{event.participants.length}} participants
</th>
<th 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>
</div> </div>
<div class="month"> </th>
{{date | date : 'MMM'}} <th>
</div>
</div> </th>
</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr class="event-poll-entry" ng-repeat="participant in event.participants" ng-model="participant">
<tr ng-repeat="participant in event.participants"> <td class="event-poll-user">
<td> <img src="/images/user_gray@2x.png" width="11" />
{{participant.name}} - <a href="javascript:" ng-click="deleteParticipant(participant._id)">Delete</a> <input type="text" class="form-control" ng-model="participant.name" ng-show="editMode" value="participant.name"/>
</td> <span ng-hide="editMode">{{participant.name}}</span>
<td ng-repeat="date in event.dates"> </td>
<input type="checkbox" disabled ng-checked="participant.dates[$index ]" ng-model="date" /> <td class="center" ng-repeat="date in event.dates">
</td> <img src="/images/tick@2x.png" width="16" ng-hide="editMode" ng-if="participant.dates[$index]" />
</tr> <img src="/images/nope@2x.png" width="8" ng-hide="editMode" ng-if="!participant.dates[$index]" />
<tr> <input ng-model="participant.dates[$index]" ng-show="editMode" ng-false-value="false" type="checkbox" />
<td> </td>
<input type="text" class="form-control" ng-model="participant.name" placeholder="Your name..."/> <td>
</td> <a ng-hide="editMode" href="javascript:" ng-click="editMode = true; edit($index)" class="btn btn-primary">Edit</a>
<td ng-repeat="date in event.dates"> <a ng-show="editMode" href="javascript:" ng-click="editMode = false; update(participant)" class="btn btn-primary">Save</a>
<input ng-model="participant.dates[$index]" ng-false-value="false" type="checkbox" />
</td> </td>
</tr> </tr>
</tbody> <tr class="event-poll-input">
</table> <td class="event-poll-user">
<button type="submit" class="btn btn-primary">Save</button> <img src="/images/user_gray@2x.png" width="11" />
</form> <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> </section>
</div> </div>

View file

@ -1,70 +1,71 @@
<h1>New Event</h1> <div ng-hide="event._id">
<p>Write down a name for your event and choose a number of dates for your friends to decide from.</p> <h1>Schedule New Event</h1>
<form class="form" role="form" ng-submit="submit()"> <div class="rl-page-desc">
<div class="form-row"> Fill in the form below to create your event and share it with your friends and colleagues.
<div class="form-col"> </div>
<h2>Your Details</h2> <section class="rl-section">
<aside class="rl-section-details">
<h2>1. Your Details</h2>
</aside>
<div class="rl-section-main">
<div class="form-row"> <div class="form-row">
<div class="form-col"> <div class="form-col">
<div class="form-group" ng-class="{error:errors['creator.name']}"> <div class="form-group" ng-class="{error:errors['creator.name']}">
<label for="name">Name</label> <label for="name">Name</label>
<input id="name" ng-model="event.creator.name" type="text" placeholder="John Doe..." class="form-control extend"/> <input id="name" ng-model="event.creator.name" type="text" placeholder="John Doe..." class="form-control extend"/>
<div class="form-error-msg" ng-show="errors['creator.name']">{{errors['creator.name'].message}}</div>
</div> </div>
</div> </div>
<div class="form-col"> <div class="form-col">
<div class="form-group" ng-class="{error:errors['creator.email']}"> <div class="form-group" ng-class="{error:errors['creator.email']}">
<label for="email">Email</label> <label for="email">Email</label>
<input id="email" ng-model="event.creator.email" type="text" placeholder="john.doe@email.com..." class="form-control extend"/> <input id="email" ng-model="event.creator.email" type="text" placeholder="john.doe@email.com..." class="form-control extend"/>
<div class="form-error-msg" ng-show="errors['creator.email']">{{errors['creator.email'].message}}</div>
</div> </div>
</div> </div>
</div> </div>
<div class='fx-fade-down fx-easing-bounce'>
<h2>Event Details</h2>
<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 class="form-error-msg" ng-show="errors.title">{{errors.title.message}}</div>
</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>
<div class='fx-fade-down'>
<h2>Invite Participants</h2>
<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" class="btn btn-primary">Create &amp; Send</button>
</div>
</div> </div>
<div class="form-col padded fx-fade-right"> </section>
<h2>Choose Dates</h2> <section class="rl-section">
<aside class="rl-section-details">
<h2>2. Event Details</h2>
</aside>
<div class="rl-section-main">
<div class="form-row"> <div class="form-row">
<div data-datepicker ng-model="event.dates"> <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>3. Choose 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> </div>
<ul class="daticon-list"> <ul class="daticon-list">
<li ng-repeat="date in event.dates"> <li ng-repeat="date in event.dates">
<div class="daticon"> <div class="daticon">
<div class="dow">
{{date | date: 'EEE'}}
</div>
<div class="day"> <div class="day">
{{date | date: 'd'}} {{date | date: 'd'}}
</div> </div>
@ -77,10 +78,33 @@
</ul> </ul>
</div> </div>
</div> </div>
</div> </section>
<section class="rl-section">
<aside class="rl-section-details">
<h2>4. Invite Participants</h2>
</form> </aside>
<div class="rl-section-main">
<div ng-show="event._id" ng-include="templates.modal"></div> <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 &amp; Send</button>
<span ng-show="errors" class="form-global-error fx-zoom-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="event._id" class="form-success fx-fade-up">
<img src="/images/success@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>

29
views/about.ejs Normal file
View file

@ -0,0 +1,29 @@
<html ng-app="rallly">
<head>
<title>Rallly - Collabrative Scheduling</title>
<base href="/">
<link rel="stylesheet" href="/css/style.css" media="screen" charset="utf-8">
</head>
<body>
<header class="header">
<div class="container">
<section class="primary-section">
<a href="/">
<img src="/images/logo@2x.png" width="100" alt="Rallly - Collabrative Scheduling" />
</a>
</section>
<section class="secondary-section">
<nav class="nav-links">
<a class="nav-link" href="/about">What is this?</a>
<a class="btn btn-flat" href="/">
Schedule New Event
</a>
</nav>
</div>
</div>
</header>
<div class="container">
<h1>About</h1>
</div>
</body>
</html>

View file

@ -13,6 +13,7 @@
</head> </head>
<body> <body>
<header class="header"> <header class="header">
<div class="container">
<section class="primary-section"> <section class="primary-section">
<a href="/"> <a href="/">
<img src="/images/logo@2x.png" width="100" alt="Rallly - Collabrative Scheduling" /> <img src="/images/logo@2x.png" width="100" alt="Rallly - Collabrative Scheduling" />
@ -20,12 +21,13 @@
</section> </section>
<section class="secondary-section"> <section class="secondary-section">
<nav class="nav-links"> <nav class="nav-links">
<a class="nav-link" href="/about">About</a> <a class="nav-link" href="/about">What is this?</a>
<a class="btn btn-flat" href="/"> <a class="btn btn-flat" href="/">
Schedule New Event Schedule New Event
</a> </a>
</nav> </nav>
</div> </div>
</div>
</header> </header>
<div class="container" ui-view> <div class="container" ui-view>