Refactor website with new design & structure

src/client/site/header/header.jade

@@ -0,0 +1,24 @@
+//-
+//- Crafting Guide - header.jade
+//-
+//- Copyright © 2014-2016 by Redwood Labs
+//- All rights reserved.
+//-
+
+.view__header
+    .top-row
+        a.logo(href="/")
+            img(src="/images/site-icon.png")
+
+        h1 Minecraft Crafting Guide
+
+        .addthis_sharing_toolbox
+
+    .divider
+        .button.craft: .bezel: p Craft
+        .button.browse: .bezel: p Browse
+        .button.news: .bezel: p News
+        .button.search: .bezel: p Search
+        .button.login: .bezel: p Login
+
+    .breadcrumbs

src/client/site/header/header.scss

@@ -0,0 +1,97 @@
+//
+// Crafting Guide - header.scss
+//
+// Copyright © 2014-2016 by Redwood Labs
+// All rights reserved.
+//
+
+.view__header {
+    background: $color-gray-light;
+
+    display        : flex;
+    flex-direction : column;
+
+    .top-row {
+        display     : flex;
+        align-items : center;
+
+        a {
+            flex         : 0 0 auto;
+            height       : $size-minecraft-block * 1.5;
+            width        : $size-minecraft-block * 1.5;
+            margin-right : $size-margin-medium;
+
+            img {
+                position : relative;
+                top      : -$size-minecraft-block * 0.5;
+                left     : -$size-minecraft-block * 0.5;
+                height   : $size-minecraft-block * 2.0;
+                width    : $size-minecraft-block * 2.0;
+            }
+        }
+
+        h1 {
+            flex: 1 1 auto;
+        }
+
+        .addthis_sharing_toolbox {
+            flex         : 0 0 auto;
+            min-height   : 37px;
+            min-width    : 144px;
+            margin-right : $size-margin-small;
+
+
+            &.placeholder {
+                border     : 1px solid orange;
+                text-align : center;
+
+                &:before {
+                    color       : orange;
+                    content     : "ADD THIS";
+                    font-family : $font-family-header;
+                    font-size   : $font-size-large;
+                    line-height : 37px;
+                }
+            }
+        }
+    }
+
+    .divider {
+        background : $color-planks url('/images/planks.png');
+
+        align-items       : center;
+        display           : flex;
+        flex-wrap         : wrap;
+        justify-content   : space-around;
+        padding           : $size-margin-medium $size-margin-medium;
+        padding-top       : 0;
+
+        .button {
+            flex      : 1 1 20%;
+            min-width : 4 * $size-minecraft-block;
+            max-width : 5 * $size-minecraft-block;
+            margin-top: $size-margin-medium;
+        }
+    }
+
+    .breadcrumbs {
+        background: $color-screen;
+        font-family: $font-family-control;
+        font-size: $font-size-medium;
+
+        padding: $size-margin-small $size-margin-medium;
+
+        &:before {
+            content: "⟩";
+            margin-right: $size-margin-medium;
+        }
+
+        a {
+            text-decoration: underline;
+        }
+
+        span {
+            margin: 0 $size-margin-medium;
+        }
+    }
+}

src/client/site/header/header_controller.coffee

@@ -0,0 +1,114 @@
+#
+# Crafting Guide - header_controller.coffee
+#
+# Copyright © 2014-2016 by Redwood Labs
+# All rights reserved.
+#
+
+BaseController         = require '../base_controller'
+ItemSelectorController = require '../common/item_selector/item_selector_controller'
+
+########################################################################################################################
+
+module.exports = class HeaderController extends BaseController
+
+    constructor: (options={})->
+        if not options.modPack? then throw new Error 'options.modPack is required'
+        options.model        ?= {}
+        options.templateName  = 'header'
+        super options
+
+        @_modPack = options.modPack
+
+        global.site.on c.event.change + ':user', => @tryRefresh()
+
+    # Event Methods ################################################################################
+
+    onCraft: ->
+        @router.navigate '/craft', trigger:true
+        return false
+
+    onBrowse: ->
+        @router.navigate '/browse', trigger:true
+        return false
+
+    onLogin: ->
+        if global.site.user?
+            global.site.logout()
+        else
+            @router.navigate '/login', trigger:true
+        return false
+
+    onNews: ->
+        @router.navigate '/news', trigger:true
+        return false
+
+    onSearch: ->
+        @_selector.launch()
+            .then (itemSlug)=>
+                itemDisplay = @_modPack.findItemDisplay itemSlug
+                @router.navigate itemDisplay.itemUrl, trigger:true
+        return false
+
+    # BaseController Overrides #####################################################################
+
+    onDidRender: ->
+        @_selector = @addChild ItemSelectorController, null, modPack: @_modPack
+
+        if global.env in c.productionEnvs
+            addThisUrl = 'http://s7.addthis.com/js/300/addthis_widget.js?pubid=ra-54f3c9717b2e530d'
+            $('body').append "<script async=\"async\" src=\"#{addThisUrl}\"></script>"
+        else
+            @$('.addthis_sharing_toolbox').addClass 'placeholder'
+
+        @$breadcrumbs      = @$('.breadcrumbs')
+        @$loginButtonLabel = @$('.button.login p')
+        @$title            = $('title')
+        super
+
+    onWillChangeModel: (oldModel, newModel)->
+        if oldModel? then @stopListening oldModel.controller
+        @listenTo newModel.controller, c.event.change, => @tryRefresh()
+        return newModel
+
+    refresh: ->
+        @$loginButtonLabel.text if global.site.user? then "Logout" else "Login"
+
+        @_refreshBreadcrumbs()
+        @_refreshTitle()
+        super
+
+    # Backbone.View Overrides ######################################################################
+
+    events: ->
+        _.extend super,
+            'click .craft':         'onCraft'
+            'click .browse':        'onBrowse'
+            'click .login':         'onLogin'
+            'click .news':          'onNews'
+            'click .search':        'onSearch'
+            'click .breadcrumbs a': 'routeLinkClick'
+
+    # Private Methods ##############################################################################
+
+    _refreshBreadcrumbs: ->
+        breadcrumbs = @model?.controller?.getBreadcrumbs()
+        breadcrumbs ?= []
+
+        if breadcrumbs.length > 0
+            @$breadcrumbs.empty()
+
+            for crumb, index in breadcrumbs
+                if index isnt 0 then @$breadcrumbs.append $("<span>⟩</span>")
+                @$breadcrumbs.append crumb
+
+            @show @$breadcrumbs
+        else
+            @hide @$breadcrumbs
+
+    _refreshTitle: ->
+        title = @model?.controller?.getTitle()
+        if title
+            @$title.text c.text.titleWithText text: title
+        else
+            @$title.text c.text.title()