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 animation to post preview modes and publish button

Browse source 
No ref
This commit is contained in:
Sanne de Vries 2022-05-19 14:13:12 +02:00
parent 2941065eb7
commit 2c9998be69
7 changed files with 49 additions and 30 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 {{unless @skipAnimation "fade-in"}}">
<div class="gh-post-preview-container gh-post-preview-browser-container {{unless @skipAnimation "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/preview/email.hbs
View file

@ -1,4 +1,4 @@
<div class="gh-post-preview-email-container">
<div class="gh-post-preview-container gh-post-preview-email-container {{unless @skipAnimation "fade-in"}}">
<div class="gh-post-preview-email-mockup">
<div class="gh-pe-emailclient-sender">
<p>

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

@ -1,4 +1,4 @@
<div class="modal-body modal-preview-email-content gh-pe-mobile-container h-auto overflow-auto">
<div class="modal-body modal-preview-email-content gh-pe-mobile-container gh-post-preview-container h-auto overflow-auto {{unless @skipAnimation "fade-in"}}">
<div class="gh-pe-mobile-bezel">
<div class="gh-pe-mobile-screen">
<iframe class="gh-post-preview-iframe" src={{@post.previewUrl}}></iframe>

3
ghost/admin/app/components/editor-labs/modals/preview/social.hbs
View file

@ -1,5 +1,4 @@
<div class="gh-post-preview-social-container">
<div class="gh-post-preview-container gh-post-preview-social-container {{unless @skipAnimation "fade-in"}}">
<p class="mb8 fw5">This is how your content will look when shared, you can click on any elements you’d like to edit.</p>
<div class="flex flex-column">
<div class="flex gh-social-container-responsive">

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

@ -15,15 +15,6 @@
opacity: 1;
}
.gh-browserpreview-previewcontainer.fade-in {
transform-origin: center;
animation: fade-in-pulse .35s forwards cubic-bezier(.8,.02,.45,.91);
}
.epm-out .gh-browserpreview-previewcontainer.fade-in {
transform-origin: center;
animation: fade-out-pulse .35s forwards cubic-bezier(.8,.02,.45,.91);
}
.gh-browserpreview-iframecontainer {
flex-grow: 1;
position: relative;

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

@ -670,6 +670,20 @@
display: none;
}
.gh-publish-cta .gh-btn-green {
animation: pulse-click 1s;
}
@keyframes pulse-click {
0% {
box-shadow: 0 0 0 0 rgba(48, 207, 67, 0.7);
}
100% {
box-shadow: 0 0 0 16px rgba(48, 207, 67, 0);
}
}
.gh-publish-cta-secondary {
display: block;
overflow: hidden;

47
ghost/admin/app/styles/layouts/post-preview.css
View file

@ -80,33 +80,48 @@
stroke: var(--darkgrey);
}
/* Preview animation */
.gh-post-preview-container {
opacity: 1;
}
.gh-post-preview-container.fade-in {
transform-origin: center;
animation: fade-in-pulse .35s forwards cubic-bezier(.8,.02,.45,.91);
}
.epm-out .gh-post-preview-container.fade-in {
transform-origin: center;
animation: fade-out-pulse .35s forwards cubic-bezier(.8,.02,.45,.91);
}
/* Browser preview */
.gh-post-preview-browser-container {
position: relative;
display: flex;
flex-grow: 1;
overflow: auto;
margin: 0;
background: var(--whitegrey-l1);
}
.gh-post-preview-browser-container iframe {
width: 100%;
/* height: 100%; */
border: none;
}
.gh-post-preview-browser {
flex-direction: column;
height: 100%;
margin: 0 40px 40px;
border-radius: 3px !important;
box-shadow:
0 0 0 1px rgba(0,0,0,0.02),
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
0 12.5px 10px rgba(0, 0, 0, 0.035),
0 22.3px 17.9px rgba(0, 0, 0, 0.042),
0 41.8px 33.4px rgba(0, 0, 0, 0.05),
0 100px 80px rgba(0, 0, 0, 0.07);
;
}
.gh-post-preview-browser .gh-pe-iframe {
.gh-post-preview-browser-container .gh-pe-iframe {
width: 100%;
height: 100%;
border: none;
}
.gh-post-preview-browser .tabs div {
.gh-post-preview-browser-container .tabs div {
width: 360px;
color: var(--middarkgrey);
font-weight: 400;