diff --git a/src/client/site/browse_page/browse_page.jade b/src/client/site/browse_page/browse_page.jade index 6d60f8d3c..1a93459fa 100644 --- a/src/client/site/browse_page/browse_page.jade +++ b/src/client/site/browse_page/browse_page.jade @@ -9,4 +9,5 @@ .left .right - .tile_container \ No newline at end of file + .tile_container + .view__suggest_mod_panel \ No newline at end of file diff --git a/src/client/site/browse_page/browse_page.scss b/src/client/site/browse_page/browse_page.scss index c562dedb9..a9554ea0f 100644 --- a/src/client/site/browse_page/browse_page.scss +++ b/src/client/site/browse_page/browse_page.scss @@ -10,8 +10,11 @@ .right { .tile_container { - display : flex; - flex-wrap : wrap; + margin-bottom : $size-margin-large; + + 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; - flex-wrap: nowrap; - align-items: stretch; + margin-right : 0; + + flex-direction : column; + flex-wrap : nowrap; + align-items : stretch; .view__mod_tile { - flex: 0 0 auto; - margin-right: 0; - width: 100%; + flex : 0 0 auto; + margin-right : 0; + width : 100%; } } } diff --git a/src/client/site/browse_page/browse_page_controller.coffee b/src/client/site/browse_page/browse_page_controller.coffee index 88f656f00..11d6437f2 100644 --- a/src/client/site/browse_page/browse_page_controller.coffee +++ b/src/client/site/browse_page/browse_page_controller.coffee @@ -5,8 +5,9 @@ # All rights reserved. # -ModTileController = require './mod_tile/mod_tile_controller' -PageController = require '../page_controller' +ModTileController = require './mod_tile/mod_tile_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: -> diff --git a/src/client/site/browse_page/suggest_mod_panel/suggest_mod_panel.jade b/src/client/site/browse_page/suggest_mod_panel/suggest_mod_panel.jade new file mode 100644 index 000000000..1e30e69e3 --- /dev/null +++ b/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. diff --git a/src/client/site/browse_page/suggest_mod_panel/suggest_mod_panel.scss b/src/client/site/browse_page/suggest_mod_panel/suggest_mod_panel.scss new file mode 100644 index 000000000..2eccf22b1 --- /dev/null +++ b/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 { + } + } +} diff --git a/src/client/site/browse_page/suggest_mod_panel/suggest_mod_panel_controller.coffee b/src/client/site/browse_page/suggest_mod_panel/suggest_mod_panel_controller.coffee new file mode 100644 index 000000000..e0e0e8fa1 --- /dev/null +++ b/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 diff --git a/src/client/styles/colors.scss b/src/client/styles/colors.scss index 8293d21fb..a8536559c 100644 --- a/src/client/styles/colors.scss +++ b/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;