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

Added collapse animation to get-started dashboard panel when dismissing

Browse source 
no issue

- softens the disappearance by fading out and collapsing the height when removing
- uses `{{css-transition}}` modifier from https://peec.github.io/ember-css-transitions/docs/insert-destroy
- max-height used in order to animate collapse of a `height: auto` panel, 350px starting point chosen as it's slightly bigger than the largest height of the panel at mobile widths
This commit is contained in:
Kevin Ansfield 2022-02-07 10:04:52 +00:00
parent 7e95890a99
commit da9c4288bf
2 changed files with 14 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ghost/admin/app/styles/layouts/dashboard.css
View file

@ -1059,3 +1059,16 @@ a.gh-dashboard-container {
font-size: 2.0rem;
}
}
/* panel collapse animation */
.gh-dashboard-area-leave {
opacity: 100;
max-height: 350px;
}
.gh-dashboard-area-leave-active {
transition: all ease-in-out 0.25s;
}
.gh-dashboard-area-leave-to {
opacity: 0;
max-height: 0;
}

2
ghost/admin/app/templates/dashboard.hbs
View file

@ -8,7 +8,7 @@
<div class="view-container gh-dashboard">
{{#if (and this.session.user.isAdmin (not (feature "dashboardHideGettingStarted")) (feature "improvedOnboarding"))}}
<section class="gh-dashboard-area lw-banner">
<section class="gh-dashboard-area lw-banner" {{css-transition "gh-dashboard-area"}}>
<div class="gh-lw-banner" style="background-image:url(assets/img/launch-wizard-bg.png);">
<h1>Not sure where to start? We got you.</h1>
<p>