Expanded progress private clans toggle

Expand option for level bubbles in the private clan dashboard.

app/styles/clans/clan-details.sass

@@ -1,5 +1,8 @@
 #clan-details-view
 
+  th
+    font-size: 16px
+
   .join-clan-link
     width: 390px
 
@@ -51,6 +54,34 @@
   .latest-achievement-cell
     vertical-align: middle
 
+
+  .progress-header
+    margin-right: 14px
+
+  .progress-key
+    cursor: default
+    display: inline-block
+    white-space: nowrap
+    font-size: 9pt
+    font-weight: normal
+    border: 1px solid gray
+    border-radius: 5px
+    margin: 0px
+    padding: 2px
+
+  .progress-key-started
+    background-color: lightgreen
+
+  .progress-key-complete
+    background-color: lightgray
+
+  .expand-progress-checkbox
+    margin-left: 14px
+
+  .expand-progress-label
+    font-weight: normal
+    font-size: 14px
+
   .progress-cell
     padding: 2px
     padding-bottom: 10px

app/templates/clans/clan-details.jade

@@ -83,8 +83,12 @@ block content
           tr
             th Hero
             th 
-              span.spr Progress
-              small (gray=completed, green=started, white=not started)
+              span.progress-header Progress
+              span.progress-key not started
+              span.progress-key.progress-key-started started
+              span.progress-key.progress-key-complete complete
+              input.expand-progress-checkbox(type='checkbox')
+              span.spl.expand-progress-label Expand levels
         tbody
           each member in members
             tr

app/views/clans/ClanDetailsView.coffee

@@ -21,6 +21,7 @@ module.exports = class ClanDetailsView extends RootView
   template: template
 
   events:
+    'change .expand-progress-checkbox': 'onExpandedProgressCheckbox'
     'click .delete-clan-btn': 'onDeleteClan'
     'click .edit-description-save-btn': 'onEditDescriptionSave'
     'click .edit-name-save-btn': 'onEditNameSave'
@@ -39,6 +40,7 @@ module.exports = class ClanDetailsView extends RootView
     @stopListening?()
 
   initData: ->
+    @showExpandedProgress = false
     @stats = {}
 
     @campaigns = new CocoCollection([], { url: "/db/campaign", model: Campaign, comparator:'_id' })
@@ -99,7 +101,7 @@ module.exports = class ClanDetailsView extends RootView
           lastLevelIndex++
 
     context.lastUserCampaignLevelMap = lastUserCampaignLevelMap
-    context.showExpandedProgress = maxLastUserCampaignLevel <= 30
+    context.showExpandedProgress = maxLastUserCampaignLevel <= 30 or @showExpandedProgress
     context
 
   afterRender: ->
@@ -247,6 +249,12 @@ module.exports = class ClanDetailsView extends RootView
       @clan.patch()
     $('#editNameModal').modal('hide')
 
+  onExpandedProgressCheckbox: (e) ->
+    @showExpandedProgress = $('.expand-progress-checkbox').prop('checked')
+    # TODO: why does render reset the checkbox to be unchecked?
+    @render?()
+    $('.expand-progress-checkbox').attr('checked', @showExpandedProgress)
+
   onJoinClan: (e) ->
     return @openModalView(new AuthModal()) if me.isAnonymous()
     return unless @clan.loaded