Add initial version of the Browse page

src/css/templates/browse_page.scss

@@ -0,0 +1,14 @@
+/*
+Crafting Guide - browse_page.scss
+
+Copyright (C) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__browse_page {
+
+    .view__mod {
+        margin: 0 1em 1em 0;
+        width: 37em;
+    }
+}

src/css/templates/index.scss

@@ -5,6 +5,7 @@ Copyright (c) 2014-2015 by Redwood Labs
 All rights reserved.
 */
 
+@import 'browse_page';
 @import 'crafting_grid';
 @import 'craft_page';
 @import 'crafting_table';
@@ -16,6 +17,7 @@ All rights reserved.
 @import 'item';
 @import 'item_page';
 @import 'minimal_recipe';
+@import 'mod';
 @import 'mod_pack';
 @import 'mod_page';
 @import 'mod_selector';

src/css/templates/mod.scss

@@ -0,0 +1,58 @@
+/*
+Crafting Guide - mod.scss
+
+Copyright (C) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__mod {
+    position: relative; height: 18em;
+
+    background: $color-background-panel;
+    display: inline-block;
+    padding: 0.2em;
+    text-decoration: none;
+    vertical-align: top;
+
+    transition:
+        height $animate-normal,
+        opacity $animate-normal;
+
+    &:hover {
+        border: 0.2em solid $color-link;
+        padding: 0;
+
+        .name {
+            color: $color-link;
+            text-decoration: underline;
+        }
+    }
+
+    &.empty {
+        height: 0;
+    }
+
+    &.removing {
+        height: 0;
+        opacity: 0;
+    }
+
+    .description {
+        margin: 1em;
+    }
+
+    a {
+        color: $color-text;
+        text-decoration: none;
+    }
+
+    h3 {
+        font-size: $font-size-normal;
+        margin-top: 1em;
+    }
+
+    img {
+        float: left;
+        margin: 1em;
+    }
+}

src/css/templates/mod_selector.scss

@@ -5,7 +5,7 @@ Copyright (c) 2014-2015 by Redwood Labs
 All rights reserved.
 */
 
-.view__mod {
+.view__mod_selector {
     position: relative; width: 100%;
     display: table-row;
 

src/scripts/constants.coffee

@@ -35,6 +35,7 @@ Event.request        = 'request'        # model
 Event.route          = 'route'
 Event.sort           = 'sort'
 Event.sync           = 'sync'           # model, response
+Event.transitionEnd  = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'
 
 exports.Key = Key = {}
 Key.Return = 13
@@ -60,6 +61,7 @@ Url.itemIcon     = _.template "/data/<%= modSlug %>/<%= modVersion %>/images/<%=
 Url.item         = _.template "/browse/<%= modSlug %>/<%= itemSlug %>"
 Url.mod          = _.template "/browse/<%= modSlug %>"
 Url.modData      = _.template "/data/<%= modSlug %>/mod.cg"
+Url.modLogo      = _.template "/data/<%= modSlug %>/logo.png"
 Url.modVersion   = _.template "/data/<%= modSlug %>/<%= modVersion %>/mod-version.cg"
 Url.modLogoImage = _.template "/data/<%= modSlug %>/logo.png"
 

src/scripts/controllers/browse_page_controller.coffee

@@ -6,11 +6,48 @@ All rights reserved.
 ###
 
 BaseController = require './base_controller'
+{Duration}     = require '../constants'
+{Event}        = require '../constants'
+ModController  = require './mod_controller'
 
 ########################################################################################################################
 
 module.exports = class BrowsePageController extends BaseController
 
     constructor: (options={})->
+        if not options.modPack? then throw new Error 'options.modPack is required'
         options.templateName = 'browse_page'
         super options
+
+        @modPack = options.modPack
+        @modPack.on Event.change, => @tryRefresh()
+
+    # BaseController Overrides #####################################################################
+
+    onDidRender: ->
+        @$modContainer = @$('.mods')
+        super
+
+    refresh: ->
+        @_controllers ?= []
+        controllerIndex = 0
+
+        @modPack.eachMod (mod)=>
+            return unless mod.enabled
+
+            controller = @_controllers[controllerIndex]
+            if not controller?
+                controller = new ModController model:mod
+                controller.render()
+                @$modContainer.append controller.$el
+            else
+                controller.model = mod
+
+            controllerIndex += 1
+
+        while @_controllers.length > controllerIndex
+            controller = @_controllers.pop()
+            controller.$el.addClass 'removing'
+            controller.$el.one Event.transitionEnd -> controller.$el.remove()
+
+        super

src/scripts/controllers/mod_controller.coffee

@@ -0,0 +1,43 @@
+###
+Crafting Guide - mod_controller.coffee
+
+Copyright (c) 2015 by Redwood Labs
+All rights reserved.
+###
+
+BaseController = require './base_controller'
+{Url}          = require '../constants'
+
+########################################################################################################################
+
+module.exports = class ModController extends BaseController
+
+    constructor: (options={})->
+        options.templateName = 'mod'
+        super options
+
+    # BaseController Overrides #####################################################################
+
+    onDidRender: ->
+        @$link        = @$('a')
+        @$logo        = @$('.logo')
+        @$name        = @$('.name p')
+        @$description = @$('.description p')
+        super
+
+    refresh: ->
+        if @model?
+            @$el.removeClass 'empty'
+
+            @$link.attr 'href', Url.mod modSlug:@model.slug
+            @$logo.attr 'src', Url.modLogo modSlug:@model.slug
+            @$name.html @model.name
+            @$description.html @model.description
+        else
+            @$el.addClass 'empty'
+
+    # Backbone.View Overrides ######################################################################
+
+    events: ->
+        return _.extend super,
+            'click a', 'routeLinkClick'

src/templates/browse_page.jade

@@ -5,4 +5,9 @@
 //- All rights reserved.
 //-
 
-h1 Browse
+.view__browse_page
+    .sidebar
+
+    .mainBody
+        h2: p Active Mods
+        .mods

src/templates/mod.jade

@@ -0,0 +1,12 @@
+//-
+//- Crafting Guide - mod.jade
+//-
+//- Copyright (c) 2015 by Redwood Labs
+//- All rights reserved.
+//-
+
+.view__mod
+    a
+        img.logo
+        h3.name: p
+        .description: p

src/templates/mod_selector.jade

@@ -1,11 +1,11 @@
 //-
-//- Crafting Guide - mod.jade
+//- Crafting Guide - mod_selector.jade
 //-
 //- Copyright (c) 2014-2015 by Redwood Labs
 //- All rights reserved.
 //-
 
-.view__mod
+.view__mod_selector
     .version
         select
             option(value="none") None