mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 03:44:29 +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;
|
||||
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
|
||||
|
||||
@ -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,41 +73,44 @@
|
||||
</div>
|
||||
</GhUploader>
|
||||
<div class="kg-product-card-text">
|
||||
<KoenigBasicHtmlInput
|
||||
@html={{@payload.productTitle}}
|
||||
@placeholder="Add a product title..."
|
||||
@class="w-100 fw4 bn bg-transparent kg-product-card-title"
|
||||
@name="title"
|
||||
@defaultTag="h4"
|
||||
@onChange={{action "setProductTitle"}}
|
||||
@didCreateEditor={{action "registerEditor"}}
|
||||
/>
|
||||
<div class="kg-product-card-header">
|
||||
<KoenigBasicHtmlInput
|
||||
@html={{@payload.productTitle}}
|
||||
@placeholder="Product title"
|
||||
@class="w-100 fw4 bn bg-transparent kg-product-card-title"
|
||||
@name="title"
|
||||
@defaultTag="h4"
|
||||
@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
|
||||
@html={{@payload.productDescription}}
|
||||
@placeholder="Add a product description..."
|
||||
@placeholder="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>
|
||||
</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)}}
|
||||
<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,17 +158,20 @@
|
||||
<img src={{@payload.productImageSrc}} class="kg-product-card-image" />
|
||||
{{/if}}
|
||||
<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>
|
||||
{{#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)}}
|
||||
<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}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user