Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-04-26 01:49:23 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fixed scroll issues with modal open

Browse Source
This commit is contained in:
Jonathan Barrow 2022-07-10 12:32:57 -04:00
parent 02da4c10cd
commit e9175f491d
3 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/assets/css/upgrade.css
View File

@ -13,6 +13,9 @@
width: 1600px; width: 1600px;
height: 1400px; height: 1400px;
} }
body.modal-open {
overflow: hidden;
}
.back-arrow { .back-arrow {
position: absolute; position: absolute;
@ -261,7 +264,7 @@ form button.unsubscribe:hover {
div.unsub-modal-wrapper, div.unsub-modal-wrapper,
div.switch-tier-modal-wrapper { div.switch-tier-modal-wrapper {
position: absolute; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;

4
public/assets/js/upgrade.js
View File

@ -70,6 +70,7 @@ buttons.submit.addEventListener('click', function(e) {
oldTierNameSpan.innerText = currentTierElement.dataset.tierName; oldTierNameSpan.innerText = currentTierElement.dataset.tierName;
newTierNameSpan.innerText = document.querySelector('input[name="tier"]:checked').dataset.tierName; newTierNameSpan.innerText = document.querySelector('input[name="tier"]:checked').dataset.tierName;
document.body.classList.add('modal-open');
document.querySelector('.switch-tier-modal-wrapper').classList.remove('hidden'); document.querySelector('.switch-tier-modal-wrapper').classList.remove('hidden');
} else { } else {
submitForm(); submitForm();
@ -83,12 +84,14 @@ buttons.unsubModal.show.addEventListener('click', function(e) {
tierNameSpan.innerText = currentTierElement.dataset.tierName; tierNameSpan.innerText = currentTierElement.dataset.tierName;
// Show the unsubscribe modal // Show the unsubscribe modal
document.body.classList.add('modal-open');
document.querySelector('.unsub-modal-wrapper').classList.remove('hidden'); document.querySelector('.unsub-modal-wrapper').classList.remove('hidden');
}); });
buttons.unsubModal.close.addEventListener('click', function(e) { buttons.unsubModal.close.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
// Hide the unsubscribe modal // Hide the unsubscribe modal
document.body.classList.remove('modal-open');
document.querySelector('.unsub-modal-wrapper').classList.add('hidden'); document.querySelector('.unsub-modal-wrapper').classList.add('hidden');
}); });
buttons.unsubModal.confirm.addEventListener('click', function(e) { buttons.unsubModal.confirm.addEventListener('click', function(e) {
@ -101,6 +104,7 @@ buttons.switchTierModal.close.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
// Hide the switch tier modal // Hide the switch tier modal
document.body.classList.remove('modal-open');
document.querySelector('.switch-tier-modal-wrapper').classList.add('hidden'); document.querySelector('.switch-tier-modal-wrapper').classList.add('hidden');
}); });
buttons.switchTierModal.confirm.addEventListener('click', function(e) { buttons.switchTierModal.confirm.addEventListener('click', function(e) {

1
views/account/upgrade.handlebars
View File

@ -1,6 +1,5 @@
<link rel="stylesheet" href="/assets/css/upgrade.css" /> <link rel="stylesheet" href="/assets/css/upgrade.css" />
<div class="wrapper"> <div class="wrapper">
<a href="/account" class="back-arrow"> <a href="/account" class="back-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
<span>Back</span> <span>Back</span>