Added 'Event Guides' button and general style improvements.

First half of ticket #882847 mockup complete.
2013-06-13 20:26:30 -07:00 · 2013-06-13 20:26:30 -07:00 · 97470902bf
--- a/assets/css/event_create.less
+++ b/assets/css/event_create.less
@ -1,235 +0,0 @@
-@import "ui";
-
-body#events.map .overlay-container {
-    position:  relative;
-    margin:    0px auto;
-    max-width: 980px;
-}
-body#events.map .map-overlay {
-    position:  absolute;
-    z-index:   1;
-    margin:    20px;
-
-    color:  #fafafa;
-
-    h2 {
-        margin:     1px 0 0 4px;
-        padding:    10px 12px 12px 12px;
-
-        font-size:      20px;
-        font-weight:    300;
-        vertical-align: middle;
-    }
-
-    .formExpandButton {
-        border:     0px;
-
-        font-size:      20px;
-        vertical-align: middle;
-        .clickable;
-
-        .icon-plus {
-            margin-right: 4px;
-            font-size:  18px;
-        }
-        .icon-remove {
-            margin-right: 2px;
-            font-size:  20px;
-        }
-    }
-    .redButton {
-        background: #e1000b;
-        &:hover  { background: #ee1c25; }
-        &:active { background: #d7000a; }
-
-        border:     0px;
-
-        color:      #fff;
-        .clickable;
-    }
-    #add-event-button {
-        width:      180px;
-        margin-top: 10px;
-        .redButton;
-    }
-
-    .cell {
-        display: block;
-        overflow: hidden;
-    }
-    .ui-select-menu {
-        z-index: 2;
-    }
-    .ui-select {
-        box-sizing: content-box;
-        margin:     4px;
-    }
-    .datetime > *[class^="ui-"] {
-        margin-left: 0px;
-
-        vertical-align: top;
-
-        input {
-            .ui-small;
-            padding:    0px 10px;
-        }
-        .icon-calendar {
-            padding-right: 6px;
-            vertical-align: middle;
-        }
-        &.select-time {
-            padding: 0px;
-            input {
-                .ui-small;
-                margin-left: 1em;
-            }
-        }
-    }
-
-    form {
-        background: rgba(32,32,32,.8);
-        button[type="submit"] { .redButton; }
-    }
-    form#find-event {
-        display: inline-block;
-        white-space: nowrap;
-
-        padding-right: 8px;
-        padding-left:  2px;
-
-        h2 {
-            display:    inline-block;
-            margin:     0px;
-            padding-bottom: 14px;
-
-            .icon-search {
-                color: #888;
-            }
-        }
-        input {
-            background: white;
-            height:  5ex;
-            outline: 0px;
-            border:  0.5px solid #444;
-            margin:  6px 4px;
-            padding: 0px 10px;
-
-            font-family: "Open Sans", "Helvetica Neue", sans-serif;
-            font-size:      14px;
-            margin-left:    0px;
-
-            vertical-align: middle;
-        }
-        button[type="submit"] {
-            height: 5ex;
-            width:  5ex;
-
-            font-size: 13px;
-            vertical-align: middle;
-
-            .icon-chevron-right {
-                color:      #f2f2f2;
-                font-size:  16px;
-            }
-        }
-    }
-    form#create-event {
-        width:      100%;
-        margin-top: 10px;
-
-        fieldset {
-            display:        inline-block;
-            border:         0px;
-            margin-left:    10px;
-            margin-right:   10px;
-
-            vertical-align: top;
-        }
-        @media (max-width: 1000px) {
-            .datetime .switch {
-                display: none;
-            }
-            fieldset {
-                width:  100%;
-                padding-right: 30px;
-            }
-        }
-        label {
-            display:    inline-block;
-            width:      11em;
-            margin:     8px;
-            margin-left: 0px;
-            float:      left;
-            clear:      left;
-        }
-        label,.md-editor,input {
-            vertical-align: middle;
-            font-size:      13px;
-        }
-        .md-editor,input {
-            outline:    0px;
-            margin:     6px 4px;
-            margin-left: 0px;
-
-            &:not([name$="Date"]):not([name$="Time"]) {
-                width:  100%;
-            }
-        }
-        .md-editor {
-            border:     0.5px solid #444;
-        }
-        :not(.datetime) .ui-select {
-            margin-left: 0px;
-        }
-        .registerLink { // hack
-            margin-top: 8px;
-            margin-bottom: 4px;
-        }
-        label[for="event_registerLink"] {
-            margin-top: 13px;
-        }
-        input[name="title"] {
-            min-width: 21em;
-        }
-        .upload {
-            display: inline-block;
-            margin:  10px 0px;
-        }
-        #image-upload {
-            display:    table-cell;
-            width:      125px;
-            height:     80px;
-            border:     1px #fff dashed;
-            border-radius: 6px;
-
-            font-size:  13px;
-            text-align: center;
-            vertical-align: middle;
-            .clickable;
-
-            img { max-width: 123px;
-                  max-height: 78px; }
-        }
-        input[type="file"] { .hidden; }
-
-        button[type="submit"] {
-            position:   absolute;
-            bottom: 15px; right: 15px;
-
-            padding:    12px 18px;
-            padding-bottom: 12.5px;
-
-            font-size: 22px;
-
-            .icon-plus {
-                font-size: 17px;
-                margin-right: 4px;
-            }
-        }
-        .error {
-            background: #ffeeee;
-            outline: red solid 1px;
-            input { background: #ffeeee; }
-        }
-    }
-}
--- a/assets/css/events.less
+++ b/assets/css/events.less
@ -1,8 +1,6 @@
-@import "event_create";
-@import "event_details";
-@import "map";
@import "mixins";
-@import "marker_info_window";
+@import "events/details";
+@import "events/map";

 body#events {
    * { box-sizing: border-box; }
