Add mod suggestion panel

src/client/site/browse_page/browse_page.jade

@@ -10,3 +10,4 @@
 
     .right
         .tile_container
+        .view__suggest_mod_panel

src/client/site/browse_page/browse_page.scss

@@ -10,8 +10,11 @@
 
     .right {
         .tile_container {
-            display   : flex;
+            margin-bottom : $size-margin-large;
-            flex-wrap : wrap;
+
+            display      : flex;
+            flex-wrap    : wrap;
+            margin-right : -12px;
 
             .view__mod_tile {
                 flex          : 1 1 calc(50% - 12px); // $size-margin-large / 2
@@ -26,14 +29,16 @@
     .view__browse_page {
         .right {
             .tile_container {
-                flex-direction: column;
+                margin-right : 0;
-                flex-wrap: nowrap;
+
-                align-items: stretch;
+                flex-direction : column;
+                flex-wrap      : nowrap;
+                align-items    : stretch;
 
                 .view__mod_tile {
-                    flex: 0 0 auto;
+                    flex         : 0 0 auto;
-                    margin-right: 0;
+                    margin-right : 0;
-                    width: 100%;
+                    width        : 100%;
                 }
             }
         }

src/client/site/browse_page/browse_page_controller.coffee

@@ -5,8 +5,9 @@
 # All rights reserved.
 #
 
-ModTileController = require './mod_tile/mod_tile_controller'
+ModTileController         = require './mod_tile/mod_tile_controller'
-PageController    = require '../page_controller'
+PageController            = require '../page_controller'
+SuggestModPanelController = require './suggest_mod_panel/suggest_mod_panel_controller'
 
 ########################################################################################################################
 
@@ -31,6 +32,8 @@ module.exports = class BrowsePageController extends PageController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
+        @_suggestController = @addChild SuggestModPanelController, '.view__suggest_mod_panel'
+
         @$tileContainer = @$('.tile_container')
 
     refresh: ->

src/client/site/browse_page/suggest_mod_panel/suggest_mod_panel.jade

@@ -0,0 +1,25 @@
+//-
+//- Crafting Guide - suggest_mod_panel.jade
+//-
+//- Copyright © 2014-2016 by Redwood Labs
+//- All rights reserved.
+//-
+
+.view__suggest_mod_panel
+    .initial
+        .instructions Are we missing a mod you like?  Tell us!
+
+        .entry-form
+            input.name(placeholder="enter the mod name")
+            input.url(placeholder="enter the website")
+            .buttons
+                .button: .bezel: p send
+
+    .sending
+        .instructions Sending...
+
+    .error
+        .instructions Something went wrong!  Please try again.
+
+    .success
+        .instructions Thanks!  We'll add that one to the list.

src/client/site/browse_page/suggest_mod_panel/suggest_mod_panel.scss

@@ -0,0 +1,103 @@
+//
+// Crafting Guide - suggest_mod_panel.scss
+//
+// Copyright © 2014-2016 by Redwood Labs
+// All rights reserved.
+//
+
+.view__suggest_mod_panel {
+    @include floating-panel;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: $size-margin-large;
+
+    .instructions {
+        font-family: $font-family-header;
+        font-size: $font-size-xlarge;
+    }
+
+    .initial {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .instructions {
+            margin-bottom: $size-margin-large;
+        }
+
+        .entry-form {
+            width: $size-minecraft-block * 15;
+
+            display: flex;
+            flex-direction: column;
+
+            input {
+                margin-bottom: $size-margin-medium;
+
+                font-family: $font-family-input;
+                font-size: $font-size-large;
+
+                padding: $size-margin-xsmall $size-margin-small;
+
+                &.invalid {
+                    border-color: $color-error;
+                    color: $color-error;
+                }
+
+                &.valid {
+                    border-color: $color-valid;
+                    color: $color-valid;
+                }
+            }
+
+            .buttons {
+                display: flex;
+                justify-content: flex-end;
+                margin-top: $size-margin-large;
+
+                .button {
+                    flex: 0 0 50%;
+                }
+            }
+        }
+    }
+
+    .error, .sending, .success {
+        margin: $size-margin-xlarge 0;
+    }
+}
+
+@include screen-size(mobile) {
+
+    .view__suggest_mod_panel {
+        .instructions {
+        }
+
+        .initial {
+            .instructions {
+            }
+
+            .entry-form {
+                width: 100%;
+
+                input {
+                    &.invalid {
+                    }
+
+                    &.valid {
+                    }
+                }
+
+                .buttons {
+                    .button {
+                    }
+                }
+            }
+        }
+
+        .error, .sending, .success {
+        }
+    }
+}

src/client/site/browse_page/suggest_mod_panel/suggest_mod_panel_controller.coffee

@@ -0,0 +1,108 @@
+#
+# Crafting Guide - suggest_mod_panel_controller.coffee
+#
+# Copyright © 2014-2016 by Redwood Labs
+# All rights reserved.
+#
+
+BaseController = require '../../base_controller'
+EmailClient    = require '../../../models/site/email_client'
+
+########################################################################################################################
+
+module.exports = class SuggestModPanelController extends BaseController
+
+    constructor: (options={})->
+        options.templateName = 'browse_page/suggest_mod_panel'
+        super options
+
+        @_emailClient = new EmailClient
+
+    # Property Methods #############################################################################
+
+    Object.defineProperties @prototype,
+
+        isFormComplete:
+            get: ->
+                return false unless @name.length > 0
+                return false unless @url.length > 0
+                return true
+
+        name:
+            get: ->
+                return '' unless @rendered
+                return @$nameField.val()
+
+        url:
+            get: ->
+                return '' unless @rendered
+                return @$urlField.val()
+
+    # Event Methods ################################################################################
+
+    onButtonClicked: (event)->
+        return false unless @isFormComplete
+
+        tracker.trackEvent c.tracking.category.feedback, 'suggest-mod', @name
+        @_sendRequest()
+        return false
+
+    onNameChanged: (event)->
+        @refresh()
+        return false
+
+    onUrlChanged: (event)->
+        @refresh()
+        return false
+
+    # BaseController Overrides #####################################################################
+
+    onDidRender: ->
+        @$button       = @$('.button')
+        @$errorPanel   = @$('.error')
+        @$initialPanel = @$('.initial')
+        @$nameField    = @$('input.name')
+        @$sendingPanel = @$('.sending')
+        @$successPanel = @$('.success')
+        @$urlField     = @$('input.url')
+
+        @hide @$errorPanel
+        @hide @$successPanel
+        @hide @$sendingPanel
+        super
+
+    refresh: ->
+        @_refreshButtonState()
+        super
+
+    # Backbone.View Overrides ######################################################################
+
+    events: ->
+        return _.extend super,
+            'input .name':   'onNameChanged'
+            'input .url':    'onUrlChanged'
+            'click .button': 'onButtonClicked'
+
+    # Private Methods ##############################################################################
+
+    _refreshButtonState: ->
+        if @isFormComplete
+            @$button.removeClass 'disabled'
+        else
+            @$button.addClass 'disabled'
+
+    _sendRequest: ->
+        showPanel = ($selectedPanel)=>
+            @hide $panel for $panel in [@$initialPanel, @$sendingPanel, @$successPanel, @$errorPanel]
+            @show $selectedPanel
+
+        showPanel @$sendingPanel
+        w(@_emailClient.send 'mod-suggestion', name:@name, url:@url)
+            .then =>
+                showPanel @$successPanel
+                @$urlField.val ""
+                @$nameField.val ""
+                @refresh()
+            .catch => showPanel @$errorPanel
+            .delay c.duration.slow * 2
+            .then => showPanel @$initialPanel

src/client/styles/colors.scss

@@ -39,6 +39,7 @@ $color-button-highlight  : rgba(255, 255, 255, 0.66);
 $color-button-shadow     : rgba(0, 0, 0, 0.33);
 
 $color-error : #DD444A;
+$color-valid : #1CB703;
 
 $color-link-normal  : $color-blue-medium;
 $color-link-active  : $color-blue-light;