mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-22 22:25:28 +01:00
ed7031981b
* Swap bootstrap asset files * Update themes and color definitions * Move general bootstrap customizations * Theme updates Theme updates * Remove BuildBundlerMinifier This lead to an error, because BuildBundlerMinifier and BundlerMinifier.Core seem to conflict here. Details: https://stackoverflow.com/a/61119586 * Rewplace btn-block class with w-100 * Update badge classes * Remove old font family head variable * Update margin classes * Cleanups * Update float classes * Update text classes * Update padding classes * Update border classes * UPdate dropdown classes * Update select classes * Update neutral custom props * Update bootstrap and customizations * Update ChromeDriver; disable smooth scroll https://github.com/SeleniumHQ/selenium/issues/8295 * Improve alert messages * Improve bootstrap customizations * Disable reduced motion See also 7358282f * Update Bootstrap data attributes * Update file inputs * Update input groups * Replace deprecated jumbotron class * Update variables; re-add negative margin util classes * Update cards * Update form labels * Debug alerts * Fix aria-labelledby associations * Dropdown-related test fixes * Fix CanUseWebhooks test * Test fixes * Nav updates * Fix nav usage in wallet send and payouts * Update alert and modal close buttons * Re-add backdrop properties * Upgrade Bootstrap to v5 final * Update screen reader classes * Update font-weight classes * Update monospace font classes * Update accordians * Update close icon usage * Cleanup * Update scripts and style integrations * Update input group texts * Update LN node setup page * Update more form control classes * Update inline forms * Add js specific test * Upgrade Vue.js * Remove unused JS * Upgrade Bootstrap to v5.0.1 * Try container related test updates * Separate jQuery bundle * Remove jQuery from LND seed backup page * Remove unused code * Refactor email autofill js * Refactor camera scanner JS * Re-add tests * Re-add BuildBundlerMinifier * Do not minify bundles containing Bootstrap Details https://github.com/madskristensen/BundlerMinifier/issues/558 * Update bundles * Cleanup JS test * Cleanup tests involving dropdowns * Cleanup tests involving collapses * Cleanup locale additions in ConfigureCore * Cleanup bundles * Remove duplicate status message * Cleanup formatting * Fix missing validation scripts * Remove unused unminified Bootstrap js files * Fix classic theme * Fix Casa theme * Fix PoS validation
324 lines
16 KiB
Text
324 lines
16 KiB
Text
<div class="container p-0" id="app" v-cloak>
|
|
@if(!Model.Enabled)
|
|
{
|
|
<div class="alert alert-warning" role="alert" style="text-align: center;">
|
|
This crowdfund page is not publically viewable!
|
|
</div>
|
|
}
|
|
<div class="row h-100 w-100 py-sm-0 py-md-4 mx-0">
|
|
<div class="card w-100 p-0 mx-0">
|
|
<img class="card-img-top" :src="srvModel.mainImageUrl" v-if="srvModel.mainImageUrl" id="crowdfund-main-image">
|
|
<div class="d-flex justify-content-between px-2" id="crowdfund-header-container">
|
|
<h1>
|
|
{{srvModel.title}}
|
|
<span class="h6 text-muted" v-if="!started && srvModel.startDate" v-b-tooltip :title="startDate" id="crowdfund-header-start-date">
|
|
Starts in {{startDiff}}
|
|
</span>
|
|
<span class="h6 text-muted" v-else-if="started && !ended && srvModel.endDate" v-b-tooltip :title="endDate" id="crowdfund-header-end-date">
|
|
Ends in {{endDiff}}
|
|
</span>
|
|
<span class="h6 text-muted" v-else-if="started && !ended && !srvModel.endDate" v-b-tooltip title="No set end date" id="crowdfund-header-active">
|
|
Currently Active!
|
|
</span>
|
|
|
|
</h1>
|
|
|
|
<span v-if="srvModel.targetAmount" class="mt-3" id="crowdfund-header-target">
|
|
<span class="h5" id="crowdfund-header-target-amount">{{srvModel.targetAmount}} {{targetCurrency}}</span>
|
|
<span v-if="srvModel.resetEvery !== 'Never'"
|
|
id="crowdfund-header-target-dynamic"
|
|
v-b-tooltip
|
|
:title="'Goal resets every ' + srvModel.resetEveryAmount + ' ' + srvModel.resetEvery + ((srvModel.resetEveryAmount>1)?'s': '')" >Dynamic </span>
|
|
<span v-if="srvModel.enforceTargetAmount"
|
|
id="crowdfund-header-target-softcap">Hardcap Goal <span class="fa fa-question-circle" v-b-tooltip title="No contributions allowed after the goal has been reached"></span></span>
|
|
<span v-else
|
|
id="crowdfund-header-target-hardcap">Softcap Goal <span class="fa fa-question-circle" v-b-tooltip title="Contributions allowed even after goal is reached"></span> </span>
|
|
</span>
|
|
|
|
|
|
</div>
|
|
<div class="progress w-100 rounded-0 " v-if="srvModel.targetAmount"
|
|
id="crowdfund-progress-bar">
|
|
<div class="progress-bar" role="progressbar"
|
|
:aria-valuenow="srvModel.info.progressPercentage"
|
|
v-bind:style="{ width: srvModel.info.progressPercentage + '%' }"
|
|
aria-valuemin="0"
|
|
id="crowdfund-progress-bar-confirmed-bar"
|
|
v-b-tooltip :title="parseFloat(srvModel.info.progressPercentage).toFixed(2) + '% contributions'"
|
|
aria-valuemax="100">
|
|
</div>
|
|
<div class="progress-bar bg-warning" role="progressbar"
|
|
id="crowdfund-progress-bar-pending-bar"
|
|
:aria-valuenow="srvModel.info.pendingProgressPercentage"
|
|
v-bind:style="{ width: srvModel.info.pendingProgressPercentage + '%' }"
|
|
v-b-tooltip :title="parseFloat(srvModel.info.pendingProgressPercentage).toFixed(2) + '% contributions pending confirmation'"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="row py-2 text-center crowdfund-stats">
|
|
<div class="col-sm border-right" id="crowdfund-body-raised-amount">
|
|
<h5>{{ raisedAmount }} {{targetCurrency}} </h5>
|
|
<h5 class="text-muted">Raised</h5>
|
|
</div>
|
|
<div class="col-sm border-right" id="crowdfund-body-goal-raised">
|
|
<h5>{{ percentageRaisedAmount }}%</h5>
|
|
<h5 class="text-muted">Of Goal</h5>
|
|
</div>
|
|
<div class="col-sm border-right" id="crowdfund-body-total-contributors">
|
|
<h5>
|
|
{{srvModel.info.totalContributors}}
|
|
</h5>
|
|
<h5 class="text-muted">Contributors</h5>
|
|
</div>
|
|
<div class="col-sm border-right" v-if="startDiff" id="crowdfund-body-campaign-dates-not-started">
|
|
<h5>
|
|
{{startDiff}}
|
|
</h5>
|
|
<h5 class="text-muted">Left to start</h5>
|
|
|
|
<b-tooltip target="crowdfund-body-campaign-dates-not-started" >
|
|
<ul class="p-0">
|
|
<li v-if="startDate" class="list-unstyled">
|
|
{{started? "Started" : "Starts"}} {{startDate}}
|
|
</li>
|
|
<li v-if="endDate" class="list-unstyled">
|
|
{{ended? "Ended" : "Ends"}} {{endDate}}
|
|
</li>
|
|
</ul>
|
|
</b-tooltip>
|
|
</div>
|
|
<div class="col-sm border-right" v-if="endDiff" id="crowdfund-body-campaign-dates-started">
|
|
<h5>
|
|
{{endDiff}}
|
|
</h5>
|
|
<h5 class="text-muted">Left</h5>
|
|
<b-tooltip target="crowdfund-body-campaign-dates-started" >
|
|
<ul class="p-0">
|
|
<li v-if="startDate" class="list-unstyled">
|
|
{{started? "Started" : "Starts"}} {{startDate}}
|
|
</li>
|
|
<li v-if="endDate" class="list-unstyled">
|
|
{{ended? "Ended" : "Ends"}} {{endDate}}
|
|
</li>
|
|
</ul>
|
|
</b-tooltip>
|
|
</div>
|
|
<div class="col-sm border-right" v-if="ended" id="crowdfund-body-campaign-dates-not-active">
|
|
<h5>
|
|
Campaign
|
|
</h5>
|
|
<h5 >not active</h5>
|
|
|
|
<b-tooltip target="crowdfund-body-campaign-dates-not-active" >
|
|
<ul class="p-0">
|
|
<li v-if="startDate" class="list-unstyled">
|
|
{{started? "Started" : "Starts"}} {{startDate}}
|
|
</li>
|
|
<li v-if="endDate" class="list-unstyled">
|
|
{{ended? "Ended" : "Ends"}} {{endDate}}
|
|
</li>
|
|
</ul>
|
|
</b-tooltip>
|
|
</div>
|
|
</div>
|
|
|
|
<b-tooltip target="crowdfund-body-raised-amount" v-if="paymentStats && paymentStats.length > 0">
|
|
<ul class="p-0 text-uppercase">
|
|
<li v-for="stat of paymentStats" class="list-unstyled">
|
|
{{stat.label}} <span v-if="stat.lightning" class="fa fa-bolt"></span> {{stat.value}}
|
|
</li>
|
|
</ul>
|
|
</b-tooltip>
|
|
<b-tooltip target="crowdfund-body-goal-raised" v-if="srvModel.resetEvery !== 'Never'">
|
|
Goal resets every {{srvModel.resetEveryAmount}} {{srvModel.resetEvery}} {{srvModel.resetEveryAmount>1?'s': ''}}
|
|
</b-tooltip>
|
|
|
|
|
|
<div class="card-title" id="crowdfund-body-header">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-8 col-lg-9" id="crowdfund-body-header-tagline-container">
|
|
<h2 class="text-muted" v-if="srvModel.tagline" id="crowdfund-body-header-tagline">{{srvModel.tagline}}</h2>
|
|
</div>
|
|
<div class="col-sm-12 col-md-4 col-lg-3" id="crowdfund-body-header-cta-container">
|
|
<button v-if="active" id="crowdfund-body-header-cta" class="btn btn-lg btn-primary w-100 fw-bold" v-on:click="contributeModalOpen = true">Contribute</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template v-if="srvModel.disqusEnabled">
|
|
<b-tabs>
|
|
<b-tab title="Details"active>
|
|
<div class="row mt-2">
|
|
<div class="col-md-8 col-sm-12" id="crowdfund-body-description-container">
|
|
<div class="card-text overflow-hidden" v-html="srvModel.description" id="crowdfund-body-description"></div>
|
|
</div>
|
|
<div class="col-md-4 col-sm-12" id="crowdfund-body-contribution-container">
|
|
<contribute :target-currency="srvModel.targetCurrency"
|
|
:display-perks-ranking="srvModel.displayPerksRanking"
|
|
:active="active"
|
|
:loading="loading"
|
|
:in-modal="false"
|
|
:perks="perks">
|
|
|
|
</contribute>
|
|
</div>
|
|
</div>
|
|
</b-tab>
|
|
<b-tab title="Discussion" >
|
|
<div id="disqus_thread" class=" mt-2"></div>
|
|
</b-tab>
|
|
</b-tabs>
|
|
|
|
</template>
|
|
<template v-else>
|
|
<hr/>
|
|
<div class="row mt-2">
|
|
<div class="col-md-8 col-sm-12" id="crowdfund-body-description-container">
|
|
<div class="card-text overflow-hidden" v-html="srvModel.description" id="crowdfund-body-description"></div>
|
|
</div>
|
|
<div class="col-md-4 col-sm-12" id="crowdfund-body-contribution-container">
|
|
<contribute :target-currency="srvModel.targetCurrency"
|
|
:loading="loading"
|
|
:display-perks-ranking="srvModel.displayPerksRanking"
|
|
:active="active"
|
|
:in-modal="false"
|
|
:perks="perks">
|
|
|
|
</contribute>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="card-footer text-muted d-flex" v-if="srvModel.animationsEnabled || srvModel.soundsEnabled">
|
|
|
|
<div class="align-self-end pe-4">Updated {{lastUpdated}}</div>
|
|
<div class="form-check mx-1" v-if="srvModel.animationsEnabled || animation">
|
|
<input class="form-check-input" type="checkbox" id="cbAnime" v-model="animation">
|
|
<label class="form-check-label" for="cbAnime">
|
|
Animations
|
|
</label>
|
|
</div>
|
|
<div class="form-check mx-1" v-if="srvModel.soundsEnabled|| sound">
|
|
<input class="form-check-input" type="checkbox" id="cbSounds" v-model="sound">
|
|
<label class="form-check-label" for="cbSounds">
|
|
Sounds
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<b-modal title="Contribute" v-model="contributeModalOpen" size="lg" ok-only="true" ok-variant="secondary" ok-title="Close" ref="modalContribute">
|
|
<contribute v-if="contributeModalOpen"
|
|
:target-currency="srvModel.targetCurrency"
|
|
:active="active"
|
|
:perks="srvModel.perks"
|
|
:loading="loading"
|
|
:in-modal="true">
|
|
</contribute>
|
|
</b-modal>
|
|
|
|
</div>
|
|
|
|
<script type="text/x-template" id="perks-template">
|
|
<div class="perks-container">
|
|
<perk v-if="!perks || perks.length ===0"
|
|
:perk="{title: 'Donate Custom Amount', price: { value: null}, custom: true}"
|
|
:target-currency="targetCurrency"
|
|
:active="active"
|
|
:loading="loading"
|
|
:in-modal="inModal">
|
|
</perk>
|
|
<perk v-for="(perk, index) in perks" :perk="perk" :key="perk.id"
|
|
:target-currency="targetCurrency"
|
|
:active="active"
|
|
:display-perks-ranking="displayPerksRanking"
|
|
:index="index"
|
|
:loading="loading"
|
|
:in-modal="inModal">
|
|
</perk>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-template" id="perk-template">
|
|
<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>
|
|
|
|
|
|
<div class="perk-zoom " v-if="canExpand">
|
|
<div class="perk-zoom-bg bg-primary"> </div>
|
|
<div class="perk-zoom-text w-100 text-center text-white fw-bold">
|
|
Select this contribution perk
|
|
</div>
|
|
</div>
|
|
<form v-on:submit='onContributeFormSubmit'>
|
|
<input type="hidden" :value="perk.id" id="choiceKey"/>
|
|
<img v-if="perk.image && perk.image != 'null' " class="card-img-top" :src="perk.image" />
|
|
<div class="card-body">
|
|
<div class="card-title d-flex justify-content-between" >
|
|
<span class="h5">{{perk.title? perk.title : perk.id}} </span>
|
|
<span class="text-muted" >
|
|
<template v-if="perk.price.value">{{perk.price.value.noExponents()}}
|
|
{{targetCurrency}}
|
|
<template v-if="perk.custom">or more</template>
|
|
</template>
|
|
<template v-else-if="!perk.price.value && perk.custom">
|
|
Any amount
|
|
</template>
|
|
|
|
</span>
|
|
</div>
|
|
<p class="card-text overflow-hidden" v-if="perk.description" v-html="perk.description"></p>
|
|
|
|
<div class="input-group" style="max-width: 500px;" v-if="expanded" :id="'perk-form'+ perk.id">
|
|
<input
|
|
:disabled="!active"
|
|
:readonly="!perk.custom"
|
|
class="form-control"
|
|
type="number"
|
|
v-model="amount"
|
|
:min="perk.price.value"
|
|
step="any"
|
|
placeholder="Contribution Amount"
|
|
required>
|
|
<span class='input-group-text'>{{targetCurrency}}</span>
|
|
<button
|
|
class="btn btn-primary"
|
|
v-bind:class="{ 'btn-disabled': loading}"
|
|
:disabled="!active || loading"
|
|
type="submit">
|
|
<div v-if="loading" class="spinner-grow spinner-grow-sm" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
{{perk.buyButtonText || 'Continue'}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer d-flex justify-content-between" v-if="perk.sold || perk.inventory != null">
|
|
|
|
<span v-if="perk.inventory != null && perk.inventory > 0" class="text-center text-muted">{{perk.inventory}} left</span>
|
|
<span v-if="perk.inventory != null && perk.inventory <= 0" class="text-center text-muted">Sold out</span>
|
|
<span v-if="perk.sold">{{perk.sold}} Contributor{{perk.sold > 1? "s": ""}}</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</script>
|
|
|
|
|
|
<script type="text/x-template" id="contribute-template">
|
|
<div>
|
|
<h3 v-if="!inModal" class="mb-3">Contribute</h3>
|
|
<perks
|
|
:perks="perks"
|
|
:loading="loading"
|
|
:in-modal="inModal"
|
|
:display-perks-ranking="displayPerksRanking"
|
|
:target-currency="targetCurrency"
|
|
:active="active">
|
|
</perks>
|
|
</div>
|
|
</script>
|