Major Redesign

public/js/controllers/home.controller.js

@@ -0,0 +1,6 @@
+angular.module('rallly')
+.controller('HomeCtrl', function($scope, $state){
+    $scope.newEvent = function(){
+        $state.go('newevent');
+    }
+});

public/js/controllers/navigation.controller.js

@@ -0,0 +1,10 @@
+angular.module('rallly')
+.controller('NavigationCtrl', function($scope, $location){
+    $scope.isActive = function(path) {
+        if ($location.path() == path) {
+            return true;
+        } else {
+            return false
+        }
+    }
+})

public/js/directives/backImg.directive.js

@@ -0,0 +1,9 @@
+angular.module('rallly')
+.directive('backImg', function(){
+    return function(scope, element, attrs){
+        var url = attrs.backImg;
+        element.css({
+            'background-image': 'url(/images/' + url +'.png)'
+        });
+    };
+})

public/js/main.js

@@ -5,6 +5,11 @@ angular.module('rallly', ['ui.router','ngResource','ngFx','btford.modal'])
         $stateProvider
         .state('index',{
             url : '/',
+            templateUrl : 'templates/home.html',
+            controller : 'HomeCtrl'
+        })
+        .state('newevent',{
+            url : '/new',
             templateUrl : 'templates/newevent.html',
             controller : 'NewEventCtrl'
         })

public/scss/modules/_vars.scss

@@ -0,0 +1,14 @@
+$dark-blue-clr: #2E3A54;
+$green-clr: #6EBC48;
+$pink-clr: #E55A84;
+$red-clr: #BF3A61;
+$blue-clr: #5AC4E5;
+$light-blue-clr: #F5F6F8;
+
+
+$text-clr: #3D4043;
+$text-2-clr: #828B9A;
+$text-3-clr: #AEB4BE;
+$border-clr: #D9DDE3;
+$navigation-bg-clr: $dark-blue-clr;
+$background-clr: $light-blue-clr;

public/scss/partials/_applayout.scss

@@ -0,0 +1,39 @@
+$navigation-width: 100%;
+$top-bar-height: 50px;
+
+.outer-container {
+    width:100%;
+    height:100%;
+}
+body {
+    background: $background-clr;
+}
+.main-navigation {
+    width: $navigation-width;
+    min-width: $navigation-width;
+    color: white;
+    .wrapper {
+        width: $navigation-width;
+        padding: 0 40px;
+    }
+}
+
+.main-content {
+    background: $background-clr;
+    height:100%;
+    .main-view {
+        height:100%;
+        position:relative;
+        padding: 160px 40px 40px 40px;
+        width:100%;
+        min-height: 400px;
+        min-width: 600px;
+    }
+}
+
+.top-bar {
+    width:100%;
+    box-shadow: 0 1px 2px rgba(black, 0.1);
+    height: $top-bar-height;
+    line-height: $top-bar-height;
+}

public/scss/partials/_navigation.scss

@@ -0,0 +1,101 @@
+$nav-padding: 40px;
+$vertical-space: 20px;
+$top-space: 15px;
+
+.main-navigation {
+    position:fixed;
+    width:100%;
+    z-index: 1000;
+    .wrapper {
+        background: $navigation-bg-clr;
+        height: em(60px);
+    }
+    .logo {
+        display:inline-block;
+        vertical-align:middle;
+        margin-top:$top-space;
+
+    }
+    .navigation {
+        display:inline-block;
+        vertical-align:middle;
+        margin-left: 60px;
+        margin-top:$top-space;
+        .links {
+            padding:0 ;
+            margin:0;
+            list-style: none;
+            display:inline-block;
+            li {
+                display:inline-block;
+                margin-right:em(30px);
+            }
+            a {
+                text-decoration: none;
+                color: #616F8D;
+                font-weight: bold;
+                line-height: em(24px);
+                font-size: em(15px);
+                opacity: 0.7;
+                &:hover {
+                    opacity: 1;
+                    color:white;
+                    .icon {
+                        background-position: center bottom;
+                    }
+                }
+                &.active {
+                    opacity:1;
+                    color: white;
+                    cursor: default;
+                    .icon {
+                        background-position: center bottom;
+                    }
+                }
+                .text {
+                    vertical-align:middle;
+                }
+                .icon {
+                    display:inline-block;
+                    vertical-align:middle;
+                    margin-right: 5px;
+                    width:16px;
+                    height:16px;
+                    background-size: 16px 32px;
+                }
+
+            }
+        }
+    }
+    .create-new {
+        display:inline-block;
+        float:right;
+        padding: 13px;
+        // border-bottom:1px solid lighten($navigation-bg-clr, 5%);
+        a {
+            display:block;
+            color:tint($green-clr,90%);
+            text-align:center;
+            border-radius: 2px;
+            background: $green-clr;
+            text-decoration:none;
+            font-size:12px;
+            font-weight: 600;
+            padding: 6px 15px 10px 15px;
+            &:hover {
+                background: lighten($green-clr, 5%);
+            }
+            &:active {
+                opacity:0.9;
+            }
+            img {
+                display:none;
+                vertical-align:middle;
+                margin-right: 5px;
+            }
+            span {
+                vertical-align:middle;
+            }
+        }
+    }
+}

