mirror of
https://github.com/lukevella/rallly.git
synced 2025-07-25 12:17:26 +02:00
Update
This commit is contained in:
Luke Vella
parent
b72dfc474e
commit
aff8ee6124
10 changed files with 232 additions and 108 deletions
|
|
@ -49,6 +49,7 @@ exports.deleteParticipant = function(req, res, next){
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
function handleError(res, err) {
|
||||
return res.status(500).send(err);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@ module.exports = function(app) {
|
|||
|
||||
// Insert routes below
|
||||
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
|
||||
// app.route('/:url(api|auth|components|app|bower_components|assets)/*')
|
||||
// .get(errors[404]);
|
||||
|
|
|
|||
10
public/scss/partials/_newevent.scss
Normal file
10
public/scss/partials/_newevent.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -9,9 +9,8 @@ h1 {
|
|||
|
||||
h2 {
|
||||
font-weight:600;
|
||||
font-size:em(18px);
|
||||
font-size:em(14px);
|
||||
color: $text-clr;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-bottom:5px;
|
||||
small {
|
||||
margin-left: em(10px);
|
||||
|
|
@ -33,4 +32,7 @@ h2 {
|
|||
|
||||
p {
|
||||
color: $body-clr;
|
||||
a {
|
||||
color: $primary-clr;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ $primary-font: "Source Sans Pro";
|
|||
/****** BASIC *******/
|
||||
|
||||
/****** COLORS *******/
|
||||
$primary-clr: #5A98E5;
|
||||
$primary-clr: #60DF9D;
|
||||
$dark-gray-clr: #969FA9;
|
||||
$light-gray-clr: #f9f9f9;
|
||||
$text-clr: #3D4752;
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
@import "partials/normalize";
|
||||
@import "bourbon/bourbon";
|
||||
@import "neat/neat";
|
||||
$mobile: new-breakpoint(max-width 1000px 4);
|
||||
$mobile: new-breakpoint(max-width 768px 4);
|
||||
|
||||
body {
|
||||
font-size: em(18px);
|
||||
@include font();
|
||||
color: $text-clr;
|
||||
@include media($mobile){
|
||||
font-size: em(14px);
|
||||
@include media($mobile) {
|
||||
font-size: em(15px);
|
||||
}
|
||||
}
|
||||
@import "partials/header";
|
||||
|
|
@ -20,8 +20,34 @@ body {
|
|||
@import "partials/form";
|
||||
@import "partials/datepicker";
|
||||
@import "partials/event";
|
||||
@import "partials/newevent";
|
||||
@import "partials/eventsuccess";
|
||||
|
||||
.container {
|
||||
@include outer-container();
|
||||
padding: 40px;
|
||||
@include outer-container(800px);
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,79 @@
|
|||
<div ng-show="event">
|
||||
<aside class="event-sidebar">
|
||||
<div class="event-details">
|
||||
<h1>{{event.title}}</h1>
|
||||
<div class="event-author">Created by <a href="mailto:{{event.creator.email}}">{{event.creator.name}}</a></div>
|
||||
<div class="event-description">{{event.description}}</div>
|
||||
<h2>Comments</h2>
|
||||
</aside>
|
||||
<section class="event-main">
|
||||
<h2>When can you make it?</h2>
|
||||
<form ng-submit="save(participant)">
|
||||
<table class="event-poll">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<ul class="event-detail-list">
|
||||
<li class="event-created-by">
|
||||
Created by <a href="{{event.creator.email}}">{{event.creator.name}}</a>
|
||||
</li>
|
||||
<li ng-show="event.location" class="event-location">
|
||||
{{event.location}}
|
||||
</li>
|
||||
<li ng-show="event.participants.length">
|
||||
{{event.participants.length}} participants
|
||||
</li>
|
||||
</ul>
|
||||
<div ng-show="event.description" class="event-description">{{event.description}}</div>
|
||||
</div>
|
||||
|
||||
</th>
|
||||
<th ng-repeat="date in event.dates">
|
||||
<div class="daticon">
|
||||
<div class="day">
|
||||
{{date | date: 'd'}}
|
||||
<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 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 class="month">
|
||||
{{date | date : 'MMM'}}
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="participant in event.participants">
|
||||
<td>
|
||||
{{participant.name}} - <a href="javascript:" ng-click="deleteParticipant(participant._id)">Delete</a>
|
||||
</td>
|
||||
<td ng-repeat="date in event.dates">
|
||||
<input type="checkbox" disabled ng-checked="participant.dates[$index ]" ng-model="date" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="text" class="form-control" ng-model="participant.name" placeholder="Your name..."/>
|
||||
</td>
|
||||
<td ng-repeat="date in event.dates">
|
||||
<input ng-model="participant.dates[$index]" ng-false-value="false" type="checkbox" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
</form>
|
||||
</th>
|
||||
<th>
|
||||
|
||||
</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">{{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($index)" class="btn btn-primary">Edit</a>
|
||||
<a ng-show="editMode" href="javascript:" ng-click="editMode = false; update(participant)" class="btn btn-primary">Save</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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,70 +1,71 @@
|
|||
<h1>New Event</h1>
|
||||
<p>Write down a name for your event and choose a number of dates for your friends to decide from.</p>
|
||||
<form class="form" role="form" ng-submit="submit()">
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<h2>Your Details</h2>
|
||||
<div ng-hide="event._id">
|
||||
<h1>Schedule New Event</h1>
|
||||
<div class="rl-page-desc">
|
||||
Fill in the form below to create your event and share it with your friends and colleagues.
|
||||
</div>
|
||||
<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-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 class="form-error-msg" ng-show="errors['creator.name']">{{errors['creator.name'].message}}</div>
|
||||
</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 class="form-error-msg" ng-show="errors['creator.email']">{{errors['creator.email'].message}}</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 & Send</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-col padded fx-fade-right">
|
||||
<h2>Choose Dates</h2>
|
||||
</section>
|
||||
<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 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>
|
||||
<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>
|
||||
|
|
@ -77,10 +78,33 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
<div ng-show="event._id" ng-include="templates.modal"></div>
|
||||
</section>
|
||||
<section class="rl-section">
|
||||
<aside class="rl-section-details">
|
||||
<h2>4. Invite Participants</h2>
|
||||
</aside>
|
||||
<div class="rl-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-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
29
views/about.ejs
Normal 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>
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
</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" />
|
||||
|
|
@ -20,12 +21,13 @@
|
|||
</section>
|
||||
<section class="secondary-section">
|
||||
<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="/">
|
||||
Schedule New Event
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" ui-view>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue