diff --git a/assets/images/icons.png b/assets/images/icons.png index 9df31e1c..dcd73c9f 100644 Binary files a/assets/images/icons.png and b/assets/images/icons.png differ diff --git a/assets/images/icons@2x.png b/assets/images/icons@2x.png index e66a685d..ceef01d7 100644 Binary files a/assets/images/icons@2x.png and b/assets/images/icons@2x.png differ diff --git a/assets/javascripts/lib/page.coffee b/assets/javascripts/lib/page.coffee index b311e51f..546f5f8d 100644 --- a/assets/javascripts/lib/page.coffee +++ b/assets/javascripts/lib/page.coffee @@ -61,6 +61,12 @@ page.dispatch = (context) -> next() return +page.canGoBack = -> + not Context.isIntialState(currentState) + +page.canGoForward = -> + not Context.isLastState(currentState) + currentPath = -> location.pathname + location.search + location.hash @@ -69,6 +75,12 @@ class Context @sessionId: Date.now() @stateId: 0 + @isIntialState: (state) -> + state.id == 0 + + @isLastState: (state) -> + state.id == @stateId - 1 + @isInitialPopState: (state) -> state.path is @initialPath and @stateId is 1 diff --git a/assets/javascripts/views/layout/mobile.coffee b/assets/javascripts/views/layout/mobile.coffee index aec6692f..1e1dda43 100644 --- a/assets/javascripts/views/layout/mobile.coffee +++ b/assets/javascripts/views/layout/mobile.coffee @@ -37,10 +37,16 @@ class app.views.Mobile extends app.View app.shortcuts.stop() $.on @body, 'click', @onClick - $.on $('._home-link'), 'click', @onClickHome - $.on $('._menu-link'), 'click', @onClickMenu + $.on $('._home-btn'), 'click', @onClickHome + $.on $('._menu-btn'), 'click', @onClickMenu $.on $('._search'), 'touchend', @onTapSearch + @back = $('._back-btn') + $.on @back, 'click', @onClickBack + + @forward = $('._forward-btn') + $.on @forward, 'click', @onClickForward + app.document.sidebar.search .on 'searching', @showSidebar .on 'clear', @hideSidebar @@ -76,6 +82,12 @@ class app.views.Mobile extends app.View @showSidebar() return + onClickBack: => + history.back() + + onClickForward: => + history.forward() + onClickHome: => app.shortcuts.trigger 'escape' @hideSidebar() @@ -90,4 +102,14 @@ class app.views.Mobile extends app.View afterRoute: => @hideSidebar() + + if page.canGoBack() + @back.removeAttribute('disabled') + else + @back.setAttribute('disabled', 'disabled') + + if page.canGoForward() + @forward.removeAttribute('disabled') + else + @forward.setAttribute('disabled', 'disabled') return diff --git a/assets/stylesheets/components/_mobile.scss b/assets/stylesheets/components/_mobile.scss index c93d87d6..e5d0bf67 100644 --- a/assets/stylesheets/components/_mobile.scss +++ b/assets/stylesheets/components/_mobile.scss @@ -34,7 +34,7 @@ } ._logo, ._nav { display: none; } - ._home-link, ._menu-link { display: block; } + ._mobile-btn { display: block; } ._search { float: none; @@ -149,12 +149,17 @@ // Header buttons // -%mobile-link { +._mobile-btn { display: none; position: relative; float: left; width: 2.5rem; height: 100%; + background: none; + border: 0; + @extend %hide-text; + + &[disabled] { opacity: .3; } &:before { position: absolute; @@ -165,15 +170,33 @@ } } -._home-link { - @extend %mobile-link; +._back-btn { + &:before { @extend %icon-back; } +} + +._forward-btn { + width: 2.25rem; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); - &:before { @extend %icon-home; } + &:before { + margin-left: -.375rem; + @extend %icon-back; + } +} + +._home-btn { + float: right; + width: 2rem; + + &:before { + margin-left: -.375rem; + @extend %icon-home; + } } -._menu-link { +._menu-btn { float: right; - @extend %mobile-link; &:before { @extend %icon-menu; } } diff --git a/assets/stylesheets/global/_classes.scss b/assets/stylesheets/global/_classes.scss index 389300cf..a9da3305 100644 --- a/assets/stylesheets/global/_classes.scss +++ b/assets/stylesheets/global/_classes.scss @@ -14,6 +14,13 @@ user-select: none; } +%hide-text { + white-space: nowrap; + overflow: hidden; + color: transparent; + @extend %user-select-none; +} + // // Boxes // diff --git a/assets/stylesheets/global/_icons.scss b/assets/stylesheets/global/_icons.scss index a34bf645..f41cda73 100644 --- a/assets/stylesheets/global/_icons.scss +++ b/assets/stylesheets/global/_icons.scss @@ -37,8 +37,8 @@ %icon-clear { background-position: -3rem 0; } %icon-settings { background-position: 0 -1rem; } %icon-check { background-position: -1rem -1rem; } -%icon-menu { background-position: -2rem -1rem; } -%icon-home { background-position: -3rem -1rem; } +%icon-menu { background-position: -2rem -1rem; @extend %darkIconFix !optional; } +%icon-home { background-position: -3rem -1rem; @extend %darkIconFix !optional; } %icon-path { background-position: 0 -2rem; } %icon-search-white { background-position: -1rem -2rem; } %icon-dir-white { background-position: -2rem -2rem; } @@ -54,6 +54,7 @@ %icon-clipboard { background-position: 0 -5rem; } %icon-clipboard-white { background-position: -1rem -5rem; } %icon-close-white { background-position: -2rem -5rem; } +%icon-back { background-position: -3rem -5rem; @extend %darkIconFix !optional; } ._icon-http:before { background-position: -7rem 0; @extend %darkIconFix !optional; } ._icon-jquery:before { background-position: -8rem 0; @extend %darkIconFix !optional; } diff --git a/public/icons/ui/back/16.png b/public/icons/ui/back/16.png new file mode 100644 index 00000000..5f86f40c Binary files /dev/null and b/public/icons/ui/back/16.png differ diff --git a/public/icons/ui/back/16@2x.png b/public/icons/ui/back/16@2x.png new file mode 100644 index 00000000..59efadf4 Binary files /dev/null and b/public/icons/ui/back/16@2x.png differ diff --git a/views/app.erb b/views/app.erb index c0ed5056..a86e2bcd 100644 --- a/views/app.erb +++ b/views/app.erb @@ -1,7 +1,9 @@
">
- - + + + +