Make the mod version selector more clear

This change the single select box into a checkbox which toggles the
mod on/off.  If the mod is "on" and it has multiple versions, then
a selection list will be shown with the various possible versions.
If there is only a single available version, then the selector is
not shown.

src/client/site/mod_page/mod_page.jade

@@ -17,8 +17,11 @@
                 .title
                 .author
                 .description
+                .modpack
+                    span.checkbox
+                    span.label I have this mod in my modpack
                 .version
-                    span in my mod pack
+                    span I'm using version:
                     select
                 .warning.
                     <b>PLEASE NOTE:</b> By selecting "no", crafting plans, search, and other features will ignore items

src/client/site/mod_page/mod_page.scss

@@ -49,8 +49,44 @@
                 line-height: $font-size-medium * 1.25;
             }
 
+            .modpack {
+                margin-top : $size-margin-large;
+
+                cursor      : pointer;
+                font-family : $font-family-control;
+                font-size   : $font-size-medium;
+
+                display : flex;
+
+                .checkbox {
+                    display      : inline-block;
+                    height       : $font-size-medium;
+                    margin-right : $size-margin-small;
+                    position     : relative;
+                    width        : $font-size-medium;
+
+                    background : $color-white;
+                    border     : $size-border-small solid $color-black;
+                }
+
+                .label {
+                    color: $color-gray-medium;
+                }
+
+                &.enabled {
+                    .checkbox:before {
+                        position: absolute; top: 0; left: 1.5px; // adjust for glyph position
+                        content: "✕";
+                    }
+
+                    .label {
+                        color: $color-black;
+                    }
+                }
+            }
+
             .version {
-                margin-top: $size-margin-large;
+                margin-top: $size-margin-medium;
 
                 font-family: $font-family-control;
                 font-size: $font-size-medium;
@@ -91,4 +127,4 @@
             @include layout-link-list;
         }
     }
-}
+}

src/client/site/mod_page/mod_page_controller.coffee

@@ -29,6 +29,14 @@ module.exports = class ModPageController extends BaseController
 
     # Event Methods ################################################################################
 
+    onToggleEnabled: ->
+        if @model.activeVersion is Mod.Version.None
+            @model.activeVersion = Mod.Version.Latest
+        else
+            @model.activeVersion = Mod.Version.None
+
+        return false
+
     onVersionChanged: ->
         @model.activeVersion = @$versionSelector.val()
         return false
@@ -67,15 +75,18 @@ module.exports = class ModPageController extends BaseController
         @$homePageLink       = @$('.about .homePage')
         @$itemGroups         = @$(".itemGroups")
         @$logo               = @$('.about img')
+        @$modpackSection     = @$('.modpack')
         @$title              = @$('.about .title')
         @$tutorialsContainer = @$('section.tutorials .panel')
         @$tutorialsSection   = @$('section.tutorials')
+        @$versionSection     = @$('.version')
         @$versionSelector    = @$('.version select')
         @$warning            = @$('.warning')
         super
 
     refresh: ->
         @_refreshAboutBlock()
+        @_refreshEnabled()
         @_refreshItemGroups()
         @_refreshTutorials()
         @_refreshVersionSelector()
@@ -86,6 +97,7 @@ module.exports = class ModPageController extends BaseController
     events: ->
         return _.extend super,
             'change .version select': 'onVersionChanged'
+            'click .modpack': 'onToggleEnabled'
 
     # Private Methods ##############################################################################
 
@@ -107,6 +119,19 @@ module.exports = class ModPageController extends BaseController
             @$logo.attr 'src', ''
             @$title.text ''
 
+    _refreshEnabled: ->
+        if @model.slug in c.requiredMods
+            @hide @$modpackSection
+        else
+            @show @$modpackSection
+
+        if @model.activeVersion is Mod.Version.None
+            @$modpackSection.removeClass 'enabled'
+            @show @$warning
+        else
+            @$modpackSection.addClass 'enabled'
+            @hide @$warning
+
     _refreshItemGroups: ->
         @_groupControllers ?= []
         groupIndex = 0
@@ -164,19 +189,16 @@ module.exports = class ModPageController extends BaseController
 
     _refreshVersionSelector: ->
         modVersions = @model.modVersions
+
+        if (@model.activeVersion is Mod.Version.None) or modVersions.length < 2
+            @hide @$versionSection
+        else
+            @show @$versionSection
+
         selectedModVersion = @effectiveModVersion
 
         @$versionSelector.empty()
 
-        $option = $("<option value=\"none\">no</option>")
-        if not @model.enabled
-            @$warning.css display:''
-            selectedModVersion = null
-            $option.attr 'selected', true
-        else
-            @$warning.css display:'none'
-        @$versionSelector.append $option
-
         for modVersion in @model.modVersions
             $option = $("<option value=\"#{modVersion.version}\">#{modVersion.version}</option>")
             if modVersion is selectedModVersion