mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-03-10 09:19:24 +01:00
Code Issues Projects Releases Packages Wiki Activity

POS: Unify item display in editor (#5272)

Browse source
This commit is contained in:
d11n 2023-08-24 08:51:22 +02:00 • committed by GitHub
parent 1487bf4ff5
commit 17064ab3c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
BTCPayServer/Views/Shared/TemplateEditor.cshtml
View file

@ -109,9 +109,19 @@
</button> </button>
</div> </div>
<div v-else v-for="(item, index) of config" class="card my-2 template-item me-0 ms-0" v-bind:key="item.id"> <div v-else v-for="(item, index) of config" class="card my-2 template-item me-0 ms-0" v-bind:key="item.id">
<div class="card-img-top border-bottom" v-bind:style="getImage(item)"></div> <img class="card-img-top" :src="getImage(item)" :alt="item.title" :style="(item.image ? null : { opacity: 0.5 })">
<div class="card-body"> <div class="card-body p-3 d-flex flex-column flex-grow-0 gap-2">
<h6 class="card-title" v-html="item.title"></h6> <h5 class="card-title m-0" v-html="item.title"></h5>
<div class="d-flex gap-2 align-items-center">
<span class="fw-semibold badge text-bg-info" v-if="item.priceType === 'Topup' || item.price == 0">{{ item.priceType === 'Topup' ? 'Any amount' : 'Free' }}</span>
<span class="fw-semibold" v-else>{{ item.price }} @Model.currency{{ item.priceType === 'Minimum' ? ' minimum' : '' }}</span>
<span class="badge text-bg-warning" v-if="item.inventory">
{{ item.inventory > 0 ? `${item.inventory} left` : 'Sold out' }}
</span>
</div>
<p class="card-text" v-if="item.description">{{ item.description }}</p>
</div>
<div class="card-footer bg-transparent border-0 pt-0 pb-3">
<div class="gap-3 d-flex"> <div class="gap-3 d-flex">
<button type="button" class="btn btn-primary" v-on:click="editItem(index)">Edit</button> <button type="button" class="btn btn-primary" v-on:click="editItem(index)">Edit</button>
<button type="button" class="btn btn-danger" v-on:click="removeItem(index)"> <button type="button" class="btn btn-danger" v-on:click="removeItem(index)">
@ -221,11 +231,7 @@ document.addEventListener("DOMContentLoaded", () => {
}, },
getImage(item) { getImage(item) {
const image = item.image || "~/img/img-placeholder.svg"; const image = item.image || "~/img/img-placeholder.svg";
const url = image.startsWith("~") ? image.replace('~', window.location.pathname.substring(0, image.indexOf('/apps'))) : image; return image.startsWith("~") ? image.replace('~', window.location.pathname.substring(0, image.indexOf('/apps'))) : image
return {
"background-image" : "url('" + url +"')",
"opacity": item.image? 1: 0.5
}
}, },
removeItem(index) { removeItem(index) {
this.config.splice(index, 1); this.config.splice(index, 1);

7
BTCPayServer/wwwroot/main/template-editor.css
View file

@ -9,8 +9,7 @@
} }
#template-editor-app .card-img-top { #template-editor-app .card-img-top {
min-height: 247px; max-height: 210px;
background-repeat: no-repeat; object-fit: scale-down;
background-size:contain; margin-bottom: auto;
background-position: top;
} }