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

Initial version of header nav bar

Browse Source
This commit is contained in:
Andrew Miner
2015-02-28 13:47:51 -08:00
parent 6f6206e986
commit 7210245cc6
18 changed files with 250 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/main.scss
+9 -3
View File
@@ -26,6 +26,12 @@ All rights reserved.
// Constants ///////////////////////////////////////////////////////////////////////////////////////////////////////////
// Animation Speeds ////////////////////////////////////////////////////////////////////////////////
$animate-fast: 0.1s;
$animate-normal: 0.25s;
$animate-slow: 0.6s;
// Font Faces //////////////////////////////////////////////////////////////////////////////////////
$font-family-header: 'Silkscreen';
@@ -73,9 +79,9 @@ $color-text: #000000;
// Z-Index Layers //////////////////////////////////////////////////////////////////////////////////
$layer-normal: 0;
$layer-screen: 5;
$layer-dialog: 10;
$layer-normal: 100;
$layer-screen: 500;
$layer-dialog: 1000;
// Child Stylesheets ///////////////////////////////////////////////////////////////////////////////////////////////////
src/css/templates/crafting_page.scss → src/css/templates/craft_page.scss
+2 -2
View File
@@ -1,11 +1,11 @@
/*
Crafting Guide - crafting_page.scss
Crafting Guide - craft_page.scss
Copyright (c) 2014-2015 by Redwood Labs
All rights reserved.
*/
.view__crafting_page {
.view__craft_page {
& > div {
display: inline-block;
src/css/templates/index.scss
+1 -1
View File
@@ -6,7 +6,7 @@ All rights reserved.
*/
@import 'crafting_grid';
@import 'crafting_page';
@import 'craft_page';
@import 'crafting_table';
@import 'feedback';
@import 'full_recipe';
src/css/views.scss
+49 -2
View File
@@ -41,7 +41,7 @@ All rights reserved.
.view__header {
background: $color-gray-light;
position: relative; height: 8em;
position: relative; height: 13em;
margin-top: 3.2em;
h1 {
@@ -54,7 +54,54 @@ All rights reserved.
.divider {
background: $color-brick-dark url('/images/stone_brick.png');
position: absolute; bottom: 0; height: 3.2em; width: 100%;
position: absolute; bottom: 5em; height: 3.2em; width: 100%;
}
.navBar {
position: absolute; right: 2em; bottom: 1em; left: 2em; height: 3em;
a {
position: relative; height: 3em; width: 15em;
background: $color-gray-faint;
border: 0.1em solid $color-gray-medium;
border-radius: 0 1.5em 1.5em 0;
cursor: pointer;
display: inline-block;
margin-left: -1.5em;
transition: background $animate-normal;
&:first-child {
border-radius: 1.5em;
margin-left: 0;
}
&:hover {
background: $color-background-panel;
}
&.selected {
background: $color-active;
p {
color: $color-background-panel;
}
}
p {
position: absolute; top: 50%; left: 50%; width: 100%;
@include transform(translateX(-50%) translateY(-50%));
color: $color-active;
font-family: $font-family-normal;
font-size: $font-size-normal;
font-weight: bold;
text-align: center;
vertical-align: middle;
transition: color $animate-normal;
}
}
}
}
src/pages/includes/_header.jade
+14
View File
@@ -10,3 +10,17 @@
a.logo(href="/"): img(src="/images/workbench_front.png")
p Crafting Guide for Minecraft
.divider.bottom
.navBar
a(data-page="whats_new", href="/")
p What's New?
.dot
a(data-page="configure", href="/configure")
p Configure
.dot
a(data-page="browse", href="/browse")
p Browse
.dot
a(data-page="craft", href="/craft")
p Craft
.dot
src/scripts/constants.coffee
+3 -3
View File
@@ -55,10 +55,10 @@ exports.Text = Text = {}
Text.title = 'Crafting Guide for Minecraft | The Ultimate Step-by-Step Tutorial for Making Anything in Minecraft'
exports.Url = Url = {}
Url.crafting = _.template "/crafting/<%= inventoryText %>"
Url.crafting = _.template "/craft/<%= inventoryText %>"
Url.itemIcon = _.template "/data/<%= modSlug %>/<%= modVersion %>/images/<%= itemSlug %>.png"
Url.item = _.template "/mod/<%= modSlug %>/<%= itemSlug %>"
Url.mod = _.template "/mod/<%= modSlug %>"
Url.item = _.template "/browse/<%= modSlug %>/<%= itemSlug %>"
Url.mod = _.template "/browse/<%= modSlug %>"
Url.modData = _.template "/data/<%= modSlug %>/mod.cg"
Url.modVersion = _.template "/data/<%= modSlug %>/<%= modVersion %>/mod-version.cg"
Url.modLogoImage = _.template "/data/<%= modSlug %>/logo.png"
src/scripts/controllers/browse_page_controller.coffee
+16
View File
@@ -0,0 +1,16 @@
###
Crafting Guide - browse_page_controller.coffee
Copyright (c) 2015 by Redwood Labs
All rights reserved.
###
BaseController = require './base_controller'
########################################################################################################################
module.exports = class BrowsePageController extends BaseController
constructor: (options={})->
options.templateName = 'browse_page'
super options
src/scripts/controllers/configure_page_controller.coffee
+16
View File
@@ -0,0 +1,16 @@
###
Crafting Guide - configure_page_controller.coffee
Copyright (c) 2015 by Redwood Labs
All rights reserved.
###
BaseController = require './base_controller'
########################################################################################################################
module.exports = class ConfigurePageController extends BaseController
constructor: (options={})->
options.templateName = 'configure_page'
super options
src/scripts/controllers/crafting_page_controller.coffee → src/scripts/controllers/craft_page_controller.coffee
+3 -3
View File
@@ -1,5 +1,5 @@
###
Crafting Guide - crafting_page_controller.coffee
Crafting Guide - craft_page_controller.coffee
Copyright (c) 2014-2015 by Redwood Labs
All rights reserved.
@@ -10,7 +10,7 @@ CraftingTableController = require './crafting_table_controller'
{Event} = require '../constants'
ImageLoader = require './image_loader'
InventoryController = require './inventory_controller'
CraftingPage = require '../models/crafting_page'
CraftingPage = require '../models/craft_page'
ModPackController = require './mod_pack_controller'
NameFinder = require '../models/name_finder'
Storage = require '../models/storage'
@@ -27,7 +27,7 @@ module.exports = class CraftingPageController extends BaseController
options.model ?= new CraftingPage modPack:options.modPack
options.storage ?= new Storage storage:window.localStorage
options.templateName = 'crafting_page'
options.templateName = 'craft_page'
super options
@_imageLoader = options.imageLoader
src/scripts/controllers/header_controller.coffee
+23 -1
View File
@@ -20,14 +20,36 @@ module.exports = class HeaderController extends BaseController
router.navigate '/', trigger:true
return false
onNavItemClicked: (event)->
return true unless $(event.currentTarget).attr('href')?
router.navigate $(event.currentTarget).attr('href'), trigger:true
return false
# BaseController Overrides #####################################################################
render: ->
# Overriding render because the header is already part of the stock page layout, and we
# don't need to replace it here.
@_rendered = true
@$navLinks = ($(el) for el in @$('.navBar a'))
zIndex = @$navLinks.length + 100
for $navLink in @$navLinks
$navLink.css 'z-index', zIndex--
refresh: ->
for $navLink in @$navLinks
logger.debug "@model: #{@model}, page: #{$navLink.data('page')}"
if $navLink.data('page') is @model
$navLink.addClass 'selected'
else
$navLink.removeClass 'selected'
# Backbone.View Overrides ######################################################################
events: ->
return _.extend super,
'click a.logo': 'onLogoClicked'
'click a.logo': 'onLogoClicked'
'click .navBar a': 'onNavItemClicked'
src/scripts/controllers/whats_new_page_controller.coffee
+16
View File
@@ -0,0 +1,16 @@
###
Crafting Guide - whats_new_page_controller.coffee
Copyright (c) 2015 by Redwood Labs
All rights reserved.
###
BaseController = require './base_controller'
########################################################################################################################
module.exports = class WhatsNewController extends BaseController
constructor: (options={})->
options.templateName = 'whats_new_page'
super options
src/scripts/crafting_guide_router.coffee
+69 -28
View File
@@ -6,21 +6,24 @@ All rights reserved.
###
CraftingPageController = require './controllers/crafting_page_controller'
{DefaultMods} = require './constants'
{Duration} = require './constants'
{Event} = require './constants'
HeaderController = require './controllers/header_controller'
ItemPageController = require './controllers/item_page_controller'
ItemSlug = require './models/item_slug'
ImageLoader = require './controllers/image_loader'
Mod = require './models/mod'
ModPack = require './models/mod_pack'
ModPageController = require './controllers/mod_page_controller'
{Opacity} = require './constants'
Storage = require './models/storage'
{Url} = require './constants'
UrlParams = require './url_params'
BrowsePageController = require './controllers/browse_page_controller'
CraftPageController = require './controllers/craft_page_controller'
ConfigurePageController = require './controllers/configure_page_controller'
{DefaultMods} = require './constants'
{Duration} = require './constants'
{Event} = require './constants'
HeaderController = require './controllers/header_controller'
ItemPageController = require './controllers/item_page_controller'
ItemSlug = require './models/item_slug'
ImageLoader = require './controllers/image_loader'
Mod = require './models/mod'
ModPack = require './models/mod_pack'
ModPageController = require './controllers/mod_page_controller'
{Opacity} = require './constants'
Storage = require './models/storage'
{Url} = require './constants'
UrlParams = require './url_params'
WhatsNewPageController = require './controllers/whats_new_page_controller'
########################################################################################################################
@@ -38,6 +41,7 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
@_defaultOptions = imageLoader:@imageLoader, modPack:@modPack, storage:@storage
@headerController = new HeaderController el:'.view__header'
@headerController.render()
# Public Methods ###############################################################################
@@ -60,36 +64,71 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
@_recordPageView()
routes:
'': 'root'
'item/:itemSlug': 'item'
'crafting/(:text)': 'crafting'
'mod/:modSlug': 'mod'
'mod/:modSlug/:itemSlug': 'modItem'
'': 'route__whats_new'
'browse': 'route__browse'
'browse/:modSlug': 'route__browseMod'
'browse/:modSlug/:itemSlug': 'route__browseModItem'
'configure': 'route__configure'
'craft(/:text)': 'route__craft'
'item/:itemSlug': 'deprecated__item'
'crafting/(:text)': 'deprecated__crafting'
'mod/:modSlug': 'deprecated__mod'
'mod/:modSlug/:itemSlug': 'deprecated__modItem'
# Route Methods ################################################################################
crafting: (text)->
controller = new CraftingPageController _.extend {}, @_defaultOptions
route__whats_new: ->
params = new UrlParams recipeName:{type:'string'}, count:{type:'integer'}
if params.recipeName?
@deprecated__v1_root params
return
@_setPage 'whats_new', new WhatsNewPageController _.extend {}, @_defaultOptions
route__browse: ->
@_setPage 'browse', new BrowsePageController _.extend {}, @_defaultOptions
route__browseMod: (modSlug)->
controller = new ModPageController _.extend {}, @_defaultOptions
controller.model = @modPack.getMod modSlug
@_setPage 'browseMod', controller
route__browseModItem: (modSlug, itemSlug)->
slug = new ItemSlug modSlug, itemSlug
controller = new ItemPageController _.extend {itemSlug:slug}, @_defaultOptions
@_setPage 'browseModItem', controller
route__configure: ->
@_setPage 'configure', new ConfigurePageController _.extend {}, @_defaultOptions
route__craft: (text)->
controller = new CraftPageController _.extend {}, @_defaultOptions
controller.model.params = inventoryText:text
@_setPage 'craft', controller
# Deprecated Route Methods #####################################################################
deprecated__crafting: (text)->
controller = new CraftPageController _.extend {}, @_defaultOptions
controller.model.params = inventoryText:text
@_setPage 'crafting', controller
item: (itemSlug)->
deprecated__item: (itemSlug)->
controller = new ItemPageController _.extend {itemSlug:itemSlug}, @_defaultOptions
@_setPage 'item', controller
modItem: (modSlug, itemSlug)->
deprecated__modItem: (modSlug, itemSlug)->
slug = new ItemSlug modSlug, itemSlug
controller = new ItemPageController _.extend {itemSlug:slug}, @_defaultOptions
@_setPage 'item', controller
mod: (modSlug)->
deprecated__mod: (modSlug)->
controller = new ModPageController _.extend {}, @_defaultOptions
controller.model = @modPack.getMod modSlug
@_setPage 'mod', controller
root: ->
params = new UrlParams recipeName:{type:'string'}, count:{type:'integer'}
deprecated__v1_root: (params)->
text = ''
if params.recipeName?
if params.count? and params.count > 1
@@ -114,6 +153,8 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
return if @_controller is controller
logger.info -> "changing to page controller: #{controller.constructor.name}"
@headerController.model = page
showDuration = Duration.normal
show = =>
@_page = page
src/scripts/models/crafting_page.coffee → src/scripts/models/craft_page.coffee
+1 -1
View File
@@ -1,5 +1,5 @@
###
Crafting Guide - crafting_page.coffee
Crafting Guide - craft_page.coffee
Copyright (c) 2014-2015 by Redwood Labs
All rights reserved.
src/templates/browse_page.jade
+8
View File
@@ -0,0 +1,8 @@
//-
//- Crafting Guide - browse_page.jade
//-
//- Copyright (c) 2015 by Redwood Labs
//- All rights reserved.
//-
h1 Browse
src/templates/configure_page.jade
+8
View File
@@ -0,0 +1,8 @@
//-
//- Crafting Guide - configure_page.jade
//-
//- Copyright (c) 2015 by Redwood Labs
//- All rights reserved.
//-
h1 Configure
src/templates/crafting_page.jade → src/templates/craft_page.jade
+1 -1
View File
@@ -5,7 +5,7 @@
//- All rights reserved.
//-
.view__crafting_page
.view__craft_page
.view__inventory.want
.view__inventory.have
.view__inventory.need
src/templates/whats_new_page.jade
+8
View File
@@ -0,0 +1,8 @@
//-
//- Crafting Guide - whats_new_page.jade
//-
//- Copyright (c) 2015 by Redwood Labs
//- All rights reserved.
//-
h1 What's new?