From faa4e7364f2b9c2ea91cf5ababaeac4829d647a4 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 1 Oct 2020 16:59:11 -0400 Subject: [PATCH] alignment with odysee branch --- ui/scss/component/_navigation.scss | 3 +-- ui/scss/component/_notification.scss | 12 ++++++++- ui/scss/init/_gui.scss | 2 +- ui/scss/init/_mixins.scss | 25 +------------------ ui/scss/init/_vars.scss | 2 +- web/component/ads.jsx | 10 +++++--- .../fileViewerEmbeddedEnded/view.jsx | 11 ++++---- web/src/html.js | 8 +++--- 8 files changed, 32 insertions(+), 41 deletions(-) diff --git a/ui/scss/component/_navigation.scss b/ui/scss/component/_navigation.scss index 8990ef127..99b505298 100644 --- a/ui/scss/component/_navigation.scss +++ b/ui/scss/component/_navigation.scss @@ -227,8 +227,7 @@ position: fixed; width: 100vw; height: 100vh; - opacity: 0.3; - background-color: black; + background-color: var(--color-background-overlay); z-index: 3; left: 0; top: var(--header-height); diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss index 1d8d86002..71acb8fc0 100644 --- a/ui/scss/component/_notification.scss +++ b/ui/scss/component/_notification.scss @@ -17,7 +17,7 @@ .icon__wrapper { width: 1rem; height: 1rem; - padding: 1rem; + padding: 1.2rem; border-radius: var(--border-radius); margin-right: var(--spacing-m); @@ -89,6 +89,11 @@ overflow: hidden; } +.notification__title, +.notification__text { + max-width: 30rem; +} + .notification__time { font-size: var(--font-small); color: var(--color-text-help); @@ -135,4 +140,9 @@ border-radius: 50%; background-color: var(--color-primary); margin-left: var(--spacing-s); + margin-top: var(--spacing-s); + + @media (min-width: $breakpoint-small) { + margin-top: 0; + } } diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss index 48996a4e3..79bdc5908 100644 --- a/ui/scss/init/_gui.scss +++ b/ui/scss/init/_gui.scss @@ -234,7 +234,7 @@ textarea { .help--card-actions { @extend .help; - margin-top: var(--spacing-l); + margin-top: var(--spacing-m); } .empty { diff --git a/ui/scss/init/_mixins.scss b/ui/scss/init/_mixins.scss index ed30af6ab..e2cac4d53 100644 --- a/ui/scss/init/_mixins.scss +++ b/ui/scss/init/_mixins.scss @@ -115,30 +115,6 @@ -webkit-user-select: none; } -// TODO: Make customizable -// The `background-position` in `loading-animation` is the same width as this `background-size` -// The same values can be passed to both -@mixin placeholder { - animation-duration: 4s; - animation-fill-mode: forwards; - animation-iteration-count: infinite; - animation-name: loading-animation; - animation-timing-function: linear; - background-color: transparent; - background-image: linear-gradient(to right, var(--color-gray-3) 10%, transparent 80%, var(--color-gray-3) 100%); - background-repeat: repeat; - background-size: 500px; - - [data-mode='dark'] & { - background-image: linear-gradient( - to right, - rgba($lbry-white, 0.1) 10%, - transparent 80%, - rgba($lbry-white, 0.1) 100% - ); - } -} - // Use CSS variables without upsetting Sass-Lint // https://github.com/sasstools/sass-lint/issues/1161#issuecomment-390537190 @mixin root-prop($prop: null, $value: null) { @@ -208,6 +184,7 @@ animation: pulse 2s infinite ease-in-out; background-color: var(--color-placeholder-background); border-radius: var(--card-radius); + border-width: 0; } @mixin mediaThumbHoverZoom { diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss index de243f365..89ad35c6b 100644 --- a/ui/scss/init/_vars.scss +++ b/ui/scss/init/_vars.scss @@ -50,7 +50,7 @@ $breakpoint-large: 1600px; --mac-titlebar-height: 1.5rem; --mobile: 600px; --side-nav-width: 230px; - --side-nav-width--micro: 100px; + --side-nav-width--micro: 125px; --spacing-main-padding: var(--spacing-xl); --floating-viewer-width: 32rem; diff --git a/web/component/ads.jsx b/web/component/ads.jsx index 475ac1956..744989d54 100644 --- a/web/component/ads.jsx +++ b/web/component/ads.jsx @@ -1,11 +1,11 @@ // @flow +import { DOMAIN, SHOW_ADS } from 'config'; import * as PAGES from 'constants/pages'; import React, { useEffect } from 'react'; import { withRouter } from 'react-router'; import I18nMessage from 'component/i18nMessage'; import Button from 'component/button'; import classnames from 'classnames'; -import { DOMAIN } from 'config'; const ADS_URL = '//assets.revcontent.com/master/delivery.js'; const IS_MOBILE = typeof window.orientation !== 'undefined'; @@ -24,7 +24,7 @@ function Ads(props: Props) { } = props; useEffect(() => { - if (type === 'video') { + if (SHOW_ADS && type === 'video') { try { const d = document; const s = 'script'; @@ -42,7 +42,7 @@ function Ads(props: Props) { }, [type]); useEffect(() => { - if (!IS_MOBILE && type === 'sidebar') { + if (SHOW_ADS && !IS_MOBILE && type === 'sidebar') { const script = document.createElement('script'); script.src = ADS_URL; script.async = true; @@ -78,6 +78,10 @@ function Ads(props: Props) { ); + if (!SHOW_ADS) { + return false; + } + return type === 'video' ? (
diff --git a/web/component/fileViewerEmbeddedEnded/view.jsx b/web/component/fileViewerEmbeddedEnded/view.jsx index 647925f7a..48fce872f 100644 --- a/web/component/fileViewerEmbeddedEnded/view.jsx +++ b/web/component/fileViewerEmbeddedEnded/view.jsx @@ -3,7 +3,7 @@ import React from 'react'; import Button from 'component/button'; import { formatLbryUrlForWeb } from 'util/url'; import { withRouter } from 'react-router'; -import { URL } from 'config'; +import { URL, SITE_NAME } from 'config'; import * as ICONS from 'constants/icons'; type Props = { @@ -16,20 +16,21 @@ function FileViewerEmbeddedEnded(props: Props) { const prompts = isAuthenticated ? { - discuss_auth: 'Continue the discussion on lbry.tv', + discuss_auth: `Continue the discussion on ${SITE_NAME}`, tip_auth: 'Always tip your creators', } : { bigtech_unauth: 'Together, we can take back control from big tech', - discuss_unauth: 'Continue the discussion on lbry.tv', - find_unauth: 'Find more great content on lbry.tv', + discuss_unauth: `Continue the discussion on ${SITE_NAME}`, + find_unauth: `Find more great content on ${SITE_NAME}`, a_b_unauth: "We test a lot of messages here. Wouldn't it be funny if the one telling you that did the best?", - earn_unauth: 'Join lbry.tv and earn to watch.', + earn_unauth: `Join ${SITE_NAME} and earn to watch.`, blockchain_unauth: "Now if anyone asks, you can say you've used a blockchain.", }; const promptKeys = Object.keys(prompts); const promptKey = promptKeys[Math.floor(Math.random() * promptKeys.length)]; + // $FlowFixMe const prompt = prompts[promptKey]; const lbrytvLink = `${URL}${formatLbryUrlForWeb(uri)}?src=${promptKey}`; diff --git a/web/src/html.js b/web/src/html.js index ee38225cf..5f5ee090f 100644 --- a/web/src/html.js +++ b/web/src/html.js @@ -200,8 +200,8 @@ async function getHtml(ctx) { parseURI(inviteChannelUrl); const claim = await getClaimFromChainqueryOrRedirect(ctx, inviteChannelUrl); const invitePageMetadata = buildClaimOgMetadata(inviteChannelUrl, claim, { - title: `Join ${claim.name} on LBRY`, - description: `Join ${claim.name} on LBRY, a content wonderland owned by everyone (and no one).`, + title: `Join ${claim.name} on ${SITE_NAME}`, + description: `Join ${claim.name} on ${SITE_NAME}, a content wonderland owned by everyone (and no one).`, }); return insertToHead(html, invitePageMetadata); @@ -209,8 +209,8 @@ async function getHtml(ctx) { // Something about the invite channel is messed up // Enter generic invite metadata const invitePageMetadata = buildOgMetadata({ - title: `Join a friend on LBRY`, - description: `Join a friend on LBRY, a content wonderland owned by everyone (and no one).`, + title: `Join a friend on ${SITE_NAME}`, + description: `Join a friend on ${SITE_NAME}, a content wonderland owned by everyone (and no one).`, }); return insertToHead(html, invitePageMetadata); }