Explorar el Código

Reflect selected nav item when panels get active outside nav

Markus Ochel hace 12 años
padre
commit
c81763feb5

+ 3 - 3
admin/controllers/authors.coffee

@@ -97,7 +97,7 @@ class AuthorForm extends Spine.Controller
 
   showError: (msg) ->
     @errorMessage.html(msg).show()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
   
   destroy: (e) ->
     e.preventDefault()
@@ -124,7 +124,7 @@ class AuthorForm extends Spine.Controller
     e.preventDefault()
     
   deactivate: ->
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
     super
 
 
@@ -144,7 +144,7 @@ class AuthorList extends Spine.Controller
 
   filter: (@filterObj) =>
     @render()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
 
 
 class Authors extends Spine.Stack

+ 3 - 3
admin/controllers/blocks.coffee

@@ -101,7 +101,7 @@ class BlockForm extends Spine.Controller
 
   showError: (msg) ->
     @errorMessage.html(msg).show()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
   
   destroy: (e) ->
     e.preventDefault()
@@ -128,7 +128,7 @@ class BlockForm extends Spine.Controller
     e.preventDefault()
     
   deactivate: ->
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
     super
 
 
@@ -148,7 +148,7 @@ class BlockList extends Spine.Controller
 
   filter: (@filterObj) =>
     @render()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
 
 
 class Blocks extends Spine.Stack

+ 3 - 3
admin/controllers/collections.coffee

@@ -112,7 +112,7 @@ class CollectionForm extends Spine.Controller
 
   showError: (msg) ->
     @errorMessage.html(msg).show()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
   
   destroy: (e) ->
     e.preventDefault()
@@ -139,7 +139,7 @@ class CollectionForm extends Spine.Controller
     e.preventDefault()
     
   deactivate: ->
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
     super
 
 
@@ -159,7 +159,7 @@ class CollectionList extends Spine.Controller
 
   filter: (@filterObj) =>
     @render()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
 
 
 class Collections extends Spine.Stack

+ 3 - 3
admin/controllers/contacts.coffee

@@ -62,7 +62,7 @@ class ContactForm extends Spine.Controller
 
   showError: (msg) ->
     @errorMessage.html(msg).show()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
   
   destroy: (e) ->
     e.preventDefault()
@@ -89,7 +89,7 @@ class ContactForm extends Spine.Controller
     e.preventDefault()
     
   deactivate: ->
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
     super
 
 
@@ -109,7 +109,7 @@ class ContactList extends Spine.Controller
 
   filter: (@filterObj) =>
     @render()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
 
 
 class Contacts extends Spine.Stack

+ 6 - 1
admin/controllers/dashboard.coffee

@@ -38,7 +38,7 @@ class DashboardOne extends Spine.Controller
 
   filter: (@filterObj) =>
     @render()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
 
 
 class Dashboard extends Spine.Stack
@@ -52,5 +52,10 @@ class Dashboard extends Spine.Stack
   routes:
     '/dashboard/one': 'one'
 
+  constructor: ->
+    super
+    for k, v of @controllers
+      @[k].active => @active()
+
 
 module.exports = Dashboard

+ 3 - 3
admin/controllers/essays.coffee

@@ -202,7 +202,7 @@ class EssayForm extends Spine.Controller
 
   showError: (msg) ->
     @errorMessage.html(msg).show()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
   
   destroy: (e) ->
     e.preventDefault()
@@ -229,7 +229,7 @@ class EssayForm extends Spine.Controller
     e.preventDefault()
     
   deactivate: ->
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
     super
 
 
@@ -249,7 +249,7 @@ class EssayList extends Spine.Controller
 
   filter: (@filterObj) =>
     @render()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
 
 
 class Essays extends Spine.Stack

+ 1 - 1
admin/controllers/filter-box.coffee

@@ -54,7 +54,7 @@ class FilterBox extends Spine.Controller
       @siteId = $item.attr('data-id')
       @siteSelector
         .hide()
-        .scrollTop(0, 0)
+        .scrollTop(0)
         .children()
         .removeClass('selected')
       $item.addClass('selected')

+ 6 - 0
admin/controllers/index.coffee

@@ -51,6 +51,7 @@ class App extends Spine.Controller
     @helpUI    = new HelpUI
     Spine.Route.setup()
 
+    @hookPanelsToNav()
     @doOtherStuff()
 
   startApp: =>
@@ -90,6 +91,11 @@ class App extends Spine.Controller
     Sponsor.deleteAll()
     @dataLoaded = false
 
+  hookPanelsToNav: ->
+    cls = @
+    for k, v of @mainStack.controllers
+      @mainStack[k].active -> cls.mainNav.selectFromClassName(@className)
+
   doOtherStuff: ->
     # Use the fastclick module for touch devices.
     # Add a class of `needsclick` of the original click

+ 15 - 4
admin/controllers/main-nav.coffee

@@ -11,6 +11,7 @@ class MainNav extends Spine.Controller
     'form.login':             'loginForm'
     'input[name=username]':   'formUsername'
     'input[name=password]':   'formPassword'
+    'li a':                   'links'
 
   events:
     'submit form.login':      'login'
@@ -26,10 +27,20 @@ class MainNav extends Spine.Controller
     @html templates.render('main-nav.html', {}, {})
 
   setup: =>
