remove inline styles and fix checkbox setting text

This commit is contained in:
Kukks
2019-01-10 14:19:06 +01:00
parent a87c2a3374
commit 9f4226bf0f
3 changed files with 68 additions and 26 deletions

View File

@@ -19,7 +19,7 @@ namespace BTCPayServer.Models.AppViewModels
public string NotificationUrl { get; set; } public string NotificationUrl { get; set; }
[Required] [Required]
[Display(Name = "Allow crowdfund to be publicly visible( still visible to you)")] [Display(Name = "Allow crowdfund to be publicly visible (still visible to you)")]
public bool Enabled { get; set; } = false; public bool Enabled { get; set; } = false;
[Required] [Required]

View File

@@ -62,40 +62,65 @@
</h5> </h5>
<h5 class="text-muted">Contributors</h5> <h5 class="text-muted">Contributors</h5>
</div> </div>
<div class="col-sm" v-if="endDiff"> <div class="col-sm" v-if="endDiff" id="campaign-dates-started">
<h5> <h5>
{{endDiff}} {{endDiff}}
</h5> </h5>
<h5 class="text-muted">Left</h5> <h5 class="text-muted">Left</h5>
<b-tooltip target="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>
<div class="col-sm" v-if="startDiff"> <div class="col-sm" v-if="startDiff" id="campaign-dates-not-started">
<h5> <h5>
{{startDiff}} {{startDiff}}
</h5> </h5>
<h5 class="text-muted">Left to start</h5> <h5 class="text-muted">Left to start</h5>
<b-tooltip target="campaign-dates-ended" >
<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>
<div class="col-sm" v-if="ended" id="inactive-campaign"> <div class="col-sm" v-if="ended" id="campaign-dates-ended">
<h5> <h5>
Campaign Campaign
</h5> </h5>
<h5 >not active</h5> <h5 >not active</h5>
<b-tooltip target="inactive-campaign" > <b-tooltip target="campaign-dates-not-started" >
<ul class="p-0"> <ul class="p-0">
<li v-if="startDate" style="list-style-type: none"> <li v-if="startDate" class="list-unstyled">
{{started? "Started" : "Starts"}} {{startDate}} {{started? "Started" : "Starts"}} {{startDate}}
</li> </li>
<li v-if="endDate" style="list-style-type: none"> <li v-if="endDate" class="list-unstyled">
{{ended? "Ended" : "End"}} {{endDate}} {{ended? "Ended" : "Ends"}} {{endDate}}
</li> </li>
</ul> </ul>
</b-tooltip> </b-tooltip>
</div> </div>
</div> </div>
<b-tooltip target="raised-amount" v-if="paymentStats && paymentStats.length > 0"> <b-tooltip target="raised-amount" v-if="paymentStats && paymentStats.length > 0">
<ul class="p-0 text-uppercase"> <ul class="p-0 text-uppercase">
<li v-for="stat of paymentStats" style="list-style-type: none"> <li v-for="stat of paymentStats" class="list-unstyled">
{{stat.label}} <span v-if="stat.lightning" class="fa fa-bolt"></span> {{stat.value}} {{stat.label}} <span v-if="stat.lightning" class="fa fa-bolt"></span> {{stat.value}}
</li> </li>
@@ -206,7 +231,7 @@
<script type="text/x-template" id="perk-template"> <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 mb-4 perk" v-bind:class="{ 'expanded': expanded, 'unexpanded': !expanded }" v-on:click="expand" :id="perk.id">
<span v-if="displayPerksRanking && perk.sold " style="width: 33px;height: 33px;position: absolute;left: -15px;top: -15px;padding-top: 5px;" class="btn btn-sm rounded-circle px-0" v-bind:class="{ 'btn-primary': index==0, 'btn-secondary': index!=0}">#{{index+1}}</span> <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 " v-if="canExpand">

View File

@@ -1,38 +1,55 @@
[v-cloak] > * { display:none } [v-cloak] > * {
[v-cloak]::before { content: "loading…" } display: none
}
canvas#fireworks{ [v-cloak]::before {
content: "loading…"
}
canvas#fireworks {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: fixed; position: fixed;
} }
.perk-zoom{ .perk-zoom {
display: none; display: none;
opacity: 0; opacity: 0;
} }
.perk-zoom-bg{
.perk-zoom-bg {
position: absolute; position: absolute;
width:100%; width: 100%;
height:100%; height: 100%;
left:0; left: 0;
top:0; top: 0;
opacity: 0.9; opacity: 0.9;
} }
.perk-zoom-text{
.perk-zoom-text {
left: 50%; left: 50%;
top: 50%; top: 50%;
border-radius: 50%; border-radius: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
position: absolute; position: absolute;
} }
.perk:hover .perk-zoom{
.perk:hover .perk-zoom {
cursor: pointer; cursor: pointer;
opacity:1; opacity: 1;
display: block; display: block;
position: absolute; position: absolute;
width:100%; width: 100%;
height:100%; height: 100%;
left:0; left: 0;
top:0; top: 0;
}
.perk-badge {
width: 33px;
height: 33px;
position: absolute;
left: -15px;
top: -15px;
padding-top: 5px;
} }