0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00

Merge pull request #4193 from PaulAdamDavis/less-animations

Less Animations
This commit is contained in:
John O'Nolan 2014-10-01 15:52:27 +02:00
commit 3bb2152248
3 changed files with 33 additions and 17 deletions

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;
@ -173,18 +190,16 @@
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;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
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 {

View file

@ -80,7 +80,9 @@
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1); @media (min-width: 901px) {
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
}
&.outlet-pane-out-left { &.outlet-pane-out-left {
transform: translate3d(-100%, 0px, 0px); transform: translate3d(-100%, 0px, 0px);

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