TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Improved social media preview editing design

Browse Source
This commit is contained in:
Sanne de Vries 2021-02-23 21:47:10 +01:00
parent 0a700c7097
commit 1cb2b8cddd
2 changed files with 64 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
ghost/admin/app/components/modal-post-preview/social.hbs
View File

@ -64,24 +64,24 @@
<div class="gh-social-og-preview-meta">
{{this.config.blogDomain}}
</div>
<div class="gh-social-og-preview-title editable">
{{#if this.editingFacebookTitle}}
<input
type="text"
class="gh-input"
value={{@post.ogTitle}}
maxlength="300"
title="Facebook title"
{{on "blur" this.setFacebookTitle}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "ogTitle")}}
{{autofocus}}
data-prevent-escape-close-modal="true"
/>
{{else}}
{{#if this.editingFacebookTitle}}
<input
type="text"
class="gh-input"
value={{@post.ogTitle}}
maxlength="300"
title="Facebook title"
{{on "blur" this.setFacebookTitle}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "ogTitle")}}
{{autofocus}}
data-prevent-escape-close-modal="true"
/>
{{else}}
<div class="gh-social-og-preview-title editable">
<span class="pointer" {{on "click" this.editFacebookTitle}}>{{truncate this.facebookTitle 88}}</span>
{{/if}}
</div>
</div>
{{/if}}
{{#if this.editingFacebookDescription}}
<textarea
class="gh-input"
@ -94,7 +94,7 @@
data-prevent-escape-close-modal="true"
>{{@post.ogDescription}}</textarea>
{{else}}
<div class="gh-social-og-preview-desc">
<div class="gh-social-og-preview-desc editable">
<span class="pointer" {{on "click" this.editFacebookDescription}}>{{truncate this.facebookDescription}}</span>
</div>
{{/if}}
@ -214,40 +214,40 @@
<div class="gh-seo-preview">
<div class="gh-seo-search-bar mb12">{{svg-jar "google-search"}}</div>
<div class="gh-seo-preview-link">{{this.config.blogDomain}} > {{#if this.ghostPaths.subdir}}{{this.ghostPaths.subdir}} > {{/if}}{{@post.slug}}</div>
<div class="gh-seo-preview-title editable">
{{#if this.editingMetaTitle}}
<input
type="text"
class="gh-input"
value={{@post.metaTitle}}
maxlength="300"
title="Meta title"
{{on "blur" this.setMetaTitle}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "metaTitle")}}
{{autofocus}}
data-prevent-escape-close-modal="true"
>
{{else}}
{{#if this.editingMetaTitle}}
<input
type="text"
class="gh-input"
value={{@post.metaTitle}}
maxlength="300"
title="Meta title"
{{on "blur" this.setMetaTitle}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "metaTitle")}}
{{autofocus}}
data-prevent-escape-close-modal="true"
>
{{else}}
<div class="gh-seo-preview-title editable">
<span class="pointer" {{on "click" this.editMetaTitle}}>{{this.serpTitle}}</span>
{{/if}}
</div>
<div class="gh-seo-preview-desc editable">
{{#if this.editingMetaDescription}}
<textarea
class="gh-input"
maxlength="500"
title="Meta description"
{{on "blur" this.setMetaDescription}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "metaDescription")}}
{{autofocus}}
data-prevent-escape-close-modal="true"
>{{@post.metaDescription}}</textarea>
{{else}}
</div>
{{/if}}
{{#if this.editingMetaDescription}}
<textarea
class="gh-input"
maxlength="500"
title="Meta description"
{{on "blur" this.setMetaDescription}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "metaDescription")}}
{{autofocus}}
data-prevent-escape-close-modal="true"
>{{@post.metaDescription}}</textarea>
{{else}}
<div class="gh-seo-preview-desc editable">
<span class="pointer" {{on "click" this.editMetaDescription}}>{{moment-format (now) "DD MMM YYYY"}} — {{truncate this.serpDescription 170}}</span>
{{/if}}
</div>
</div>
{{/if}}
</div>
</div>
</div>

26
ghost/admin/app/styles/layouts/post-preview.css
View File

@ -305,14 +305,15 @@
}
.gh-social-og-preview-title.editable:hover {
margin: 2px -1px -1px -1px;
margin: 2px -1px -1px -4px;
padding-left: 3px;
border: 1px solid var(--lightgrey-l1);
background: var(--white);
border-radius: 3px;
}
.gh-social-og-preview-title .gh-input {
margin-top: -2px !important;
margin: -2px 0 0 -3px !important;
}
.gh-social-og-preview-desc {
@ -330,7 +331,8 @@
.gh-social-og-preview-desc.editable:hover {
max-height: 24px;
margin: 2px 0 -3px -1px;
margin: 2px 0 -3px -4px;
padding: 0 0 2px 3px;
padding-bottom: 2px;
border: 1px solid var(--lightgrey-l1);
background: var(--white);
@ -418,8 +420,8 @@
.gh-social-twitter-preview-title.editable:hover {
max-height: 25px;
margin: -2px 0 -3px -2px;
padding: 1px 0 4px 1px;
margin: -2px 0 -3px -5px;
padding: 1px 0 4px 4px;
border: 1px solid var(--lightgrey);
background: var(--white);
border-radius: 3px;
@ -441,8 +443,8 @@
.gh-social-twitter-preview-desc.editable:hover {
max-height: 42px;
margin: 4px 0 -1px -2px;
padding: 0 0 1px 1px;
margin: 4px 0 -1px -5px;
padding: 0 0 1px 4px;
border: 1px solid var(--lightgrey);
background: var(--white);
border-radius: 3px;
@ -585,8 +587,8 @@
}
.gh-seo-preview-title.editable:hover {
margin: 0 0 2px -1px;
padding: 3px 0 0;
margin: 0 0 2px -6px;
padding: 3px 0 0 5px;
background: var(--white);
border: 1px solid var(--lightgrey);
border-radius: 3px;
@ -609,13 +611,13 @@
.gh-seo-preview-desc.editable:hover {
max-height: 47px;
margin: -1px 0 -2px -1px;
padding-bottom: 2px;
margin: -1px 0 -2px -6px;
padding: 0 0 2px 5px;
background: var(--white);
border: 1px solid var(--lightgrey);
border-radius: 3px;
}
.gh-seo-preview-desc .gh-input {
.gh-seo-preview .gh-input {
max-width: 100%;
}