public/scss/partials/_topbar.scss

@@ -0,0 +1,45 @@
+.top-bar {
+    float: left;
+    width: 100%;
+    background:rgba(white,0.9);
+    .primary {
+        list-style:none;
+        margin:0;
+        padding-left:40px;
+        margin-top:-4px;
+        .item {
+            img {
+                display:inline-block;
+                vertical-align:middle;
+            }
+            .hoverable {
+                padding: 8px 12px;
+                height: 100%;
+                text-decoration:none;
+                color: $text-clr;
+                font-size: em(12px);
+                border: 1px solid transparent;
+                border-radius: 3px;
+                vertical-align:bottom;
+                border-color: $border-clr;
+                span {
+                    vertical-align:middle;
+                }
+                &:hover {
+                    border-color: darken($border-clr,10%);
+                }
+            }
+            .dropdown:after {
+                content: "";
+                width: 6px;
+                height: 4px;
+                margin-left: 10px;
+                display:inline-block;
+                background-image: url("../images/dropdown_arrow.png");
+                background-size: 6px 4px;
+                background-repeat:no-repeat;
+            }
+        }
+
+    }
+}

public/scss/partials/pages/_home.scss

@@ -0,0 +1,23 @@
+.page-placeholder {
+    margin:0 auto;
+    text-align:center;
+    color:#B0B8C4;
+    position:absolute;
+    top:50%;
+    left: 50%;
+    @include transform(translateX(-50%) translateY(-50%));
+    .image {
+        margin-bottom:20px;
+    }
+    .title {
+        font-size: em(36px);
+        font-weight: bold;
+        margin-bottom: 20px;
+    }
+    .content {
+        font-size: em(14px);
+        max-width: 320px;
+        font-weight: normal;
+        margin-bottom: 20px;
+    }
+}

public/scss/partials/ui/_box.scss

@@ -0,0 +1,37 @@
+.box {
+    background: white;
+    border: 1px solid $border-clr;
+    border-radius: 3px;
+    margin: 0 auto 20px auto;
+    max-width: 800px;
+    padding: 20px 30px;
+}
+
+.box-title {
+    font-size: 24px;
+    font-weight: bold;
+    color: $text-clr;
+    margin-bottom:20px;
+}
+
+.box-description {
+    font-size: 14px;
+    color: $text-3-clr;
+    margin-top: -20px;
+    margin-bottom: 20px;
+}
+.box-section {
+    padding-top: 20px;
+    @include row;
+    .section-details {
+        @include span-columns(3);
+        .section-title {
+            font-size: em(14px);
+            color: $text-2-clr;
+            margin-bottom:20px;
+        }
+    }
+    .section-main {
+        @include span-columns(9);
+    }
+}

public/scss/partials/ui/_buttons.scss

