ahri-cloud-projects/btcpayserver
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redo crowdfund modal perk list (#919)

Browse Source 
* redo crowdfund modal perk list

closes #918

* fix small responsive issue
This commit is contained in:
Andrew Camilleri
2019-07-19 09:48:39 +02:00
committed by Nicolas Dorier
parent 631c878722
commit 109e576811
2 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml
View File

@@ -244,7 +244,7 @@
</script>
<script type="text/x-template" id="perk-template">
<div class="card mb-4 perk" v-bind:class="{ 'expanded': expanded, 'unexpanded': !expanded }" v-on:click="expand" :id="perk.id">
<div class="card perk" v-bind:class="{ 'expanded': expanded, 'unexpanded': !expanded, 'mb-4':!inModal }" v-on:click="expand" :id="perk.id">
<span v-if="displayPerksRanking && perk.sold"
class="btn btn-sm rounded-circle px-0 perk-badge"
v-bind:class="{ 'btn-primary': index==0, 'btn-secondary': index!=0}">#{{index+1}}</span>

11
BTCPayServer/wwwroot/crowdfund/styles/main.css
View File

@@ -58,3 +58,14 @@ canvas#fireworks {
.crowdfund-stats .col-sm:last-child{
border-right: none !important;
}
.modal-body .perks-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: .5rem;
}
.modal-body .perks-container .card:only-of-type {
max-width: 320px;
margin: auto;
}