mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-03-21 17:24:28 -05:00
style: add tier change styling
This commit is contained in:
Ash Monty
parent
8e7ca070a0
commit
83e808f551
|
|
@ -164,8 +164,10 @@ label.tier p.price span {
|
|||
|
||||
form .button-wrapper {
|
||||
grid-column: 2 / span 1;
|
||||
position: relative;
|
||||
margin-top: 24px;
|
||||
}
|
||||
form button {
|
||||
button {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
|
|
@ -179,21 +181,101 @@ form button {
|
|||
padding: 12px;
|
||||
color: var(--text);
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
pointer-events: none;
|
||||
filter: brightness(0.75) saturate(0.75); /* not using opacity here 'cause in the mobile layout you would see the cards under it */
|
||||
|
||||
transition: filter 300ms;
|
||||
}
|
||||
form .tier-radio:checked ~ .button-wrapper button {
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
filter: none;
|
||||
}
|
||||
form button.disabled {
|
||||
pointer-events: none;
|
||||
filter: brightness(0.75) saturate(0.75); /* not using opacity here 'cause in the mobile layout you would see the cards under it */
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
form button.unsubscribe {
|
||||
position: relative;
|
||||
background: none;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 12px;
|
||||
padding: 0;
|
||||
}
|
||||
form button.unsubscribe.hidden {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
form button.unsubscribe:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
div.unsub-modal-wrapper,
|
||||
div.switch-tier-modal-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
div.unsub-modal-wrapper.hidden,
|
||||
div.switch-tier-modal-wrapper.hidden {
|
||||
display: none;
|
||||
}
|
||||
div.unsub-modal,
|
||||
div.switch-tier-modal {
|
||||
background: #393b5f;
|
||||
padding: 48px;
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
width: min(660px, 90%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.unsub-modal h1,
|
||||
div.switch-tier-modal h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
p.unsub-modal-caption,
|
||||
p.switch-tier-modal-caption {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
p.unsub-modal-caption span,
|
||||
p.switch-tier-modal-caption span {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.unsub-modal-button-wrapper,
|
||||
.switch-tier-modal-button-wrapper {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.unsub-modal-button-wrapper button,
|
||||
.switch-tier-modal-button-wrapper button {
|
||||
margin-left: 12px;
|
||||
width: fit-content;
|
||||
}
|
||||
.unsub-modal-button-wrapper button.cancel,
|
||||
.switch-tier-modal-button-wrapper button.cancel {
|
||||
background: none;
|
||||
}
|
||||
.unsub-modal-button-wrapper button.confirm,
|
||||
.switch-tier-modal-button-wrapper button.confirm {
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.account-form-wrapper {
|
||||
width: min(500px, 100%);
|
||||
margin-bottom: 120px;
|
||||
margin-bottom: 172px;
|
||||
}
|
||||
|
||||
form {
|
||||
|
|
@ -215,14 +297,20 @@ form .tier-radio:checked ~ .button-wrapper button {
|
|||
form .button-wrapper::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: -24px;
|
||||
left: -100vw;
|
||||
width: 200vw;
|
||||
height: 150%;
|
||||
height: 300%;
|
||||
background: #111531;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
div.unsub-modal {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
label.tier .tier-perks {
|
||||
width: 80%;
|
||||
|
|
|
|||
102
public/assets/js/upgrade.js
Normal file
102
public/assets/js/upgrade.js
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
const buttons = {
|
||||
submit: document.getElementById('submitButton'),
|
||||
unsubModal: {
|
||||
show: document.getElementById('unsubModalShowButton'),
|
||||
close: document.getElementById('unsubModalCloseButton'),
|
||||
confirm: document.getElementById('unsubModalConfirmButton'),
|
||||
},
|
||||
switchTierModal: {
|
||||
show: document.getElementById('switchTierShowButton'),
|
||||
close: document.getElementById('switchTierCloseButton'),
|
||||
confirm: document.getElementById('switchTierConfirmButton'),
|
||||
},
|
||||
};
|
||||
|
||||
const currentTierID = document.querySelector('form').dataset.currentTier;
|
||||
|
||||
const currentTierElement = document.querySelector(`#${currentTierID}`) || undefined;
|
||||
|
||||
// if the condition is met, we disable the submit button and enable the unsubscribe button
|
||||
function conditionalSubmitButton(condition, target) {
|
||||
if (condition) {
|
||||
buttons.submit.innerText = 'Already subscribed to this tier';
|
||||
buttons.unsubModal.show.innerText = `Unsubscribe from ${currentTierElement.dataset.tierName}`;
|
||||
buttons.submit.disabled = true;
|
||||
buttons.submit.classList.add('disabled');
|
||||
buttons.unsubModal.show.classList.remove('hidden');
|
||||
} else {
|
||||
buttons.submit.classList.remove('disabled');
|
||||
buttons.unsubModal.show.classList.add('hidden');
|
||||
buttons.submit.disabled = false;
|
||||
buttons.submit.innerText = `Subscribe to ${target.dataset.tierName}`;
|
||||
}
|
||||
}
|
||||
|
||||
// If the currect tier exists, select it from the list and disable the submit button.
|
||||
if (currentTierElement) {
|
||||
currentTierElement.click();
|
||||
conditionalSubmitButton(true);
|
||||
}
|
||||
|
||||
// If a tier is selected, conditionally enable the submit button.
|
||||
document.querySelector('form').addEventListener('change', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// If the selected tier is the current tier, set the button to disabled. Else we enable the button
|
||||
conditionalSubmitButton(e.target.value === currentTierElement?.value, e.target);
|
||||
});
|
||||
|
||||
// handle the submit button
|
||||
buttons.submit.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// If the user is already subscribed to another tier, we show the confirm modal, else if this is a new subscription we submit the form.
|
||||
if (currentTierElement) {
|
||||
const oldTierNameSpan = document.querySelector('.switch-tier-modal-caption span.oldtier');
|
||||
const newTierNameSpan = document.querySelector('.switch-tier-modal-caption span.newtier');
|
||||
oldTierNameSpan.innerText = currentTierElement.dataset.tierName;
|
||||
newTierNameSpan.innerText = document.querySelector('input[name="tier"]:checked').dataset.tierName;
|
||||
|
||||
document.querySelector('.switch-tier-modal-wrapper').classList.remove('hidden');
|
||||
} else {
|
||||
const form = document.querySelector('form');
|
||||
const selectedTier = form.querySelector('input[type="radio"]:checked').value;
|
||||
form.action = `/account/checkout/${selectedTier}`;
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
buttons.unsubModal.show.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const tierNameSpan = document.querySelector('.unsub-modal-caption span');
|
||||
tierNameSpan.innerText = currentTierElement.dataset.tierName;
|
||||
|
||||
// Show the unsubscribe modal
|
||||
document.querySelector('.unsub-modal-wrapper').classList.remove('hidden');
|
||||
});
|
||||
buttons.unsubModal.close.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Hide the unsubscribe modal
|
||||
document.querySelector('.unsub-modal-wrapper').classList.add('hidden');
|
||||
});
|
||||
buttons.unsubModal.confirm.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
/* unsub logic here */
|
||||
alert('lol unsubbed');
|
||||
});
|
||||
|
||||
buttons.switchTierModal.close.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Hide the switch tier modal
|
||||
document.querySelector('.switch-tier-modal-wrapper').classList.add('hidden');
|
||||
});
|
||||
buttons.switchTierModal.confirm.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
/* tier switching logic here */
|
||||
alert('lol switched tier');
|
||||
});
|
||||
|
|
@ -524,7 +524,8 @@ router.get('/upgrade', async (request, response) => {
|
|||
layout: 'main',
|
||||
locale: util.getLocale(request.locale.region, request.locale.language),
|
||||
localeString: request.locale.toString(),
|
||||
error: request.cookies.error
|
||||
error: request.cookies.error,
|
||||
currentTier: 'price_1LBnZADOJlJAaQQ3pEUjNWbY' // To be replaced
|
||||
};
|
||||
|
||||
const { data: prices } = await stripe.prices.list();
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<link rel="stylesheet" href="/assets/css/upgrade.css" />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="account-form-wrapper">
|
||||
<a class="logotype" href="/">
|
||||
<div class="account-form-wrapper">
|
||||
<a class="logotype" href="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
||||
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
||||
<g id="logo" transform="translate(553 467)">
|
||||
|
|
@ -30,9 +29,7 @@
|
|||
<h1 class="title dot">Upgrade</h1>
|
||||
<p class="caption">Subscribing to a tier gives you access to our developer chats and, depending on the tier,
|
||||
to our beta servers. Please someone reword this, it sucks. No fr.</p>
|
||||
|
||||
|
||||
<form method="post">
|
||||
<form method="post" data-current-tier="{{currentTier}}">
|
||||
{{#each tiers}}
|
||||
<input type="radio" class="tier-radio" data-tier-name="{{this.name}}" name="tier" value="{{this.price_id}}" id="{{this.price_id}}" />
|
||||
<label class="tier" for="{{this.price_id}}">
|
||||
|
|
@ -56,30 +53,37 @@
|
|||
</p>
|
||||
</label>
|
||||
{{/each}}
|
||||
<div class="button-wrapper">
|
||||
<button type="submit" id="submitButton">
|
||||
Select a tier
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="button-wrapper">
|
||||
<button class="disabled" type="submit" id="submitButton">Select a tier</button>
|
||||
<button class="unsubscribe hidden" id="unsubModalShowButton">Unsubscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="unsub-modal-wrapper hidden">
|
||||
<div class="unsub-modal">
|
||||
<h1 class="title dot">Unsubscribe</h1>
|
||||
<p class="unsub-modal-caption">Are you sure you want to unsubscribe from <span>tiername</span>?
|
||||
You will lose access to the perks associated with that tier.</p>
|
||||
<div class="unsub-modal-button-wrapper">
|
||||
<button class="cancel" id="unsubModalCloseButton">Cancel</button>
|
||||
<button class="confirm" id="unsubModalConfirmButton">Unsubscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="switch-tier-modal-wrapper hidden">
|
||||
<div class="switch-tier-modal">
|
||||
<h1 class="title dot">Change tier</h1>
|
||||
<p class="switch-tier-modal-caption">Are you sure you want to unsubscribe
|
||||
from <span class="oldtier">oldtiername</span> and subscribe to <span class="newtier">newtiername</span>?</p>
|
||||
<div class="switch-tier-modal-button-wrapper">
|
||||
<button class="cancel" id="switchTierCloseButton">Cancel</button>
|
||||
<button class="confirm" id="switchTierConfirmButton">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.querySelector('#submitButton').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const form = document.querySelector('form');
|
||||
const selectedTier = form.querySelector('input[type="radio"]:checked').value;
|
||||
form.action = `/account/checkout/${selectedTier}`;
|
||||
form.submit();
|
||||
});
|
||||
|
||||
document.querySelector('form').addEventListener('change', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const clickedTierID = e.srcElement.id;
|
||||
const clickedTierName = e.srcElement.dataset.tierName;
|
||||
document.querySelector('#submitButton').innerText = `Subscribe to ${clickedTierName}`;
|
||||
});
|
||||
</script>
|
||||
<script src="/assets/js/upgrade.js" />
|
||||
Loading…
Reference in New Issue
Block a user