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

Improved social media inline editing

Browse source 
No ref

- Added placeholder attributes to focused input fields
- Fixed only text value being clickable vs. entire field
- Added placeholder attributes to PSM meta data inputs
This commit is contained in:
Sanne de Vries 2021-03-03 13:30:41 +01:00
parent cba58451a2
commit 2cf6dc4e4b
2 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ghost/admin/app/components/gh-post-settings-menu.hbs
View file

@ -193,6 +193,7 @@
@class="post-setting-meta-title"
@id="meta-title"
@name="post-setting-meta-title"
@placeholder={{this.seoTitle}}
@value={{readonly this.metaTitleScratch}}
@input={{action (mut this.metaTitleScratch) value="target.value"}}
@focus-out={{action "setMetaTitle" this.metaTitleScratch}}
@ -208,6 +209,7 @@
@class="post-setting-meta-description"
@id="meta-description"
@name="post-setting-meta-description"
@placeholder={{truncate this.seoDescription 150}}
@value={{readonly this.metaDescriptionScratch}}
@input={{action (mut this.metaDescriptionScratch) value="target.value"}}
@focus-out={{action "setMetaDescription" this.metaDescriptionScratch}}
@ -286,7 +288,7 @@
@class="post-setting-twitter-description"
@id="twitter-description"
@name="post-setting-twitter-description"
@placeholder={{truncate this.twitterDescription 155}}
@placeholder={{truncate this.twitterDescription 150}}
@stopEnterKeyDownPropagation="true"
@value={{readonly this.twitterDescriptionScratch}}
@input={{action (mut this.twitterDescriptionScratch) value="target.value"}}
@ -361,7 +363,7 @@
<GhTextarea
@class="post-setting-og-description"
@id="og-description" @name="post-setting-og-description"
@placeholder={{truncate this.facebookDescription 160}}
@placeholder={{truncate this.facebookDescription 150}}
@value={{readonly this.ogDescriptionScratch}}
@input={{action (mut this.ogDescriptionScratch) value="target.value"}}
@focus-out={{action "setOgDescription" this.ogDescriptionScratch}}

28
ghost/admin/app/components/modal-post-preview/social.hbs
View file

@ -70,9 +70,9 @@
<input
type="text"
class="gh-input"
placeholder={{this.facebookTitle}}
value={{@post.ogTitle}}
maxlength="300"
title="Facebook title"
{{on "blur" this.setFacebookTitle}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "ogTitle")}}
@ -80,15 +80,15 @@
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}}</span>
<div class="gh-social-og-preview-title editable pointer" {{on "click" this.editFacebookTitle}}>
{{truncate this.facebookTitle}}
</div>
{{/if}}
{{#if this.editingFacebookDescription}}
<textarea
class="gh-input"
maxlength="500"
title="Facebook description"
placeholder={{truncate this.facebookDescription 160}}
{{on "blur" this.setFacebookDescription}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "ogDescription")}}
@ -96,8 +96,8 @@
data-prevent-escape-close-modal="true"
>{{@post.ogDescription}}</textarea>
{{else}}
<div class="gh-social-og-preview-desc editable">
<span class="pointer" {{on "click" this.editFacebookDescription}}>{{truncate this.facebookDescription}}</span>
<div class="gh-social-og-preview-desc editable pointer" {{on "click" this.editFacebookDescription}}>
{{truncate this.facebookDescription}}
</div>
{{/if}}
</div>
@ -169,9 +169,9 @@
<input
type="text"
class="gh-input"
placeholder={{this.twitterTitle}}
value={{@post.twitterTitle}}
maxlength="300"
title="Twitter title"
{{on "blur" this.setTwitterTitle}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "twitterTitle")}}
@ -185,7 +185,7 @@
<textarea
class="gh-input"
maxlength="500"
title="Twitter description"
placeholder={{truncate this.twitterDescription 160}}
{{on "blur" this.setTwitterDescription}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "twitterDescription")}}
@ -221,9 +221,9 @@
<input
type="text"
class="gh-input"
placeholder={{this.serpTitle}}
value={{@post.metaTitle}}
maxlength="300"
title="Meta title"
{{on "blur" this.setMetaTitle}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "metaTitle")}}
@ -231,15 +231,15 @@
data-prevent-escape-close-modal="true"
>
{{else}}
<div class="gh-seo-preview-title editable">
<span class="pointer" {{on "click" this.editMetaTitle}}>{{this.serpTitle}}</span>
<div class="gh-seo-preview-title editable pointer" {{on "click" this.editMetaTitle}}>
{{this.serpTitle}}
</div>
{{/if}}
{{#if this.editingMetaDescription}}
<textarea
class="gh-input"
placeholder={{this.serpDescription}}
maxlength="500"
title="Meta description"
{{on "blur" this.setMetaDescription}}
{{on-key "Enter" this.blurElement}}
{{on-key "Escape" (fn this.cancelEdit "metaDescription")}}
@ -247,8 +247,8 @@
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>
<div class="gh-seo-preview-desc editable pointer" {{on "click" this.editMetaDescription}}>
{{moment-format (now) "DD MMM YYYY"}} — {{truncate this.serpDescription 170}}
</div>
{{/if}}
</div>