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

make category header clickable

Browse source
This commit is contained in:
Sean Yesmunt 2020-09-16 13:02:45 -04:00
parent f8e01c7c99
commit 4e1076e01b
3 changed files with 23 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
ui/page/home/view.jsx
View file

@ -8,6 +8,7 @@ import Page from 'component/page';
import Button from 'component/button'; import Button from 'component/button';
import ClaimTilesDiscover from 'component/claimTilesDiscover'; import ClaimTilesDiscover from 'component/claimTilesDiscover';
import getHomepage from 'homepage'; import getHomepage from 'homepage';
import Icon from 'component/common/icon';
type Props = { type Props = {
authenticated: boolean, authenticated: boolean,
@ -49,9 +50,11 @@ function HomePage(props: Props) {
{rowData.map(({ title, link, icon, help, options = {} }) => ( {rowData.map(({ title, link, icon, help, options = {} }) => (
<div key={title} className="claim-grid__wrapper"> <div key={title} className="claim-grid__wrapper">
<h1 className="claim-grid__header"> <h1 className="claim-grid__header">
{icon} <Button navigate={link} button="link">
<span className="claim-grid__title">{title}</span> {icon && <Icon className="claim-grid__header-icon" sectionIcon icon={icon} size={20} />}
{help} <span className="claim-grid__title">{title}</span>
{help}
</Button>
</h1> </h1>
<ClaimTilesDiscover {...options} /> <ClaimTilesDiscover {...options} />

21
ui/scss/component/_claim-list.scss
View file

@ -302,23 +302,30 @@
} }
.claim-grid__header { .claim-grid__header {
@extend .section__actions; @extend .button--link;
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
display: inline-block;
.icon__wrapper { .icon__wrapper {
height: 2rem; height: 1.5rem;
width: 2rem; width: 1.5rem;
background-color: var(--color-primary-alt);
margin-right: var(--spacing-m);
.icon {
stroke: var(--color-primary);
}
} }
} }
.claim-grid__header-icon {
}
.claim-grid__title { .claim-grid__title {
margin-top: var(--spacing-m);
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
font-weight: 300; font-weight: 300;
font-size: var(--font-large); font-size: var(--font-large);
&:not(:first-of-type) {
margin-top: var(--spacing-m);
}
} }
.claim-grid__title--secondary { .claim-grid__title--secondary {

9
ui/util/homepage.js
View file

@ -1,21 +1,18 @@
// @flow // @flow
import type { Node } from 'react';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import * as CS from 'constants/claim_search'; import * as CS from 'constants/claim_search';
import React from 'react';
import { parseURI } from 'lbry-redux'; import { parseURI } from 'lbry-redux';
import moment from 'moment'; import moment from 'moment';
import { toCapitalCase } from 'util/string'; import { toCapitalCase } from 'util/string';
import { useIsLargeScreen } from 'effects/use-screensize'; import { useIsLargeScreen } from 'effects/use-screensize';
import Icon from 'component/common/icon';
export type RowDataItem = { export type RowDataItem = {
title: string, title: string,
link?: string, link?: string,
help?: any, help?: any,
options?: {}, options?: {},
icon?: Node, icon?: string,
}; };
export default function GetHomePageRowData( export default function GetHomePageRowData(
@ -156,7 +153,7 @@ export default function GetHomePageRowData(
const RECENT_FROM_FOLLOWING = { const RECENT_FROM_FOLLOWING = {
title: __('Recent From Following'), title: __('Recent From Following'),
link: `/$/${PAGES.CHANNELS_FOLLOWING}`, link: `/$/${PAGES.CHANNELS_FOLLOWING}`,
icon: <Icon sectionIcon icon={ICONS.SUBSCRIBE} size={14} />, icon: ICONS.SUBSCRIBE,
options: { options: {
orderBy: ['release_time'], orderBy: ['release_time'],
releaseTime: releaseTime:
@ -234,7 +231,7 @@ export default function GetHomePageRowData(
const TRENDING_FOR_TAGS = { const TRENDING_FOR_TAGS = {
title: __('Trending For Your Tags'), title: __('Trending For Your Tags'),
link: `/$/${PAGES.TAGS_FOLLOWING}`, link: `/$/${PAGES.TAGS_FOLLOWING}`,
icon: <Icon sectionIcon icon={ICONS.TAG} size={14} />, icon: ICONS.TAG,
options: { options: {
pageSize: getPageSize(4), pageSize: getPageSize(4),