Refined audio and bookmark cards in editor

Refs https://github.com/TryGhost/Team/issues/1230
This commit is contained in:
Sanne de Vries 2021-12-13 19:08:55 +01:00
parent a9002be337
commit 6df5708c7f
3 changed files with 31 additions and 15 deletions

View File

@ -1169,9 +1169,9 @@
.kg-bookmark-card {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--whitegrey);
border: 1px solid rgba(124, 139, 154, 0.25);
background: var(--white);
border-radius: 4px;
border-radius: var(--border-radius);
}
.kg-bookmark-container {
@ -1228,8 +1228,7 @@
position: absolute;
top: 0;
left: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-radius: 0 2px 2px 0;
}
.kg-bookmark-metadata {
@ -2069,6 +2068,24 @@ button.emoji-picker__category-button.active {
opacity: .6;
}
.kg-upload-button .kg-audio-upload-icon {
width: 24px;
height: 24px;
transition: var(--animation-speed-fast) ease-out;
transform: scale(1.0);
}
.kg-upload-button .kg-audio-upload-icon path {
stroke: var(--white);
stroke-width: 1.5;
}
.kg-upload-button:hover .kg-audio-upload-icon {
width: 24px;
height: 24px;
transform: scale(1.06);
}
.kg-upload-button img {
width: 100%;
height: 100%;

View File

@ -78,19 +78,18 @@
</div>
</div>
</div>
{{else}}
{{#if @isEditing}}
<button class="kg-upload-button pointer" {{on "click" this.triggerThumbnailFileDialog}}>
{{svg-jar "upload" class="kg-audio-upload-icon"}}
</button>
{{else}}
<button class="kg-upload-button">
{{svg-jar "audio-file" class="kg-audio-icon"}}
<div class="image-overlay">
<div class="flex flex-row-reverse">
<button class="bg-white-90 br3 pe-auto" {{on "click" this.triggerThumbnailFileDialog}}>
{{svg-jar "upload" class="koenig-audio-upload-icon"}}
</button>
</div>
</div>
</button>
{{/if}}
{{/if}}
{{/if}}
<div style="display:none">
<GhFileInput
@multiple={{false}}

View File

@ -17,7 +17,7 @@
as |card|
>
{{#if this.payload.metadata}}
<div class="kg-card-hover">
<div class="ba b--transparent relative kg-card kg-card-hover">
<div class="koenig-embed-{{this.payload.type}} flex justify-center relative" data-kg-embed>
{{!-- <iframe class="bn miw-100" scrolling="no"></iframe> --}}
<figure class="kg-card kg-bookmark-card also-new-tag">