diff --git a/.eslintrc.json b/.eslintrc.json index bb482f3f2..19f686074 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -40,6 +40,8 @@ "react/require-default-props": 0, "react/jsx-closing-tag-location": 0, "jsx-a11y/no-noninteractive-element-to-interactive-role": 0, - "class-methods-use-this": 0 + "class-methods-use-this": 0, + "jsx-a11y/interactive-supports-focus": 0, + "jsx-a11y/click-events-have-key-events": 0 } } diff --git a/CHANGELOG.md b/CHANGELOG.md index bc69a40bb..d90cc7a62 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/). ### Fixed * Invite table cutoff with large number of invites ([#1985](https://github.com/lbryio/lbry-desktop/pull/1985)) +* History styling on large screens and link issue with claims ([#1999](https://github.com/lbryio/lbry-desktop/pull/1999)) ## [0.25.1] - 2018-09-18 diff --git a/src/renderer/component/transactionListRecent/view.jsx b/src/renderer/component/transactionListRecent/view.jsx index 325bbc1cb..fefcab356 100644 --- a/src/renderer/component/transactionListRecent/view.jsx +++ b/src/renderer/component/transactionListRecent/view.jsx @@ -24,6 +24,10 @@ class TransactionListRecent extends React.PureComponent { return (
{__('Recent Transactions')}
+
+ {__('To view all of your transactions, navigate to the')}{' '} +
{fetchingTransactions && (
diff --git a/src/renderer/component/userHistory/view.jsx b/src/renderer/component/userHistory/view.jsx index ae8f4b532..bf8ffc862 100644 --- a/src/renderer/component/userHistory/view.jsx +++ b/src/renderer/component/userHistory/view.jsx @@ -99,7 +99,8 @@ class UserHistoryPage extends React.PureComponent { const allSelected = Object.keys(itemsSelected).length === history.length; const selectHandler = allSelected ? this.unselectAll : this.selectAll; - return ( + + return history.length ? (
{Object.keys(itemsSelected).length ? ( @@ -109,7 +110,6 @@ class UserHistoryPage extends React.PureComponent { {/* Using an empty span so spacing stays the same if the button isn't rendered */} )} -
{!!history.length && ( - - - {history.map(item => ( - { - this.onSelect(item.uri); - }} - /> - ))} - -
+
+ {history.map(item => ( + { + this.onSelect(item.uri); + }} + /> + ))} +
)} {pageCount > 1 && ( @@ -161,6 +159,13 @@ class UserHistoryPage extends React.PureComponent { )}
+ ) : ( +
+ {__("You don't have anything saved in history yet, go check out some content on LBRY!")} +
+
+
); } } diff --git a/src/renderer/component/userHistoryItem/view.jsx b/src/renderer/component/userHistoryItem/view.jsx index de35a919b..b5ae79808 100644 --- a/src/renderer/component/userHistoryItem/view.jsx +++ b/src/renderer/component/userHistoryItem/view.jsx @@ -36,27 +36,24 @@ class UserHistoryItem extends React.PureComponent { } return ( - - - - - {moment(lastViewed).from(moment())} - {title} - -
); } } diff --git a/src/renderer/page/help/view.jsx b/src/renderer/page/help/view.jsx index 139760e89..1ce4aacca 100644 --- a/src/renderer/page/help/view.jsx +++ b/src/renderer/page/help/view.jsx @@ -199,7 +199,7 @@ class HelpPage extends React.PureComponent { )} {this.state.uiVersion && ver ? ( - +
diff --git a/src/renderer/redux/actions/navigation.js b/src/renderer/redux/actions/navigation.js index dceceea82..5c833feb4 100644 --- a/src/renderer/redux/actions/navigation.js +++ b/src/renderer/redux/actions/navigation.js @@ -8,6 +8,14 @@ export function doNavigate(path, params = {}, options = {}) { return; } + // ensure uri always has "lbry://" prefix + const navigationParams = params; + if (path === '/show') { + if (navigationParams.uri && !navigationParams.uri.startsWith('lbry://')) { + navigationParams.uri = `lbry://${navigationParams.uri}`; + } + } + let url = path; if (params && Object.values(params).length) { url += `?${toQueryString(params)}`; diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss index 21427af15..e64bb9209 100644 --- a/src/renderer/scss/_gui.scss +++ b/src/renderer/scss/_gui.scss @@ -39,7 +39,7 @@ html { } body { - font-family: 'metropolis-semibold'; + font-family: 'metropolis-medium'; font-weight: 400; font-size: 16px; line-height: 1.5; @@ -74,7 +74,6 @@ input { line-height: 1; cursor: text; background-color: transparent; - font-family: 'metropolis-medium'; &[type='radio'], &[type='checkbox'], @@ -110,7 +109,6 @@ input { } textarea { - font-family: 'metropolis-medium'; border: 1px solid var(--color-divider); font-size: 0.8em; width: 100%; @@ -153,8 +151,6 @@ dd { } p { - font-family: 'metropolis-medium'; - &:not(:first-of-type) { margin-top: $spacing-vertical * 1/3; } @@ -228,7 +224,6 @@ p { .page__empty { margin-top: 200px; text-align: center; - font-family: 'metropolis-medium'; display: flex; flex-direction: column; align-items: center; @@ -301,7 +296,6 @@ p { color: inherit; font-weight: inherit; font-size: inherit; - font-family: 'metropolis-medium'; padding: 0; } @@ -334,10 +328,6 @@ p { -webkit-box-orient: vertical; } -.busy-indicator { - font-family: 'metropolis-medium'; -} - .busy-indicator__loader { background: url('../../../static/img/busy.gif') no-repeat center center; display: inline-block; @@ -356,7 +346,6 @@ p { .help { font-size: 12px; - font-family: 'metropolis-medium'; color: var(--color-help); } @@ -365,7 +354,6 @@ p { } .meta { - font-family: 'metropolis-medium'; font-size: 0.8em; color: var(--color-meta-light); } diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index 6f6d1010f..9c237bbed 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -52,6 +52,8 @@ $large-breakpoint: 1921px; --color-search-placeholder: var(--color-placeholder); --color-credit-free: var(--color-dark-blue); --color-credit-price: var(--card-text-color); + --color-text-black: #444; + --color-text-white: #efefef; /* Shadows */ --box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25); @@ -60,8 +62,8 @@ $large-breakpoint: 1921px; --box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.05); /* Text */ - --text-color: var(--color-black); - --text-color-inverse: var(--color-white); + --text-color: var(--color-text-black); + --text-color-inverse: var(--color-text-white); --text-help-color: var(--color-help); --text-max-width: 660px; --text-link-padding: 4px; diff --git a/src/renderer/scss/all.scss b/src/renderer/scss/all.scss index 4b9bae942..06f25b709 100644 --- a/src/renderer/scss/all.scss +++ b/src/renderer/scss/all.scss @@ -29,3 +29,5 @@ @import 'component/_toggle.scss'; @import 'component/_search.scss'; @import 'component/_dat-gui.scss'; +@import 'component/_item-list.scss'; +@import 'component/_time.scss'; diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss index 4da2fae44..6413fce65 100644 --- a/src/renderer/scss/component/_button.scss +++ b/src/renderer/scss/component/_button.scss @@ -19,7 +19,6 @@ button:disabled { fill: currentColor; // for proper icon color font-size: 12px; transition: all var(--animation-duration) var(--animation-style); - font-family: 'metropolis-medium'; &:not(:disabled) { box-shadow: var(--box-shadow-button); @@ -172,7 +171,6 @@ button:disabled { } .btn.btn--header-balance { - font-family: 'metropolis-medium'; font-size: 14px; color: var(--header-primary-color); diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss index f3d6efba5..4cf2407a1 100644 --- a/src/renderer/scss/component/_card.scss +++ b/src/renderer/scss/component/_card.scss @@ -107,6 +107,7 @@ .card__title { font-size: 18px; color: var(--text-color); + font-family: 'metropolis-semibold'; } .card__title--small { @@ -151,7 +152,6 @@ .card__subtitle { margin: 0; font-size: 14px; - font-family: 'metropolis-medium'; color: var(--card-text-color); } @@ -336,6 +336,7 @@ } .card-row__title { + font-family: 'metropolis-semibold'; display: flex; align-items: center; font-size: 18px; diff --git a/src/renderer/scss/component/_item-list.scss b/src/renderer/scss/component/_item-list.scss new file mode 100644 index 000000000..ac3dd1a8d --- /dev/null +++ b/src/renderer/scss/component/_item-list.scss @@ -0,0 +1,26 @@ +.item-list { + background-color: var(--card-bg); + margin-top: $spacing-vertical; +} + +.item-list__item { + display: flex; + align-items: center; + padding: $spacing-vertical * 1/3; + + input, + .item-list__item--cutoff { + margin-right: $spacing-vertical; + } +} + +.item-list__item--selected { + background-color: var(--table-item-odd); +} + +.item-list__item--cutoff { + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: hidden; + max-width: 350px; +} diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss index fbe3f6a3d..dec8f55a3 100644 --- a/src/renderer/scss/component/_search.scss +++ b/src/renderer/scss/component/_search.scss @@ -24,7 +24,6 @@ padding: 10px; padding-left: 30px; font-size: 13px; - font-family: 'metropolis-medium'; display: flex; align-items: center; justify-content: center; @@ -54,7 +53,6 @@ flex-direction: row; justify-items: flex-start; align-items: center; - font-family: 'metropolis-medium'; &:not(:first-of-type) { border-top: 1px solid var(--search-item-border-color); @@ -75,7 +73,6 @@ .wunderbar__suggestion-label--action { margin-left: $spacing-vertical * 1/3; white-space: nowrap; - font-family: 'metropolis-medium'; font-size: 12px; line-height: 0.1; // to vertically align because the font size is smaller } diff --git a/src/renderer/scss/component/_table.scss b/src/renderer/scss/component/_table.scss index c47120951..ebf2066f6 100644 --- a/src/renderer/scss/component/_table.scss +++ b/src/renderer/scss/component/_table.scss @@ -3,7 +3,6 @@ table.table, word-wrap: break-word; max-width: 100%; text-align: left; - margin-top: $spacing-vertical * 2/3; tr td:first-of-type, tr th:first-of-type { @@ -107,48 +106,3 @@ table.table--transactions { width: 15%; } } - -table.table--history { - margin-top: $spacing-vertical * 1/3; - - tbody { - tr { - &:nth-child(even), - &:nth-child(odd) { - background-color: var(--table-item-even); - - &.history__selected { - color: red; - background-color: var(--table-item-odd); - } - } - } - - td { - cursor: default; - padding: $spacing-vertical * 1/3 0; - } - - td:nth-of-type(1) { - width: 7.5%; - } - td:nth-of-type(2) { - width: 17.5%; - } - td:nth-of-type(3) { - width: 40%; - max-width: 30vw; - padding-right: $spacing-vertical * 2/3; - } - td:nth-of-type(4) { - width: 30%; - } - - td:nth-of-type(3), - td:nth-of-type(4) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } -} diff --git a/src/renderer/scss/component/_time.scss b/src/renderer/scss/component/_time.scss new file mode 100644 index 000000000..1e35e772f --- /dev/null +++ b/src/renderer/scss/component/_time.scss @@ -0,0 +1,9 @@ +// All CSS for date & time ui + +.time { + color: var(--color-help); +} + +.time--ago { + min-width: 160px; +} diff --git a/static/themes/dark.css b/static/themes/dark.css index fae053d75..cf18cbac0 100644 --- a/static/themes/dark.css +++ b/static/themes/dark.css @@ -1,5 +1,5 @@ :root { - + /* Colors */ --color-divider: #53637C;; --color-canvas: transparent; @@ -12,7 +12,7 @@ --color-credit-free: var(--color-secondary); /* Text */ - --text-color: var(--color-white); + --text-color: var(--color-text-white); --text-help-color: var(--color-help); /* Form */
{__('App')}