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 {
width: 33%;
padding: 15px;
@ -31,7 +50,6 @@
border: none;
}
.content-filter {
position: relative;
z-index: 300;
@ -55,7 +73,6 @@
color: #fff !important; // getting overridden by floatingheader
}
.content-list-content {
position: absolute;
top: 0;
@ -172,17 +189,15 @@
width: 67%;
padding: 15px;
position: absolute;
bottom:0;
top:0;
right:0;
bottom: 0;
top: 0;
right: 0;
overflow: auto;
background: #fff;
@media (max-width: 900px) {
width: auto;
left: 100%;
right: -100%;
margin-left: 15px;
border:none;
width: 100%;
border: none;
}
.unfeatured {

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

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