--- a/assets/css/events/details.less
+++ b/assets/css/events/details.less
--- a/assets/css/events/map.less
+++ b/assets/css/events/map.less
@ -0,0 +1,115 @@
+// variables
+@blueButtonColor: #27aae1;
+.blueButton {
+    background: @blueButtonColor;
+    &:hover  { background: lighten(@blueButtonColor, 10%); }
+    &:active { background: darken(@blueButtonColor, 5%); }
+    border:     0px;
+    color:      #fff;
+    .clickable;
+}
+@oceanBlue: #a5bfdd;
+
+@import "map/marker_info_window";
+@import "map/create";
+@import "map/find";
+
+body#events.map {
+
+    #map-canvas {
+        height: 800px;
+        background: @oceanBlue;
+    }
+
+    .map-overlay {
+        position:  absolute;
+        top: 20px; left: 20px;
+        display: inline;
+        z-index:   1;
+
+        color:  #fafafa;
+
+        .header {
+            display:    inline-block;
+            margin:     0px;
+            padding:    0px 15px;
+            line-height: 45px;
+            white-space: nowrap;
+
+            font-size:      20px;
+            font-weight:    300;
+            color:          #fff;
+        }
+        .overlay-buttons {
+            .header {
+                .blueButton;
+                height:     45px;
+                margin:     10px 5px 10px 0px;
+
+                color:          #fff;
+            }
+            .icon-chevron-right {
+                font-size:      18px;
+                margin-left:    5px;
+            }
+        }
+
+        .expand-form {
+            .clickable;
+            border:     0px;
+            font-size:  20px;
+
+            .icon-plus {
+                margin-right:   3px;
+
+                font-size:      19px;
+                vertical-align: -1px;
+            }
+            .icon-remove {
+                margin-right:   3px;
+            }
+        }
+
+        .cell {
+            display: block;
+            overflow: hidden;
+        }
+        .ui-select-menu {
+            z-index: 2;
+        }
+        .ui-select {
+            box-sizing: content-box;
+            margin:     4px;
+        }
+        .datetime > *[class^="ui-"] {
+            margin-left: 0px;
+
+            vertical-align: top;
+
+            input {
+                .ui-small;
+                padding:    0px 10px;
+            }
+            .icon-calendar {
+                padding-right: 6px;
+                vertical-align: middle;
+            }
+            &.select-time {
+                padding: 0px;
+                input {
+                    .ui-small;
+                    margin-left: 1em;
+                }
+            }
+        }
+        input {
+            background: white;
+            outline:    0px;
+            border:     0px;
+        }
+        form {
+            background: rgba(32,32,32,.8);
+            button[type="submit"] { .blueButton; }
+        }
+    }
+}
--- a/assets/css/events/map/create.less
+++ b/assets/css/events/map/create.less
@ -0,0 +1,101 @@
+@import "ui";
+
+body#events.map form#create-event {
+    width:      100%;
+    margin-top: 10px;
+
+    fieldset {
+        display:        inline-block;
+        border:         0px;
+        margin-left:    10px;
+        margin-right:   10px;
+
+        vertical-align: top;
+    }
+    @media (max-width: 1000px) {
+        .datetime .switch {
+            display: none;
+        }
+        fieldset {
+            width:  100%;
+            padding-right: 30px;
+        }
+    }
+    label {
+        display:    inline-block;
+        width:      11em;
+        margin:     8px;
+        margin-left: 0px;
+        float:      left;
+        clear:      left;
+    }
+    label,.md-editor,input {
+        vertical-align: middle;
+        font-size:      13px;
+    }
+    .md-editor,input {
+        outline:    0px;
+        margin:     6px 4px;
+        margin-left: 0px;
+
+        &:not([name$="Date"]):not([name$="Time"]) {
+            width:  100%;
+        }
+    }
+    .md-editor {
+        border:     0.5px solid #444;
+    }
+    :not(.datetime) .ui-select {
+        margin-left: 0px;
+    }
+    .registerLink { // hack
+        margin-top: 8px;
+        margin-bottom: 4px;
+    }
+    label[for="event_registerLink"] {
+        margin-top: 13px;
+    }
+    input[name="title"] {
+        min-width: 21em;
+    }
+    .upload {
+        margin:     10px 0px;
+        float:      left;
+    }
+    #image-upload {
+        display:    table-cell;
+        width:      125px;
+        height:     80px;
+        border:     1px #fff dashed;
+        border-radius: 6px;
+
+        font-size:  13px;
+        text-align: center;
+        vertical-align: middle;
+        .clickable;
+
+        img { max-width: 123px;
+              max-height: 78px; }
+    }
+    input[type="file"] { .hidden; }
+
+    button[type="submit"] {
+        position:   absolute;
+        bottom: 15px; right: 15px;
+
+        padding:    12px 18px;
+        padding-bottom: 12.5px;
+
+        font-size: 22px;
+
+        .icon-plus {
+            font-size: 17px;
+            margin-right: 4px;
+        }
+    }
+    .error {
+        background: #ffeeee;
+        outline: red solid 1px;
+        input { background: #ffeeee; }
+    }
+}
--- a/assets/css/events/map/find.less
+++ b/assets/css/events/map/find.less
@ -0,0 +1,62 @@
+
+body#events.map form#find-event {
+    display: inline-block;
+    height: 45px;
+    line-height: 100%;
+    white-space: nowrap;
+
+    .header {
+        display:    inline-block;
+        color:      #fff;
+
+        .icon-search {
+            color: #888;
+            margin-left: -1px;
+            margin-right: 2px;
+        }
+    }
+    .ui-input {
+        overflow:   hidden;
+        height:     75%;
+        margin:     0px 2px 3px 0px;
+        padding:    0px 10px;
+
+        .pointer-icon {
+            width:  18px;
+            vertical-align: -8px;
+            margin-left: -4px;
+        }
+        .calendar-icon {
+            width:  16px;
+            vertical-align: -7px;
+        }
+        input {
+            height:     65%;
+            padding:    0px 0px 0px 6px;
+
+            font-size:  14px;
+            vertical-align: -2px;
+
+            &[name="when"] { .ui-small; }
+            &[name="where"] { .ui-medium; }
+        }
+        .icon-remove {
+            .clickable;
+            color:  rgba(0, 0, 0, 0.07);
+            font-size:  18px;
+            vertical-align: middle;
+        }
+    }
+    button[type="submit"] {
+        height: 74%;
+        width:  34px;
+        margin-right: 6px;
+
+        line-height: 100%;
+        font-size:   13px;
+
+        .icon-chevron-right {
+            font-size:  16px;
+        }
+    }
+}
--- a/assets/css/events/map/marker_info_window.less
+++ b/assets/css/events/map/marker_info_window.less
@ -5,7 +5,6 @@
@blackTextColor: black;

