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

styling cleanup

Browse source
This commit is contained in:
Sean Yesmunt 2019-05-13 02:05:38 -04:00
parent 40a5c4c5f6
commit db67c39ec6
16 changed files with 42 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -151,7 +151,6 @@
"react-router-dom": "^5.0.0",
"react-simplemde-editor": "^4.0.0",
"react-toggle": "^4.0.2",
"react-virtualized": "^9.21.0",
"redux": "^3.6.0",
"redux-persist": "^4.8.0",
"redux-persist-transform-compress": "^4.2.0",

2
src/ui/component/common/icon.jsx
View file

@ -25,7 +25,7 @@ class IconComponent extends React.PureComponent<Props> {
switch (icon) {
case ICONS.FEATURED:
return __('Featured content. Earn rewards for watching.');
case ICONS.LOCAL:
case ICONS.DOWNLOAD:
return __('This file is downloaded.');
default:
return null;

5
src/ui/component/fileCard/view.jsx
View file

@ -12,7 +12,6 @@ import { openCopyLinkMenu } from 'util/context-menu';
import DateTime from 'component/dateTime';
import { withRouter } from 'react-router-dom';
import { formatLbryUriForWeb } from 'util/uri';
import get from 'lodash.get';
type Props = {
uri: string,
@ -65,7 +64,6 @@ class FileCard extends React.PureComponent<Props> {
const {
claim,
fileInfo,
metadata,
rewardedContentClaimIds,
obscureNsfw,
claimIsMine,
@ -106,7 +104,6 @@ class FileCard extends React.PureComponent<Props> {
const uri = !pending ? normalizeURI(this.props.uri) : this.props.uri;
const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
const height = claim && claim.height;
const handleContextMenu = event => {
event.preventDefault();
event.stopPropagation();
@ -146,7 +143,7 @@ class FileCard extends React.PureComponent<Props> {
{isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
{isSubscribed && <Icon icon={icons.SUBSCRIPTION} />}
{claimIsMine && <Icon icon={icons.PUBLISHED} />}
{!claimIsMine && fileInfo && <Icon icon={icons.LOCAL} />}
{!claimIsMine && fileInfo && <Icon icon={icons.DOWNLOAD} />}
{isNew && <span className="badge badge--alert">{__('NEW')}</span>}
</div>
</li>

1
src/ui/component/fileDetails/view.jsx
View file

@ -92,7 +92,6 @@ class FileDetails extends PureComponent<Props> {
{__('Downloaded to')}
{': '}
<Button
constrict
button="link"
onClick={() => {
if (downloadPath) {

6
src/ui/component/fileTile/view.jsx
View file

@ -47,8 +47,8 @@ class FileTile extends React.PureComponent<Props> {
if (!isResolvingUri && !claim && uri) resolveUri(uri);
}
componentWillReceiveProps(nextProps: Props) {
const { isResolvingUri, claim, uri, resolveUri } = nextProps;
componentDidUpdate() {
const { isResolvingUri, claim, uri, resolveUri } = this.props;
if (!isResolvingUri && claim === undefined && uri) resolveUri(uri);
}
@ -68,7 +68,7 @@ class FileTile extends React.PureComponent<Props> {
{isNew && <span className="badge badge--alert icon">{__('NEW')}</span>}
{isSubscribed && <Icon icon={ICONS.SUBSCRIPTION} />}
{isRewardContent && <Icon iconColor="red" icon={ICONS.FEATURED} />}
{!claimIsMine && isDownloaded && <Icon icon={ICONS.LOCAL} />}
{!claimIsMine && isDownloaded && <Icon icon={ICONS.DOWNLOAD} />}
{claimIsMine && <Icon icon={ICONS.PUBLISHED} />}
</div>
);

2
src/ui/component/navigationHistory/view.jsx
View file

@ -78,7 +78,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
return historyItems.length ? (
<React.Fragment>
<div className="card__actions card__actions--between">
<div className="card__header card__actions card__actions--between">
{Object.keys(itemsSelected).length ? (
<Button button="link" label={__('Delete')} onClick={this.removeSelected} />
) : (

20
src/ui/component/sideBar/view.jsx
View file

@ -62,10 +62,10 @@ class SideBar extends React.PureComponent<Props> {
),
},
{
...buildLink(PAGES.PUBLISHED, 'Publishes', ICONS.PUBLISHED),
...buildLink(PAGES.PUBLISHED, __('Publishes'), ICONS.PUBLISHED),
},
{
...buildLink(PAGES.HISTORY, 'History', ICONS.HISTORY),
...buildLink(PAGES.HISTORY, __('Library'), ICONS.DOWNLOAD),
},
].map(renderLink)}
</ul>
@ -74,26 +74,26 @@ class SideBar extends React.PureComponent<Props> {
<ul className="navigation__links">
{[
{
...buildLink(PAGES.ACCOUNT, 'Overview', ICONS.ACCOUNT),
...buildLink(PAGES.ACCOUNT, __('Overview'), ICONS.ACCOUNT),
},
{
...buildLink(PAGES.INVITE, 'Invite', ICONS.INVITE, shouldShowInviteGuide && __('Check this out!')),
...buildLink(PAGES.INVITE, __('Invite'), ICONS.INVITE, shouldShowInviteGuide && __('Check this out!')),
},
{
...buildLink(PAGES.REWARDS, 'Rewards', ICONS.FEATURED),
...buildLink(PAGES.REWARDS, __('Rewards'), ICONS.FEATURED),
},
{
...buildLink(PAGES.SEND, 'Send & Recieve', ICONS.SEND),
...buildLink(PAGES.SEND, __('Send & Recieve'), ICONS.SEND),
},
{
...buildLink(PAGES.TRANSACTIONS, 'Transactions', ICONS.TRANSACTIONS),
...buildLink(PAGES.TRANSACTIONS, __('Transactions'), ICONS.TRANSACTIONS),
},
{
...buildLink(PAGES.SETTINGS, 'Settings', ICONS.SETTINGS),
...buildLink(PAGES.SETTINGS, __('Settings'), ICONS.SETTINGS),
},
// @if TARGET='app'
{
...buildLink(PAGES.BACKUP, 'Backup', ICONS.BACKUP),
...buildLink(PAGES.BACKUP, __('Backup'), ICONS.BACKUP),
},
// @endif
].map(renderLink)}
@ -102,7 +102,7 @@ class SideBar extends React.PureComponent<Props> {
<ul className="navigation__links navigation__links--bottom">
{[
{
...buildLink(PAGES.HELP, 'Help', ICONS.HELP),
...buildLink(PAGES.HELP, __('Help'), ICONS.HELP),
},
].map(renderLink)}
</ul>

4
src/ui/page/channel/view.jsx
View file

@ -46,8 +46,8 @@ function ChannelPage(props: Props) {
return (
<Page notContained className="main--no-padding-top">
<header className="channel__cover main__item--extend-outside">
{cover && <img className="channel__cover--custom" src={cover} />}
<header className="channel-cover main__item--extend-outside">
{cover && <img className="channel-cover__custom" src={cover} />}
<div className="channel__primary-info">
<ChannelThumbnail uri={uri} />

1
src/ui/page/search/view.jsx
View file

@ -52,7 +52,6 @@ export default function SearchPage(props: Props) {
<div className="search__results-wrapper">
<SearchOptions />
<FileListSearch query={urlQuery} />
<div className="card__content help">{__('These search results are provided by LBRY, Inc.')}</div>
</div>

14
src/ui/scss/component/_card.scss
View file

@ -125,15 +125,15 @@
// Depending on screen width, the amount of items in
// each row change and are auto-sized
@media (min-width: 2001px) {
grid-template-columns: repeat(auto-fill, minmax(calc(100% / 10), 1fr));
}
// @media (min-width: 2001px) {
// grid-template-columns: repeat(auto-fill, minmax(calc(100% / 10), 1fr));
// }
@media (min-width: 1801px) and (max-width: 2000px) {
grid-template-columns: repeat(auto-fill, minmax(calc(100% / 8), 1fr));
}
// @media (min-width: 1801px) and (max-width: 2000px) {
// grid-template-columns: repeat(auto-fill, minmax(calc(100% / 8), 1fr));
// }
@media (min-width: 1551px) and (max-width: 1800px) {
@media (min-width: 1551px) {
grid-template-columns: repeat(auto-fill, minmax(calc(100% / 7), 1fr));
}

8
src/ui/scss/component/_channel.scss
View file

@ -1,7 +1,7 @@
$cover-z-index: 0;
$metadata-z-index: 1;
.channel__cover {
.channel-cover {
background-image: linear-gradient(to right, $lbry-indigo-4, $lbry-cyan-5 80%);
display: flex;
align-items: flex-end;
@ -9,7 +9,7 @@ $metadata-z-index: 1;
color: $lbry-white;
}
.channel__cover--custom {
.channel-cover__custom {
z-index: $cover-z-index;
align-self: flex-start;
position: absolute;
@ -17,8 +17,8 @@ $metadata-z-index: 1;
filter: brightness(60%);
}
.channel__cover,
.channel__cover--custom {
.channel-cover,
.channel-cover__custom {
height: var(--cover-photo-height);
width: 100%;
}

1
src/ui/scss/component/_item-list.scss
View file

@ -1,6 +1,5 @@
.item-list {
background-color: $lbry-white;
margin-top: var(--spacing-vertical-large);
margin-bottom: var(--spacing-vertical-large);
padding: var(--spacing-vertical-large);

7
src/ui/scss/component/_search.scss
View file

@ -30,14 +30,9 @@
position: relative;
}
.search__results-title {
@extend .media-group__header-title;
margin-bottom: var(--spacing-vertical-large);
}
.search__options-wrapper {
font-size: 1.25em;
margin-bottom: var(--spacing-vertical-large);
margin: var(--spacing-vertical-xlarge) 0;
}
.search__options {

13
src/ui/scss/component/_table.scss
View file

@ -29,6 +29,8 @@ table,
}
.table--transactions {
table-layout: fixed;
td:nth-of-type(1) {
// TX amounts
font-size: 0.9em;
@ -36,10 +38,13 @@ table,
}
td:nth-of-type(3) {
max-width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// Only add ellipsis to the links in the table
// We still want to show the entire message if a TX includes one
.button__content {
@include constrict(10rem);
vertical-align: bottom;
display: inline-block;
}
}
}

2
src/ui/scss/init/_vars.scss
View file

@ -77,5 +77,5 @@ $large-breakpoint: 1921px;
// Image
--thumbnail-preview-height: 100px;
--thumbnail-preview-width: 177px;
--cover-photo-height: 250px;
--cover-photo-height: 300px;
}

23
yarn.lock
View file

@ -2389,7 +2389,7 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@^2.2.3, classnames@^2.2.5:
classnames@^2.2.5:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@ -3540,13 +3540,6 @@ dom-converter@^0.2:
dependencies:
utila "~0.4"
"dom-helpers@^2.4.0 || ^3.0.0":
version "3.4.0"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
dependencies:
"@babel/runtime" "^7.1.2"
dom-scroll-into-view@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz#e8f36732dd089b0201a88d7815dc3f88e6d66c7e"
@ -6814,7 +6807,7 @@ longest-streak@^2.0.1:
resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.2.tgz#2421b6ba939a443bb9ffebf596585a50b4c38e2e"
integrity sha512-TmYTeEYxiAmSVdpbnQDXGtvYOIRsCMg89CVZzwzc2o7GFL1CjoiRPjH5ec0NFAVlAx3fVof9dX/t6KKRAo2OWA==
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@ -9381,18 +9374,6 @@ react-toggle@^4.0.2:
dependencies:
classnames "^2.2.5"
react-virtualized@^9.21.0:
version "9.21.0"
resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.0.tgz#8267c40ffb48db35b242a36dea85edcf280a6506"
integrity sha512-duKD2HvO33mqld4EtQKm9H9H0p+xce1c++2D5xn59Ma7P8VT7CprfAe5hwjd1OGkyhqzOZiTMlTal7LxjH5yBQ==
dependencies:
babel-runtime "^6.26.0"
classnames "^2.2.3"
dom-helpers "^2.4.0 || ^3.0.0"
loose-envify "^1.3.0"
prop-types "^15.6.0"
react-lifecycles-compat "^3.0.4"
react@^16.8.2:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"