improve patron page

This commit is contained in:
Thibault Duplessis 2018-05-23 19:13:36 +02:00
parent 80b654cde3
commit 9d02940bd1
2 changed files with 13 additions and 6 deletions

View file

@ -131,20 +131,20 @@ csp = defaultCsp.withStripe.some) {
<group class="radio buttons freq">
@defining(s"Pay ${lila.plan.Cents.lifetime.usd} once. Be a Lichess Patron forever!") { info =>
<div data-hint="@info" class="hint--top-left">
<div data-hint="@info" class="hint--top-left@if(patron.exists(_.isLifetime)){ lifetime-check}">
<input type="radio" name="freq" id="freq_lifetime" @if(patron.exists(_.isLifetime)){disabled} value="lifetime" />
<label for="freq_lifetime">Lifetime</label>
</div>
}
@defining("Recurring billing, renewing your Patron Wings every month.") { info =>
<div data-hint="@info" class="hint--top-left">
<input type="radio" name="freq" id="freq_monthly" @if(patron.exists(_.isLifetime)){disabled}else{checked} value="monthly" />
<input type="radio" name="freq" id="freq_monthly" checked value="monthly" />
<label for="freq_monthly">Monthly</label>
</div>
}
@defining("A single donation that grants you the Patron Wings for one month.") { info =>
<div data-hint="@info" class="hint--top-left">
<input type="radio" name="freq" id="freq_onetime" @if(patron.exists(_.isLifetime)){checked} value="onetime" />
<input type="radio" name="freq" id="freq_onetime" value="onetime" />
<label for="freq_onetime">One-time</label>
</div>
}

View file

@ -137,7 +137,8 @@ table.all .thanks {
overflow: visible;
}
.plan .plan_checkout group input:checked + label,
.plan .plan_checkout .amount_fixed label {
.plan .plan_checkout .amount_fixed label,
.plan .plan_checkout .lifetime-check input + label {
background: #639B24!important;
border-color: #ccc!important;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15) inset !important;
@ -150,12 +151,18 @@ body.dark .plan .plan_checkout .amount_fixed label {
}
.plan .plan_checkout group input:disabled + label {
opacity: 0.5;
pointer: default;
cursor: default;
}
.plan .plan_checkout group.freq input:checked + label::before {
.plan .plan_checkout group.freq input:checked + label::before,
.plan .plan_checkout group .lifetime-check input + label::before {
content: "✓";
padding-right: 5px;
}
.plan .plan_checkout group .lifetime-check input + label {
background: #d59120!important;
opacity: 0.8;
cursor: default;
}
.plan .plan_checkout .service {
display: flex;
justify-content: space-between;