Add mod suggestion panel
This commit is contained in:
Andrew Miner
@@ -9,4 +9,5 @@
|
||||
.left
|
||||
|
||||
.right
|
||||
.tile_container
|
||||
.tile_container
|
||||
.view__suggest_mod_panel
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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: ->
|
||||
|
||||
@@ -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.
|
||||
@@ -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 {
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user