mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-30 22:34:01 -05:00
Updated tag page styles
REF DES-800
This commit is contained in:
Sanne de Vries
Sodbileg Gansukh
parent
5fd8126fc3
commit
58f175761a
7 changed files with 161 additions and 163 deletions
|
|
@ -1,111 +1,102 @@
|
|||
<div class="gh-main-section">
|
||||
<div class="flex justify-between items-center">
|
||||
<h4 class="gh-main-section-header small bn">Basic settings</h4>
|
||||
<a href={{this.tagURL}} target="_blank" rel="noopener noreferrer" class="gh-view-tag-link">View tag {{svg-jar "external"}}</a>
|
||||
</div>
|
||||
<section class="gh-main-section-block">
|
||||
<div class="gh-main-section-content grey columns-2">
|
||||
<div>
|
||||
<div class="gh-tag-settings-multiprop">
|
||||
<GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="name" class="mr2 flex-auto">
|
||||
<label for="tag-name">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
class="gh-input"
|
||||
id="tag-name"
|
||||
name="name"
|
||||
value={{@tag.name}}
|
||||
{{on "input" (pick "target.value" (fn this.setTagProperty "name"))}}
|
||||
{{on "blur" (fn this.validateTagProperty "name")}}
|
||||
data-test-input="tag-name"
|
||||
/>
|
||||
<span class="error">
|
||||
<GhErrorMessage @errors={{@tag.errors}} @property="name" />
|
||||
<GhErrorMessage @errors={{@tag.errors}} @property="accentColor" data-test-error="accentColor" />
|
||||
</span>
|
||||
<p class="description">
|
||||
Start with # to create internal tags
|
||||
<a href="https://ghost.org/help/organising-content/#private-tags" target="_blank" rel="noopener noreferrer">Learn more</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
<div class="gh-main-section columns-2">
|
||||
<div>
|
||||
<div class="gh-tag-settings-multiprop">
|
||||
<GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="name" class="mr2 flex-auto">
|
||||
<label for="tag-name">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
class="gh-input-admin-x"
|
||||
id="tag-name"
|
||||
name="name"
|
||||
value={{@tag.name}}
|
||||
{{on "input" (pick "target.value" (fn this.setTagProperty "name"))}}
|
||||
{{on "blur" (fn this.validateTagProperty "name")}}
|
||||
data-test-input="tag-name"
|
||||
/>
|
||||
<span class="error">
|
||||
<GhErrorMessage @errors={{@tag.errors}} @property="name" />
|
||||
<GhErrorMessage @errors={{@tag.errors}} @property="accentColor" data-test-error="accentColor" />
|
||||
</span>
|
||||
<p class="description">
|
||||
Start with # to create internal tags.
|
||||
<a href="https://ghost.org/help/organising-content/#private-tags" target="_blank" rel="noopener noreferrer">Learn more</a>
|
||||
</p>
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="accentColor" class="gh-tag-settings-colorcontainer">
|
||||
<label for="accent-color">Color</label>
|
||||
<div class="input-color">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="15171A"
|
||||
name="accent-color"
|
||||
autocorrect="off"
|
||||
maxlength="6"
|
||||
value={{this.accentColor}}
|
||||
class="gh-input"
|
||||
{{on "input" (perform this.debounceUpdateAccentColorTask)}}
|
||||
{{on "blur" this.updateAccentColor}}
|
||||
aria-label="Accent color hex value"
|
||||
data-test-input="accentColor"
|
||||
/>
|
||||
<div class="color-picker-horizontal-divider"></div>
|
||||
<div
|
||||
class="color-box-container"
|
||||
style={{this.accentColorBgStyle}}
|
||||
>
|
||||
<input
|
||||
type="color"
|
||||
name="accent-color"
|
||||
class="color-picker"
|
||||
value={{this.accentColorPickerValue}}
|
||||
{{on "input" (perform this.debounceUpdateAccentColorTask)}}
|
||||
aria-label="Accent color picker"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
|
||||
<GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="slug">
|
||||
<label for="tag-slug">Slug</label>
|
||||
<GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="accentColor" class="gh-tag-settings-colorcontainer">
|
||||
<label for="accent-color">Color</label>
|
||||
<div class="input-color">
|
||||
<input
|
||||
type="text"
|
||||
value={{@tag.slug}}
|
||||
id="tag-slug"
|
||||
name="slug"
|
||||
class="gh-input"
|
||||
{{on "input" (pick "target.value" (fn this.setTagProperty "slug"))}}
|
||||
{{on "blur" (fn this.validateTagProperty "slug")}}
|
||||
data-test-input="tag-slug"
|
||||
placeholder="15171A"
|
||||
name="accent-color"
|
||||
autocorrect="off"
|
||||
maxlength="6"
|
||||
value={{this.accentColor}}
|
||||
class="gh-input-admin-x"
|
||||
{{on "input" (perform this.debounceUpdateAccentColorTask)}}
|
||||
{{on "blur" this.updateAccentColor}}
|
||||
aria-label="Accent color hex value"
|
||||
data-test-input="accentColor"
|
||||
/>
|
||||
<GhUrlPreview @prefix="tag" @slug={{@tag.slug}} @tagName="p" @classNames="description" />
|
||||
<GhErrorMessage @errors={{@tag.errors}} @property="slug" />
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup class="no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="description">
|
||||
<label for="tag-description">Description</label>
|
||||
<textarea
|
||||
id="tag-description"
|
||||
name="description"
|
||||
class="gh-input gh-tag-details-textarea"
|
||||
{{on "input" (pick "target.value" (fn this.setTagProperty "description"))}}
|
||||
{{on "blur" (fn this.validateTagProperty "description")}}
|
||||
data-test-input="tag-description"
|
||||
>{{@tag.description}}</textarea>
|
||||
|
||||
<GhErrorMessage @errors={{@tag.errors}} @property="description" />
|
||||
<p>Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters @tag.description 500}}</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<GhFormGroup class="gh-tag-image-uploader no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="featureImage">
|
||||
<label for="tag-image">Tag image</label>
|
||||
<GhImageUploaderWithPreview
|
||||
@image={{@tag.featureImage}}
|
||||
@text="Upload tag image"
|
||||
@allowUnsplash={{true}}
|
||||
@update={{fn this.setTagProperty "featureImage"}}
|
||||
@remove={{fn this.setTagProperty "featureImage" ""}}
|
||||
/>
|
||||
<div
|
||||
class="color-box-container"
|
||||
style={{this.accentColorBgStyle}}
|
||||
>
|
||||
<input
|
||||
type="color"
|
||||
name="accent-color"
|
||||
class="color-picker"
|
||||
value={{this.accentColorPickerValue}}
|
||||
{{on "input" (perform this.debounceUpdateAccentColorTask)}}
|
||||
aria-label="Accent color picker"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<GhFormGroup @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="slug">
|
||||
<label for="tag-slug">Slug</label>
|
||||
<input
|
||||
type="text"
|
||||
value={{@tag.slug}}
|
||||
id="tag-slug"
|
||||
name="slug"
|
||||
class="gh-input-admin-x"
|
||||
{{on "input" (pick "target.value" (fn this.setTagProperty "slug"))}}
|
||||
{{on "blur" (fn this.validateTagProperty "slug")}}
|
||||
data-test-input="tag-slug"
|
||||
/>
|
||||
<GhUrlPreview @prefix="tag" @slug={{@tag.slug}} @tagName="p" @classNames="description" />
|
||||
<GhErrorMessage @errors={{@tag.errors}} @property="slug" />
|
||||
</GhFormGroup>
|
||||
|
||||
<GhFormGroup class="no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="description">
|
||||
<label for="tag-description">Description</label>
|
||||
<textarea
|
||||
id="tag-description"
|
||||
name="description"
|
||||
class="gh-input-admin-x gh-tag-details-textarea"
|
||||
{{on "input" (pick "target.value" (fn this.setTagProperty "description"))}}
|
||||
{{on "blur" (fn this.validateTagProperty "description")}}
|
||||
data-test-input="tag-description"
|
||||
>{{@tag.description}}</textarea>
|
||||
|
||||
<GhErrorMessage @errors={{@tag.errors}} @property="description" />
|
||||
<p>Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters @tag.description 500}}</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<GhFormGroup class="gh-tag-image-uploader no-margin" @errors={{@tag.errors}} @hasValidated={{@tag.hasValidated}} @property="featureImage">
|
||||
<label for="tag-image">Tag image</label>
|
||||
<GhImageUploaderWithPreview
|
||||
@image={{@tag.featureImage}}
|
||||
@text="Upload tag image"
|
||||
@allowUnsplash={{true}}
|
||||
@update={{fn this.setTagProperty "featureImage"}}
|
||||
@remove={{fn this.setTagProperty "featureImage" ""}}
|
||||
/>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
|
||||
<section class="gh-expandable">
|
||||
|
|
@ -128,7 +119,7 @@
|
|||
<input
|
||||
id="meta-title"
|
||||
name="metaTitle"
|
||||
class="gh-input"
|
||||
class="gh-input-admin-x"
|
||||
placeholder={{@tag.name}}
|
||||
value={{@tag.metaTitle}}
|
||||
{{on "input" (pick "target.value" (fn this.setTagProperty "metaTitle"))}}
|
||||
|
|
@ -143,7 +134,7 @@
|
|||
<textarea
|
||||
id="meta-description"
|
||||
name="metaDescription"
|
||||
class="gh-input gh-tag-details-textarea"
|
||||
class="gh-input-admin-x gh-tag-details-textarea"
|
||||
placeholder={{@tag.description}}
|
||||
{{on "input" (pick "target.value" (fn this.setTagProperty "metaDescription"))}}
|
||||
{{on "blur" (fn this.validateTagProperty "metaDescription")}}
|
||||
|
|
@ -157,7 +148,7 @@
|
|||
<input
|
||||
id="canonical-url"
|
||||
name="canonicalUrl"
|
||||
class="gh-input"
|
||||
class="gh-input-admin-x"
|
||||
value={{@tag.canonicalUrl}}
|
||||
{{on "input" (pick "target.value" (fn this.setTagProperty "canonicalUrl"))}}
|
||||
{{on "blur" this.validateCanonicalUrl}}
|
||||
|
|
@ -217,7 +208,7 @@
|
|||
type="text"
|
||||
id="twitter-title"
|
||||
name="twitterTitle"
|
||||
class="gh-input"
|
||||
class="gh-input-admin-x"
|
||||
placeholder={{@tag.name}}
|
||||
value={{@tag.twitterTitle}}
|
||||
{{on "input" (pick "target.value" (fn this.setTagProperty "twitterTitle"))}}
|
||||
|
|
@ -232,7 +223,7 @@
|
|||
<textarea
|
||||
id="twitter-description"
|
||||
name="twitterDescription"
|
||||
class="gh-input gh-tag-details-textarea"
|
||||
class="gh-input-admin-x gh-tag-details-textarea"
|
||||
placeholder={{@tag.description}}
|
||||
{{on "input" (pick "target.value" (fn this.setTagProperty "twitterDescription"))}}
|
||||
{{on "blur" (fn this.validateTagProperty "twitterDescription")}}
|
||||
|
|
@ -314,7 +305,7 @@
|
|||
type="text"
|
||||
id="og-title"
|
||||
name="ogTitle"
|
||||
class="gh-input"
|
||||
class="gh-input-admin-x"
|
||||
placeholder={{@tag.name}}
|
||||
value={{@tag.ogTitle}}
|
||||
{{on "input" (pick "target.value" (fn this.setTagProperty "ogTitle"))}}
|
||||
|
|
@ -329,7 +320,7 @@
|
|||
<textarea
|
||||
id="og-description"
|
||||
name="ogDescription"
|
||||
class="gh-input gh-tag-details-textarea"
|
||||
class="gh-input-admin-x gh-tag-details-textarea"
|
||||
placeholder={{@tag.description}}
|
||||
{{on "input" (pick "target.value" (fn this.setTagProperty "ogDescription"))}}
|
||||
{{on "blur" (fn this.validateTagProperty "ogDescription")}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import Controller from '@ember/controller';
|
||||
import DeleteTagModal from '../components/tags/delete-tag-modal';
|
||||
import {action} from '@ember/object';
|
||||
import {inject} from 'ghost-admin/decorators/inject';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {task} from 'ember-concurrency';
|
||||
|
||||
|
|
@ -8,11 +9,25 @@ export default class TagController extends Controller {
|
|||
@service modals;
|
||||
@service notifications;
|
||||
@service router;
|
||||
@inject config;
|
||||
|
||||
get tag() {
|
||||
return this.model;
|
||||
}
|
||||
|
||||
get tagURL() {
|
||||
const blogUrl = this.config.blogUrl;
|
||||
const tagSlug = this.tag?.slug || '';
|
||||
|
||||
let tagURL = this.tag?.canonicalUrl || `${blogUrl}/tag/${tagSlug}`;
|
||||
|
||||
if (!tagURL.endsWith('/')) {
|
||||
tagURL += '/';
|
||||
}
|
||||
|
||||
return tagURL;
|
||||
}
|
||||
|
||||
@action
|
||||
confirmDeleteTag() {
|
||||
return this.modals.open(DeleteTagModal, {
|
||||
|
|
|
|||
|
|
@ -1339,8 +1339,9 @@
|
|||
|
||||
/* Expandable options */
|
||||
.gh-expandable {
|
||||
background: var(--main-color-content-greybg);
|
||||
border-radius: 3px;
|
||||
background: var(--white);
|
||||
border: 1px solid var(--whitegrey);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.gh-expandable.overflow-hidden {
|
||||
|
|
@ -1348,7 +1349,7 @@
|
|||
}
|
||||
|
||||
.gh-expandable-block {
|
||||
border-bottom: 1px solid var(--white);
|
||||
border-bottom: 1px solid var(--whitegrey);
|
||||
padding: 18px 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1387,7 +1388,7 @@
|
|||
}
|
||||
|
||||
.gh-expandable-content {
|
||||
background: linear-gradient(var(--main-color-content-greybg), color-mod(var(--main-color-content-greybg) l(-2%)));
|
||||
background: var(--white);
|
||||
margin: 18px -24px -18px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
|
@ -1409,22 +1410,16 @@
|
|||
}
|
||||
|
||||
.gh-expandable-header .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red) {
|
||||
background: color-mod(var(--whitegrey-d1) l(-1%));
|
||||
background: var(--white);
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
.gh-expandable-header .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):hover {
|
||||
background: color-mod(var(--whitegrey-d2) l(-1%));
|
||||
background: var(--whitegrey-l1);
|
||||
}
|
||||
|
||||
.gh-main-section-content.grey .gh-btn-group {
|
||||
background: var(--whitegrey-d1);
|
||||
}
|
||||
|
||||
.gh-expandable-content input:not(:focus),
|
||||
.gh-expandable-content .gh-input:not(:focus),
|
||||
.gh-expandable-content .ember-power-select-multiple-trigger,
|
||||
.gh-expandable-content select:not(:focus) {
|
||||
border-color: var(--whitegrey-d1);
|
||||
background: var(--whitegrey);
|
||||
}
|
||||
|
||||
.gh-main-section-content.grey .gh-btn-tabs {
|
||||
|
|
|
|||
|
|
@ -4,10 +4,6 @@ a.gh-tag-list-posts-count:hover {
|
|||
color: color-mod(var(--green) l(-25%) s(+15%));
|
||||
}
|
||||
|
||||
textarea.gh-tag-details-textarea {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gh-tags-placeholder {
|
||||
width: 60px;
|
||||
fill: var(--lightgrey);
|
||||
|
|
@ -136,10 +132,11 @@ textarea.gh-tag-details-textarea {
|
|||
}
|
||||
|
||||
.gh-tag-image-uploader .gh-image-uploader {
|
||||
margin: 4px 0 0;
|
||||
background: transparent;
|
||||
border: 1px solid var(--whitegrey-d2);
|
||||
min-height: 147px;
|
||||
margin: 4px 0 0;
|
||||
background: var(--grey-75);
|
||||
border: 1px solid var(--grey-100);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.gh-tag-setting-codeinjection .CodeMirror {
|
||||
|
|
@ -187,7 +184,7 @@ label.gh-tag-setting-codeheader {
|
|||
position: absolute;
|
||||
top: 9px;
|
||||
left: 43px;
|
||||
color: var(--midlightgrey);
|
||||
color: var(--black);
|
||||
font-family: "Consolas", monaco, monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -239,22 +236,6 @@ label.gh-tag-setting-codeheader {
|
|||
left: 44px;
|
||||
}
|
||||
|
||||
.gh-tag-settings-colorcontainer .color-picker-horizontal-divider {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
width: 1px;
|
||||
top: 0;
|
||||
left: 37px;
|
||||
bottom: 0;
|
||||
background: var(--input-border-color);
|
||||
}
|
||||
|
||||
.gh-tag-settings-colorcontainer .input-color input:focus + .color-picker-horizontal-divider {
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
.gh-tag-settings-colorcontainer .color-box-container {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
|
@ -263,8 +244,8 @@ label.gh-tag-setting-codeheader {
|
|||
top: 2px;
|
||||
left: 2px;
|
||||
margin: 1px;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border: 1px solid var(--grey-150);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.gh-tag-settings-colorcontainer .color-box-container .color-picker {
|
||||
|
|
@ -333,7 +314,6 @@ label.gh-tag-setting-codeheader {
|
|||
|
||||
.gh-setting-content-extended .gh-image-uploader {
|
||||
margin: 0;
|
||||
border: 1px solid var(--whitegrey-d2);
|
||||
}
|
||||
|
||||
.gh-setting-content-extended .gh-btn span {
|
||||
|
|
|
|||
|
|
@ -267,10 +267,9 @@ fieldset[disabled] .gh-btn {
|
|||
|
||||
.gh-btn-icon-right svg,
|
||||
svg.gh-btn-icon-right {
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0;
|
||||
width: auto;
|
||||
height: 16px;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
|
||||
.gh-btn-icon svg path {
|
||||
|
|
@ -360,7 +359,7 @@ svg.gh-btn-icon-right {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-btn-action-icon:not(.icon-only) svg {
|
||||
.gh-btn-action-icon:not(.icon-only):not(.gh-btn-icon-right) svg {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -369,6 +368,12 @@ svg.gh-btn-icon-right {
|
|||
stroke: currentColor;
|
||||
}
|
||||
|
||||
.gh-btn-action-icon.gh-btn-icon-right svg {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.gh-btn-label-green {
|
||||
color: var(--green);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -214,15 +214,24 @@ select {
|
|||
}
|
||||
|
||||
.gh-input-admin-x {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 4px 12px;
|
||||
font-size: 1.4rem;
|
||||
color: var(--black);
|
||||
background-color: var(--grey-150);
|
||||
border: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.gh-input-admin-x:focus,
|
||||
.gh-input-admin-x:focus-visible {
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--green);
|
||||
box-shadow: 0 0 0 2px rgba(48,207,67,.25);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea.gh-input-admin-x {
|
||||
padding-block: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,13 +14,16 @@
|
|||
</div>
|
||||
|
||||
<section class="view-actions">
|
||||
<GhTaskButton
|
||||
@task={{this.saveTask}}
|
||||
@type="button"
|
||||
@class="gh-btn gh-btn-primary gh-btn-icon"
|
||||
@data-test-button="save"
|
||||
{{on-key "cmd+s"}}
|
||||
/>
|
||||
<div class="view-actions-bottom-row">
|
||||
<a href={{this.tagURL}} target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-icon-right gh-btn-action-icon"><span>View{{svg-jar "arrow-top-right"}}</span></a>
|
||||
<GhTaskButton
|
||||
@task={{this.saveTask}}
|
||||
@type="button"
|
||||
@class="gh-btn gh-btn-primary gh-btn-icon"
|
||||
@data-test-button="save"
|
||||
{{on-key "cmd+s"}}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</GhCanvasHeader>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue