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

Updated Search Page CSS and added description #1522

Merged
tiger5226 merged 3 commits from search_improvements into master 2018-06-06 09:13:54 +02:00
Conversation 5 Commits 3 Files changed 18 +42 -102
12 changed files with 42 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 93a2b6f9e6 - Show all commits

4
package.json
View file

@ -48,7 +48,7 @@
"formik": "^0.10.4",
"hast-util-sanitize": "^1.1.2",
"keytar": "^4.2.1",
"lbry-redux": "lbryio/lbry-redux#02e47f922e5ba8908b5848c15b84196c87b9804d",
"lbry-redux": "lbryio/lbry-redux#543af2fcee7e4c45ccaf73af7b47d4b1a5d8ad44",
"localforage": "^1.7.1",
"mixpanel-browser": "^2.17.1",
"moment": "^2.22.0",
@ -127,7 +127,7 @@
"yarn": "^1.3"
},
"lbrySettings": {
"lbrynetDaemonVersion": "0.20.0rc9",
"lbrynetDaemonVersion": "0.19.3",
"lbrynetDaemonUrlTemplate": "https://github.com/lbryio/lbry/releases/download/vDAEMONVER/lbrynet-daemon-vDAEMONVER-OSNAME.zip",
"lbrynetDaemonDir": "static/daemon",
"lbrynetDaemonFileName": "lbrynet-daemon"

6
src/renderer/component/fileListSearch/view.jsx
View file

@ -58,7 +58,7 @@ class FileListSearch extends React.PureComponent<Props> {
return (
query && (
<div className="search__results">
<div className="search-result__column">
<div className="search-result__row">
<div className="file-list__header">{__('Content')}</div>
{!isSearching &&
(fileResults.length ? (
@ -68,7 +68,7 @@ class FileListSearch extends React.PureComponent<Props> {
))}
</div>
<div className="search-result__column">
<div className="search-result__row">
<div className="file-list__header">{__('Channels')}</div>
{!isSearching &&
(channelResults.length ? (
@ -78,7 +78,7 @@ class FileListSearch extends React.PureComponent<Props> {
))}
</div>
<div className="search-result__column">
<div className="search-result__row">
<div className="file-list__header">{__('Your downloads')}</div>
{downloadUris && downloadUris.length ? (
downloadUris.map(uri => <FileTile hideNoResult key={uri} uri={uri} />)

2
src/renderer/component/fileTile/view.jsx
View file

@ -106,7 +106,7 @@ class FileTile extends React.PureComponent<Props> {
{isRewardContent && <Icon icon={icons.FEATURED} />}
{showLocal && isDownloaded && <Icon icon={icons.LOCAL} />}
</div>
<div className="card__subtext">
<div className="card__subtext card__subtext--small">
<TruncatedText lines={3}>{description}</TruncatedText>
</div>
<div className="card__subtitle-price">

3
src/renderer/modal/modalRouter/view.jsx
View file

@ -21,7 +21,6 @@ import ModalFirstSubscription from 'modal/modalFirstSubscription';
import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
import ModalSendTip from '../modalSendTip';
import ModalPublish from '../modalPublish';
import ModalSearch from '../modalSearch';
import ModalOpenExternalLink from '../modalOpenExternalLink';
class ModalRouter extends React.PureComponent {
@ -155,8 +154,6 @@ class ModalRouter extends React.PureComponent {
return <ModalSendTip {...notificationProps} />;
case MODALS.PUBLISH:
return <ModalPublish {...notificationProps} />;
case MODALS.SEARCH:
return <ModalSearch {...notificationProps} />;
case MODALS.CONFIRM_EXTERNAL_LINK:
return <ModalOpenExternalLink {...notificationProps} />;
case MODALS.CONFIRM_TRANSACTION:

13
src/renderer/modal/modalSearch/index.js
View file

@ -1,13 +0,0 @@
import { connect } from 'react-redux';
import { doHideNotification } from 'lbry-redux';
import ModalSearch from './view';
import { doClearPublish } from 'redux/actions/publish';
import { doNavigate } from 'redux/actions/navigation';
const perform = dispatch => ({
closeModal: () => dispatch(doHideNotification()),
clearPublish: () => dispatch(doClearPublish()),
navigate: (path, params) => dispatch(doNavigate(path, params)),
});
export default connect(null, perform)(ModalSearch);

25
src/renderer/modal/modalSearch/view.jsx
View file

@ -1,25 +0,0 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import SearchPage from 'page/search';
import Button from 'component/button';
import * as icons from 'constants/icons';
type Props = {
closeModal: () => void,
query: string,
};
class ModalSearch extends React.PureComponent<Props> {
render() {
const { closeModal, query } = this.props;
return (
<Modal isOpen type="custom" fullScreen>
<Button noPadding button="alt" icon={icons.CLOSE} onClick={closeModal} />
<SearchPage />
</Modal>
);
}
}
export default ModalSearch;

37
src/renderer/page/search/view.jsx
View file

@ -12,7 +12,6 @@ const MODAL_ANIMATION_TIME = 250;
type Props = {
query: ?string,
updateSearchQuery: string => void,
};
class SearchPage extends React.PureComponent<Props> {
@ -35,27 +34,25 @@ class SearchPage extends React.PureComponent<Props> {
input: ?HTMLInputElement;
render() {
const { query, updateSearchQuery } = this.props;
const { query } = this.props;
return (
<Page>
<div className="search__wrapper">
{isURIValid(query) && (
<React.Fragment>
<div className="file-list__header">
{__('Exact URL')}
<ToolTip
icon
body={__('This is the resolution of a LBRY URL and not controlled by LBRY Inc.')}
>
<Icon icon={icons.HELP} />
</ToolTip>
</div>
<FileTile fullWidth uri={normalizeURI(query)} showUri />
</React.Fragment>
)}
<FileListSearch query={query} />
<div className="help">{__('These search results are provided by LBRY, Inc.')}</div>
</div>
{isURIValid(query) && (
<React.Fragment>
<div className="file-list__header">
{__('Exact URL')}
<ToolTip
icon
body={__('This is the resolution of a LBRY URL and not controlled by LBRY Inc.')}
>
<Icon icon={icons.HELP} />
</ToolTip>
</div>
<FileTile fullWidth uri={normalizeURI(query)} showUri />
</React.Fragment>
)}
<FileListSearch query={query} />
<div className="help">{__('These search results are provided by LBRY, Inc.')}</div>
</Page>
);
}

4
src/renderer/scss/_vars.scss
View file

@ -150,8 +150,8 @@ $large-breakpoint: 1760px;
--success-msg-bg: var(--color-green-light);
/* File Tile Card */
--file-tile--media-height: calc(150px * (1 + 9/16));
--file-tile--media-width: calc(200px* (1 + 9/16));
--file-tile--media-height: 100px;
--file-tile--media-width: calc(100px * (1 + 9 / 16));
/* Modal */
--modal-width: 440px;

18
src/renderer/scss/component/_card.scss
View file

@ -100,14 +100,6 @@
color: var(--text-color);
}
.card__title--file {
font-family: 'metropolis-bold';
font-size: 28px;
margin-bottom: 0;
line-height: 36px;
padding-top: 20px;
}
.card__title--small {
font-size: 14px;
line-height: 18px;
@ -115,10 +107,12 @@
}
.card__title--file {
font-family: 'metropolis-bold';
font-size: 28px;
margin-bottom: 0;
padding-top: 0;
line-height: 28px;
padding-bottom: 5px;
font-size: 24px;
font-size: 18px;
}
.card__subtitle {
@ -204,6 +198,10 @@
font-family: 'metropolis-medium';
}
.card__subtext--small {
font-size: calc(var(--font-size-subtext-multiple) * 0.8em);
}
.card__actions {
margin-top: $spacing-vertical * 2/3;
display: flex;

4
src/renderer/scss/component/_file-list.scss
View file

@ -13,7 +13,7 @@
.file-list__header {
margin-top: $spacing-vertical * 4/3;
font-size: 40px;
font-size: 24px;
.tooltip {
margin-left: 5px;
@ -41,7 +41,7 @@
.file-tile__info {
display: flex;
flex-direction: column;
margin-left: $spacing-vertical * 1/3;
margin-left: $spacing-vertical * 2/3;
max-width: 500px;
}

24
src/renderer/scss/component/_search.scss
View file

@ -81,29 +81,15 @@
background-color: var(--color-secondary);
}
// Search modal
// Input field used inside search modal
.search__wrapper {
height: var(--search-modal-input-height);
}
.search__input {
font-family: 'metropolis-bold';
font-size: var(--search-modal-input-height);
color: var(--search-color);
background: transparent;
width: 100%;
}
.search__results {
display: flex;
padding-bottom: $spacing-vertical;
flex-flow: wrap column;
.search-result__column {
flex: 0 0 500px;
.card__media {
background-color: var(--color-search-placeholder);
.search-result__row {
padding: $spacing-vertical 0;
&:first-of-type {
padding-top: 0;
}
}
}

4
yarn.lock
View file

@ -5647,9 +5647,9 @@ lazy-val@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc"
lbry-redux@lbryio/lbry-redux#02e47f922e5ba8908b5848c15b84196c87b9804d:
lbry-redux@lbryio/lbry-redux#543af2fcee7e4c45ccaf73af7b47d4b1a5d8ad44:
version "0.0.1"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/02e47f922e5ba8908b5848c15b84196c87b9804d"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/543af2fcee7e4c45ccaf73af7b47d4b1a5d8ad44"
dependencies:
proxy-polyfill "0.1.6"
reselect "^3.0.0"