TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 05:37:34 +03:00
Code Issues Projects Releases Wiki Activity

Updated editor product card styles

Browse Source 
refs https://github.com/TryGhost/Team/issues/1245
This commit is contained in:
djordje vlaisavljevic 2021-12-07 01:16:41 +01:00
parent a18b3ac369
commit fc00dc1abc
2 changed files with 60 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ghost/admin/app/styles/components/koenig.css
View File

@ -1742,6 +1742,7 @@ button.emoji-picker__category-button.active {
text-decoration: none;
min-width: 440px;
max-width: 512px;
padding: 20px;
}
.kg-product-card-image {
@ -1757,8 +1758,10 @@ button.emoji-picker__category-button.active {
fill: #15171a;
}
.kg-product-card-text {
padding: 20px;
.kg-product-card-header {
display: flex;
align-items: flex-start;
margin-top: 16px;
}
.kg-product-card-title {
@ -1794,12 +1797,21 @@ button.emoji-picker__category-button.active {
margin-top: 24px;
}
.kg-product-card-rating-star:hover {
opacity: 0.7;
}
.kg-product-card-rating-edit {
background: none;
display: flex;
}
.kg-product-card-rating-star path {
fill: grey;
fill: var(--whitegrey);
}
.kg-product-card-rating-active.kg-product-card-rating-star path {
fill: gold;
fill: var(--darkgrey);
}
/* Button card

30
ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.hbs
View File

@ -34,7 +34,7 @@
<div class="relative{{unless (or this.previewSrc @payload.productImageSrc) " bg-whitegrey-l2"}}">
{{#if (or this.previewSrc @payload.productImageSrc)}}
<img src={{or this.previewSrc @payload.productImageSrc}} class="{{kg-style this.kgImgStyle sidebar=this.ui.hasSideNav}} kg-product-card-image">
<button class="absolute bg-white-90 pl3 pr3 br3 pb2 pt2 pe-auto kg-product-card-trash-icon" style="top: 20px; right: 20px; font-size: 1.2rem;" {{action "resetSrcs"}}><span>{{svg-jar "koenig/kg-edit"}}</span></button>
<button class="absolute bg-white-90 pl3 pr3 br3 pb2 pt2 pe-auto kg-product-card-trash-icon" style="top: 20px; right: 20px; font-size: 1.2rem;" {{action "resetSrcs"}}><span>{{svg-jar "koenig/kg-trash"}}</span></button>
{{#if this.isDraggedOver}}
<div class="absolute absolute--fill flex items-center bg-black-60 pe-none">
<span class="db center sans-serif fw7 f7 white">
@ -73,24 +73,16 @@
</div>
</GhUploader>
<div class="kg-product-card-text">
<div class="kg-product-card-header">
<KoenigBasicHtmlInput
@html={{@payload.productTitle}}
@placeholder="Add a product title..."
@placeholder="Product title"
@class="w-100 fw4 bn bg-transparent kg-product-card-title"
@name="title"
@defaultTag="h4"
@onChange={{action "setProductTitle"}}
@didCreateEditor={{action "registerEditor"}}
/>
<KoenigBasicHtmlInput
@html={{@payload.productDescription}}
@placeholder="Add a product description..."
@class="w-100 fw4 bn bg-transparent kg-product-card-description"
@name="description"
@defaultTag="p"
@onChange={{action "setProductDescription"}}
@didCreateEditor={{action "registerEditor"}}
/>
<div class="kg-product-card-rating-edit gh-btn-group icons" style="line-height: auto;">
<button class="{{if (gte @payload.productStarRating 1) "kg-product-card-rating-active gh-btn-group-selected"}} gh-btn gh-btn-icon kg-product-card-rating-star" value="1" onclick={{action "changeStars"}}>
<span>{{svg-jar "koenig/kg-edit"}}</span>
@ -108,6 +100,17 @@
<span>{{svg-jar "koenig/kg-edit"}}</span>
</button>
</div>
</div>
<KoenigBasicHtmlInput
@html={{@payload.productDescription}}
@placeholder="Description"
@class="w-100 fw4 bn bg-transparent kg-product-card-description"
@name="description"
@defaultTag="p"
@onChange={{action "setProductDescription"}}
@didCreateEditor={{action "registerEditor"}}
/>
{{#if (and @payload.productButton @payload.productUrl)}}
<a href={{@payload.productUrl}} class="gh-btn gh-btn-accent kg-product-card-button" target="_blank" rel="noopener noreferrer"><span>{{@payload.productButton}}</span></a>
{{/if}}
@ -155,8 +158,8 @@
<img src={{@payload.productImageSrc}} class="kg-product-card-image" />
{{/if}}
<div class="kg-product-card-text">
<div class="kg-product-card-header">
<h4 class="kg-product-card-title">{{{@payload.productTitle}}}</h4>
<p class="kg-product-card-description">{{{@payload.productDescription}}}</p>
{{#if @payload.productStarRating}}
<div class="kg-product-card-rating-edit">
<span class="{{if (gte @payload.productStarRating 1) "kg-product-card-rating-active gh-btn-group-selected"}} kg-product-card-rating-star">{{svg-jar "koenig/kg-edit" class="w4 h4"}}</span>
@ -166,6 +169,9 @@
<span class="{{if (gte @payload.productStarRating 5) "kg-product-card-rating-active gh-btn-group-selected"}} kg-product-card-rating-star">{{svg-jar "koenig/kg-edit" class="w4 h4"}}</span>
</div>
{{/if}}
</div>
<p class="kg-product-card-description">{{{@payload.productDescription}}}</p>
{{#if (and @payload.productButton @payload.productUrl)}}
<a href={{@payload.productUrl}} class="gh-btn gh-btn-accent kg-product-card-button" target="_blank" rel="noopener noreferrer"><span>{{@payload.productButton}}</span></a>
{{/if}}