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

Merge pull request #4193 from PaulAdamDavis/less-animations

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

35
ghost/admin/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;
@ -173,18 +190,16 @@
width: 67%;
padding: 15px;
position: absolute;
bottom:0;
top:0;
right:0;
bottom: 0;
top: 0;
right: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background: #fff;
@media (max-width: 900px) {
width: auto;
left: 100%;
right: -100%;
margin-left: 15px;
border:none;
width: 100%;
border: none;
}
.unfeatured {

4
ghost/admin/assets/sass/layouts/default.scss
View file

@ -80,7 +80,9 @@
overflow: auto;
-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 {
transform: translate3d(-100%, 0px, 0px);

11
ghost/admin/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');
}
});