Skip to content

Commit

Permalink
Updated tag page styles
Browse files Browse the repository at this point in the history 
REF DES-800
  • Loading branch information
@sanne-san
sanne-san committed Oct 10, 2024
1 parent dc4db2b commit 602ab65
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 163 deletions.
209 changes: 100 additions & 109 deletions ghost/admin/app/components/tags/tag-form.hbs
View file
Original file line number Diff line number Diff line change
@@ -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>

<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>
<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="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">
Expand All @@ -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"))}}
Expand All @@ -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")}}
Expand All @@ -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}}
Expand Down Expand Up @@ -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"))}}
Expand All @@ -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")}}
Expand Down Expand Up @@ -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"))}}
Expand All @@ -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")}}
Expand Down
15 changes: 15 additions & 0 deletions ghost/admin/app/controllers/tag.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,33 @@
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';

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, {
Expand Down
23 changes: 9 additions & 14 deletions ghost/admin/app/styles/layouts/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1334,16 +1334,17 @@

/* 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 {
overflow-x: hidden;
}

.gh-expandable-block {
border-bottom: 1px solid var(--white);
border-bottom: 1px solid var(--whitegrey);
padding: 18px 24px;
margin: 0;
}
Expand Down Expand Up @@ -1382,7 +1383,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;
}
Expand All @@ -1404,22 +1405,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 {
Expand Down
Loading

0 comments on commit 602ab65

Please sign in to comment.