@@ -0,0 +1,27 @@
+.btn {
+    border:1px solid #E0E3E9;
+    border-radius: 2px;
+    box-shadow: inset 0 1px 0 white, 0 1px 1px rgba(black, 0.1);
+    @include background-image(linear-gradient(#FAFAFA, #EFF1F3));
+    font-size: em(12px);
+    font-weight:600;
+    color: $text-2-clr;
+    text-decoration:none;
+    padding: em(8px) em(15px);
+    &.disabled {
+        cursor:default;
+        opacity: 0.5;
+        &:active {
+            box-shadow: inset 0 1px 0 white, 0 1px 1px rgba(black, 0.1);
+        }
+    }
+    &.danger {
+        color: $red-clr;
+    }
+    &:focus {
+        outline:0;
+    }
+    &:active {
+        box-shadow: inset 0 0 5px rgba(black, 0.1);
+    }
+}

public/scss/partials/ui/_datepicker.scss

@@ -0,0 +1,208 @@
+.error > .datepicker {
+    border-color: $red-clr;
+}
+.datepicker {
+    width:100%;
+    border:1px solid #eee;
+    border-radius: 3px;
+    background:white;
+    padding: em(10px);
+    @include transition(border-color 0.1s ease-in-out);
+    table {
+        width:100%;
+        font-size: em($em-base);
+    }
+    thead {
+
+    }
+    tbody {
+        &:before {
+            content: '';
+            display:block;
+            height: em(10px);
+        }
+    }
+    .prev, .next {
+        opacity: 0.5;
+        cursor: pointer;
+        border-radius:5px;
+        position:relative;
+        &:hover {
+            opacity: 1;
+            &:after {
+                opacity: 1;
+                background: rgba($border-clr, 0.3);
+            }
+        }
+        &:after {
+            content: " ";
+            cursor:pointer;
+            opacity: 0;
+            position:absolute;
+            $size: em(28px);
+            width:$size;
+            height:$size;
+            margin-left:$size * -0.5;
+            margin-top:$size * -0.5;
+            left:50%;
+            top:50%;
+            border-radius:100%;
+        }
+    }
+    .datepicker-switch {
+        padding: 10px;
+        font-weight:600;
+        font-size:em(18px);
+        border-radius: 3px;
+        cursor: pointer;
+        &:hover {
+            background: rgba($border-clr, 0.4);
+        }
+    }
+    .dow {
+        padding:10px;
+        font-weight:normal;
+        text-transform: uppercase;
+        color: $pink-clr;
+        font-size: em(14px);
+        border-bottom: 2px solid #eee;
+    }
+    .dow, .day {
+        padding:em(15px);
+    }
+    .day {
+        text-align:center;
+        font-weight:600;
+        position:relative;
+        font-size:em(14px);
+        &.today {
+            color:#818176;
+            &:after {
+                opacity:1;
+                background: rgba(yellow, 0.1);
+            }
+        }
+        &:hover {
+            &:after {
+                opacity:1;
+                background: rgba($border-clr,0.4);
+            }
+            cursor: pointer;
+        }
+        &.new, &.old {
+            font-weight:normal;
+            color: $text-3-clr;
+        }
+        &.active {
+            background:white;
+            color: $green-clr;
+            &:after {
+                opacity:1;
+                background: rgba($green-clr,0.1);
+            }
+        }
+        &:active {
+            &:after {
+                opacity: 0.8;
+            }
+        }
+        &:after {
+            content: " ";
+            cursor:pointer;
+            opacity: 0;
+            position:absolute;
+            $size: em(35px);
+            width:$size;
+            height:$size;
+            margin-left:$size * -0.5;
+            margin-top:$size * -0.5;
+            left:50%;
+            top:50%;
+            border-radius:100%;
+        }
+    }
+    .month, .year {
+        width: 33.3%;
+        display:inline-block;
+        text-align:center;
+        font-size: em(14px);
+        padding:em(20px);
+        cursor:pointer;
+        border-radius: 3px;
+        text-transform: uppercase;
+        &:hover {
+            background: rgba($border-clr, 0.1);
+        }
+    }
+}
+
+.daticon-list {
+    margin:0;
+    margin-left:-10px;
+    list-style:none;
+    padding:5px;
+    text-align:left;
+    .placeholder {
+        line-height: em(18px);
+        font-size: em(12px);
+        color: #ccc;
+    }
+    li {
+        margin: 5px;
+        display:inline-block;
+    }
+}
+
+.daticon {
+    box-shadow: 0 0 0 1px rgba($border-clr,0.5);
+    border-radius: 3px;
+    display:inline-block;
+    padding:em(8px) em(16px);
+    text-align:center;
+    position:relative;
+    cursor:default;
+    background:white;
+    .dow {
+        font-size: em(6px);
+        margin-top:em(-24px);
+        background:white;
+        color: $text-3-clr;
+        margin-bottom: em(4px);
+        font-weight:normal;
+        text-transform: uppercase;
+    }
+    .day {
+        font-size: em(20px);
+        font-weight:normal;
+        color: $pink-clr;
+        line-height: em(16px);
+    }
+    .month {
+        font-weight: 600;
+        font-size: em(12px);
+        text-transform: uppercase;
+    }
+    .delete {
+        text-align:center;
+        $size: 18px;
+        width: em($size);
+        height: em($size);
+        position:absolute;
+        top: $size * -0.4;
+        right: $size * -0.4;
+        border-radius:100%;
+        display:inline-block;
+        background: rgba($border-clr, 0.5) url(../images/close@2x.png) no-repeat center center;
+        background-size: 7px 8px;
+        cursor:pointer;
+        opacity:0;
+        &:hover {
+            background-color: rgba($border-clr, 0.8)
+        }
+    }
+    &:hover {
+        .delete {
+            opacity: 1;
+        }
+    }
+}

public/scss/partials/ui/_form.scss

@@ -0,0 +1,101 @@
+.form-container {
+    width:100%;
+}
+
+.form-row {
+    @include row();
+    margin-bottom:10px;
+    @include user-select(none);
+}
+
+.form-col {
+    @include span-columns(6);
+    &.padded {
+        &:first-child {
+            padding: 0 20px 0 0;
+        }
+        &:last-child {
+            padding: 0 0 0 20px;
+        }
+    }
+}
+
+.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;
+        line-height:em(30px);
+        &:after {
+            content: "*";
+            color: $red-clr;
+            margin-left:5px;
+        }
+        &.optional:after {
+            content: "";
+        }
+    }
+    input.form-control, textarea.form-control {
+        border-radius: 3px;
+        border: 1px solid $border-clr;
+        font-size:em(18px);
+        &.ng-pristine {
+            background: $background-clr;
+        }
+        @include transition(border-color 0.1s ease-in-out);
+        &:focus {
+            border-color: $blue-clr;
+            box-shadow: 0 0 3px rgba($blue-clr, 0.5);
+            outline:none;
+            background: white;
+        }
+        &.extend {
+            width:100%;
+        }
+        @include placeholder {
+            color: rgba($text-3-clr,0.7);
+        }
+    }
+    &.error {
+        input.form-control, textarea.form-control {
+
+            border-color: $red-clr;
+            background: rgba($red-clr,0.02);
+        }
+    }
+    input.form-control {
+        padding: em(5px) em(10px);
+    }
+    textarea.form-control {
+        min-height: 100px;
+        font-size: em(18px);
+        padding: em(8px) em(10px);
+    }
+}
+
+.form-submit-message {
+    display:inline-block;
+    margin-left: em(5px);
+    font-size: em(12px);
+    &.error {
+        color: $red-clr;
+    }
+    img {
+        vertical-align:middle;
+        margin-right: em(5px);
+    }
+}

