mirror of
https://github.com/lukevella/rallly.git
synced 2025-06-05 04:02:21 +02:00
Updated new event page
This commit is contained in:
Luke Vella
parent
e14bc73274
commit
526e9c36ee
11 changed files with 148 additions and 50 deletions
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
|
|
@ -11,12 +11,12 @@ $templateCache.put("templates/directives/poll.html","<div class=\"poll-header\">
|
|||
$templateCache.put("templates/directives/timePicker.html","<div class=\"time-picker\">\n <div class=\"time-picker-col\">\n <div class=\"daticon\">\n <div class=\"dow\">\n {{date | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{date | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{date | date : \'MMM\'}}\n </div>\n <!-- <span class=\"delete\" ng-click=\"datepicker.unsetDate(date)\"></span> -->\n </div>\n </div>\n <div class=\"time-picker-col\" ng-repeat=\"time in date.times track by $index\">\n <input type=\"text\" class=\"time-picker-input\" time-picker ng-model=\"time\" ng-model-options=\"{ updateOn: \'blur\' }\" />\n </div>\n</div>\n");
|
||||
$templateCache.put("templates/form/dateForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Choose Dates</div>\n <ul class=\"daticon-list\">\n <li ng-repeat=\"d in event.dates\">\n <div class=\"daticon\">\n <div class=\"dow\">\n {{d | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{d | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{d | date : \'MMM\'}}\n </div>\n <span class=\"delete\" ng-click=\"datepicker.removeDate(d)\"></span>\n </div>\n </li>\n </ul>\n</div>\n<div class=\"section-main\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"email\">Calendar</label>\n <span class=\"form-error\" ng-show=\"form.$submitted && form.datepicker.$error.required\">\n <img src=\"/images/error.png\" width=\"14\" /> You need to select a few dates\n </span>\n <div datepicker required name=\"datepicker\" control=\"datepicker\" ng-model=\"event.dates\">\n\n </div>\n </div>\n </div>\n</div>\n");
|
||||
$templateCache.put("templates/form/eventForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Event Details</div>\n</div>\n<div class=\"section-main\">\n <div class=\"form-row\">\n <div class=\"form-col\">\n <div class=\"form-group\">\n <label for=\"title\">Title</label>\n <span class=\"form-error\" ng-show=\"(form.title.$touched || form.$submitted) && errors.title\">\n <img src=\"/images/error.png\" width=\"14\" /> {{errors.title}}\n </span>\n <input id=\"title\" name=\"title\" ng-maxlength=\"30\" required ng-model=\"event.title\" type=\"text\" placeholder=\"Monthly Meetup...\" class=\"form-control extend\"/>\n </div>\n </div>\n <div class=\"form-col\">\n <div class=\"form-group optional\">\n <label for=\"location\">Location</label>\n <span class=\"form-error\" ng-show=\"(form.location.$touched || form.$submitted) && errors.location\">\n <img src=\"/images/error.png\" width=\"14\" /> {{errors.location}}\n </span>\n <input id=\"location\" name=\"location\" ng-model=\"event.location\" ng-maxlength=\"50\" type=\"text\" placeholder=\"Rick\'s Cafe...\" class=\"form-control extend\"/>\n </div>\n </div>\n </div>\n <div class=\"form-row\">\n <div class=\"form-group optional\">\n <label for=\"description\" >Description</label>\n <textarea id=\"description\" name=\"description\" ng-model=\"event.description\" placeholder=\"Enter Description...\" class=\"form-control extend\"></textarea>\n </div>\n </div>\n</div>\n");
|
||||
$templateCache.put("templates/form/participantsForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Invite Participants</div>\n</div>\n<div class=\"section-main\">\n <div class=\"form-row\">\n <div class=\"form-group optional\">\n <label>Participant\'s Emails</label>\n <tags-input max-length=\"50\" allowed-tags-pattern=\"{{emailRegex}}\" display-property=\"email\" ng-model=\"event.emails\" placeholder=\"Add an Email\" type=\"email\" autocomplete=\"off\"></tags-input>\n <input type=\"hidden\" name=\"shouldCreate\" value=\"true\" />\n\n </div>\n </div>\n</div>\n</section>\n");
|
||||
$templateCache.put("templates/form/participantsForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Invite Participants</div>\n</div>\n<div class=\"section-main\">\n <div class=\"form-row\">\n <div class=\"form-group optional\">\n <label>Participant\'s Emails</label>\n <tags-input max-length=\"50\" allowed-tags-pattern=\"{{emailRegex}}\" display-property=\"email\" ng-model=\"event.emails\" placeholder=\"Add an Email\" type=\"email\" autocomplete=\"off\"></tags-input>\n <input type=\"hidden\" name=\"shouldCreate\" value=\"true\" />\n\n </div>\n </div>\n</div>\n");
|
||||
$templateCache.put("templates/form/settingsForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Settings</div>\n</div>\n<div class=\"section-main\">\n <div class=\"switch-row\">\n <div class=\"switch-details\">\n <div class=\"title\">\n Poll Status\n </div>\n <div class=\"description\">\n Let people vote on the poll.\n </div>\n </div>\n <div class=\"switch\">\n <div class=\"switch-value\">\n {{event.isClosed ? \'Closed\' : \'Open\' }}\n </div>\n <div switch-toggle ng-model=\"event.isClosed\" invert>\n </div>\n </div>\n </div>\n <div class=\"switch-row\">\n <div class=\"switch-details\">\n <div class=\"title\">\n Notifications\n </div>\n <div class=\"description\">\n Send email notifications to the creator of this event.\n </div>\n </div>\n <div class=\"switch\">\n <div class=\"switch-value\">\n {{event.creator.allowNotifications ? \'Enabled\' : \'Disabled\' }}\n </div>\n <div switch-toggle ng-model=\"event.creator.allowNotifications\">\n </div>\n </div>\n </div>\n <div class=\"switch-row\">\n <div class=\"switch-details\">\n <div class=\"title\">\n Delete Event\n </div>\n <div class=\"description\">\n Once you delete an event it will no longer be accessible.\n </div>\n </div>\n <div class=\"switch\">\n <button type=\"button\" ng-click=\"deleteEvent()\" class=\"btn\" ng-class=\"{danger : !deleteRequestSent, disabled : deleteRequestSent}\">{{deleteRequestSent ? \'Request Sent\' : \'Delete Event\' }}</button>\n </div>\n </div>\n</div>\n</section>\n");
|
||||
$templateCache.put("templates/form/timeForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Choose Times</div>\n</div>\n<div class=\"section-main\">\n <table class=\"time-form\">\n <thead>\n <tr>\n <th>\n\n </th>\n <th>\n Time 1\n </th>\n <th>\n Time 2\n </th>\n <th>\n Time 3\n </th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"d in event.dates\">\n <td>\n <div class=\"daticon\">\n <div class=\"dow\">\n {{d.date | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{d.date | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{d.date | date : \'MMM\'}}\n </div>\n <span class=\"delete\" ng-click=\"unsetDate(d.date)\"></span>\n </div>\n </td>\n <td ng-repeat=\"time in [1,2,3] track by $index\">\n <input type=\"text\" time-picker ng-model-options=\"{ updateOn: \'blur\' }\" ng-model=\"d.times[$index]\" class=\"time-picker-input\" />\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n");
|
||||
$templateCache.put("templates/form/userForm.html","<div class=\"section-details\">\n <div class=\"section-title\">Your Details</div>\n</div>\n<div class=\"section-main\">\n <div class=\"form-row\">\n <div class=\"form-col\">\n <div class=\"form-group\">\n <label for=\"name\">Name</label>\n <span class=\"form-error\" ng-show=\"(form.name.$touched || form.$submitted) && errors.name\">\n <img src=\"/images/error.png\" width=\"14\" /> {{errors.name}}\n </span>\n <input id=\"name\" name=\"name\" ng-maxlength=\"30\" required ng-model=\"event.creator.name\" type=\"text\" placeholder=\"John Doe...\" class=\"form-control extend\"/>\n </div>\n </div>\n <div class=\"form-col\">\n <div class=\"form-group\">\n <label for=\"email\">Email</label>\n <span class=\"form-error\" ng-show=\"(form.email.$touched || form.$submitted) && errors.email\">\n <img src=\"/images/error.png\" width=\"14\" /> {{errors.email}}\n </span>\n <input type=\"email\" id=\"email\" name=\"email\" ng-pattern=\"emailRegex\" required ng-model=\"event.creator.email\" placeholder=\"john.doe@email.com...\" class=\"form-control extend\"/>\n </div>\n </div>\n </div>\n</div>\n");
|
||||
$templateCache.put("templates/newEvent/datetime.html","<section class=\"box-section\" date-form form=\"form\" event=\"event\">\n\n</section>\n\n<div class=\"box-controls box-bottom-sticky\">\n <button type=\"button\" class=\"btn\" ng-click=\"prevPage()\">Previous</button>\n <button type=\"submit\" class=\"btn\">Next</button>\n</div>\n");
|
||||
$templateCache.put("templates/newEvent/general.html","<section class=\"box-section\" user-form form=\"form\" event=\"event\">\n\n</section>\n\n<section class=\"box-section\" event-form form=\"form\" event=\"event\">\n\n</section>\n\n<div class=\"box-controls box-bottom-sticky\">\n <button type=\"submit\" class=\"btn\">Next Step</button>\n</div>\n");
|
||||
$templateCache.put("templates/newEvent/invite.html","<section class=\"box-section\" participants-form form=\"form\" event=\"event\">\n\n</section>\n\n<div class=\"box-controls box-bottom-sticky\">\n <button type=\"button\" class=\"btn\" ng-click=\"prevPage()\">Previous</button>\n <button type=\"submit\" class=\"btn\">Create</button>\n</div>\n");
|
||||
$templateCache.put("templates/newEvent/layout.html","<div class=\"box\">\n\n <div class=\"box-title\">Schedule a New Event</div>\n <div class=\"box-description\">\n Fill in the form below to create your event and share it with your friends and colleagues.\n </div>\n <ol class=\"box-steps\">\n <li class=\"step\" ng-class=\"{ active : page == 1, complete : page > 1 }\">\n General Details\n </li>\n <li class=\"step\" ng-class=\"{ active : page == 2, complete : page > 2 }\">\n Dates & Times\n </li>\n <li class=\"step\" ng-class=\"{ active : page == 3, complete : page > 3 }\">\n Invite Friends\n </li>\n </ol>\n <form novalidate autocomplete=\"off\" name=\"form\" ng-submit=\"submit()\">\n <div ui-view>\n\n </div>\n </form>\n</div>\n");
|
||||
$templateCache.put("templates/newEvent/invite.html","<section class=\"box-section\">\n <div class=\"section-details\">\n <div class=\"section-title\">Summary</div>\n </div>\n <div class=\"section-main\">\n <div class=\"summary\">\n <div class=\"summary-pair\">\n <div class=\"key\">\n Your Name\n </div>\n <div class=\"value\">\n {{event.creator.name}}\n </div>\n </div>\n <div class=\"summary-pair\">\n <div class=\"key\">\n Email\n </div>\n <div class=\"value\">\n {{event.creator.email}}\n </div>\n </div>\n <div class=\"summary-pair\">\n <div class=\"key\">\n Title\n </div>\n <div class=\"value\">\n {{event.title}}\n </div>\n </div>\n <div ng-if=\"event.location\" class=\"summary-pair\">\n <div class=\"key\">\n Location\n </div>\n <div class=\"value\">\n {{event.location}}\n </div>\n </div>\n <div ng-if=\"event.description\" class=\"summary-pair extend\">\n <div class=\"key\">\n Description\n </div>\n <div class=\"value wrap\">{{event.description}}</div>\n </div>\n <div class=\"summary-pair extend\">\n <div class=\"key\">\n Dates\n </div>\n <div class=\"value\">\n <ul class=\"daticon-list\">\n <li ng-repeat=\"d in event.dates\">\n <div class=\"daticon\">\n <div class=\"dow\">\n {{d | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{d | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{d | date : \'MMM\'}}\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n</section>\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=\"button\" class=\"btn\" ng-click=\"prevPage()\">Previous</button>\n <button type=\"submit\" class=\"btn\">Create</button>\n</div>\n");
|
||||
$templateCache.put("templates/newEvent/layout.html","<div class=\"box\">\n\n <div class=\"box-title\">Schedule a New Event</div>\n <div class=\"box-description\">\n Fill in the form below to create your event and share it with your friends and colleagues.\n </div>\n <ol class=\"newevent-steps\">\n <li class=\"step\" ng-class=\"{ active : page == 1, complete : page > 1 }\">\n General Details\n </li>\n <li class=\"step\" ng-class=\"{ active : page == 2, complete : page > 2 }\">\n Dates & Times\n </li>\n <li class=\"step\" ng-class=\"{ active : page == 3, complete : page > 3 }\">\n Create & Send\n </li>\n </ol>\n <form novalidate autocomplete=\"off\" name=\"form\" ng-submit=\"submit()\">\n <div ui-view>\n\n </div>\n </form>\n</div>\n");
|
||||
$templateCache.put("templates/newEvent/success.html","<div class=\"box-message\">\n <div class=\"main-image\">\n <img src=\"/images/success_large.png\" width=\"100\" />\n </div>\n <div class=\"title\">Event Created</div>\n <div class=\"content\">\n Your event has been created successfully! You should receive an email shortly with instructions to verify your email address.\n </div>\n <div class=\"mini-divider\">\n </div>\n <div class=\"form-group\">\n <input type=\"text\" class=\"form-control\" disabled=\"true\" value=\"{{eventUrl}}\" />\n <a href=\"{{eventUrl}}\" class=\"btn form-btn\">GO</a>\n </div>\n</div>\n");}]);
|
||||
67
public/scss/partials/pages/_newevent.scss
Normal file
67
public/scss/partials/pages/_newevent.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
.newevent-steps {
|
||||
@include display(flex);
|
||||
width:100%;
|
||||
list-style-position:inside;
|
||||
padding:0;
|
||||
margin:40px 0 10px 0;
|
||||
.step {
|
||||
@include flex(1);
|
||||
color: $text-2-clr;
|
||||
font-size: em(14px);
|
||||
margin: 0 0 0 0;
|
||||
padding: 0 0 10px 10px;
|
||||
border-bottom:2px solid $border-clr;
|
||||
position:relative;
|
||||
@include transition(all 0.2s ease-in-out);
|
||||
&:first-child {
|
||||
padding-left : 0;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
position:absolute;
|
||||
bottom:-2px;
|
||||
left:0;
|
||||
height: 2px;
|
||||
width:0;
|
||||
background: $green-clr;
|
||||
@include transition(all 0.2s ease-in-out);
|
||||
}
|
||||
&.active {
|
||||
color: $text-clr;
|
||||
font-weight:bold;
|
||||
}
|
||||
&.complete:after {
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summary {
|
||||
margin-bottom:20px;
|
||||
@include outer-container;
|
||||
.summary-pair {
|
||||
@include span-columns(6);
|
||||
@include omega(2n);
|
||||
margin-bottom:10px;
|
||||
&.extend {
|
||||
width:100%;
|
||||
margin:0 0 20px 0;
|
||||
}
|
||||
&:nth-child(even){
|
||||
margin-right:0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
.key {
|
||||
font-size:10px;
|
||||
color: $text-3-clr;
|
||||
|
||||
}
|
||||
.value {
|
||||
&.wrap {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -124,41 +124,3 @@ $box-h-pad: 25px;
|
|||
margin-top: $box-v-pad;
|
||||
padding: 15px $box-h-pad;
|
||||
}
|
||||
|
||||
.box-steps {
|
||||
@include display(flex);
|
||||
width:100%;
|
||||
list-style-position:inside;
|
||||
padding:0;
|
||||
margin:40px 0 10px 0;
|
||||
.step {
|
||||
@include flex(1);
|
||||
color: $text-2-clr;
|
||||
font-size: em(14px);
|
||||
margin: 0 0 0 0;
|
||||
padding: 0 0 10px 10px;
|
||||
border-bottom:2px solid $border-clr;
|
||||
position:relative;
|
||||
@include transition(all 0.2s ease-in-out);
|
||||
&:first-child {
|
||||
padding-left : 0;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
position:absolute;
|
||||
bottom:-2px;
|
||||
left:0;
|
||||
height: 2px;
|
||||
width:0;
|
||||
background: $green-clr;
|
||||
@include transition(all 0.2s ease-in-out);
|
||||
}
|
||||
&.active {
|
||||
color: $text-clr;
|
||||
font-weight:bold;
|
||||
}
|
||||
&.complete:after {
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@
|
|||
|
||||
.daticon-list {
|
||||
margin:0;
|
||||
margin-left:-10px;
|
||||
margin-left:-5px;
|
||||
list-style:none;
|
||||
padding:5px;
|
||||
text-align:left;
|
||||
|
|
|
|||
|
|
@ -32,3 +32,4 @@ a {
|
|||
|
||||
@import "partials/pages/home";
|
||||
@import "partials/pages/event";
|
||||
@import "partials/pages/newevent";
|
||||
|
|
|
|||
|
|
@ -11,4 +11,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,72 @@
|
|||
<section class="box-section">
|
||||
<div class="section-details">
|
||||
<div class="section-title">Summary</div>
|
||||
</div>
|
||||
<div class="section-main">
|
||||
<div class="summary">
|
||||
<div class="summary-pair">
|
||||
<div class="key">
|
||||
Your Name
|
||||
</div>
|
||||
<div class="value">
|
||||
{{event.creator.name}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-pair">
|
||||
<div class="key">
|
||||
Email
|
||||
</div>
|
||||
<div class="value">
|
||||
{{event.creator.email}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-pair">
|
||||
<div class="key">
|
||||
Title
|
||||
</div>
|
||||
<div class="value">
|
||||
{{event.title}}
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="event.location" class="summary-pair">
|
||||
<div class="key">
|
||||
Location
|
||||
</div>
|
||||
<div class="value">
|
||||
{{event.location}}
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="event.description" class="summary-pair extend">
|
||||
<div class="key">
|
||||
Description
|
||||
</div>
|
||||
<div class="value wrap">{{event.description}}</div>
|
||||
</div>
|
||||
<div class="summary-pair extend">
|
||||
<div class="key">
|
||||
Dates
|
||||
</div>
|
||||
<div class="value">
|
||||
<ul class="daticon-list">
|
||||
<li ng-repeat="d in event.dates">
|
||||
<div class="daticon">
|
||||
<div class="dow">
|
||||
{{d | date: 'EEE'}}
|
||||
</div>
|
||||
<div class="day">
|
||||
{{d | date: 'd'}}
|
||||
</div>
|
||||
<div class="month">
|
||||
{{d | date : 'MMM'}}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="box-section" participants-form form="form" event="event">
|
||||
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="box-description">
|
||||
Fill in the form below to create your event and share it with your friends and colleagues.
|
||||
</div>
|
||||
<ol class="box-steps">
|
||||
<ol class="newevent-steps">
|
||||
<li class="step" ng-class="{ active : page == 1, complete : page > 1 }">
|
||||
General Details
|
||||
</li>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
Dates & Times
|
||||
</li>
|
||||
<li class="step" ng-class="{ active : page == 3, complete : page > 3 }">
|
||||
Invite Friends
|
||||
Create & Send
|
||||
</li>
|
||||
</ol>
|
||||
<form novalidate autocomplete="off" name="form" ng-submit="submit()">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue