tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Fixed color picker and image uploaders in design settings

This commit is contained in:
Sanne de Vries 2021-10-12 16:37:25 +02:00
parent 089c81f136
commit 3c69d10d90
3 changed files with 81 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/gh-nav-menu/design.hbs
View File

@ -4,7 +4,7 @@
<section class="gh-nav-body gh-nav-design">
<div class="gh-nav-top" {{on "click" this.transitionBackToIndex}}>
<div class="gh-nav-list gh-nav-main">
<button type="button" {{on "click" (fn this.toggleSection "brand")}}>
<button class="gh-nav-design-tab" type="button" {{on "click" (fn this.toggleSection "brand")}}>
{{svg-jar "paintbrush" class="w4"}}Brand
{{!-- <span class="db">{{svg-jar (if (set-has this.openSections "brand") "arrow-up-small" "arrow-down-small") class="w4"}}</span> --}}
</button>
@ -18,7 +18,7 @@
{{#if this.themeSettings}}
{{#each this.settingGroups as |group|}}
<button type="button" {{on "click" (fn this.toggleSection group.key)}}>
<button class="gh-nav-design-tab" type="button" {{on "click" (fn this.toggleSection group.key)}}>
{{svg-jar group.icon class="w4"}} {{group.name}}
{{!-- <span class="db">{{svg-jar (if (set-has this.openSections group.key) "arrow-up-small" "arrow-down-small") class="w4"}}</span> --}}
</button>
@ -37,6 +37,6 @@
</div>
<div class="gh-nav-bottom">
<LinkTo @route="settings.design.change-theme">{{svg-jar "settings"}}Change theme</LinkTo>
<LinkTo class="gh-nav-design-tab" @route="settings.design.change-theme">{{svg-jar "settings"}}Change theme</LinkTo>
</div>
</section>

4
app/components/settings/design/general-settings-form.hbs
View File

@ -84,7 +84,7 @@
>
<div class="gh-setting-content">
<div class="gh-setting-title">Publication icon</div>
<div class="gh-setting-desc">A square, social icon used in the UI of your publication, at least 60x60px</div>
<div class="gh-setting-desc">A square, social icon, at least 60x60px</div>
{{#each uploader.errors as |error|}}
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
{{/each}}
@ -119,7 +119,7 @@
>
<div>
<div class="gh-setting-title">Publication logo</div>
<div class="gh-setting-desc mb3">The primary logo for your brand displayed across your theme, should be transparent and at least 600px x 72px</div>
<div class="gh-setting-desc mb3">The primary logo, should be transparent and at least 600x72px</div>
<div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column">
{{#each uploader.errors as |error|}}

80
app/styles/layouts/settings.css
View File

@ -1410,13 +1410,13 @@ p.theme-validation-details {
fill: var(--black);
}
.gh-nav-design .gh-nav-list button,
.gh-nav-design .gh-nav-bottom a {
.gh-nav-design-tab {
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 7px var(--mainmenu-padding) 7px calc(var(--mainmenu-padding) + 7px);
color: var(--darkgrey-l1);
font-weight: 400;
font-size: 1.45rem;
@ -1424,8 +1424,8 @@ p.theme-validation-details {
transition: none;
}
.gh-nav-design .gh-nav-list button {
padding: 7px var(--mainmenu-padding) 7px calc(var(--mainmenu-padding) + 7px);
.gh-nav-bottom .gh-nav-design-tab {
padding: 0;
}
.gh-nav-design .gh-nav-bottom svg {
@ -1442,6 +1442,78 @@ p.theme-validation-details {
padding: 24px var(--mainmenu-padding) 32px calc(var(--mainmenu-padding) + 7px);
}
.gh-nav-design .gh-stack-item {
flex-direction: column;
}
.gh-nav-design .gh-setting-title {
font-size: 1.45rem;
}
.gh-nav-design .gh-setting-action {
align-self: flex-start;
}
.gh-nav-design .input-color input {
position: relative;
height: 30px;
width: 102px;
padding: 3px 4px 3px 44px;
font-size: 1.3rem;
}
.gh-nav-design .input-color::after {
top: 5px;
left: 34px;
}
.gh-nav-design .color-box-container {
height: 26px;
width: 26px;
position: absolute;
overflow: hidden;
top: 2px;
left: 2px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.gh-nav-design .color-box-container .color-picker {
position: absolute;
top: -10px;
left: -10px;
border: none;
outline: none;
padding: 0;
margin: 0;
width: 50px;
height: 50px;
}
.gh-nav-design .gh-setting-action-largeimg-delete,
.gh-nav-design .gh-setting-action-smallimg-delete {
position: absolute;
top: 5px;
right: 5px;
background: rgba(0, 0, 0, 0.9);
border: 1px solid rgba(255, 255, 255, 0.25);
padding: 5px;
margin: 0;
border-radius: 3px;
opacity: 0;
}
.gh-nav-design .gh-setting-action-largeimg-delete:hover,
.gh-nav-design .gh-setting-action-smallimg-delete:hover {
background: var(--red);
border-color: transparent;
}
.gh-nav-design .gh-setting-action-largeimg-delete svg,
.gh-nav-design .gh-setting-action-smallimg-delete svg {
margin: 0;
}
.gh-theme-setting-title {
margin-bottom: 1rem;
}