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

Adnim patch (#1647)

Browse source 
* Fix adnim ads

* Adjust ad container width

* Change widget on mobile

* Fix 3 column grid

* Ad ad banner top bar

* Ad ad banner bottom bar on mobile

* Ad ad banner bottom bar radius on mobile

* Adjust ad banners on mobile

* Make some mobile adjustments

* Remove dbeug box

* Combine ad classes
This commit is contained in:
Rave | 図書館猫 2022-06-07 21:16:26 +02:00 committed by GitHub
parent 688ea696bd
commit 8a16ca03be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 166 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -408,9 +408,168 @@ $BANNER_BORDER: 1px;
.banner-ad {
margin-top: var(--spacing-l);
background-color: var(--color-ads-background);
border: $BANNER_BORDER solid var(--color-border);
border-radius: var(--border-radius);
.banner-ad__driver {
float: unset;
max-width: 100%;
width: 100%;
height: 27px;
border: unset;
@media (max-width: $breakpoint-small) {
height: 25px;
.banner-ad__driver-label {
padding-top: 5px !important;
}
.button__label {
padding-top: 3px !important;
}
}
.banner-ad__driver-label {
background-color: var(--color-primary);
border-radius: 0 0 0 var(--border-radius);
margin-right: 2px;
padding-top: 4px;
font-weight: bold;
}
.banner-ad__driver-value {
width: 100%;
border: unset;
background-image: linear-gradient(to right, var(--color-primary), rgba(var(--color-primary-dynamic), 0));
}
.button__label {
color: var(--color-primary) !important;
background: var(--color-background);
border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
padding: 2px 4px 2px 4px;
margin-top: 2px;
&:hover {
color: var(--color-text) !important;
}
}
.banner-ad__driver-label,
.banner-ad__driver-value {
color: var(--color-primary-contrast) !important;
}
}
.ob-widget-footer {
background-image: linear-gradient(to right, rgba(var(--color-primary-dynamic), 0), var(--color-primary)) !important;
width: 100%;
height: 31px;
margin-top: var(--spacing-s);
border-radius: 0 var(--border-radius) 0 0 !important;
.ob_what {
margin: 2px;
background-color: var(--color-background) !important;
padding: 3px !important;
padding-bottom: 0px !important;
border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
}
}
.banner-ad__container {
padding: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: unset !important;
background-color: unset !important;
.ob-grid-header-text {
display: none;
}
.ob-widget-header {
margin: 0;
margin-top: var(--spacing-s);
}
.ob-widget-items-container {
padding-left: 0 !important;
padding-right: 0 !important;
.ob-dynamic-rec-container {
.ob-rec-image-container {
box-shadow: 0 0 0 1px rgba(var(--color-primary-dynamic), 0.3);
border-radius: var(--border-radius);
}
.ob-rec-text {
font-size: var(--font-small) !important;
color: var(--color-text) !important;
font-weight: 600 !important;
margin-top: 0 !important;
}
.ob-rec-description {
color: rgba(var(--color-text-base), 0.6) !important;
}
.ob-rec-source {
color: rgba(var(--color-text-base), 0.6) !important;
&:after {
color: var(--color-primary);
font-weight: bold;
}
&:hover {
color: var(--color-text);
}
}
.ob-sub-units {
margin-top: var(--spacing-xs);
}
&:hover {
.ob-rec-image-container {
box-shadow: 0 0 0 1px rgba(var(--color-primary-dynamic), 1);
}
.ob-rec-text {
color: var(--color-primary) !important;
}
}
}
@media (max-width: $breakpoint-large) {
grid-template-columns: repeat(4, minmax(min-content, 1fr)) !important;
.ob-dynamic-rec-container {
&:nth-child(6n) {
display: none;
}
&:nth-child(4n) {
display: none;
}
}
}
@media (max-width: $breakpoint-medium) {
grid-template-columns: repeat(3, minmax(min-content, 1fr)) !important;
.ob-dynamic-rec-container {
&:nth-child(6n) {
display: none;
}
&:nth-child(4n) {
display: none;
}
&:nth-child(2n) {
display: none;
}
}
}
@media (max-width: $breakpoint-small) {
grid-template-columns: repeat(1, minmax(min-content, 1fr)) !important;
.ob-dynamic-rec-container {
&:nth-child(6n) {
display: none;
}
&:nth-child(5n) {
display: none;
}
&:nth-child(4n) {
display: none;
}
&:nth-child(3n) {
display: none;
}
&:nth-child(2n) {
display: none;
}
}
}
}
}
}
.banner-ad__container {

2
ui/scss/component/_claim-list.scss
View file

@ -1038,7 +1038,7 @@
}
@media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) {
$width: calc((100vw - var(--side-nav-width--micro) - var(--spacing-xl) * 3) / 3);
$width: calc((100% - var(--spacing-m) * 2) / 3);
width: $width;
@include handleClaimTileGifThumbnail($width);

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

@ -4,6 +4,7 @@ import Button from 'component/button';
import I18nMessage from 'component/i18nMessage';
import * as PAGES from 'constants/pages';
import useShouldShowAds from 'effects/use-should-show-ads';
import { useIsMobile } from 'effects/use-screensize';
const AD_SCRIPT_URL = 'https://widgets.outbrain.com/outbrain.js';
@ -45,6 +46,7 @@ type Props = {
export default function AdsBanner(props: Props) {
const { isAdBlockerFound, userHasPremiumPlus, userCountry, currentTheme, doSetAdBlockerFound } = props;
const shouldShowAds = useShouldShowAds(userHasPremiumPlus, userCountry, isAdBlockerFound, doSetAdBlockerFound);
const isMobile = useIsMobile();
React.useEffect(() => {
if (shouldShowAds) {
@ -86,7 +88,7 @@ export default function AdsBanner(props: Props) {
<div
className="banner-ad__container OUTBRAIN"
data-ob-contenturl="DROP_PERMALINK_HERE"
data-widget-id={AD_CONFIG.AR_18}
data-widget-id={!isMobile ? AD_CONFIG.AR_60 : AD_CONFIG.AR_18}
data-ob-installation-key="ADNIMKAJDGAG4GAO6AGG6H5KP"
data-dark-mode={currentTheme === 'dark' ? 'true' : 'false'}
/>