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

Fix: Billboard dropdown scrolling within the billboard (#19806)

Browse source
This commit is contained in:
Ridhwana 2023-08-11 14:55:02 +02:00 • committed by GitHub
parent c9af090af0
commit edd4434e3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -19,7 +19,16 @@
}
}
.sponsorship-dropdown {
.billboard .crayons-dropdown.sponsorship-dropdown {
@media (min-width: $breakpoint-m) {
max-width: 200px;
min-width: auto;
}
@media (min-width: $breakpoint-l) {
max-width: 250px;
}
hr {
border: 0.5px solid var(--divider);
margin: 8px;

6
app/assets/stylesheets/widgets.scss
View file

@ -411,8 +411,10 @@
font-size: var(--fs-base);
}
&.billboard {
max-height: calc(100vh - var(--header-height) - 2*var(--layout-padding));
overflow: auto;
max-height: calc(
100vh - var(--header-height) - 2 * var(--layout-padding)
);
overflow-y: auto;
}
}
}

13
app/javascript/utilities/billboardDropdown.jsx
View file

@ -6,6 +6,8 @@ export function setupBillboardDropdown() {
);
if (sponsorshipDropdownButtons.length) {
sponsorshipDropdownButtons.forEach((sponsorshipDropdownButton) => {
amendBillboardStyle(sponsorshipDropdownButton);
const dropdownContentId =
sponsorshipDropdownButton.getAttribute('aria-controls');
if (
@ -22,3 +24,14 @@ export function setupBillboardDropdown() {
});
}
}
/**
* If the billboard container height is less than 220px, then we revert the overflow-y property
given by the billboard class so that the dropdown does not scroll within the container
*/
function amendBillboardStyle(sponsorshipDropdownButton) {
if (sponsorshipDropdownButton.closest('.js-billboard').clientHeight < 220) {
sponsorshipDropdownButton.closest('.js-billboard').style.overflowY =
'revert';
}
}

6
app/views/shared/_billboard.html.erb
View file

@ -1,5 +1,5 @@
<% if billboard.placement_area.start_with?("feed_") %>
<div class="crayons-story crayons-story__billboard billboard"
<div class="crayons-story crayons-story__billboard billboard js-billboard"
data-display-unit data-id="<%= billboard.id %>"
data-category-click="<%= BillboardEvent::CATEGORY_CLICK %>"
data-category-impression="<%= BillboardEvent::CATEGORY_IMPRESSION %>"
@ -17,7 +17,7 @@
</div>
</div>
<% elsif billboard.placement_area == "home_hero" %>
<div class="crayons-card crayons-card--secondary crayons-sponsorship crayons-story__billboard hero-billboard"
<div class="crayons-card crayons-card--secondary crayons-sponsorship crayons-story__billboard hero-billboard js-billboard"
data-display-unit data-id="<%= billboard.id %>"
data-category-click="<%= BillboardEvent::CATEGORY_CLICK %>"
data-category-impression="<%= BillboardEvent::CATEGORY_IMPRESSION %>"
@ -29,7 +29,7 @@
</div>
</div>
<% else %>
<div class="crayons-card crayons-card--secondary crayons-sponsorship billboard"
<div class="crayons-card crayons-card--secondary crayons-sponsorship billboard js-billboard"
data-display-unit data-id="<%= billboard.id %>"
data-category-click="<%= BillboardEvent::CATEGORY_CLICK %>"
data-category-impression="<%= BillboardEvent::CATEGORY_IMPRESSION %>"