public/scss/style.scss

@@ -1,59 +1,19 @@
-@import url(http://fonts.googleapis.com/css?family=Roboto:400,600,700,400italic);
+@import url(http://fonts.googleapis.com/css?family=Roboto:400,600,700);
-@import "partials/vars";
+@import "modules/vars";
-@import "partials/mixins";
+@import "modules/mixins";
 @import "partials/normalize";
 @import "bourbon/bourbon";
 @import "neat/neat";
-$mobile: new-breakpoint(max-width 768px 4);
 
 body {
-    font-size: em(18px);
+    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
-    @include font();
-    color: $text-clr;
-    @include media($mobile) {
-        font-size: em(15px);
-    }
-}
-@import "partials/header";
-@import "partials/buttons";
-@import "partials/type";
-@import "partials/form";
-@import "partials/modal";
-@import "partials/datepicker";
-@import "partials/event";
-@import "partials/newevent";
-@import "partials/eventsuccess";
-
-.container {
-    @include outer-container();
-    padding: em(30px) em(40px);
 }
 
-.main-content {
+@import "partials/applayout";
-    @include span-columns(8);
+@import "partials/navigation";
-    @include shift(2);
+@import "partials/topbar";
-}
+@import "partials/pages/home";
-
+@import "partials/ui/buttons";
-.rl-section {
+@import "partials/ui/form";
-    @include outer-container(800px);
+@import "partials/ui/box";
-    border-top:1px solid #ddd;
+@import "partials/ui/datepicker";
-    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);
-}

public/templates/home.html

@@ -0,0 +1,12 @@
+<div class="page-placeholder">
+    <div class="image">
+        <img src="/images/mark_large.png" width="67" />
+    </div>
+    <div class="title">
+        Schedule an Event
+    </div>
+    <div class="content">
+        Want to host an event but can’t decide on a date? Click on the button below to start!
+    </div>
+    <button ng-click="newEvent()" class="btn">Schedule New Event</button>
+</div>

public/templates/newevent.html

@@ -1,13 +1,13 @@
-<div ng-hide="eventUrl">
+<div class="box" ng-hide="eventUrl">
-    <h1>Schedule New Event</h1>
+    <div class="box-title">Schedule a New Event</div>
-    <div class="rl-page-desc">
+    <div class="box-description">
         Fill in the form below to create your event and share it with your friends and colleagues.
     </div>
-    <section class="rl-section">
+    <section class="box-section">
-        <aside class="rl-section-details">
+        <div class="section-details">
-            <h2>1. Your Details</h2>
+            <div class="section-title">1. Your Details</div>
-        </aside>
+        </div>
-        <div class="rl-section-main">
+        <div class="section-main">
             <div class="form-row">
                 <div class="form-col">
                     <div class="form-group" ng-class="{error:errors['creator.name']}">
@@ -18,17 +18,22 @@
                 <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"/>
+                        <input id="email" ng-model="event.creator.email" type="email" placeholder="john.doe@email.com..." class="form-control extend"/>
                     </div>
                 </div>
             </div>
         </div>
     </section>
-    <section class="rl-section">
+
-        <aside class="rl-section-details">
+
-            <h2>2. Event Details</h2>
+
-        </aside>
+</div>
-        <div class="rl-section-main">
+<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}">
@@ -51,39 +56,43 @@
             </div>
         </div>
     </section>
