mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 05:37:34 +03:00
Updated editor product card styles
refs https://github.com/TryGhost/Team/issues/1245
This commit is contained in:
djordje vlaisavljevic
parent
a18b3ac369
commit
fc00dc1abc
@ -1742,6 +1742,7 @@ button.emoji-picker__category-button.active {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
min-width: 440px;
|
min-width: 440px;
|
||||||
max-width: 512px;
|
max-width: 512px;
|
||||||
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-product-card-image {
|
.kg-product-card-image {
|
||||||
@ -1757,8 +1758,10 @@ button.emoji-picker__category-button.active {
|
|||||||
fill: #15171a;
|
fill: #15171a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-product-card-text {
|
.kg-product-card-header {
|
||||||
padding: 20px;
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-product-card-title {
|
.kg-product-card-title {
|
||||||
@ -1794,12 +1797,21 @@ button.emoji-picker__category-button.active {
|
|||||||
margin-top: 24px;
|
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 {
|
.kg-product-card-rating-star path {
|
||||||
fill: grey;
|
fill: var(--whitegrey);
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-product-card-rating-active.kg-product-card-rating-star path {
|
.kg-product-card-rating-active.kg-product-card-rating-star path {
|
||||||
fill: gold;
|
fill: var(--darkgrey);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Button card
|
/* Button card
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
<div class="relative{{unless (or this.previewSrc @payload.productImageSrc) " bg-whitegrey-l2"}}">
|
<div class="relative{{unless (or this.previewSrc @payload.productImageSrc) " bg-whitegrey-l2"}}">
|
||||||
{{#if (or this.previewSrc @payload.productImageSrc)}}
|
{{#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">
|
<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}}
|
{{#if this.isDraggedOver}}
|
||||||
<div class="absolute absolute--fill flex items-center bg-black-60 pe-none">
|
<div class="absolute absolute--fill flex items-center bg-black-60 pe-none">
|
||||||
<span class="db center sans-serif fw7 f7 white">
|
<span class="db center sans-serif fw7 f7 white">
|
||||||
@ -73,41 +73,44 @@
|
|||||||
</div>
|
</div>
|
||||||
</GhUploader>
|
</GhUploader>
|
||||||
<div class="kg-product-card-text">
|
<div class="kg-product-card-text">
|
||||||
<KoenigBasicHtmlInput
|
<div class="kg-product-card-header">
|
||||||
@html={{@payload.productTitle}}
|
<KoenigBasicHtmlInput
|
||||||
@placeholder="Add a product title..."
|
@html={{@payload.productTitle}}
|
||||||
@class="w-100 fw4 bn bg-transparent kg-product-card-title"
|
@placeholder="Product title"
|
||||||
@name="title"
|
@class="w-100 fw4 bn bg-transparent kg-product-card-title"
|
||||||
@defaultTag="h4"
|
@name="title"
|
||||||
@onChange={{action "setProductTitle"}}
|
@defaultTag="h4"
|
||||||
@didCreateEditor={{action "registerEditor"}}
|
@onChange={{action "setProductTitle"}}
|
||||||
/>
|
@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>
|
||||||
|
</button>
|
||||||
|
<button class="{{if (gte @payload.productStarRating 2) "kg-product-card-rating-active gh-btn-group-selected"}} gh-btn gh-btn-icon kg-product-card-rating-star" value="2" onclick={{action "changeStars"}}>
|
||||||
|
<span>{{svg-jar "koenig/kg-edit"}}</span>
|
||||||
|
</button>
|
||||||
|
<button class="{{if (gte @payload.productStarRating 3) "kg-product-card-rating-active gh-btn-group-selected"}} gh-btn gh-btn-icon kg-product-card-rating-star" value="3" onclick={{action "changeStars"}}>
|
||||||
|
<span>{{svg-jar "koenig/kg-edit"}}</span>
|
||||||
|
</button>
|
||||||
|
<button class="{{if (gte @payload.productStarRating 4) "kg-product-card-rating-active gh-btn-group-selected"}} gh-btn gh-btn-icon kg-product-card-rating-star" value="4" onclick={{action "changeStars"}}>
|
||||||
|
<span>{{svg-jar "koenig/kg-edit"}}</span>
|
||||||
|
</button>
|
||||||
|
<button class="{{if (gte @payload.productStarRating 5) "kg-product-card-rating-active gh-btn-group-selected"}} gh-btn gh-btn-icon kg-product-card-rating-star" value="5" onclick={{action "changeStars"}}>
|
||||||
|
<span>{{svg-jar "koenig/kg-edit"}}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<KoenigBasicHtmlInput
|
<KoenigBasicHtmlInput
|
||||||
@html={{@payload.productDescription}}
|
@html={{@payload.productDescription}}
|
||||||
@placeholder="Add a product description..."
|
@placeholder="Description"
|
||||||
@class="w-100 fw4 bn bg-transparent kg-product-card-description"
|
@class="w-100 fw4 bn bg-transparent kg-product-card-description"
|
||||||
@name="description"
|
@name="description"
|
||||||
@defaultTag="p"
|
@defaultTag="p"
|
||||||
@onChange={{action "setProductDescription"}}
|
@onChange={{action "setProductDescription"}}
|
||||||
@didCreateEditor={{action "registerEditor"}}
|
@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>
|
|
||||||
</button>
|
|
||||||
<button class="{{if (gte @payload.productStarRating 2) "kg-product-card-rating-active gh-btn-group-selected"}} gh-btn gh-btn-icon kg-product-card-rating-star" value="2" onclick={{action "changeStars"}}>
|
|
||||||
<span>{{svg-jar "koenig/kg-edit"}}</span>
|
|
||||||
</button>
|
|
||||||
<button class="{{if (gte @payload.productStarRating 3) "kg-product-card-rating-active gh-btn-group-selected"}} gh-btn gh-btn-icon kg-product-card-rating-star" value="3" onclick={{action "changeStars"}}>
|
|
||||||
<span>{{svg-jar "koenig/kg-edit"}}</span>
|
|
||||||
</button>
|
|
||||||
<button class="{{if (gte @payload.productStarRating 4) "kg-product-card-rating-active gh-btn-group-selected"}} gh-btn gh-btn-icon kg-product-card-rating-star" value="4" onclick={{action "changeStars"}}>
|
|
||||||
<span>{{svg-jar "koenig/kg-edit"}}</span>
|
|
||||||
</button>
|
|
||||||
<button class="{{if (gte @payload.productStarRating 5) "kg-product-card-rating-active gh-btn-group-selected"}} gh-btn gh-btn-icon kg-product-card-rating-star" value="5" onclick={{action "changeStars"}}>
|
|
||||||
<span>{{svg-jar "koenig/kg-edit"}}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{{#if (and @payload.productButton @payload.productUrl)}}
|
{{#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>
|
<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}}
|
{{/if}}
|
||||||
@ -155,17 +158,20 @@
|
|||||||
<img src={{@payload.productImageSrc}} class="kg-product-card-image" />
|
<img src={{@payload.productImageSrc}} class="kg-product-card-image" />
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<div class="kg-product-card-text">
|
<div class="kg-product-card-text">
|
||||||
<h4 class="kg-product-card-title">{{{@payload.productTitle}}}</h4>
|
<div class="kg-product-card-header">
|
||||||
|
<h4 class="kg-product-card-title">{{{@payload.productTitle}}}</h4>
|
||||||
|
{{#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>
|
||||||
|
<span class="{{if (gte @payload.productStarRating 2) "kg-product-card-rating-active gh-btn-group-selected"}} kg-product-card-rating-star">{{svg-jar "koenig/kg-edit" class="w4 h4"}}</span>
|
||||||
|
<span class="{{if (gte @payload.productStarRating 3) "kg-product-card-rating-active gh-btn-group-selected"}} kg-product-card-rating-star">{{svg-jar "koenig/kg-edit" class="w4 h4"}}</span>
|
||||||
|
<span class="{{if (gte @payload.productStarRating 4) "kg-product-card-rating-active gh-btn-group-selected"}} kg-product-card-rating-star">{{svg-jar "koenig/kg-edit" class="w4 h4"}}</span>
|
||||||
|
<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>
|
<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>
|
|
||||||
<span class="{{if (gte @payload.productStarRating 2) "kg-product-card-rating-active gh-btn-group-selected"}} kg-product-card-rating-star">{{svg-jar "koenig/kg-edit" class="w4 h4"}}</span>
|
|
||||||
<span class="{{if (gte @payload.productStarRating 3) "kg-product-card-rating-active gh-btn-group-selected"}} kg-product-card-rating-star">{{svg-jar "koenig/kg-edit" class="w4 h4"}}</span>
|
|
||||||
<span class="{{if (gte @payload.productStarRating 4) "kg-product-card-rating-active gh-btn-group-selected"}} kg-product-card-rating-star">{{svg-jar "koenig/kg-edit" class="w4 h4"}}</span>
|
|
||||||
<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}}
|
|
||||||
{{#if (and @payload.productButton @payload.productUrl)}}
|
{{#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>
|
<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}}
|
{{/if}}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user