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

Refined feature image hover state and spacing

Browse source
This commit is contained in:
Sanne de Vries 2021-06-30 12:42:42 +02:00
parent f65bb737c3
commit 0d01065dcf
3 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/gh-editor-feature-image.hbs
View file

@ -21,10 +21,10 @@
{{/each}} {{/each}}
{{else if @image}} {{else if @image}}
{{!-- image is present --}} {{!-- image is present --}}
<div class="gh-editor-feature-image">
<span class="gh-editor-feature-image-indicator" data-tooltip="A feature image is publicly visible to anyone"> <span class="gh-editor-feature-image-indicator" data-tooltip="A feature image is publicly visible to anyone">
{{svg-jar "feature-image"}} {{svg-jar "feature-image"}}
</span> </span>
<div class="gh-editor-feature-image">
<img src={{@image}}> <img src={{@image}}>
<button type="button" class="image-delete" title="Delete image" {{on "click" @clearImage}}> <button type="button" class="image-delete" title="Delete image" {{on "click" @clearImage}}>
{{svg-jar "trash"}} {{svg-jar "trash"}}

2
ghost/admin/app/styles/components/settings-menu.css
View file

@ -448,7 +448,7 @@
} }
.settings-menu-content.labs { .settings-menu-content.labs {
padding: 104px 24px 33px; padding: 92px 24px 33px;
} }
.settings-menu-header.subview.labs { .settings-menu-header.subview.labs {

15
ghost/admin/app/styles/layouts/editor.css
View file

@ -398,19 +398,26 @@
width: 100%; width: 100%;
max-width: 740px; max-width: 740px;
min-height: auto; min-height: auto;
margin-left: auto; margin: -56px auto 0;
margin-right: auto;
padding-bottom: 3.6rem; padding-bottom: 3.6rem;
} }
.gh-editor-feature-image-container .gh-progress-container-progress {
width: 100%;
}
.gh-editor-feature-image { .gh-editor-feature-image {
margin-left: -1.2rem; margin-left: -1.2rem;
padding-left: 1.2rem; padding-left: 1.2rem;
border-left: 1px solid var(--whitegrey); border-left: 1px solid var(--whitegrey);
} }
.gh-editor-feature-image-container .gh-progress-container-progress { .gh-editor-feature-image .image-delete {
width: 100%; opacity: 0;
}
.gh-editor-feature-image:hover .image-delete {
opacity: 1;
} }
.gh-editor-feature-image-add-button { .gh-editor-feature-image-add-button {