maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[Hot fix] Fix style bugs with registration page (#20656)

Browse source 
* Fix style bugs with registration page

* Small additonal style tweak

* Final style tweak
This commit is contained in:
Ben Halpern 2024-02-19 18:48:50 -08:00 • committed by GitHub
parent 0197eae6e3
commit caa7b5a63a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/assets/stylesheets/billboards.scss
View file

@ -60,12 +60,23 @@
.text-styles {
padding-top: var(--su-4);
padding-bottom: var(--su-4);
font-size: 1.2em;
font-size: calc(0.7em + 1vw);
max-width: calc(var(--site-width) - var(--su-8));
}
.sponsorship-dropdown {
top: auto;
bottom: var(--su-8);
}
@media (min-width: $breakpoint-xl) {
.crayons-sponsorship__header,
.text-styles {
margin-left: calc(50% - (var(--site-width) / 2));
}
}
}
.hide-popover-billboard .popover-billboard {
display: none;
}
.hero-billboard {

13
app/views/devise/registrations/_registration_form.html.erb
View file

@ -85,8 +85,8 @@
</section>
<script>
const registrationsPage = document.querySelector('.js-registration');
const topbarElement = document.querySelector('#topbar');
let registrationsPage = document.querySelector('.js-registration');
let topbarElement = document.querySelector('#topbar');
// Check if the registrations or notifications element exists and the topbar element exists.
if ((registrationsPage && topbarElement) || (notificationsPage && topbarElement)) {
topbarElement.style.display = 'none';
@ -94,4 +94,13 @@
// This is needed to make sure that the bottom part of page is white when screen is zoomed-out.
document.body.style.backgroundColor = 'white';
}
// Reverse the above when the back button is clicked.
window.addEventListener('popstate', () => {
if (registrationsPage && topbarElement) {
topbarElement.style.display = 'block';
document.body.style.removeProperty('padding-top');
document.body.style.removeProperty('background-color');
document.body.classList.add('hide-popover-billboard');
}
});
</script>