craftingguide/website
1
0
Fork 0
Code Pull Requests Actions Activity

Add button to suggest a new mod

Browse Source
This commit is contained in:
Andrew Miner
2015-01-15 14:43:17 -08:00
parent 6562c5a4b8
commit a50e3d9621
9 changed files with 125 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/main.scss
+51 -19
View File
@@ -19,28 +19,13 @@ All rights reserved.
// Constants ///////////////////////////////////////////////////////////////////////////////////////////////////////////
$color-background: #AAC9FF;
$color-bedrock: #0A0A0A;
$color-brick-dark: #7A7A7A;
$color-brick-light: #D9D9D9;
$color-content: rgba(230, 230, 230, 0.90);
$color-dirt: #906647;
$color-error-new: #CD0000;
$color-error: #F3C2C2;
$color-ice: #8AA7E6;
$color-footer: #3D1D09;
$color-footer-text: white;
$color-gray-faint: #F2F2F2;
$color-gray-light: #CCCCCC;
$color-gray-medium: #A6A6A6;
$color-gray-dark: #8B8B8B;
$color-gray-shadow: #444444;
$color-table-background: white;
$color-toolbar-background: rgba(255, 255, 255, 0.75);
// Font Faces //////////////////////////////////////////////////////////////////////////////////////
$font-family-header: 'PressStart';
$font-family-normal: sans-serif;
$font-family-input: monospace;
$font-family-input: monospace;
// Font Sizes //////////////////////////////////////////////////////////////////////////////////////
$font-size-small: 1.1em;
$font-size-normal: 1.3em;
@@ -48,6 +33,37 @@ $font-size-large: 1.6em;
$font-size-x-large: 2.0em;
$font-size-xx-large: 3.0em;
// Gray Palette ////////////////////////////////////////////////////////////////////////////////////
$color-gray-faint: #F2F2F2;
$color-gray-light: #CCCCCC;
$color-gray-medium: #A6A6A6;
$color-gray-dark: #8B8B8B;
$color-gray-shadow: #444444;
// Object Background Colors ////////////////////////////////////////////////////////////////////////
$color-bedrock: #0A0A0A;
$color-brick-dark: #7A7A7A;
$color-brick-light: #D9D9D9;
$color-dirt: #906647;
$color-ice: #8AA7E6;
// Style Colors ////////////////////////////////////////////////////////////////////////////////////
$color-active: #5C8AE6;
$color-active-hover: #2E6BE6;
$color-background: #AAC9FF;
$color-background-panel: #FFFFFF;
$color-background-toolbar: rgba(255, 255, 255, 0.75);
$color-content: rgba(230, 230, 230, 0.90);
$color-error-new: #CD0000;
$color-error: #F3C2C2;
$color-footer: #3D1D09;
$color-footer-text: #FFFFFF;
// Z-Index Layers //////////////////////////////////////////////////////////////////////////////////
$layer-normal: 0;
$layer-screen: 5;
$layer-dialog: 10;
@@ -59,6 +75,22 @@ body {
font-size: 10px;
}
button {
background: $color-gray-faint;
border: 0.1em solid $color-gray-medium;
border-radius: 1em;
color: $color-active;
cursor: pointer;
font-size: $font-size-normal;
font-weight: bold;
padding: 0.1em 1em;
&:hover {
background: white;
color: $color-active-hover;
}
}
h1 {
margin-bottom: 1em;
src/css/templates/crafting_table.scss
+1 -1
View File
@@ -12,7 +12,7 @@ All rights reserved.
.panel {
position: absolute; top: 5em; right: 2em; bottom: 0; left: 2em;
background: $color-table-background;
background: $color-background-panel;
.prev {
background: url('/images/arrow-left-disabled.png');
src/css/templates/inventory.scss
+3 -3
View File
@@ -15,7 +15,7 @@ All rights reserved.
.panel {
position: absolute; top: 5em; right: 2em; bottom: 0; left: 2em;
background: $color-table-background;
background: $color-background-panel;
text-align: right;
}
@@ -26,8 +26,8 @@ All rights reserved.
}
.toolbar {
position: absolute; right: 0; bottom: 0; left: 0; height: 3em;
background: $color-toolbar-background;
position: absolute; right: 0; bottom: 0; left: 0; height: 3.5em;
background: $color-background-toolbar;
border-top: 1px solid $color-gray-light;
}
src/css/templates/mod_pack.scss
+15 -5
View File
@@ -6,15 +6,10 @@ All rights reserved.
*/
.view__mod_pack {
button {
@include center-vertical;
position: absolute; right: 1em;
}
input { border: 0; font-size: 1.5em; width: 90%; }
table {
background: white;
margin: 0 auto;
width: 100%;
@@ -28,4 +23,19 @@ All rights reserved.
td:nth-child(2) { width: 30%; }
td:nth-child(3) { width: 65%; border-left: 0.1em solid $color-brick-light; }
}
.panel {
background: white;
}
.toolbar {
position: relative; width: 35%;
margin-top: 1em;
padding: 1em 1em;
text-align: center;
button {
position: relative; width: 66%;
}
}
}
src/css/templates/stack.scss
+1 -1
View File
@@ -12,7 +12,7 @@ All rights reserved.
.quantity {
border-radius: 0.75em;
background: $color-ice;
color: $color-table-background;
color: $color-background-panel;
font-size: $font-size-normal;
font-weight: bold;
text-align: center;
src/scripts/controllers/feedback_controller.coffee
+27 -16
View File
@@ -21,6 +21,13 @@ module.exports = class FeedbackController extends BaseController
Object.defineProperty this, 'isOpen', get:-> @$el.offset().left is 0
# Public Methods ###############################################################################
enterFeedback: (message)->
promise = w(true)
if not @isOpen then promise = @onToggle()
promise.then => @$commentField.val message
# Event Methods ################################################################################
onSendClicked: ->
@@ -55,24 +62,28 @@ module.exports = class FeedbackController extends BaseController
@$sendButton.attr 'disabled', 'disabled'
onToggle: ->
@$screen.off 'click'
w.promise (resolve)=>
@$screen.off 'click'
if @isOpen
@$screen.css display:'none'
@$el.animate {left:-@$el.outerWidth()}, duration:Duration.normal, complete:=>
@$commentField.val ''
@$('input, textarea').blur()
else
@$screen.on 'click', => @onToggle()
@$screen.css display:'block'
if @isOpen
@$screen.css display:'none'
@$el.animate {left:-@$el.outerWidth()}, duration:Duration.normal, complete:=>
@$commentField.val ''
@$('input, textarea').blur()
resolve()
else
@$screen.on 'click', => @onToggle()
@$screen.css display:'block'
@$el.animate {left:0}, duration:Duration.normal, complete:=>
if @$nameField.val().length is 0
@$nameField.focus()
else if @$emailField.val().length is 0
@$emailField.focus()
else
@$commentField.focus()
@$el.animate {left:0}, duration:Duration.normal, complete:=>
if @$nameField.val().length is 0
@$nameField.focus()
else if @$emailField.val().length is 0
@$emailField.focus()
else
@$commentField.focus()
resolve()
# BaseController Overrides #####################################################################
src/scripts/controllers/mod_pack_controller.coffee
+17
View File
@@ -20,6 +20,12 @@ module.exports = class ModPackController extends BaseController
options.templateName = 'mod_pack'
super options
# Event Methods ################################################################################
onSuggestModClicked: ->
return unless global.feedbackController?
global.feedbackController.enterFeedback 'Please add mod:\n\n'
# BaseController Overrides #####################################################################
onWillRender: ->
@@ -28,6 +34,7 @@ module.exports = class ModPackController extends BaseController
onDidRender: ->
@$table = @$('table')
@$toolbar = @$('.toolbar')
super
refresh: ->
@@ -42,4 +49,14 @@ module.exports = class ModPackController extends BaseController
@_modVersionControllers.push controller
@$table.prepend controller.$el
if global.feedbackController?
@$toolbar.show duration:0
else
@$toolbar.hide duration:0
super
# Backbone.View Overrides ######################################################################
events:
'click button[name="suggestMod"]': 'onSuggestModClicked'
src/scripts/main.coffee
+2 -1
View File
@@ -14,6 +14,7 @@ CraftingGuideRouter = require './crafting_guide_router'
if typeof(global) is 'undefined'
window.global = window
global = window.global
global.logger = new Logger
global.router = new CraftingGuideRouter
@@ -31,7 +32,7 @@ switch window.location.hostname
global.env = 'production'
logger.level = Logger.INFO
feedbackController = new FeedbackController el:'.view__feedback'
global.feedbackController = new FeedbackController el:'.view__feedback'
feedbackController.render()
logger.info "CraftingGuide is ready"
src/templates/mod_pack.jade
+8 -4
View File
@@ -10,7 +10,11 @@
img(src="/images/bookshelf.png")
p Mod Pack
table
tr
td  
td  
.panel
table
tr
td  
td  
.toolbar
button(name="suggestMod") suggest a mod