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

Remove sliding animation between content & list & post preview on mobile

Browse source 
Closes #3951
This commit is contained in:
Paul Adam Davis 2014-09-26 23:04:40 +01:00
parent 593d3b184b
commit 4e3de54dca
2 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
core/client/assets/sass/layouts/content.scss
View file

@ -14,6 +14,25 @@
} }
} }
// Show/hide content list & preview on mobile
.content-list {
&.show-menu {
display: block;
}
&.show-content {
display: none;
}
}
.content-preview {
&.show-menu {
display: none;
}
&.show-content {
display: block;
}
}
.content-list { .content-list {
width: 33%; width: 33%;
padding: 15px; padding: 15px;
@ -31,7 +50,6 @@
border: none; border: none;
} }
.content-filter { .content-filter {
position: relative; position: relative;
z-index: 300; z-index: 300;
@ -55,7 +73,6 @@
color: #fff !important; // getting overridden by floatingheader color: #fff !important; // getting overridden by floatingheader
} }
.content-list-content { .content-list-content {
position: absolute; position: absolute;
top: 0; top: 0;
@ -172,17 +189,15 @@
width: 67%; width: 67%;
padding: 15px; padding: 15px;
position: absolute; position: absolute;
bottom:0; bottom: 0;
top:0; top: 0;
right:0; right: 0;
overflow: auto; overflow: auto;
background: #fff; background: #fff;
@media (max-width: 900px) { @media (max-width: 900px) {
width: auto; width: 100%;
left: 100%; border: none;
right: -100%;
margin-left: 15px;
border:none;
} }
.unfeatured { .unfeatured {

11
core/client/views/posts.js
View file

@ -6,16 +6,15 @@ var PostsView = MobileParentView.extend({
// Mobile parent view callbacks // Mobile parent view callbacks
showMenu: function () { showMenu: function () {
$('.js-content-list').animate({right: '0', left: '0', 'margin-right': '0'}, 300); $('.js-content-list').addClass('show-menu').removeClass('show-content');
$('.js-content-preview').animate({right: '-100%', left: '100%', 'margin-left': '15px'}, 300); $('.js-content-preview').addClass('show-menu').removeClass('show-content');
}, },
showContent: function () { showContent: function () {
$('.js-content-list').animate({right: '100%', left: '-100%', 'margin-right': '15px'}, 300); $('.js-content-list').addClass('show-content').removeClass('show-menu');
$('.js-content-preview').animate({right: '0', left: '0', 'margin-left': '0'}, 300); $('.js-content-preview').addClass('show-content').removeClass('show-menu');
}, },
showAll: function () { showAll: function () {
$('.js-content-list').removeAttr('style'); $('.js-content-list, .js-content-preview').removeClass('show-menu show-content');
$('.js-content-preview').removeAttr('style');
} }
}); });