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

Added fade-in effect when opening publish and preview modals in editor

Browse source 
No ref
This commit is contained in:
Sanne de Vries 2022-05-19 11:58:51 +02:00
parent f9cd8b1f66
commit 2fb62708a8
5 changed files with 33 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/editor-labs/modals/preview/browser.hbs
View file

@ -1,4 +1,4 @@
<div class="gh-browserpreview-previewcontainer gh-post-preview-browser">
<div class="gh-browserpreview-previewcontainer gh-post-preview-browser fade-in">
<div class="gh-browserpreview-browser">
<div class="tabs">
<ul><li></li><li></li><li></li></ul>

2
ghost/admin/app/components/editor-labs/modals/publish-flow.hbs
View file

@ -21,7 +21,7 @@
{{/if}}
</header>
<div class="gh-publish-settings-container">
<div class="gh-publish-settings-container fade-in">
{{#if this.emailErrorMessage}}
<EditorLabs::Modals::PublishFlow::CompleteWithEmailError
@emailErrorMessage={{this.emailErrorMessage}}

2
ghost/admin/app/components/editor-labs/modals/update-flow.hbs
View file

@ -12,7 +12,7 @@
</header>
{{#let @data.publishOptions.post as |post|}}
<div class="gh-publish-settings-container gh-update-flow">
<div class="gh-publish-settings-container gh-update-flow fade-in">
<div class="gh-publish-title">
{{#if (and post.isSent (not post.isPublished))}}
This {{post.displayName}} was

6
ghost/admin/app/styles/components/browser-preview.css
View file

@ -12,6 +12,12 @@
0 41.8px 33.4px rgba(0, 0, 0, 0.05),
0 100px 80px rgba(0, 0, 0, 0.07);
;
opacity: 1;
}
.gh-browserpreview-previewcontainer.fade-in {
transform-origin: center;
animation: fade-in-pulse .35s forwards cubic-bezier(.8,.02,.45,.91);
}
.gh-browserpreview-iframecontainer {

24
ghost/admin/app/styles/components/publishmenu.css
View file

@ -283,6 +283,30 @@
margin: 0 auto 8rem;
margin-bottom: 11vw;
padding: 11vw 24px 0;
opacity: 1;
}
.gh-publish-settings-container.fade-in {
transform-origin: center;
animation: fade-in-pulse .25s forwards cubic-bezier(.8,.02,.45,.91);
}
@keyframes fade-in-pulse {
0% {
opacity:0;
-webkit-transform:scale(.85);
transform:scale(.85)
}
50% {
opacity:1
}
100%,
70% {
-webkit-transform:scale(1);
transform:scale(1)
}
}
@media (max-width: 1024px) {