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

Inject close button into footer banner ad (#1710)

Browse source 
* Make shouldLoadSticky dynamic again

* Adjust of statement

* Update statement again...

* Adjust selector. Again.
This commit is contained in:
Rave | 図書館猫 2022-06-17 18:07:08 +02:00 committed by GitHub
parent f9ebd0863d
commit d40260374d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -342,21 +342,8 @@
font-size: 12px !important;
}
.ob-widget {
padding: var(--spacing-xxs);
background-color: var(--color-ads-background);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
.ob_what {
background: var(--color-header-background);
border-radius: 10px;
padding: 0 !important;
}
}
&:not(.banner-ad__container) {
border-radius: var(--border-radius) !important;
border-radius: var(--border-radius) 0 var(--border-radius) var(--border-radius) !important;
overflow: hidden;
.ob-rec-image-container {
@ -376,6 +363,61 @@
}
}
}
.AR_28 {
position: absolute;
bottom: 0 !important;
background-color: var(--color-ads-background);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
padding: var(--spacing-xxs);
.ob-widget-footer {
position: absolute !important;
top: -24px !important;
left: 0;
height: 24px;
background-color: var(--color-header-background) !important;
border-radius: var(--border-radius) var(--border-radius) 0 0;
padding: 0 !important;
}
}
}
.close-sticky {
position: absolute;
right: 0;
bottom: 71px;
width: 2rem;
height: 26px;
padding-top: 2px;
background-color: var(--color-primary);
border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
text-align: center;
opacity: 0;
animation: fadeIn 1s;
animation-delay: 5s;
animation-fill-mode: forwards;
&:hover {
cursor: pointer;
}
@media (max-width: 722px) {
position: fixed !important;
top: unset !important;
bottom: 71px;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.closeButton {
@ -394,29 +436,6 @@
}
}
/*
.ob-widget-footer {
position: absolute !important;
right: 32px;
top: -27px;
background: black;
border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
padding-left: 4px;
padding-right: 6px;
padding-top: 3px;
padding-bottom: 0px;
.ob_what_resp {
padding: unset !important;
}
@media (max-width: $breakpoint-small) {
display: none !important;
}
}
*/
.ob-widget-items-container {
padding-left: var(--spacing-xs);
padding-right: var(--spacing-xs);

20
web/component/adsSticky/view.jsx
View file

@ -52,6 +52,18 @@ export default function AdsSticky(props: Props) {
return pathIsCategory || isChannelClaim || (isContentClaim && !authenticated) || pathname === '/';
}
function closeSticky() {
const container = document.getElementsByClassName('AR_28')[0];
if (
container &&
container.parentElement &&
container.parentElement.parentElement &&
container.parentElement.parentElement.parentElement
) {
container.parentElement.parentElement.parentElement.remove();
}
}
React.useEffect(() => {
if (shouldLoadSticky) {
gScript = document.createElement('script');
@ -66,6 +78,14 @@ export default function AdsSticky(props: Props) {
React.useEffect(() => {
const container = window[OUTBRAIN_CONTAINER_KEY];
if (container) {
if (document.getElementsByClassName('close-sticky').length < 1) {
const closeButton = window.document.createElement('div');
closeButton.classList.add('close-sticky');
closeButton.innerHTML = '✖';
closeButton.onclick = closeSticky;
container.appendChild(closeButton);
}
container.style.display = inAllowedPath ? '' : 'none';
}
}, [inAllowedPath, refresh]);