Refined email preview in publish menu

TryGhost · Nov 7, 2019 · 194a714 · 194a714
1 parent 6da3667
commit 194a714
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/app/styles/components/publishmenu.css b/app/styles/components/publishmenu.css
@@ -42,7 +42,7 @@
     right: 0;
     margin: 5px 0 20px 0;
     padding: 20px;
-    width: 300px;
+    width: 320px;
     background-color: #fff;
     background-clip: padding-box;
     border-radius: 4px;
@@ -123,6 +123,7 @@
     line-height: 1.4em;
     font-weight: 200;
     color: color-mod(var(--midgrey) l(+10%));
+    margin-top: 2px;
 }
 
 .gh-publishmenu-radio-label:hover,
@@ -227,7 +228,7 @@
 
 .for-checkbox .gh-publishmenu-email-checkbox {
     margin-right: 0;
-    margin-top: 2px;
+    margin-top: -2px;
     background: var(--white);
 }
 

diff --git a/app/templates/components/gh-publishmenu-draft.hbs b/app/templates/components/gh-publishmenu-draft.hbs
@@ -42,24 +42,24 @@
                     <div class="gh-publishmenu-email-label">
                         <label class="gh-publishmenu-radio-label" for="email-when-published-checkbox">Email post</label>
                         {{#if this.memberCount}}
-                            <div class="gh-publishmenu-radio-desc">Send post to {{this.memberCount}} members when published</div>
+                            <div class="gh-publishmenu-radio-desc">Send post to members when published</div>
                         {{else}}
                             <div class="gh-publishmenu-radio-desc">You have 0 members</div>
                         {{/if}}
+                        {{#unless this.deliveredAction}}
+                        <div class="nudge-bottom--2">
+                            <button type="button" class="gh-btn gh-btn-link gh-preview-email-button"
+                                onclick={{action "toggleEmailPreviewModal"}} data-test-button="toggle-email-preview">
+                                <span class="blue">
+                                    Preview email
+                                </span>
+                            </button>
+                        </div>
+                        {{/unless}}
                     </div>
                 {{/unless}}
             {{/if}}
         </div>
-        {{#unless this.deliveredAction}}
-            <div class="gh-publishmenu-preview-button">
-                <button type="button" class="gh-btn gh-btn-link gh-preview-email-button" onclick={{action "toggleEmailPreviewModal"}}
-                    data-test-button="toggle-email-preview">
-                    <span class="blue">
-                        Preview in browser
-                    </span>
-                </button>
-            </div>
-        {{/unless}}
     {{/if}}
 </section>