Fix EU ad fallout #1055
This commit is contained in:
commit
3dd8c1fab5
2 changed files with 17 additions and 63 deletions
|
@ -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;
|
||||
// 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;
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
// [Floating ad close button]
|
||||
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 {
|
||||
|
|
|
@ -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(() => {
|
||||
|
@ -95,7 +91,6 @@ function Ads(props: Props) {
|
|||
removeIfExists('[src^="https://player.aniview.com/script/6.1/aniview.js"]');
|
||||
removeIfExists('[id^="AVLoaderaniplayer_vidcrunch"]');
|
||||
removeIfExists('#av_css_id');
|
||||
removeIfExists('#customAniviewStyling');
|
||||
};
|
||||
} catch (e) {}
|
||||
}
|
||||
|
@ -121,7 +116,7 @@ function Ads(props: Props) {
|
|||
return (
|
||||
<div
|
||||
className={classnames('ads ads__claim-item', className, {
|
||||
'ads__claim-item--tile': tileLayout, // with no tileLayout it indicates sidebar ad
|
||||
'ads__claim-item--tile': tileLayout,
|
||||
})}
|
||||
>
|
||||
<div className="ad__container">
|
||||
|
|
Loading…
Reference in a new issue