Sean Yesmunt
GitHub
commit
0cc98e7c7e
24 changed files with 185 additions and 443 deletions
|
|
@ -59,7 +59,7 @@
|
|||
"@babel/register": "^7.0.0",
|
||||
"@hot-loader/react-dom": "16.8",
|
||||
"@lbry/color": "^1.0.2",
|
||||
"@lbry/components": "^2.3.3",
|
||||
"@lbry/components": "^2.7.0",
|
||||
"@types/three": "^0.93.1",
|
||||
"async-exit-hook": "^2.0.1",
|
||||
"babel-eslint": "^10.0.1",
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ type Props = {
|
|||
description: ?string,
|
||||
type: string,
|
||||
button: ?string, // primary, secondary, alt, link
|
||||
noPadding: ?boolean, // to remove padding and allow circular buttons
|
||||
iconColor?: string,
|
||||
iconSize?: number,
|
||||
constrict: ?boolean, // to shorten the button and ellipsis, only use for links
|
||||
|
|
@ -39,6 +38,8 @@ class Button extends React.PureComponent<Props> {
|
|||
title,
|
||||
label,
|
||||
icon,
|
||||
// This should rarely be used. Regular buttons should just use `icon`
|
||||
// `iconRight` is used for the header (home) button with the LBRY icon and external links that are displayed inline
|
||||
iconRight,
|
||||
disabled,
|
||||
children,
|
||||
|
|
@ -47,7 +48,6 @@ class Button extends React.PureComponent<Props> {
|
|||
description,
|
||||
button,
|
||||
type,
|
||||
noPadding,
|
||||
iconColor,
|
||||
iconSize,
|
||||
constrict,
|
||||
|
|
@ -57,9 +57,6 @@ class Button extends React.PureComponent<Props> {
|
|||
|
||||
const combinedClassName = classnames(
|
||||
'button',
|
||||
{
|
||||
'button--no-padding': noPadding,
|
||||
},
|
||||
button
|
||||
? {
|
||||
'button--primary': button === 'primary',
|
||||
|
|
|
|||
|
|
@ -272,20 +272,18 @@ class CategoryList extends PureComponent<Props, State> {
|
|||
return (
|
||||
<section className="media-group--row">
|
||||
<header className="media-group__header">
|
||||
<div className="media-group__header-title">
|
||||
<h2 className="media-group__header-title">
|
||||
{categoryLink ? (
|
||||
<div className="channel-info__actions">
|
||||
<div className="channel-info__actions__group">
|
||||
<React.Fragment>
|
||||
<Button label={category} navigate={channelLink} />
|
||||
<SubscribeButton
|
||||
button="alt"
|
||||
showSnackBarOnSubscribe
|
||||
uri={`lbry://${categoryLink}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
category
|
||||
<span>{category}</span>
|
||||
)}
|
||||
{isCommunityTopBids && (
|
||||
<ToolTip
|
||||
|
|
@ -296,7 +294,7 @@ class CategoryList extends PureComponent<Props, State> {
|
|||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</h2>
|
||||
{showScrollButtons && (
|
||||
<nav className="media-group__header-navigation">
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -65,7 +65,9 @@ class IconComponent extends React.PureComponent<Props> {
|
|||
tooltipText = this.getTooltip(icon);
|
||||
}
|
||||
|
||||
const inner = <Icon size={iconSize} className={classnames('icon', className)} color={color} />;
|
||||
const inner = (
|
||||
<Icon size={iconSize} className={classnames(`icon icon--${icon}`, className)} color={color} />
|
||||
);
|
||||
|
||||
return tooltipText ? (
|
||||
<Tooltip icon body={tooltipText} direction={tooltip}>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,6 @@ const Header = (props: Props) => {
|
|||
navigate="/"
|
||||
/>
|
||||
{/* @if TARGET='app' */}
|
||||
<div className="header__navigation-app">
|
||||
<div className="header__navigation-arrows">
|
||||
<Button
|
||||
className="header__navigation-item header__navigation-item--back"
|
||||
|
|
@ -62,7 +61,6 @@ const Header = (props: Props) => {
|
|||
iconSize={15}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* @endif */}
|
||||
</div>
|
||||
|
||||
|
|
@ -77,7 +75,8 @@ const Header = (props: Props) => {
|
|||
/>
|
||||
|
||||
<Button
|
||||
className="header__navigation-item header__navigation-item--wallet"
|
||||
className="header__navigation-item header__navigation-item--right-action"
|
||||
activeClass="header__navigation-item--active"
|
||||
description={__('Your wallet')}
|
||||
title={`Your balance is ${balance} LBRY Credits`}
|
||||
label={
|
||||
|
|
@ -102,7 +101,7 @@ const Header = (props: Props) => {
|
|||
|
||||
{showUpgradeButton && (
|
||||
<Button
|
||||
className="header__navigation-item header__navigation-item--right-action"
|
||||
className="header__navigation-item header__navigation-item--right-action header__navigation-item--upgrade"
|
||||
icon={ICONS.DOWNLOAD}
|
||||
iconSize={24}
|
||||
label={__('Upgrade App')}
|
||||
|
|
|
|||
|
|
@ -30,13 +30,7 @@ export default class MarkAsRead extends PureComponent<Props> {
|
|||
const { channel } = this.props;
|
||||
const label = channel ? __('Mark as read') : __('Mark all as read');
|
||||
return (
|
||||
<Button
|
||||
noPadding
|
||||
button="inverse"
|
||||
icon={ICONS.COMPLETE}
|
||||
label={label}
|
||||
onClick={this.handleClick}
|
||||
/>
|
||||
<Button button="inverse" icon={ICONS.COMPLETE} label={label} onClick={this.handleClick} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ class UriIndicator extends React.PureComponent<Props> {
|
|||
}
|
||||
|
||||
return (
|
||||
<Button noPadding className="button--uri-indicator" navigate={channelLink}>
|
||||
<Button className="button--uri-indicator" navigate={channelLink}>
|
||||
{inner}
|
||||
</Button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ class WunderBar extends React.PureComponent<Props, State> {
|
|||
this.input = el;
|
||||
}}
|
||||
className="wunderbar__input"
|
||||
placeholder="Enter LBRY URL here or search for videos, music, games and more"
|
||||
placeholder="Enter a LBRY URL here or search for videos, music, games and more"
|
||||
/>
|
||||
)}
|
||||
renderItem={({ value, type }, isHighlighted) => (
|
||||
|
|
|
|||
|
|
@ -16,8 +16,6 @@ const WalletPage = () => (
|
|||
<WalletBalance />
|
||||
<RewardSummary />
|
||||
</div>
|
||||
<WalletSend />
|
||||
<WalletAddress />
|
||||
<TransactionListRecent />
|
||||
</div>
|
||||
</Page>
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ class HelpPage extends React.PureComponent<Props, State> {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="card__meta">{__('Thanks! LBRY is made by its users.')}</div>
|
||||
<div className="help">{__('Thanks! LBRY is made by its users.')}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default (props: Props) => {
|
|||
<div className="card__actions card__actions--no-margin">
|
||||
<Button
|
||||
disabled={viewMode === VIEW_ALL}
|
||||
selected={viewMode === VIEW_ALL}
|
||||
className={viewMode === VIEW_ALL && 'button--subscription-view-selected'}
|
||||
button="link"
|
||||
label="All Subscriptions"
|
||||
onClick={() => doSetViewMode(VIEW_ALL)}
|
||||
|
|
@ -49,7 +49,7 @@ export default (props: Props) => {
|
|||
<Button
|
||||
button="link"
|
||||
disabled={viewMode === VIEW_LATEST_FIRST}
|
||||
selected={viewMode === VIEW_LATEST_FIRST}
|
||||
className={viewMode === VIEW_LATEST_FIRST && 'button--subscription-view-selected'}
|
||||
label={__('Latest Only')}
|
||||
onClick={() => doSetViewMode(VIEW_LATEST_FIRST)}
|
||||
/>
|
||||
|
|
@ -92,8 +92,8 @@ export default (props: Props) => {
|
|||
<div className="card__content">
|
||||
{viewMode === VIEW_ALL && (
|
||||
<Fragment>
|
||||
<div className="card__title--flex">
|
||||
<h2 className="card__title">{__('Your subscriptions')}</h2>
|
||||
<div className="card__title card__title--flex">
|
||||
<span>{__('Your subscriptions')}</span>
|
||||
{unreadSubscriptions.length > 0 && <MarkAsRead />}
|
||||
</div>
|
||||
<FileList hideFilter sortByHeight fileInfos={subscriptions} />
|
||||
|
|
@ -106,20 +106,20 @@ export default (props: Props) => {
|
|||
unreadSubscriptions.map(({ channel, uris }) => {
|
||||
const { claimName } = parseURI(channel);
|
||||
return (
|
||||
<span>
|
||||
<section key={channel}>
|
||||
<h2 className="card__title card__title--flex">
|
||||
<Button button="link" navigate={channel} label={claimName} />
|
||||
<MarkAsRead channel={channel} />
|
||||
</h2>
|
||||
|
||||
<section className="media-group--list" key={channel}>
|
||||
<section className="media-group--list">
|
||||
<ul className="card__list">
|
||||
{uris.map(uri => (
|
||||
<FileCard key={uri} uri={uri} />
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
</span>
|
||||
</section>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -119,104 +119,6 @@ export const selectTotalDownloadProgress = createSelector(
|
|||
}
|
||||
);
|
||||
|
||||
export const selectSearchDownloadUris = query =>
|
||||
createSelector(
|
||||
selectFileInfosDownloaded,
|
||||
selectClaimsById,
|
||||
(fileInfos, claimsById) => {
|
||||
if (!query || !fileInfos.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const queryParts = query.toLowerCase().split(' ');
|
||||
const searchQueryDictionary = {};
|
||||
queryParts.forEach(subQuery => {
|
||||
searchQueryDictionary[subQuery] = subQuery;
|
||||
});
|
||||
|
||||
const arrayContainsQueryPart = array => {
|
||||
for (let i = 0; i < array.length; i += 1) {
|
||||
const subQuery = array[i];
|
||||
if (searchQueryDictionary[subQuery]) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const downloadResultsFromQuery = [];
|
||||
fileInfos.forEach(fileInfo => {
|
||||
const { channel_name: channelName, claim_name: claimName, metadata } = fileInfo;
|
||||
const { author, description, title } = metadata;
|
||||
|
||||
if (channelName) {
|
||||
const lowerCaseChannel = channelName.toLowerCase();
|
||||
const strippedOutChannelName = lowerCaseChannel.slice(1); // trim off the @
|
||||
if (searchQueryDictionary[channelName] || searchQueryDictionary[strippedOutChannelName]) {
|
||||
downloadResultsFromQuery.push(fileInfo);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const nameParts = claimName.toLowerCase().split('-');
|
||||
if (arrayContainsQueryPart(nameParts)) {
|
||||
downloadResultsFromQuery.push(fileInfo);
|
||||
return;
|
||||
}
|
||||
|
||||
const titleParts = title.toLowerCase().split(' ');
|
||||
if (arrayContainsQueryPart(titleParts)) {
|
||||
downloadResultsFromQuery.push(fileInfo);
|
||||
return;
|
||||
}
|
||||
|
||||
if (author) {
|
||||
const authorParts = author.toLowerCase().split(' ');
|
||||
if (arrayContainsQueryPart(authorParts)) {
|
||||
downloadResultsFromQuery.push(fileInfo);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (description) {
|
||||
const descriptionParts = description.toLowerCase().split(' ');
|
||||
if (arrayContainsQueryPart(descriptionParts)) {
|
||||
downloadResultsFromQuery.push(fileInfo);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return downloadResultsFromQuery.length
|
||||
? downloadResultsFromQuery.map(fileInfo => {
|
||||
const {
|
||||
channel_name: channelName,
|
||||
claim_id: claimId,
|
||||
claim_name: claimName,
|
||||
} = fileInfo;
|
||||
|
||||
const uriParams = {};
|
||||
|
||||
if (channelName) {
|
||||
const claim = claimsById[claimId];
|
||||
if (claim && claim.value) {
|
||||
uriParams.claimId = claim.value.publisherSignature.certificateId;
|
||||
} else {
|
||||
uriParams.claimId = claimId;
|
||||
}
|
||||
uriParams.channelName = channelName;
|
||||
uriParams.contentName = claimName;
|
||||
} else {
|
||||
uriParams.claimId = claimId;
|
||||
uriParams.claimName = claimName;
|
||||
}
|
||||
|
||||
const uri = buildURI(uriParams);
|
||||
return uri;
|
||||
})
|
||||
: null;
|
||||
}
|
||||
);
|
||||
|
||||
export const selectFileInfoErrors = createSelector(
|
||||
selectState,
|
||||
state => state.errors || {}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
@import 'component/file-render';
|
||||
@import 'component/form-field';
|
||||
@import 'component/header';
|
||||
@import 'component/icon';
|
||||
@import 'component/item-list';
|
||||
@import 'component/load-screen';
|
||||
@import 'component/main';
|
||||
|
|
|
|||
|
|
@ -1,105 +1,68 @@
|
|||
@import '~@lbry/components/sass/button/_index.scss';
|
||||
|
||||
.button {
|
||||
border-radius: 0;
|
||||
font-size: 1em;
|
||||
display: inline-block;
|
||||
|
||||
.button__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke-width: 1.9;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
color: $lbry-gray-5;
|
||||
|
||||
// Buttons that don't have a label
|
||||
&:only-child {
|
||||
color: inherit;
|
||||
stroke-opacity: 1;
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
top: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
// Handle icons on the left or right side of the button label
|
||||
svg + .button__label,
|
||||
.button__label + svg {
|
||||
margin-left: var(--spacing-vertical-small);
|
||||
}
|
||||
|
||||
&.button--icon {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.button--primary,
|
||||
.button--alt,
|
||||
.button--no-style {
|
||||
svg {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
margin-left: var(--spacing-vertical-miniscule);
|
||||
}
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
height: var(--spacing-l);
|
||||
|
||||
svg {
|
||||
color: white;
|
||||
}
|
||||
|
||||
svg + .button__label {
|
||||
position: relative;
|
||||
top: -0.05em;
|
||||
}
|
||||
}
|
||||
|
||||
// This is a hack and the extra styles are just so this is more specific than the @lbry/components styling
|
||||
// Will make a PR there, but just doing it now for the release - Sean
|
||||
[type='button'].button--inverse {
|
||||
font-size: 1rem;
|
||||
transition: background-color 0.2s;
|
||||
border-radius: 0;
|
||||
|
||||
html[data-mode='dark'] & {
|
||||
&:not(:hover) {
|
||||
border-color: rgba($lbry-white, 0.1);
|
||||
background-color: rgba($lbry-black, 0.3);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: rgba($lbry-white, 0.1);
|
||||
background-color: rgba($lbry-white, 0.1);
|
||||
color: $lbry-white;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-mode='light'] & {
|
||||
&:not(:hover) {
|
||||
background-color: $lbry-white;
|
||||
color: $lbry-black;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lbry-gray-1;
|
||||
color: $lbry-black;
|
||||
}
|
||||
}
|
||||
|
||||
.button__content {
|
||||
svg {
|
||||
color: $lbry-gray-4;
|
||||
}
|
||||
}
|
||||
// Play/View button that is overlayed ontop of the video player
|
||||
.button--icon {
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
border-radius: 2.5rem;
|
||||
}
|
||||
|
||||
.button--selected {
|
||||
font-weight: 800;
|
||||
.button--primary,
|
||||
.button--alt,
|
||||
.button--inverse {
|
||||
height: var(--button-height);
|
||||
line-height: var(--button-height);
|
||||
border-radius: var(--button-radius);
|
||||
font-size: 1.1rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// We need the :disabled to override the default disabled button styles
|
||||
// This is a little different because we still want to keep the button styled
|
||||
// since it acts as an "active" state
|
||||
.button--subscription-view-selected:disabled {
|
||||
color: $lbry-teal-5;
|
||||
|
||||
&:disabled {
|
||||
border-bottom: 1px solid $lbry-teal-5;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html[data-mode='dark'] & {
|
||||
color: $lbry-teal-3;
|
||||
|
|
@ -108,6 +71,7 @@
|
|||
|
||||
.button--uri-indicator {
|
||||
max-width: 100%;
|
||||
height: 1.2em;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@
|
|||
// A C T I O N S
|
||||
|
||||
.card__actions {
|
||||
display: flex;
|
||||
font-size: 1.15rem;
|
||||
|
||||
> *:not(:last-child) {
|
||||
|
|
@ -98,7 +99,7 @@
|
|||
position: relative;
|
||||
|
||||
&:not(.card__header--flat) {
|
||||
margin-bottom: var(--spacing-vertical-small);
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -131,15 +132,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// C A R D
|
||||
// M E T A
|
||||
|
||||
.card__meta {
|
||||
color: $lbry-gray-5;
|
||||
padding-top: var(--spacing-vertical-medium);
|
||||
padding-bottom: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
// C A R D
|
||||
// M E S S A G E
|
||||
|
||||
|
|
@ -193,10 +185,6 @@
|
|||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
|
||||
.button {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
+ .card__content {
|
||||
margin-top: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
|
@ -206,9 +194,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.card__title + .button,
|
||||
.button:not(:first-of-type) {
|
||||
margin-left: var(--spacing-vertical-medium);
|
||||
& > *:not(:last-child) {
|
||||
margin-right: var(--spacing-vertical-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
.file-list {
|
||||
display: grid;
|
||||
grid-gap: $spacing-vertical * 2/3;
|
||||
grid-template-columns: repeat(auto-fill, var(--card-small-width));
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
}
|
||||
|
||||
.file-list__header {
|
||||
font-size: 24px;
|
||||
padding-top: $spacing-vertical * 4/3;
|
||||
|
||||
.tooltip {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-tile {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
padding-top: $spacing-vertical;
|
||||
|
||||
.card__media {
|
||||
flex: 0 0 var(--file-tile-media-width);
|
||||
height: var(--file-tile-media-height);
|
||||
}
|
||||
}
|
||||
|
||||
.file-tile__info {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
margin-left: $spacing-vertical * 2/3;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.file-tile--large {
|
||||
font-size: 16px;
|
||||
|
||||
.card__media {
|
||||
flex: 0 0 var(--file-tile-media-width-large);
|
||||
height: var(--file-tile-media-height-large);
|
||||
}
|
||||
}
|
||||
|
||||
.file-tile--small {
|
||||
font-size: 12px;
|
||||
padding-top: $spacing-vertical * 2/3;
|
||||
|
||||
.card__media {
|
||||
flex: 0 0 var(--file-tile-media-width-small);
|
||||
height: var(--file-tile-media-height-small);
|
||||
}
|
||||
}
|
||||
|
||||
.file-tile__title {
|
||||
font-size: 1.1em;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.file-tile__uri {
|
||||
color: $lbry-gray-5;
|
||||
}
|
||||
|
|
@ -1,6 +1,13 @@
|
|||
@import '~@lbry/components/sass/form/_index.scss';
|
||||
|
||||
// lbry/components overrides and minor styles
|
||||
// Some items have very specific styling
|
||||
// This is because many styles inside `lbry/components/sass/form/` are very specific
|
||||
// As styles become hardened here, they _should_ slowly move over to that repo
|
||||
|
||||
input-submit {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
width: 8em;
|
||||
|
|
@ -160,10 +167,6 @@ form {
|
|||
border-color: $lbry-teal-3;
|
||||
}
|
||||
}
|
||||
|
||||
&.button--inverse {
|
||||
@extend .button--inverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -176,9 +179,21 @@ fieldset-section {
|
|||
}
|
||||
}
|
||||
|
||||
.button__content {
|
||||
position: relative;
|
||||
top: -0.1em;
|
||||
// input-submit is connected to a button
|
||||
// The input height needs to match the button height to lineup correctly
|
||||
// Other inputs are fine since they are on their own and are used under different circumstances
|
||||
input[type='text'] {
|
||||
height: var(--button-height);
|
||||
|
||||
[data-mode='dark'] & {
|
||||
&:not(:focus) {
|
||||
border-color: $lbry-gray-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,108 +2,81 @@
|
|||
position: fixed;
|
||||
width: 100%;
|
||||
height: var(--header-height);
|
||||
align-items: center;
|
||||
background-color: $lbry-white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
z-index: 2;
|
||||
z-index: 2; // Main content uses z-index: 1, this ensures it always scrolls under the header
|
||||
background-color: $lbry-white;
|
||||
border-bottom: 1px solid $lbry-gray-1;
|
||||
|
||||
html[data-mode='dark'] & {
|
||||
background-color: rgba($lbry-black, 0.9);
|
||||
background-color: mix($lbry-black, $lbry-gray-3, 90%);
|
||||
color: $lbry-white;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigation {
|
||||
display: flex;
|
||||
|
||||
// First navigation item is the top left wrapper
|
||||
// This contains the Lbry logo (home link) and forward/back arrows on desktop
|
||||
&:first-of-type {
|
||||
// Main navigation collapses into a menu button
|
||||
// at smaller screen widths
|
||||
@media (min-width: 601px) {
|
||||
width: calc(var(--side-nav-width) - 1px);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
width: calc(var(--header-height) * 3 + 1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .header__navigation-app {
|
||||
// flex: 1;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
|
||||
// LBRY logo in the top left corner
|
||||
.lbry-icon {
|
||||
height: var(--header-height);
|
||||
width: 1rem;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.header__navigation-arrows {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-left: 1px solid $lbry-gray-1;
|
||||
|
||||
.button__content {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
// }
|
||||
|
||||
.header__navigation-item {
|
||||
height: var(--header-height);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
|
||||
&:not(:disabled):hover {
|
||||
svg {
|
||||
stroke: $lbry-black;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lbry-gray-1;
|
||||
}
|
||||
|
||||
&.header__navigation-item--active {
|
||||
&::after {
|
||||
height: 0.2em;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: $lbry-teal-3;
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-mode='dark'] & {
|
||||
&:hover {
|
||||
background-color: $lbry-gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
svg {
|
||||
stroke: $lbry-white;
|
||||
}
|
||||
|
||||
.button__content {
|
||||
line-height: var(--header-height);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigation-item--active {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
mix(transparent, $lbry-teal-3, 70%) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.header__navigation-item--back,
|
||||
.header__navigation-item--forward,
|
||||
.header__navigation-item--home,
|
||||
.header__navigation-item--menu {
|
||||
width: var(--header-height);
|
||||
|
||||
svg {
|
||||
stroke: $lbry-black;
|
||||
|
||||
&:only-child {
|
||||
// Header icons are a little different because they are larger
|
||||
top: 0.25rem;
|
||||
}
|
||||
|
||||
html[data-mode='dark'] & {
|
||||
stroke: $lbry-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigation-item--lbry {
|
||||
|
|
@ -114,65 +87,52 @@
|
|||
.lbry-icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
top: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Publish button
|
||||
.header__navigation-item--right-action {
|
||||
position: relative;
|
||||
|
||||
.button__content {
|
||||
display: flex;
|
||||
padding: 0 var(--spacing-vertical-large);
|
||||
}
|
||||
}
|
||||
|
||||
.button__label {
|
||||
line-height: 1.4;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
top: 0.1em;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
.header__navigation-item--right-action:not(:last-child),
|
||||
.header__navigation-item--lbry {
|
||||
border-right: 1px solid $lbry-gray-1;
|
||||
}
|
||||
|
||||
html[data-mode='dark'] & {
|
||||
border-right: 1px solid $lbry-gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigation-item--upgrade {
|
||||
background-color: $lbry-teal-5;
|
||||
color: $lbry-white;
|
||||
svg {
|
||||
stroke: $lbry-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigation-item--wallet {
|
||||
border-right: 1px solid $lbry-gray-1;
|
||||
width: 10rem;
|
||||
|
||||
html[data-mode='dark'] & {
|
||||
border-color: $lbry-gray-5;
|
||||
&:hover {
|
||||
background-color: $lbry-teal-4;
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigation-item--menu {
|
||||
@media (min-width: 601px) {
|
||||
// Add this back once we have an actual menu for mobile
|
||||
// @media (min-width: 601px) {
|
||||
display: none;
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
// Hide links that will live in the menu bar
|
||||
@media (max-width: 601px) {
|
||||
@media (max-width: 600px) {
|
||||
.header__navigation-item--back,
|
||||
.header__navigation-item--forward,
|
||||
.header__navigation-item--home,
|
||||
.header__navigation-item--right-action,
|
||||
.header__navigation-item--wallet {
|
||||
.header__navigation-item--right-action {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header__navigation:first-child {
|
||||
display: none;
|
||||
.header__navigation-item--lbry {
|
||||
padding: var(--spacing-vertical-medium);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
10
src/ui/scss/component/_icon.scss
Normal file
10
src/ui/scss/component/_icon.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// Not all icons are created equally... at least the react-feather ones aren't
|
||||
// Minor adjustments to ensure icons line up vertically
|
||||
|
||||
.icon--Heart {
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.icon--Flag {
|
||||
top: -2px;
|
||||
}
|
||||
|
|
@ -174,6 +174,7 @@
|
|||
|
||||
.media__action-group--large {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin-top: var(--spacing-vertical-small);
|
||||
margin-bottom: var(--spacing-vertical-small);
|
||||
|
||||
|
|
@ -508,33 +509,15 @@
|
|||
}
|
||||
|
||||
.media-group__header-title {
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-weight: 700;
|
||||
line-height: 1.33;
|
||||
width: calc(100% - 6rem); // to not cover the navigation
|
||||
|
||||
// Title needs adjusting depending on screen width
|
||||
|
||||
@media (min-width: 601px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
padding-bottom: var(--spacing-vertical-small);
|
||||
|
||||
.channel-info__actions__group {
|
||||
.button {
|
||||
&:first-child {
|
||||
font-size: 2rem;
|
||||
|
||||
.button__label {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
& > *:not(:first-child) {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
margin-left: var(--spacing-vertical-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -85,10 +85,9 @@
|
|||
// When there is a label for the tooltip and not just using a button or icon
|
||||
font-size: 14px;
|
||||
padding-left: $spacing-vertical * 1/3;
|
||||
|
||||
.tooltip__body {
|
||||
margin-top: 5px;
|
||||
}
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tooltip--on-component,
|
||||
|
|
|
|||
|
|
@ -175,11 +175,6 @@ code {
|
|||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: $lbry-gray-1;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: $lbry-gray-5;
|
||||
font-style: italic;
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@ $large-breakpoint: 1921px;
|
|||
--select-height: 30px;
|
||||
|
||||
// Button
|
||||
--button-radius: 20px;
|
||||
--button-height: 36px;
|
||||
--button-radius: 2.6rem;
|
||||
--button-height: 2.6rem;
|
||||
|
||||
// Header
|
||||
--header-height: 3.5rem;
|
||||
|
|
|
|||
|
|
@ -838,10 +838,10 @@
|
|||
resolved "https://registry.yarnpkg.com/@lbry/color/-/color-1.1.1.tgz#b80ec25fb515d436129332b20c767c5a7014ac09"
|
||||
integrity sha512-BdxqWmm84WYOd1ZsPruJiGr7WBEophVfJKg7oywFOAMb0h6ERe4Idx1ceweMSvCOyPlR5GAhil9Gvk70SBFdxQ==
|
||||
|
||||
"@lbry/components@^2.3.3":
|
||||
version "2.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.4.0.tgz#1fae33575647417929dec64e3cff1d2541fa7418"
|
||||
integrity sha512-p1Y4c9YiURQCGlYNSpN8nJgyznn10oEUWhDBui6IwW+ZlI40ILN4aiG1RRURQM2mj9b+9qczV6uUpm0IdOB67g==
|
||||
"@lbry/components@^2.7.0":
|
||||
version "2.7.0"
|
||||
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.7.0.tgz#246aa8c482f63940b2d235f21bd5a5ddd6c44a0b"
|
||||
integrity sha512-SuoqHb/ycZBVBuhFONeGntL3Qs0J9akATd8/ytJAdtI2xPWL3yXdext3e/F8VJRE4hW7hkJooTsCX6WbANZYTQ==
|
||||
|
||||
"@mapbox/hast-util-table-cell-style@^0.1.3":
|
||||
version "0.1.3"
|
||||
|
|
|
|||
Loading…
Reference in a new issue