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

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 13:14:31 +01:00
parent 65dc4b1d5d
commit 9fd8ba431c
2 changed files with 71 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
ghost/admin/app/styles/components/koenig.css
View file

@ -1745,10 +1745,6 @@ button.emoji-picker__category-button.active {
padding: 20px;
}
.kg-product-card-image {
border-radius: 5px 5px 0 0;
}
.kg-product-card-trash-icon svg {
width: 16px;
height: 16px;
@ -1764,6 +1760,10 @@ button.emoji-picker__category-button.active {
margin-top: 16px;
}
.kg-product-card-title-container {
width: 100%;
}
.kg-product-card-title {
text-decoration: none;
color: #15171A;
@ -1779,11 +1779,11 @@ button.emoji-picker__category-button.active {
line-height: 1.6em;
}
.kg-product-card-description {
font-size: 16px;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif;
.kg-product-card-description, .kg-product-card-description p {
font-size: 16px !important;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif !important;
color: #656E7A;
margin-top: 4px;
margin-top: 4px !important;
}
.kg-product-card-description ::after {
@ -1797,7 +1797,20 @@ button.emoji-picker__category-button.active {
margin-top: 24px;
}
.kg-product-card-rating-star:hover {
.kg-product-card-rating-star span {
display: flex;
align-items: center;
justify-content: center;
}
.kg-product-card-rating-star svg {
width: 1em;
height: 1em;
margin-right: 0.6em;
fill: #fff;
}
.kg-product-card-rating-edit .kg-product-card-rating-star:hover {
opacity: 0.7;
}
@ -1806,6 +1819,10 @@ button.emoji-picker__category-button.active {
display: flex;
}
.kg-product-card-rating-preview {
display: flex;
}
.kg-product-card-rating-star path {
fill: var(--whitegrey);
}

84
ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.hbs
View file

@ -31,10 +31,17 @@
@onFailed={{action "resetSrcs"}}
as |uploader|
>
<div class="relative{{unless (or this.previewSrc @payload.productImageSrc) " bg-whitegrey-l2"}}">
<div class="relative hide-child{{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-trash"}}</span></button>
{{#unless this.koenigDragDropHandler.isDragging}}
<div class="bg-image-overlay-top child pe-none {{image.overlayClasses}}">
<div class="flex flex-row-reverse">
<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>
</div>
</div>
{{/unless}}
{{#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">
@ -83,21 +90,21 @@
@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>
<div class="kg-product-card-rating-edit icons" style="line-height: auto;">
<button class="{{if (gte @payload.productStarRating 1) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="1" onclick={{action "changeStars"}}>
<span>{{svg-jar "koenig/kg-star"}}</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 class="{{if (gte @payload.productStarRating 2) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="2" onclick={{action "changeStars"}}>
<span>{{svg-jar "koenig/kg-star"}}</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 class="{{if (gte @payload.productStarRating 3) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="3" onclick={{action "changeStars"}}>
<span>{{svg-jar "koenig/kg-star"}}</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 class="{{if (gte @payload.productStarRating 4) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="4" onclick={{action "changeStars"}}>
<span>{{svg-jar "koenig/kg-star"}}</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 class="{{if (gte @payload.productStarRating 5) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="5" onclick={{action "changeStars"}}>
<span>{{svg-jar "koenig/kg-star"}}</span>
</button>
</div>
</div>
@ -111,21 +118,21 @@
@didCreateEditor={{action "registerEditor"}}
/>
{{#if @payload.productRatingEnabled}}
<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>
<div class="kg-product-card-rating-edit icons" style="line-height: auto;">
<button class="{{if (gte @payload.productStarRating 1) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="1" onclick={{action "changeStars"}}>
<span>{{svg-jar "koenig/kg-star"}}</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 class="{{if (gte @payload.productStarRating 2) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="2" onclick={{action "changeStars"}}>
<span>{{svg-jar "koenig/kg-star"}}</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 class="{{if (gte @payload.productStarRating 3) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="3" onclick={{action "changeStars"}}>
<span>{{svg-jar "koenig/kg-star"}}</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 class="{{if (gte @payload.productStarRating 4) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="4" onclick={{action "changeStars"}}>
<span>{{svg-jar "koenig/kg-star"}}</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 class="{{if (gte @payload.productStarRating 5) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="5" onclick={{action "changeStars"}}>
<span>{{svg-jar "koenig/kg-star"}}</span>
</button>
</div>
{{/if}}
@ -208,27 +215,28 @@
{{#if @payload.productImageSrc}}
<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>
<div class="kg-product-card-title-container">
<h4 class="kg-product-card-title">{{{@payload.productTitle}}}</h4>
</div>
{{#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>
<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-star" 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-star" 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-star" 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-star" 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-star" class="w4 h4"}}</span>
</div>
{{/if}}
</div>
<p class="kg-product-card-description">{{{@payload.productDescription}}}</p>
{{#if @payload.productRatingEnabled}}
<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 class="kg-product-card-rating-preview">
<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-star" 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-star" 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-star" 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-star" 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-star" class="w4 h4"}}</span>
</div>
{{/if}}
{{#if @payload.productButtonEnabled}}
@ -242,8 +250,6 @@
</span>
</a>
{{/if}}
</div>
</div>
{{/if}}
</KoenigCard>