-    <section class="rl-section">
+</div>
-        <aside class="rl-section-details">
+<div class="box">
-            <h2>3. Choose Dates</h2>
+    <section class="box-section">
-        </aside>
+        <div class="section-details">
-        <div class="rl-section-main">
+            <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>
-                <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>
     </section>
-    <section class="rl-section">
+</div>
-        <aside class="rl-section-details">
+<div class="box">
-            <h2>4. Invite Participants</h2>
+    <section class="box-section">
-        </aside>
+        <div class="section-details">
-        <div class="rl-section-main">
+            <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>

views/index.ejs

@@ -13,25 +13,53 @@
         <script type="text/javascript" src="/build/app.js"></script>
     </head>
     <body>
-        <div class="container">
+        <div class="outer-container">
-            <header class="header">
+            <div class="main-navigation">
-                <div class="fixed">
+                <div class="wrapper">
-                <section class="primary-section">
+                    <a href="/" class="logo">
-                    <a href="/">
+                        <img class="logo-img" src="/images/logo.png" width="100" alt="Rallly - Collabrative Scheduling" />
-                        <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" target="_blank" href="/">New Event</a>
-                        <a class="nav-link" href="/about">What is this?</a>
-                    </nav>
-                </section>
-                </div>
-            </header>
-            <div class="main-content" ui-view>
 
+                    <nav class="navigation" ng-controller="NavigationCtrl">
+                        <ul class="links">
+                            <li>
+                                <a href="/" ng-class="{active:isActive('/')}">
+                                    <i back-img="dashboard" class="icon"></i>
+                                    <span class="text">Dashboard</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="/about" ng-class="{active: isActive('/about')}">
+                                    <i back-img="lightbulb" class="icon"></i>
+                                    <span class="text">What is this?</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </nav>
+                    <div class="create-new">
+                        <a href="/new" rel="nofollow">
+                            <img src="/images/add.png" width="12" />
+                            <span>Create New</span>
+                        </a>
+                    </div>
+                </div>
+                <div class="top-bar">
+                    <ul class="primary">
+                        <li class="item">
+                            <a class="hoverable dropdown" href="#">
+                                <img src="/images/person.png" height="16"/>
+                                <span>Guest</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
             </div>
+            <div class="main-content">
+                <div ui-view class="main-view">
+                </div>
+            </div>
+
+
         </div>
     </body>
 </html>