Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Merge pull request #800 from M165437/issue-149

Browse source 
Add back button to settings and content preview
This commit is contained in:
John O'Nolan 2013-09-17 12:55:52 -07:00
commit 56620635db
8 changed files with 121 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
core/client/assets/sass/layouts/manage.scss
View file

@ -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;

25
core/client/assets/sass/layouts/settings.scss
View file

@ -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;

45
core/client/assets/sass/modules/forms.scss
View file

@ -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

19
core/client/assets/sass/modules/global.scss
View file

@ -1186,12 +1186,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 {

26
core/client/mobile-interactions.js
View file

@ -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');
}
});

1
core/client/tpl/preview.hbs
View file

@ -1,4 +1,5 @@
<header class="floatingheader">
<button class="button-back" href="#">Back</button>
<a class="{{#if featured}}featured{{else}}unfeatured{{/if}}" href="#">
<span class="hidden">Star</span>
</a>

1
core/client/tpl/settings/general.hbs
View file

@ -1,4 +1,5 @@
<header>
<button class="button-back">Cancel</button>
<h2 class="title">General</h2>
<section class="page-actions">
<button class="button-save">Save</button>

1
core/client/tpl/settings/user-profile.hbs
View file

@ -1,4 +1,5 @@
<header>
<button class="button-back">Cancel</button>
<h2 class="title">Your Profile</h2>
<section class="page-actions">
<button class="button-save">Save</button>