LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix EU ad and minor tweaks

Browse source 
- Initially, we did a bunch of forceful CSS to make the ad tile resize properly when the browser resizes. This was causing the EU ad to display incorrectly. Turns out, that css is no longer needed after the BEM-style re-write.

- Changed the floating ad selector to cover both EU and non-EU version. It's probably still not the best given it relies on style rather than ID, but the ID seems dynamic.
This commit is contained in:
infinite-persistence 2022-03-09 17:53:58 +08:00
parent 73552e35f9
commit a98dc18fc6
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 16 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
ui/scss/component/_ads.scss
View file

@ -42,13 +42,6 @@
@media (max-width: $breakpoint-small) {
$width: calc(var(--file-list-thumbnail-width) * 0.8);
width: $width;
#aniBox,
#av-container {
// Only needed on actual mobile. Their mobile script does something
// different that makes it 100%, so have to counter that here.
width: unset !important;
}
}
@media (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
@ -61,40 +54,29 @@
width: $width;
}
//div[style*='position: fixed; transform: scale(1);'] {
// // This is the floating ad (when tile goes off screen).
// // The sidebar is covering it, so move to the right a bit:
// left: unset !important;
//
// // It's a bit jarring at times on a busy page, so add border:
// background-color: var(--color-ads-background);
// border-radius: var(--border-radius);
// padding: var(--spacing-s);
//}
div[style*='position: fixed; transform: scale(1);'] {
div[style*='transform-origin: left bottom;'] {
// [Floating ad]
// Hide it in entirely. Couldn't reconcile with the changes needed to make
// tile layout fit on browser-resize and also with their mobile script
// changes. Else, the block above can be used.
transform: none !important;
transform-origin: unset !important;
position: unset !important;
div:first-child {
// [Floating ad close button]
// Hide for now since can't get it to work in a consistent manner between:
// - EU and non-EU version
// - issues in Firefox
display: none !important;
}
#aniBox {
transition: unset !important;
}
#aniBox,
#av-container {
// Handle the scenario of ads not resizing when switching from small to
// medium/large layout:
width: 100% !important;
height: unset !important;
aspect-ratio: 16 / 9 !important;
border-radius: var(--border-radius);
}
.avp-p-wrapper > div {
border-radius: var(--border-radius) !important; // Needed for EU only
}
}
}
@ -115,31 +97,7 @@
}
.ad__container {
width: 100% !important;
max-width: 100 !important;
min-width: unset !important;
box-sizing: border-box !important;
div:not(#sound):not(.off):not(#timeline) {
width: 100% !important;
max-width: unset !important;
min-width: unset !important;
box-sizing: border-box !important;
}
video {
width: 100% !important;
height: 100% !important;
}
#timeline,
#buttons {
width: calc(100% - (var(--spacing-s) * 2)) !important;
}
}
p {
width: calc(100% - (var(--spacing-m) * 3)) !important;
width: 100%;
}
.ads__claim-text {
@ -162,6 +120,7 @@
display: flex;
flex-direction: column;
justify-content: center;
color: var(--color-text-subtitle);
}
.ads__claim-text--small {

6
web/component/ads/view.jsx
View file

@ -64,11 +64,7 @@ function Ads(props: Props) {
// this is populated from app based on location
const isInEu = localStorage.getItem('gdprRequired') === 'true';
// const adConfig = isInEu ? AD_CONFIGS.EU : mobileAds ? AD_CONFIGS.MOBILE : AD_CONFIGS.DEFAULT;
// -- The logic above is what we are asked to do, but the EU script breaks our
// -- app's CSS when ran on mobile.
const adConfig = mobileAds ? AD_CONFIGS.MOBILE : isInEu ? AD_CONFIGS.EU : AD_CONFIGS.DEFAULT;
const adConfig = isInEu ? AD_CONFIGS.EU : mobileAds ? AD_CONFIGS.MOBILE : AD_CONFIGS.DEFAULT;
// add script to DOM
useEffect(() => {