mirror of
https://github.com/lukevella/rallly.git
synced 2025-04-29 10:16:32 +02:00
Mobile Support
This commit is contained in:
Luke Vella
parent
bcc35ffe73
commit
9c24a1a6d1
26 changed files with 440 additions and 114 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
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
angular.module('rallly')
|
||||
.controller('NavigationCtrl', function($scope, $location){
|
||||
.controller('NavigationCtrl', function($scope, $rootScope, $location, $document){
|
||||
$scope.isActive = function(path) {
|
||||
if ($location.path() == path) {
|
||||
return true;
|
||||
|
|
@ -7,4 +7,31 @@ angular.module('rallly')
|
|||
return false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
var clickHandler = function(event){
|
||||
var isClickedElementChildOfPopup = angular.element('.main-navigation').find(event.target).length > 0;
|
||||
console.log(isClickedElementChildOfPopup);
|
||||
if (isClickedElementChildOfPopup) return;
|
||||
$scope.toggleMenu()
|
||||
}
|
||||
|
||||
$rootScope.$on('$stateChangeSuccess', function(){
|
||||
angular.element('body').removeClass('open-menu');
|
||||
$document.unbind('click', clickHandler);
|
||||
});
|
||||
|
||||
$scope.toggleMenu = function(){
|
||||
var isOpen = angular.element('body').hasClass('open-menu');
|
||||
if (isOpen) {
|
||||
angular.element('body').removeClass('open-menu');
|
||||
$document.unbind('click', clickHandler);
|
||||
} else {
|
||||
angular.element('body').addClass('open-menu');
|
||||
$document.bind('click', clickHandler);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
angular.module("rallly").run(["$templateCache", function($templateCache) {$templateCache.put("templates/about.html","<div class=\"box\">\n <div class=\"box-title\">Frequently Asked Questions</div>\n <div class=\"box-description\">\n Want to find out more about Rallly? Check out the FAQs below.\n </div> <h2>What is Rallly?</h2>\n <p>\n Rallly is a collaborative scheduling service that makes deciding on a date fast and easy. In other words, Rallly helps you and your friends decide on a date to host an event.\n </p>\n <h2>Why is it called Rallly?</h2>\n <p>\n The name is derived from the proper spelling of the word, “rally”. The Webster dictionary defines rally as, “to muster for a common purpose” which accurately describes the goal of this service. The inproper spelling can be attributed to the difficulty of finding short and meaningful domain names.\n </p>\n <h2>Who made this?</h2>\n <p>\n Rallly was created by <a href=\"http://lukevella.com\">Luke Vella</a>.\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 type=\"button\" ng-click=\"modal.confirm()\" ng-show=\"modal.confirm\" class=\"btn\" ng-class=\"{danger : modal.isDestructive}\">{{modal.confirmText}}</button>\n <button type=\"button\" ng-click=\"modal.cancel()\" class=\"btn\">{{modal.cancelText}}</button>\n </div>\n</div>\n");
|
||||
$templateCache.put("templates/confirmmodal.html","<div class=\"rl-modal-overlay\">\n\n<div class=\"rl-modal-position\">\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 type=\"button\" ng-click=\"modal.confirm()\" ng-show=\"modal.confirm\" class=\"btn\" ng-class=\"{danger : modal.isDestructive}\">{{modal.confirmText}}</button>\n <button type=\"button\" ng-click=\"modal.cancel()\" class=\"btn\">{{modal.cancelText}}</button>\n </div>\n </div>\n\n</div>\n\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\n <section class=\"box-section\" settings-form form=\"form\" event=\"event\">\n\n </section>\n\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 type=\"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 && !event.isDeleted\">\n <div class=\"box \">\n <div class=\"event-header\">\n <div class=\"details\">\n <div class=\"title\">\n {{event.title}}\n <span class=\"title-label danger\" ng-show=\"event.isClosed\">Poll Closed</span>\n <span class=\"title-label success\" ng-hide=\"event.isClosed\">Poll Open</span>\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=\"event-description box-side-sticky\" ng-if=\"event.description\">{{event.description}}</div>\n <div class=\"event-location\" ng-if=\"event.location\">\n Location:\n <a href=\"http://maps.google.com?q={{event.location}}\" target=\"_blank\">{{event.location}}</a>\n </div>\n\n <div poll event=\"event\" class=\"poll\">\n </div>\n </div>\n\n <div class=\"box\" ng-hide=\"event.comments.length == 0 && event.isClosed\">\n <div class=\"box-title\">\n Discussion\n </div>\n <div class=\"box-description\">\n You can discuss the event with your friends by leaving a comment below.\n </div>\n <div discussion event=\"event\">\n\n </div>\n </div>\n</div>\n");
|
||||
$templateCache.put("templates/event.html","<div ng-show=\"event._id && !event.isDeleted\">\n <div class=\"box \">\n <div class=\"event-header\">\n <div class=\"details\">\n <div class=\"title\">\n {{event.title}}\n <span class=\"title-label danger\" ng-show=\"event.isClosed\">Poll Closed</span>\n <span class=\"title-label success\" ng-hide=\"event.isClosed\">Poll Open</span>\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=\"event-description\" ng-if=\"event.description\">{{event.description}}</div>\n <div class=\"event-location\" ng-if=\"event.location\">\n Location:\n <a href=\"http://maps.google.com?q={{event.location}}\" target=\"_blank\">{{event.location}}</a>\n </div>\n\n <div class=\"poll-wrapper\">\n <div poll event=\"event\" class=\"poll\">\n </div>\n </div>\n </div>\n\n <div class=\"box\" ng-hide=\"event.comments.length == 0 && event.isClosed\">\n <div class=\"box-title\">\n Discussion\n </div>\n <div class=\"box-description\">\n You can discuss the event with your friends by leaving a comment below.\n </div>\n <div discussion event=\"event\">\n\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/notfound.html","<h1>Error 404</h1>\n<h2>Not Found</h2>\n");
|
||||
$templateCache.put("templates/notification.html","<div class=\"notification {{notification.type}}\" ng-click=\"notification.close()\">\n <div class=\"title\">\n {{notification.title}}\n </div>\n <div class=\"message\">\n {{notification.message}}\n </div>\n</div>\n");
|
||||
$templateCache.put("templates/directives/datePicker.html","<div class=\"date-picker\">\n <div class=\"wrapper\">\n <div class=\"date-picker-head\">\n <a href=\"#\" class=\"arrow\" ng-click=\"prevMonth()\">❮</a>\n <span class=\"title\">\n <span class=\"title-text\">{{title}}</span>\n </span>\n <a href=\"#\" class=\"arrow\" ng-click=\"nextMonth()\">❯</a>\n </div>\n <div class=\"dow\">\n <div class=\"day\">\n Sun\n </div>\n <div class=\"day\">\n Mon\n </div>\n <div class=\"day\">\n Tue\n </div>\n <div class=\"day\">\n Wed\n </div>\n <div class=\"day\">\n Thu\n </div>\n <div class=\"day\">\n Fri\n </div>\n <div class=\"day\">\n Sat\n </div>\n </div>\n <div class=\"values\">\n <div ng-repeat=\"day in days\" class=\"value\" ng-class=\"{ outside : day.isOutsideMonth, today : day.isToday, active : isActive(day.date) }\" ng-click=\"selectDay(day)\">\n {{day.date | date : \'d\' }}\n </div>\n </div>\n </div>\n</div>\n");
|
||||
$templateCache.put("templates/directives/datePicker.html","<div class=\"date-picker\">\n <div class=\"wrapper\">\n <div class=\"date-picker-head\">\n <a href=\"#\" class=\"arrow\" ng-click=\"prevMonth()\">❮</a>\n <span class=\"title\">\n <span class=\"title-text\">{{title}}</span>\n </span>\n <a href=\"#\" class=\"arrow\" ng-click=\"nextMonth()\">❯</a>\n </div>\n <div class=\"dow\">\n <div class=\"day\">\n Su\n </div>\n <div class=\"day\">\n Mo\n </div>\n <div class=\"day\">\n Tu\n </div>\n <div class=\"day\">\n We\n </div>\n <div class=\"day\">\n Th\n </div>\n <div class=\"day\">\n Fr\n </div>\n <div class=\"day\">\n Sa\n </div>\n </div>\n <div class=\"values\">\n <div ng-repeat=\"day in days\" class=\"value\" ng-class=\"{ outside : day.isOutsideMonth, today : day.isToday, active : isActive(day.date) }\" ng-click=\"selectDay(day)\">\n {{day.date | date : \'d\' }}\n </div>\n </div>\n </div>\n</div>\n");
|
||||
$templateCache.put("templates/directives/discussion.html","<ul class=\"comment-thread\" ng-show=\"event.comments.length\">\n <li ng-repeat=\"comment in event.comments\" class=\"comment\">\n <div class=\"avatar-section\">\n <img src=\"/images/avatar.png\" />\n </div>\n <div class=\"comment-section\">\n <a href=\"#\" class=\"comment-delete\" ng-click=\"deleteComment(comment)\">×</a>\n <div class=\"meta\">\n <span class=\"name\">{{comment.author.name}}</span>\n <span class=\"time\">{{comment.created | elapsed}}</span>\n </div>\n <div class=\"content\">{{comment.content}}</div>\n </div>\n </li>\n</ul>\n<form novalidate ng-submit=\"postComment()\" name=\"commentForm\" class=\"comment-form\">\n <div class=\"avatar-section\">\n <img src=\"/images/avatar.png\" />\n </div>\n <div class=\"input-section form-group\">\n <div class=\"content-section\">\n <textarea class=\"form-control\" required ng-model=\"comment.content\" placeholder=\"Write a comment...\"></textarea>\n </div>\n <div class=\"name-section\">\n <div class=\"name-container\">\n <input type=\"text\" class=\"form-control\" required placeholder=\"Your Name\" ng-model=\"comment.author.name\" />\n <button type=\"submit\" class=\"btn\">Post Comment</button>\n <span class=\"form-error\" ng-show=\"commentForm.$submitted && commentForm.$error\">\n <img src=\"/images/error.png\" width=\"14\" /> Make sure you fill in all the fields.\n </span>\n </div>\n </div>\n </div>\n</form>\n");
|
||||
$templateCache.put("templates/directives/poll.html","<div class=\"poll-header\">\n <div class=\"header participants-header\">\n {{event.participants.length}} participants\n </div>\n <div class=\"header date-header\" ng-repeat=\"d in event.dates\">\n <div class=\"daticon\">\n <div class=\"dow\">\n {{d | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{d | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{d | date : \'MMM\'}}\n </div>\n <span class=\"count\" ng-show=\"selectedDate($index)\" ng-class={top:isTopDate($index)}>{{selectedDate($index)}}</span>\n </div>\n </div>\n <div class=\"header actions-header\">\n\n </div>\n</div>\n<div class=\"poll-body\">\n <div class=\"poll-entry\" ng-repeat=\"participant in event.participants\">\n <form novalidate ng-submit=\"update(participant); editMode = false\">\n <div class=\"cell name-cell\">\n <span class=\"avatar style-{{$index + 1}}\">\n <img src=\"/images/user.png\" width=\"11\" />\n </span>\n <input required autocomplete=\"off\" type=\"text\" class=\"form-control\" ng-model=\"participant.name\" ng-show=\"editMode\" value=\"participant.name\"/>\n <span ng-hide=\"editMode\" class=\"name editable\" ng-click=\"editMode = true && !event.isClosed; edit(participant)\">{{participant.name}}</span>\n </div>\n <div class=\"cell vote-cell\" ng-repeat=\"date in event.dates\">\n <img src=\"/images/tick@2x.png\" width=\"16\" ng-hide=\"editMode\" ng-if=\"participant.votes[$index]\" />\n <img src=\"/images/nope@2x.png\" width=\"8\" ng-hide=\"editMode\" ng-if=\"!participant.votes[$index]\" />\n <input ng-model=\"participant.votes[$index]\" ng-show=\"editMode\" ng-false-value=\"false\" type=\"checkbox\" />\n <div class=\"overlay\" ng-show=\"editMode\" ng-click=\"participant.votes[$index] = !participant.votes[$index]\"></div>\n </div>\n <div class=\"cell action-cell\" ng-hide=\"event.isClosed\">\n <button type=\"button\" ng-hide=\"editMode\" ng-click=\"editMode = true; edit(participant)\" class=\"btn hover\">Edit</button>\n <button type=\"button\" ng-hide=\"editMode\" ng-click=\"delete(participant)\" class=\"btn danger hover\">Delete</button>\n <button type=\"submit\" ng-show=\"editMode\" class=\"btn\">Save</button>\n <button type=\"button\" ng-show=\"editMode\" ng-click=\"editMode = false; cancel($index)\" class=\"btn\">Cancel</button>\n </div>\n </form>\n </div>\n <div class=\"poll-example\" ng-class=\"{hidden : event.participants.length > 0}\">\n <div class=\"poll-entry\" ng-repeat=\"example in examples\">\n <div class=\"cell name-cell\">\n <span class=\"avatar style-{{$index + 1}}\">\n <img src=\"/images/user.png\" width=\"11\" />\n </span>\n <span class=\"name\">{{example.name}}</span>\n </div>\n <div class=\"cell vote-cell\" ng-repeat=\"date in event.dates\">\n <img src=\"/images/tick@2x.png\" width=\"16\" ng-if=\"example.votes[$index]\" />\n <img src=\"/images/nope@2x.png\" width=\"8\" ng-if=\"!example.votes[$index]\" />\n </div>\n <div class=\"cell action-cell\">\n\n </div>\n </div>\n <div class=\"overlay\">\n <div class=\"overlay-text\">\n Fill in the form below to get started\n </div>\n </div>\n </div>\n <div ng-hide=\"event.isClosed\" class=\"poll-entry highlight\">\n <form novalidate name=\"formnew\" ng-submit=\"save()\">\n <div class=\"cell name-cell\">\n <span class=\"avatar style-{{participant.style}}\">\n <img src=\"/images/user.png\" width=\"11\" />\n </span>\n <input autocomplete=\"off\" name=\"username\" type=\"text\" class=\"form-control\" placeholder=\"Your name...\" ng-model=\"participant.name\" required value=\"participant.name\"/>\n </div>\n <div class=\"cell vote-cell\" ng-repeat=\"date in event.dates\">\n <input ng-model=\"participant.votes[$index]\" ng-false-value=\"false\" type=\"checkbox\" />\n <div class=\"overlay\" ng-click=\"participant.votes[$index] = !participant.votes[$index]\"></div>\n </div>\n <div class=\"cell action-cell\">\n <button type=\"submit\" ng-class=\"{ \'animated shake\' : formnew.$submitted && formnew.$invalid }\" class=\"btn\">Save</button>\n </div>\n </form>\n </div>\n</div>\n");
|
||||
$templateCache.put("templates/directives/timePicker.html","<div class=\"time-picker\">\n <div class=\"time-picker-col\">\n <div class=\"daticon\">\n <div class=\"dow\">\n {{date | date: \'EEE\'}}\n </div>\n <div class=\"day\">\n {{date | date: \'d\'}}\n </div>\n <div class=\"month\">\n {{date | date : \'MMM\'}}\n </div>\n <!-- <span class=\"delete\" ng-click=\"datepicker.unsetDate(date)\"></span> -->\n </div>\n </div>\n <div class=\"time-picker-col\" ng-repeat=\"time in date.times track by $index\">\n <input type=\"text\" class=\"time-picker-input\" time-picker ng-model=\"time\" ng-model-options=\"{ updateOn: \'blur\' }\" />\n </div>\n</div>\n");
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
@mixin form-input {
|
||||
border-radius: 2px;
|
||||
border: 1px solid $border-clr;
|
||||
font-size:em(18px);
|
||||
font-size:em(14px);
|
||||
@include appearance(none);
|
||||
@include transition(border-color 0.1s ease-in-out);
|
||||
&:focus {
|
||||
border-color: $blue-clr;
|
||||
|
|
|
|||
|
|
@ -14,3 +14,14 @@ $navigation-bg-clr: $dark-blue-clr;
|
|||
$background-clr: $light-blue-clr;
|
||||
|
||||
$color-collection: (#8A75AE, #80A1DA, #B3DD8B, #7EE4E4, #FCD285, #F7967F, #E8669D, #F7B6E7, #F99D7B, #88D0CB);
|
||||
|
||||
$mobile-size:em(320);
|
||||
$tablet-size:720px;
|
||||
$desktop-size:em(960);
|
||||
$largedesktop-size:em(1050);
|
||||
|
||||
// Bourbon Neat Breakpoints
|
||||
$mobile: new-breakpoint(min-width $mobile-size 4);
|
||||
$tablet: new-breakpoint(max-width $tablet-size 8);
|
||||
$desktop: new-breakpoint(min-width $desktop-size 12);
|
||||
$largedesktop: new-breakpoint(min-width $largedesktop-size 16);
|
||||
|
|
|
|||
|
|
@ -4,40 +4,34 @@ $min-width: 820px;
|
|||
|
||||
.outer-container {
|
||||
width:100%;
|
||||
height:100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
background: $background-clr;
|
||||
color: $text-clr;
|
||||
min-width: $min-width;
|
||||
}
|
||||
|
||||
.main-navigation {
|
||||
|
||||
position:fixed;
|
||||
z-index: 2000;
|
||||
min-height:100%;
|
||||
width: $navigation-width;
|
||||
background: $navigation-bg-clr;
|
||||
color: white;
|
||||
.wrapper {
|
||||
width: $navigation-width;
|
||||
padding: 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background: $background-clr;
|
||||
margin-left: $navigation-width;
|
||||
height:100%;
|
||||
overflow-y:scroll;
|
||||
.main-view {
|
||||
position:relative;
|
||||
padding: 100px 40px 20px 40px;
|
||||
width:100%;
|
||||
min-height: 600px;
|
||||
height:100%;
|
||||
min-height:100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,15 @@ $nav-pad: 20px;
|
|||
|
||||
.main-navigation {
|
||||
padding: 0 $nav-pad;
|
||||
.menu-toggle {
|
||||
color: white;
|
||||
text-transform:uppercase;
|
||||
font-size: em(14px);
|
||||
font-weight:bold;
|
||||
text-decoration:none;
|
||||
line-height: 60px;
|
||||
display:none;
|
||||
}
|
||||
.logo {
|
||||
display:block;
|
||||
height: 60px;
|
||||
|
|
@ -58,7 +67,7 @@ $nav-pad: 20px;
|
|||
text-decoration: none;
|
||||
color: #616F8D;
|
||||
line-height: em(40px);
|
||||
font-size: em(12px);
|
||||
font-size: em(14px);
|
||||
font-weight:bold;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
|
|
|
|||
238
public/scss/partials/media/mobile.scss
Normal file
238
public/scss/partials/media/mobile.scss
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
@include media($tablet) {
|
||||
html {
|
||||
max-width:100%;
|
||||
overflow:hidden;
|
||||
}
|
||||
body {
|
||||
font-size:em(14px);
|
||||
position:relative;
|
||||
@include transition(all 0.3s ease-in-out);
|
||||
left:0;
|
||||
&.open-menu {
|
||||
left:200px;
|
||||
}
|
||||
}
|
||||
.main-navigation {
|
||||
// display:none;
|
||||
width:100%;
|
||||
height:60px;
|
||||
min-height:0;
|
||||
overflow:hidden;
|
||||
position:static;
|
||||
.menu-toggle {
|
||||
display:inline-block;
|
||||
}
|
||||
.logo {
|
||||
display:inline-block;
|
||||
width:110px;
|
||||
padding:0;
|
||||
float:right;
|
||||
background:transparent;
|
||||
}
|
||||
.menu {
|
||||
position:absolute;
|
||||
box-shadow: inset -5px 0 10px rgba(black, 0.1);
|
||||
background: darken($navigation-bg-clr, 5%);
|
||||
top:0;
|
||||
width:200px;
|
||||
left:-200px;
|
||||
height:100%;
|
||||
padding:0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left:0;
|
||||
.main-view {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.top-bar {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media($tablet) {
|
||||
.box {
|
||||
border-radius:0;
|
||||
padding-left: 20px;
|
||||
padding-right:20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media($tablet) {
|
||||
.box {
|
||||
border-radius:0;
|
||||
border:0;
|
||||
margin:0;
|
||||
.box-section {
|
||||
.section-details {
|
||||
@include span-columns(8);
|
||||
.section-title {
|
||||
font-size: em(12px);
|
||||
text-transform:uppercase;
|
||||
font-weight: bold;
|
||||
color: $text-clr;
|
||||
margin-bottom:10px;
|
||||
border-bottom: 1px solid $border-clr;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
.section-main {
|
||||
@include span-columns(8);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include media($tablet) {
|
||||
.newevent-steps {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media($tablet) {
|
||||
.event-header {
|
||||
.details {
|
||||
display:block;
|
||||
max-width:100%;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.actions {
|
||||
visibility:visible;
|
||||
position:static;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
}
|
||||
.event-description {
|
||||
background:transparent;
|
||||
border:0;
|
||||
padding-top:0;
|
||||
padding-bottom:0;
|
||||
font-size: em(16);
|
||||
}
|
||||
}
|
||||
|
||||
@include media($tablet) {
|
||||
.date-picker {
|
||||
.wrapper {
|
||||
padding: em(10);
|
||||
}
|
||||
.values {
|
||||
.value {
|
||||
line-height: em(45px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.daticon {
|
||||
.delete {
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media($tablet) {
|
||||
.form-col {
|
||||
@include span-columns(8);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media($tablet) {
|
||||
.poll-wrapper {
|
||||
width: calc(100% + 40px);
|
||||
margin-left:-20px;
|
||||
}
|
||||
.poll-body {
|
||||
.poll-example {
|
||||
.overlay {
|
||||
text-align:left;
|
||||
}
|
||||
}
|
||||
}
|
||||
.poll {
|
||||
// border:0;
|
||||
// border-top:1px solid $border-clr;
|
||||
// margin-left:-20px;
|
||||
// border-radius:0;
|
||||
// margin-bottom:-20px;
|
||||
}
|
||||
$col1-width : 160px;
|
||||
.poll-header {
|
||||
.header {
|
||||
&.participants-header {
|
||||
// font-size: em(14px);
|
||||
min-width: $col1-width;
|
||||
width: $col1-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
.poll-body {
|
||||
.poll-entry {
|
||||
.cell {
|
||||
&.name-cell {
|
||||
min-width: $col1-width;
|
||||
width: $col1-width;
|
||||
}
|
||||
}
|
||||
.hover {
|
||||
visibility:visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// NOTIFICATIONS
|
||||
@include media($tablet) {
|
||||
.notification {
|
||||
top:0;
|
||||
min-height:60px;
|
||||
width: 100%;
|
||||
border-radius:0;
|
||||
&.ng-enter {
|
||||
max-height:0;
|
||||
right:0;
|
||||
top:-100px;
|
||||
opacity:0;
|
||||
}
|
||||
&.ng-enter-active {
|
||||
opacity:1;
|
||||
top:0;
|
||||
right:0
|
||||
|
||||
}
|
||||
&.ng-leave-active {
|
||||
opacity:1;
|
||||
top:-100px;
|
||||
right:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MODAL
|
||||
|
||||
@include media($tablet) {
|
||||
.rl-modal {
|
||||
position: fixed;
|
||||
max-width:auto;
|
||||
min-width:auto;
|
||||
width:100%;
|
||||
top:0;
|
||||
left:0;
|
||||
border-radius:0;
|
||||
@include transform(none);
|
||||
&.ng-enter-active {
|
||||
background: black;
|
||||
}
|
||||
.rl-modal-message {
|
||||
}
|
||||
.rl-modal-title {
|
||||
}
|
||||
.rl-modal-actions {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
.event-header {
|
||||
width: 100%;
|
||||
margin-bottom:20px;
|
||||
position:relative;
|
||||
margin-bottom:10px;
|
||||
.details {
|
||||
display:inline-block;
|
||||
max-width: 80%;
|
||||
.title {
|
||||
font-size: em(24px);
|
||||
font-weight: bold;
|
||||
|
|
@ -38,7 +40,9 @@
|
|||
}
|
||||
.actions {
|
||||
visibility:hidden;
|
||||
float: right;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
}
|
||||
&:hover {
|
||||
.actions {
|
||||
|
|
@ -48,15 +52,12 @@
|
|||
}
|
||||
|
||||
.event-description {
|
||||
font-size: em(18px);
|
||||
font-size: em(16px);
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 20px;
|
||||
background: $background-clr;
|
||||
line-height:em(24px);
|
||||
position:relative;
|
||||
color: $text-2-clr;
|
||||
border-top:1px solid $border-clr;
|
||||
border-bottom: 1px solid $border-clr;
|
||||
color: $text-clr;
|
||||
}
|
||||
|
||||
.event-location {
|
||||
|
|
|
|||
|
|
@ -5,19 +5,23 @@
|
|||
position:absolute;
|
||||
top:50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
padding:0 20px;
|
||||
@include box-sizing(border-box);
|
||||
@include transform(translateX(-50%) translateY(-50%));
|
||||
.image {
|
||||
margin-bottom:20px;
|
||||
}
|
||||
.title {
|
||||
font-size: em(36px);
|
||||
font-size: em(36);
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: em(5);
|
||||
}
|
||||
.content {
|
||||
font-size: em(14px);
|
||||
max-width: 320px;
|
||||
font-size: em(14);
|
||||
line-height: em(21);
|
||||
font-weight: normal;
|
||||
margin-bottom: 20px;
|
||||
max-width:360px;
|
||||
margin: 0 auto em(20) auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
width:100%;
|
||||
list-style-position:inside;
|
||||
padding:0;
|
||||
margin:40px 0 10px 0;
|
||||
margin:20px 0 40px 0;
|
||||
.step {
|
||||
@include flex(1);
|
||||
color: $text-2-clr;
|
||||
|
|
@ -28,6 +28,7 @@
|
|||
}
|
||||
&.active {
|
||||
color: $text-clr;
|
||||
border-bottom: 2px solid darken($border-clr,10%);
|
||||
font-weight:bold;
|
||||
}
|
||||
&.complete:after {
|
||||
|
|
|
|||
|
|
@ -7,11 +7,10 @@ $box-h-pad: 25px;
|
|||
border-radius: 3px;
|
||||
margin: 0 auto 20px auto;
|
||||
max-width: 800px;
|
||||
min-width:700px;
|
||||
overflow:hidden;
|
||||
padding: $box-v-pad $box-h-pad;
|
||||
&.box-x-scroll {
|
||||
overflow-x: scroll;
|
||||
&:last-child {
|
||||
margin-bottom:0;
|
||||
}
|
||||
&.invisible {
|
||||
background: transparent;
|
||||
|
|
@ -49,18 +48,17 @@ $box-h-pad: 25px;
|
|||
}
|
||||
|
||||
.box-title {
|
||||
font-size: 24px;
|
||||
font-size: em(24px);
|
||||
font-weight: bold;
|
||||
color: $text-clr;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
.box-description {
|
||||
font-size: 14px;
|
||||
font-size: em(14px);
|
||||
color: $text-2-clr;
|
||||
line-height: em(21px);
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid $border-clr;
|
||||
margin-top: -20px;
|
||||
margin-bottom: 20px;
|
||||
a {
|
||||
color: $text-clr;
|
||||
|
|
@ -71,7 +69,7 @@ $box-h-pad: 25px;
|
|||
}
|
||||
}
|
||||
.box-section {
|
||||
padding-top: 20px;
|
||||
margin-bottom:20px;
|
||||
&:first-child {
|
||||
border:0;
|
||||
}
|
||||
|
|
@ -80,8 +78,8 @@ $box-h-pad: 25px;
|
|||
@include span-columns(3);
|
||||
.section-title {
|
||||
font-size: em(14px);
|
||||
color: $text-2-clr;
|
||||
margin-bottom:20px;
|
||||
color: $text-3-clr;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
}
|
||||
.section-main {
|
||||
|
|
@ -92,7 +90,7 @@ $box-h-pad: 25px;
|
|||
|
||||
.box-message {
|
||||
text-align:center;
|
||||
padding:40px;
|
||||
padding:20px;
|
||||
max-width:500px;
|
||||
margin:0 auto;
|
||||
.main-image {
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@
|
|||
position:relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.form-control {
|
||||
font-size: em(14px) !important;
|
||||
input.form-control {
|
||||
padding:em(6) em(10);
|
||||
}
|
||||
textarea.form-control {
|
||||
min-height: 0;
|
||||
|
|
|
|||
|
|
@ -7,17 +7,15 @@
|
|||
border-radius: 2px;
|
||||
@include transition(border-color 0.2s ease-in-out);
|
||||
.wrapper {
|
||||
padding:20px;
|
||||
padding:em(20);
|
||||
}
|
||||
.date-picker-head {
|
||||
display:table;
|
||||
width:100%;
|
||||
margin-bottom:30px;
|
||||
margin-bottom:em(30);
|
||||
text-align:center;
|
||||
.title {
|
||||
display:inline-block;
|
||||
width:200px;
|
||||
margin: 0 20px;
|
||||
font-weight:bold;
|
||||
font-size: em(18px);
|
||||
}
|
||||
|
|
@ -27,16 +25,19 @@
|
|||
position:relative;
|
||||
border: 1px solid $border-clr;
|
||||
display:inline-block;
|
||||
width: 25px;
|
||||
width: em(25);
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
line-height:25px;
|
||||
font-size: em(12);
|
||||
line-height:em(25);
|
||||
text-align:center;
|
||||
float:left;
|
||||
margin-left:em(10);
|
||||
box-shadow: 0 1px 1px rgba($border-clr,0.5);
|
||||
margin:0 20px;
|
||||
&:last-child {
|
||||
float:right;
|
||||
margin-left:0;
|
||||
margin-right:em(10);
|
||||
|
||||
}
|
||||
&:hover {
|
||||
color: $text-clr;
|
||||
|
|
@ -48,15 +49,14 @@
|
|||
}
|
||||
}
|
||||
.dow {
|
||||
font-size:0;
|
||||
padding-bottom: 10px;
|
||||
display:table;
|
||||
width:100%;
|
||||
border-bottom: 2px solid $border-clr;
|
||||
margin-bottom: 10px;
|
||||
.day {
|
||||
text-transform:uppercase;
|
||||
font-size: 14px;
|
||||
display:inline-block;
|
||||
width: (100% / 7);
|
||||
font-size: em(14);
|
||||
display:table-cell;
|
||||
text-align:center;
|
||||
color: $pink-clr;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@ form {
|
|||
|
||||
.form-row {
|
||||
@include row();
|
||||
margin-bottom:10px;
|
||||
@include user-select(none);
|
||||
}
|
||||
|
||||
.form-col {
|
||||
@include span-columns(6);
|
||||
margin-bottom:10px;
|
||||
&.padded {
|
||||
&:first-child {
|
||||
padding: 0 20px 0 0;
|
||||
|
|
@ -31,10 +31,10 @@ form {
|
|||
|
||||
.form-group {
|
||||
& > label {
|
||||
font-size:em(12px);
|
||||
color: $text-3-clr;
|
||||
font-size:em(11px);
|
||||
color: lighten($text-clr,20%);
|
||||
margin-bottom:5px;
|
||||
display:inline-block;
|
||||
line-height:em(30px);
|
||||
|
||||
}
|
||||
.form-error {
|
||||
|
|
@ -48,6 +48,7 @@ form {
|
|||
}
|
||||
&.optional > label:after {
|
||||
content: " (optional)";
|
||||
color: $text-3-clr;
|
||||
}
|
||||
&.error {
|
||||
input.form-control, textarea.form-control {
|
||||
|
|
@ -64,12 +65,12 @@ form {
|
|||
}
|
||||
input.form-control {
|
||||
vertical-align:middle;
|
||||
padding: em(5px) em(10px);
|
||||
padding: em(10px) em(12px);
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
min-height: 135px;
|
||||
font-size: em(18px);
|
||||
font-size: em(14px);
|
||||
padding: em(8px) em(10px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
.rl-modal-position {
|
||||
display:table-cell;
|
||||
vertical-align:middle;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.rl-modal {
|
||||
text-align:left;
|
||||
background:white;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
max-width: 400px;
|
||||
display:inline-block;
|
||||
min-width: 200px;
|
||||
height: auto;
|
||||
z-index: 2000;
|
||||
overflow:hidden;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 0 1px $border-clr, 0 0 0 5px rgba($border-clr,0.5);
|
||||
@include transform(translateX(-50%) translateY(-50%));
|
||||
.rl-modal-message {
|
||||
padding: 0 20px 20px 20px;
|
||||
font-size: em(12px);
|
||||
|
|
@ -32,6 +33,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.ng-enter-active {
|
||||
.rl-modal {
|
||||
@include animation(0.5s bounceIn);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rl-modal-overlay {
|
||||
position:fixed;
|
||||
z-index: 1999;
|
||||
|
|
@ -39,6 +47,10 @@
|
|||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:table;
|
||||
background:rgba(black,0.1);
|
||||
|
||||
@include animation-duration(0.3s);
|
||||
&.ng-leave-active {
|
||||
@include animation(0.3s fadeOut);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,19 +2,37 @@ $actions-col-width : 160px;
|
|||
$date-col-width: 70px;
|
||||
$name-col-width: 235px;
|
||||
|
||||
.poll {
|
||||
|
||||
.poll-wrapper {
|
||||
margin-top:20px;
|
||||
min-width: 100%;
|
||||
display:block;
|
||||
border:1px solid rgba($border-clr, 0.5);
|
||||
border-radius: 3px;
|
||||
@include box-sizing(border-box);
|
||||
border-radius:0;
|
||||
border:0;
|
||||
border-top:1px solid $border-clr;
|
||||
width:calc(100% + 50px);
|
||||
margin-left:-25px;
|
||||
position:relative;
|
||||
margin-bottom:-20px;
|
||||
&:after {
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
width:100px;
|
||||
height:100%;
|
||||
pointer-events: none;
|
||||
@include linear-gradient(90deg, rgba(white,0), white);
|
||||
}
|
||||
}
|
||||
.poll {
|
||||
width: 100%;
|
||||
overflow-x:scroll;
|
||||
}
|
||||
|
||||
.poll-header {
|
||||
display:table;
|
||||
min-width: 100%;
|
||||
padding-top:20px;
|
||||
padding-top:em(20);
|
||||
overflow:hidden;
|
||||
border-bottom:1px solid $border-clr;
|
||||
box-shadow: 0 3px 0 rgba($border-clr, 0.3);
|
||||
|
|
@ -26,14 +44,18 @@ $name-col-width: 235px;
|
|||
text-align:center;
|
||||
min-width: $date-col-width;
|
||||
width: $date-col-width;
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
&.actions-header {
|
||||
min-width: $actions-col-width;
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
&.participants-header {
|
||||
@include box-sizing(border-box);
|
||||
font-weight: bold;
|
||||
min-width: $name-col-width;
|
||||
width: $name-col-width;
|
||||
padding: em(10px);
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -93,6 +115,7 @@ $name-col-width: 235px;
|
|||
display:table-cell;
|
||||
height: 50px;
|
||||
vertical-align:middle;
|
||||
@include box-sizing(border-box);
|
||||
&.name-cell {
|
||||
min-width: $name-col-width;
|
||||
width: $name-col-width;
|
||||
|
|
@ -120,18 +143,10 @@ $name-col-width: 235px;
|
|||
}
|
||||
}
|
||||
.form-control {
|
||||
border:1px solid $border-clr;
|
||||
padding: em(5px);
|
||||
border-radius: 2px;
|
||||
color: $text-clr;
|
||||
&:focus {
|
||||
outline:0;
|
||||
border-color: $blue-clr;
|
||||
box-shadow: 0 0 3px rgba($blue-clr, 0.5);
|
||||
}
|
||||
@include placeholder {
|
||||
color: rgba($text-2-clr,0.7);
|
||||
}
|
||||
@include form-input;
|
||||
padding:em(5px);
|
||||
width:em(130);
|
||||
font-size:em(16px);
|
||||
}
|
||||
}
|
||||
&.action-cell {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
.switch {
|
||||
display:table-cell;
|
||||
text-align:right;
|
||||
min-width: 150px;
|
||||
min-width: em(150);
|
||||
vertical-align:middle;
|
||||
.switch-value {
|
||||
font-size: em(12px);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@import url(http://fonts.googleapis.com/css?family=Roboto:400,600,700);
|
||||
@import "bourbon/bourbon";
|
||||
@import "neat/neat";
|
||||
@import "modules/vars";
|
||||
@import "modules/mixins";
|
||||
@import "partials/normalize";
|
||||
@import "bourbon/bourbon";
|
||||
@import "neat/neat";
|
||||
|
||||
body {
|
||||
font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
|
||||
|
|
@ -33,3 +33,5 @@ a {
|
|||
@import "partials/pages/home";
|
||||
@import "partials/pages/event";
|
||||
@import "partials/pages/newevent";
|
||||
|
||||
@import "partials/media/mobile";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<div class="rl-modal-overlay" ng-click="modal.cancel()"></div>
|
||||
<div class="rl-modal-overlay">
|
||||
|
||||
<div class="rl-modal">
|
||||
<div class="rl-modal-position">
|
||||
|
||||
<div class="rl-modal">
|
||||
<div class="rl-modal-title">{{modal.title}}</div>
|
||||
<div class="rl-modal-message">
|
||||
{{modal.message}}
|
||||
|
|
@ -9,4 +11,8 @@
|
|||
<button type="button" ng-click="modal.confirm()" ng-show="modal.confirm" class="btn" ng-class="{danger : modal.isDestructive}">{{modal.confirmText}}</button>
|
||||
<button type="button" ng-click="modal.cancel()" class="btn">{{modal.cancelText}}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,25 +9,25 @@
|
|||
</div>
|
||||
<div class="dow">
|
||||
<div class="day">
|
||||
Sun
|
||||
Su
|
||||
</div>
|
||||
<div class="day">
|
||||
Mon
|
||||
Mo
|
||||
</div>
|
||||
<div class="day">
|
||||
Tue
|
||||
Tu
|
||||
</div>
|
||||
<div class="day">
|
||||
Wed
|
||||
We
|
||||
</div>
|
||||
<div class="day">
|
||||
Thu
|
||||
Th
|
||||
</div>
|
||||
<div class="day">
|
||||
Fri
|
||||
Fr
|
||||
</div>
|
||||
<div class="day">
|
||||
Sat
|
||||
Sa
|
||||
</div>
|
||||
</div>
|
||||
<div class="values">
|
||||
|
|
|
|||
|
|
@ -15,15 +15,17 @@
|
|||
<button class="btn" ng-click="editEvent()">Edit Event</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-description box-side-sticky" ng-if="event.description">{{event.description}}</div>
|
||||
<div class="event-description" ng-if="event.description">{{event.description}}</div>
|
||||
<div class="event-location" ng-if="event.location">
|
||||
Location:
|
||||
<a href="http://maps.google.com?q={{event.location}}" target="_blank">{{event.location}}</a>
|
||||
</div>
|
||||
|
||||
<div class="poll-wrapper">
|
||||
<div poll event="event" class="poll">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box" ng-hide="event.comments.length == 0 && event.isClosed">
|
||||
<div class="box-title">
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<head>
|
||||
<title>Rallly - Collaborative Scheduling</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<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">
|
||||
|
|
@ -33,15 +34,17 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="outer-container">
|
||||
<div class="main-navigation">
|
||||
<div class="main-navigation" ng-controller="NavigationCtrl">
|
||||
<a href="/" class="logo">
|
||||
<img src="/images/logo.png" width="100" />
|
||||
</a>
|
||||
<a href="#" class="menu-toggle" ng-click="toggleMenu($event)">Menu</a>
|
||||
<div class="menu">
|
||||
<div class="menu-section">
|
||||
Menu
|
||||
</div>
|
||||
<nav class="navigation">
|
||||
<ul class="links" ng-controller="NavigationCtrl">
|
||||
<ul class="links">
|
||||
<li>
|
||||
<a href="/" ng-class="{active : isActive('/')}">
|
||||
<i back-img="home" class="icon"></i>
|
||||
|
|
@ -67,6 +70,7 @@
|
|||
</div>
|
||||
<a class="create-new" href="/new">Schedule an event</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div class="top-bar">
|
||||
<ul class="primary ng-scope" ng-controller="AccountCtrl">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue