From 67fb39bc697fe73d1729867a76202f60460201fa Mon Sep 17 00:00:00 2001 From: Michael Schmidt-Voigt Date: Sun, 15 Sep 2013 15:47:31 -0300 Subject: [PATCH] Add back button to settings and content preview Issue #149 - added back button to content preview and settings - added hammer.js interactions - needs some tweaking for mobile view - problems with touch events (additional click event after 300ms) --- ghost/admin/assets/sass/layouts/manage.scss | 21 ++++----- ghost/admin/assets/sass/layouts/settings.scss | 25 +++++++++-- ghost/admin/assets/sass/modules/forms.scss | 45 ++++++++++++++++++- ghost/admin/assets/sass/modules/global.scss | 21 ++++++++- ghost/admin/mobile-interactions.js | 26 ++++++++++- ghost/admin/tpl/preview.hbs | 1 + ghost/admin/tpl/settings/general.hbs | 1 + ghost/admin/tpl/settings/user-profile.hbs | 1 + 8 files changed, 122 insertions(+), 19 deletions(-) diff --git a/ghost/admin/assets/sass/layouts/manage.scss b/ghost/admin/assets/sass/layouts/manage.scss index a3e53f363d..1947af3b89 100644 --- a/ghost/admin/assets/sass/layouts/manage.scss +++ b/ghost/admin/assets/sass/layouts/manage.scss @@ -3,7 +3,7 @@ * used for previewing and reading existing content in Ghost. * * Table of Contents: - * + * * Manage * Preview * @@ -29,9 +29,9 @@ width: 35%; padding: 15px; position: absolute; - bottom:0; + bottom:0; top:0; - left:0; + left:0; border-right:$lightbrown 2px solid; background: #fff; box-shadow: $shadow; @@ -115,13 +115,13 @@ position:relative; a { - + display:block; padding:20px 15px; color: $brown; @include breakpoint($mobile) { padding:15px; } @include breakpoint($tablet) { padding-right: 40px; } - + @include icon-after($i-chevron) { position:absolute; top:50%; @@ -142,7 +142,7 @@ border-bottom: lighten($midgrey, 40%) 1px solid; background: lighten($midgrey, 45%); - box-shadow: + box-shadow: lighten($midgrey, 40%) 0 -1px 0, // top border rgba(0,0,0,0.06) 7px 0 0 inset, // big left border lighten($midgrey, 40%) 1px 0 0 inset; // small left border @@ -178,8 +178,8 @@ padding: 15px; position: absolute; bottom:0; - top:0; - right:0; + top:0; + right:0; border-left:$lightbrown 2px solid; background: #fff; box-shadow: $shadow; @@ -188,6 +188,7 @@ left: 100%; right: -100%; margin-left: 15px; + border:none; } .unfeatured { @@ -218,7 +219,7 @@ padding: 80px 40px; word-break: break-word; hyphens: auto; - + .wrapper { max-width: 700px; margin:0 auto; @@ -235,7 +236,7 @@ right:-10px; } } - + .post-edit { @include icon($i-edit, 14px); margin-right:7px; diff --git a/ghost/admin/assets/sass/layouts/settings.scss b/ghost/admin/assets/sass/layouts/settings.scss index 9f46cc2e4a..8f5cbcce9e 100644 --- a/ghost/admin/assets/sass/layouts/settings.scss +++ b/ghost/admin/assets/sass/layouts/settings.scss @@ -93,7 +93,7 @@ overflow: auto; @include breakpoint($tablet) { right:0; }; - // Create placeholder the same height as the floating header + // Create placeholder the same height as the floating header // to push content down by the same amount &:before { display: block; @@ -219,6 +219,7 @@ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%); @include breakpoint($netbook) { padding-left:15px; } + @include breakpoint($tablet) { padding-left:115px; } @include breakpoint($letterbox) { height: auto; padding: 5px; @@ -230,6 +231,22 @@ .title { display:none; } } + @include breakpoint(650px) { + padding-left:15px; + + .button-back { + position: fixed; + top: 5px; + left: 14px; + min-height: 0; + height: 30px; + + &:before { + left: -9px; + border-width: 15px 9px 15px 0; + } + } + } }//header @@ -270,15 +287,15 @@ .content { position: absolute; - top:0; + top:0; right:0; left:0; bottom:0; padding:40px; overflow: auto; -webkit-overflow-scrolling: touch; - - // Create placeholder the same height as the floating header + + // Create placeholder the same height as the floating header // to push content down by the same amount &:before { display: block; diff --git a/ghost/admin/assets/sass/modules/forms.scss b/ghost/admin/assets/sass/modules/forms.scss index 283e1785bd..5a3923b5c2 100644 --- a/ghost/admin/assets/sass/modules/forms.scss +++ b/ghost/admin/assets/sass/modules/forms.scss @@ -43,7 +43,7 @@ form { font-weight: bold; color: $brown; text-align: right; - + @include breakpoint(550px) { display: block; position: relative; @@ -259,6 +259,49 @@ input[type="reset"] { } } +// Back button for pane animations +.button-back { + @extend %button; + position: absolute; + top: 20px; + left: 20px; + margin-right: 30px; + padding: 0.5em 1.37em 0.5em 1.10em; + display: none; + color: #fff; + background: $blue; + border: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + &:before { + content: ' '; + position: absolute; + top: 0; + left: -10px; + width: 0; + height: 0; + border-width: 18px 10px 18px 0; + border-color: transparent $blue transparent transparent; + border-style: solid solid solid none; + @include transform(scale(0.9999)); + @include transition(border-color 0.3s ease); + } + + &:hover { + color: #fff; + background: darken($blue, 10%); + border-color: darken($blue, 10%); + &:before { + border-right-color: darken($blue, 10%); + } + } + + @include breakpoint($tablet) { + display: inline-block; + } +} + /* ============================================================================= Split Buttons diff --git a/ghost/admin/assets/sass/modules/global.scss b/ghost/admin/assets/sass/modules/global.scss index f32d599441..61da128fd1 100644 --- a/ghost/admin/assets/sass/modules/global.scss +++ b/ghost/admin/assets/sass/modules/global.scss @@ -392,7 +392,7 @@ nav { padding:12px 15px; color: lighten($grey, 10%); @include box-sizing(border-box); - + &:hover {text-decoration:none;} } @@ -1162,12 +1162,29 @@ main { background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.90) 100%); button, .button { - display:inline-block; + display: inline-block; font-size: 10px; min-height: 20px; height: 20px; padding: 3px 4px; vertical-align: top; + + &.button-back { + position: relative; + top: -2px; + left: 3px; + display: none; + padding: 0 6px 0 3px; + + &:before { + left: -8px; + border-width: 10px 8px 10px 0; + } + + @include breakpoint($tablet) { + display: inline-block; + } + } } a { diff --git a/ghost/admin/mobile-interactions.js b/ghost/admin/mobile-interactions.js index 88cc8b7af2..2997f1d90c 100644 --- a/ghost/admin/mobile-interactions.js +++ b/ghost/admin/mobile-interactions.js @@ -22,6 +22,16 @@ } }); + // ### Hide content preview + Hammer.on("tap", ".manage .content-preview .button-back", function (event) { + if (window.matchMedia('(max-width: 800px)').matches) { + event.gesture.preventDefault(); + event.stopPropagation(); + $(".content-list").animate({right: "0", left: "0", 'margin-right': "0"}, 300); + $(".content-preview").animate({right: "-100%", left: "100%", 'margin-left': "15px"}, 300); + } + }); + // ### Show settings options page when swiping left on settings menu link Hammer.on("tap", ".settings .settings-menu li", function (event) { if (window.matchMedia('(max-width: 800px)').matches) { @@ -29,13 +39,25 @@ event.stopPropagation(); $(".settings-sidebar").animate({right: "100%", left: "-102%", 'margin-right': "15px"}, 300); $(".settings-content").animate({right: "0", left: "0", 'margin-left': "0"}, 300); + $(".settings-content .button-back, .settings-content .button-save").css("display", "inline-block"); + } + }); + + // ### Hide settings options page + Hammer.on("tap", ".settings .settings-content .button-back", function (event) { + if (window.matchMedia('(max-width: 800px)').matches) { + event.gesture.preventDefault(); + event.stopPropagation(); + $(".settings-sidebar").animate({right: "0", left: "0", 'margin-right': "0"}, 300); + $(".settings-content").animate({right: "-100%", left: "100%", 'margin-left': "15"}, 300); + $(".settings-content .button-back, .settings-content .button-save").css("display", "none"); } }); // ### Toggle the sidebar menu - $('[data-off-canvas]').on('click', function (e) { + $('[data-off-canvas]').on('click', function (event) { if (window.matchMedia('(max-width: 650px)').matches) { - e.preventDefault(); + event.preventDefault(); $('body').toggleClass('off-canvas'); } }); diff --git a/ghost/admin/tpl/preview.hbs b/ghost/admin/tpl/preview.hbs index 9fd8427b93..e304f76212 100644 --- a/ghost/admin/tpl/preview.hbs +++ b/ghost/admin/tpl/preview.hbs @@ -1,4 +1,5 @@
+ diff --git a/ghost/admin/tpl/settings/general.hbs b/ghost/admin/tpl/settings/general.hbs index a6f81cb771..ad34ea6849 100644 --- a/ghost/admin/tpl/settings/general.hbs +++ b/ghost/admin/tpl/settings/general.hbs @@ -1,4 +1,5 @@
+

General

diff --git a/ghost/admin/tpl/settings/user-profile.hbs b/ghost/admin/tpl/settings/user-profile.hbs index 0392d0a8ca..55580629f0 100644 --- a/ghost/admin/tpl/settings/user-profile.hbs +++ b/ghost/admin/tpl/settings/user-profile.hbs @@ -1,4 +1,5 @@
+

Your Profile