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

Update AR_6 to AR_18

Browse source 
- This increases the amount of ads, filling up the entire width. No more need to restrict with `max-width` ourself.

- Changed the ad-driver to top-right since the "Powered by Outbrain" text is now locked in bottom-right. Also made the container having a minimum height, as the method to "display the driver after ads are loaded" is not future proof -- it depends on the IDs being used by the ad. Reserving some space seems to be easiest, and it also reduces shifts as well.
This commit is contained in:
infinite-persistence 2022-05-11 09:47:49 +08:00
parent bf7dcbe344
commit 551c13251a
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 17 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -381,6 +381,8 @@ $BANNER_BORDER: 1px;
} }
.banner-ad__container { .banner-ad__container {
min-height: 250px;
padding: var(--spacing-xxs) var(--spacing-m); padding: var(--spacing-xxs) var(--spacing-m);
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
padding: var(--spacing-xxs) var(--spacing-xxs); padding: var(--spacing-xxs) var(--spacing-xxs);
@ -389,19 +391,21 @@ $BANNER_BORDER: 1px;
@media (min-width: $breakpoint-small) { @media (min-width: $breakpoint-small) {
margin: auto; margin: auto;
width: 100%; width: 100%;
max-width: 386px; }
@media (min-width: $breakpoint-xlarge) {
max-width: calc(#{$breakpoint-xlarge} * 3 / 4);
} }
} }
.banner-ad__driver { .banner-ad__driver {
display: none; // "= flex" when ads are fetched ('ob_holder' exists) display: flex;
flex-direction: row; flex-direction: row;
align-items: center; max-width: 50%;
border-left: $BANNER_BORDER solid var(--color-border); border-left: $BANNER_BORDER solid var(--color-border);
border-top: $BANNER_BORDER solid var(--color-border); border-bottom: $BANNER_BORDER solid var(--color-border);
border-radius: var(--border-radius) 0 var(--border-radius) 0; border-radius: 0 var(--border-radius) 0 var(--border-radius);
max-width: 95%;
float: right; float: right;
font-size: var(--font-xsmall); font-size: var(--font-xsmall);
@ -414,11 +418,6 @@ $BANNER_BORDER: 1px;
} }
} }
#ob_holder ~ .banner-ad__driver,
.banner-ad__container[data-ob-mark='true'] ~ .banner-ad__driver {
display: flex;
}
.banner-ad__driver-label { .banner-ad__driver-label {
color: var(--color-text-subtitle); color: var(--color-text-subtitle);
} }

14
web/component/adsBanner/view.jsx
View file

@ -70,17 +70,17 @@ export default function AdsBanner(props: Props) {
return ( return (
<div className="banner-ad"> <div className="banner-ad">
<div
className="banner-ad__container OUTBRAIN"
data-ob-contenturl="DROP_PERMALINK_HERE"
data-widget-id="AR_6"
data-ob-installation-key="ADNIMKAJDGAG4GAO6AGG6H5KP"
data-dark-mode={currentTheme === 'dark' ? 'true' : 'false'}
/>
<div className="banner-ad__driver"> <div className="banner-ad__driver">
<div className="banner-ad__driver-label">Ad</div> <div className="banner-ad__driver-label">Ad</div>
<div className="banner-ad__driver-value">{adsSignInDriver}</div> <div className="banner-ad__driver-value">{adsSignInDriver}</div>
</div> </div>
<div
className="banner-ad__container OUTBRAIN"
data-ob-contenturl="DROP_PERMALINK_HERE"
data-widget-id="AR_18"
data-ob-installation-key="ADNIMKAJDGAG4GAO6AGG6H5KP"
data-dark-mode={currentTheme === 'dark' ? 'true' : 'false'}
/>
</div> </div>
); );
} }