-    links = @el.find('li a')
-    links.on 'click', (e) ->
-      links.removeClass('active')
-      $(@).addClass('active')
+    @links.on 'click', (e) =>
+      $link = $(e.currentTarget)
+      @selectLink($link)
+
+  selectFromClassName: (className) =>
+    if className
+      fragment = className.split(' ')[0]
+      $link = @el.find("li.#{fragment} a")
+      @selectLink($link)
+
+  selectLink: ($link) =>
+    if $link and not $link.hasClass('active')
+      @links.removeClass('active')
+      $link.addClass('active')
 
   showLogin: =>
     @resetLoginForm()

+ 3 - 3
admin/controllers/scenes.coffee

@@ -202,7 +202,7 @@ class SceneForm extends Spine.Controller
 
   showError: (msg) ->
     @errorMessage.html(msg).show()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
   
   destroy: (e) ->
     e.preventDefault()
@@ -229,7 +229,7 @@ class SceneForm extends Spine.Controller
     e.preventDefault()
     
   deactivate: ->
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
     super
 
 
@@ -249,7 +249,7 @@ class SceneList extends Spine.Controller
 
   filter: (@filterObj) =>
     @render()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
 
 
 class Scenes extends Spine.Stack

+ 3 - 3
admin/controllers/sites.coffee

@@ -88,7 +88,7 @@ class SiteForm extends Spine.Controller
 
   showError: (msg) ->
     @errorMessage.html(msg).show()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
   
   destroy: (e) ->
     e.preventDefault()
@@ -115,7 +115,7 @@ class SiteForm extends Spine.Controller
     e.preventDefault()
     
   deactivate: ->
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
     super
 
 
@@ -135,7 +135,7 @@ class SiteList extends Spine.Controller
 
   filter: (@filterObj) =>
     @render()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
 
 
 class Sites extends Spine.Stack

+ 3 - 3
admin/controllers/sponsors.coffee

@@ -86,7 +86,7 @@ class SponsorForm extends Spine.Controller
 
   showError: (msg) ->
     @errorMessage.html(msg).show()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
   
   destroy: (e) ->
     e.preventDefault()
@@ -113,7 +113,7 @@ class SponsorForm extends Spine.Controller
     e.preventDefault()
     
   deactivate: ->
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
     super
 
 
@@ -133,7 +133,7 @@ class SponsorList extends Spine.Controller
 
   filter: (@filterObj) =>
     @render()
-    @el.scrollTop(0, 0)
+    @el.scrollTop(0)
 
 
 class Sponsors extends Spine.Stack

+ 16 - 6
admin/static/css/theme.styl

@@ -97,7 +97,9 @@ span.label
     border: 1px solid $faintGrey
     border-top: 0
     max-height: 500px
-    overflow: auto
+    overflow-y: scroll
+    overflow-x: hidden
+    -webkit-overflow-scrolling: touch
     -webkit-user-select: none
 
     li
@@ -120,8 +122,10 @@ span.label
   padding: 0
   margin: 0
   background: $primaryColor
-  overflow: auto
   box-shadow(-4px 4px 0 rgba(0, 0, 0, 0.1))
+  overflow-y: scroll
+  overflow-x: hidden
+  -webkit-overflow-scrolling: touch
   -webkit-user-select: none
   transition(0.3s, all)
 
@@ -185,7 +189,7 @@ span.label
 
       &.seperator
         margin: 0.5em 0
-        border-bottom: 1px solid rgba(255,255,255,0.4)
+        border-bottom: 1px solid rgba(255,255,255,0.2)
 
   &.show-login
     top: 30%
@@ -225,7 +229,9 @@ span.label
 
     > .panel
       background: $faintGrey
-      overflow: auto
+      overflow-y: scroll
+      overflow-x: hidden
+      -webkit-overflow-scrolling: touch
 
       .content
         position: relative
@@ -639,7 +645,9 @@ ul.ui-multi-select
     right: 0
     left: 0
     padding: 20px
-    overflow: auto
+    overflow-y: scroll
+    overflow-x: auto
+    -webkit-overflow-scrolling: touch
 
     h3, h4
       margin: 1em 0
@@ -660,7 +668,9 @@ ul.ui-multi-select
   background: #333
   color: #fff
   font-size: 0.8em
-  overflow: auto
+  overflow-y: scroll
+  overflow-x: hidden
+  -webkit-overflow-scrolling: touch
   z-index: 110
   
   > h3

+ 1 - 1
admin/templates/main-nav.html

@@ -5,7 +5,7 @@
   <input type="submit" name="submit" value="Sign In" class="button">
 </form>
 <ul>
-  <li class="dashboard"><a class="active" href="#/">Dashboard</a></li>
+  <li class="dashboards"><a class="active" href="#/">Dashboard</a></li>
   <li class="essays"><a href="#/essays">Essays</a></li>
   <li class="scenes"><a href="#/scenes">Scenes</a></li>
   <li class="collections"><a href="#/collections">Collections</a></li>

+ 1 - 0
site/static/css/theme.styl

@@ -42,6 +42,7 @@
   padding: 0
   margin: 20px 20px 0 0
   -webkit-user-select: none
+  -webkit-tap-highlight-color: rgba(0,0,0,0)
   z-index: 20
 
   $iconSize = 60px