@grayButtonColor: rgba(200,200,200,1);
-@blueButtonColor: #27aae1;

 .info-bubble-container {
  .box-shadow(0px, 1px, 20px, rgba(0,0,0,.6));
@ -97,7 +96,7 @@
    color: @grayTextColor;
  }

-vertical-align: bottom;
+  vertical-align: bottom;
  float: left;
  font-size: 16px;
 }
@ -113,9 +112,7 @@ vertical-align: bottom;
  color: @grayButtonColor;
 }

-  a:hover .icon-button-color {
-    color: @blueButtonColor;
-  }
+.icon-button-color { .blueButton; }

 .icon-button-size {
  font-size: 1.5em;
--- a/assets/css/map.less
+++ b/assets/css/map.less
@ -1,8 +0,0 @@
-body#events.map {
-
-    #map-canvas {
-        height: 800px;
-        margin-bottom: -4px;
-    }
-
-}
--- a/static/js/events/forms.js
+++ b/static/js/events/forms.js
@ -1,5 +1,8 @@
 define(['jquery', '../base/ui', 'bootstrap-markdown', 'jquery.timepicker', 'jquery-ui.custom', 'domReady!'],
 function ($, UI, MapMaker) {
+    $('.clear-input').click(function () {
+        $(this).prev('input').val('');
+    });
    $('.datepicker').datepicker().each(function(i, elem) {
        $(elem).next('.icon').click(function () { $(elem).focus() });
    });
--- a/static/js/events/map/forms.js
+++ b/static/js/events/map/forms.js
@ -6,8 +6,8 @@ function ($, EventModel, forms) { return function (mapMaker) {
        ev.preventDefault();
        $findForm.submit();
    });
-    var $when  = $findForm.find('input[name="find-when"]'),
-        $where = $findForm.find('input[name="find-where"]');
+    var $when  = $findForm.find('input[name="when"]'),
+        $where = $findForm.find('input[name="where"]');
    $findForm.on("submit", function(ev) {
        ev.preventDefault();
        EventModel.all(function (models) {
@ -124,9 +124,9 @@ function ($, EventModel, forms) { return function (mapMaker) {
    function toggleCreateForm() {
        $createForm[0].reset();
        $createForm.toggleClass('hidden');
-        $("#add-event-button").toggleClass('hidden');
+        $(".overlay-buttons").toggleClass('hidden');
    }
-    $(".formExpandButton").click(function(ev) {
+    $(".expand-form").click(function(ev) {
        ev.preventDefault();
        toggleCreateForm();
    });
--- a/static/js/events/map/index.js
+++ b/static/js/events/map/index.js
@ -1,29 +1,36 @@
 define(['jquery', 'google', 'map/map_maker', 'map/forms'],
 function ($, google, MapMaker, EventForms) {

-    var mapCenter = new google.maps.LatLng(37.774546, -122.433523);
+    var gm = google.maps;
+    gm.visualRefresh = true;
+    var mapCenter = new gm.LatLng(37.774546, -122.433523);
    var mapOptions = {
        zoom: 2,  // starting zoom level, show whole world
-        mapTypeId: google.maps.MapTypeId.ROADMAP,
+        mapTypeId: gm.MapTypeId.ROADMAP,
        center: mapCenter,
+        backgroundColor: "#a5bfdd", // set color of loading tiles

-        panControl: false,
        rotateControl: false,
-        scaleControl: false,
+        scaleControl: true,
        streetViewControl: true,
        overviewMapControl: false,

        mapTypeControl: false,
        mapTypeControlOptions: {
-            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
+            style: gm.MapTypeControlStyle.HORIZONTAL_BAR,
            mapTypeIds: [ 'webmaker_style',
-                google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE,
-                google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN ]
+                gm.MapTypeId.ROADMAP, gm.MapTypeId.SATELLITE,
+                gm.MapTypeId.HYBRID, gm.MapTypeId.TERRAIN ]
        },

+        panControl: true,
+        panControlOptions: {
+            position:   gm.ControlPosition.TOP_RIGHT
+        },
        zoomControl: true,
        zoomControlOptions: {
-            style: google.maps.ZoomControlStyle.LARGE
+            style:      gm.ZoomControlStyle.LARGE,
+            position:   gm.ControlPosition.TOP_RIGHT
        }
    };
    var mcOptions = {
--- a/views/events/map.html
+++ b/views/events/map.html
@ -4,22 +4,36 @@

 {% block body %}
 {{ super() }}
-<div class="overlay-container">
 <div class="map-overlay">
    <form id="find-event" action="/events" method="GET">
-        <h2><span class="icon-search"></span> Find an event</h2>
+        <h2 class="header"><span class="icon-search"></span> Find an Event</h2>
        <input name="_csrf" type="hidden" value="{{ csrf }}" />
-        <input name="find-where" type="text" placeholder="Where?" />
-        <input name="find-when"  type="text" placeholder="When?" class="datepicker" />
+        <span class="ui-input ui-append">
+            <img class="pointer-icon"  src="/img/event-detail-icon-pointer.png">
+            <input name="where" type="text" placeholder="Where?" />
+            <span class="icon-remove clear-input"></span>
+        </span>
+        <span class="ui-input ui-append">
+            <img class="calendar-icon" src="/img/event-detail-icon-calendar.png">
+            <input name="when"  type="text" placeholder="When?" class="datepicker" />
+            <span class="icon-remove clear-input"></span>
+        </span>
        <button type="submit"><span class="icon-chevron-right"></span></button>
    </form>

-    <div id="add-event-button">
-        <h2 class='formExpandButton'><span class="icon-plus"></span> Add an event</h2>
+    <div class="overlay-buttons">
+        <a class="header expand-form">
+            <span class="icon-plus"></span>
+            Add an Event
+        </a>
+        <a href="/party" id="event-guides" class="header">
+            Event Guides
+            <span class="icon-chevron-right"></span>
+        </a>
    </div>

-    <form id="create-event" action="/events" method="POST" class='hidden'>
-        <h2 class='formExpandButton'><span class="icon-remove"></span> Add an event</h2>
+    <form id="create-event" action="/events" method="POST" class="hidden">
+        <a class="header expand-form"><span class="icon-remove"></span> Add an Event</a><br />
        <fieldset>
            <label for="event_title"> Name your event </label>
            <span class="cell ui-input ui-append"><input id="event_title" name="title"
@ -84,7 +98,6 @@
        </fieldset>
    </form>
 </div>
-</div>

 <div id="map-canvas"></div>