link style cleanup + tile mode on channels

This commit is contained in:
Sean Yesmunt 2020-09-17 13:28:46 -04:00
parent 4f770ec83e
commit 110ba59ea0
3 changed files with 22 additions and 5 deletions

View file

@ -28,6 +28,7 @@ const select = (state, props) => {
claim: props.uri && makeSelectClaimForUri(props.uri)(state), claim: props.uri && makeSelectClaimForUri(props.uri)(state),
isAuthenticated: selectUserVerifiedEmail(state), isAuthenticated: selectUserVerifiedEmail(state),
showMature: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state), showMature: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state),
tileLayout: makeSelectClientSetting(SETTINGS.TILE_LAYOUT)(state),
}; };
}; };

View file

@ -29,6 +29,7 @@ type Props = {
claim: ?Claim, claim: ?Claim,
isAuthenticated: boolean, isAuthenticated: boolean,
showMature: boolean, showMature: boolean,
tileLayout: boolean,
}; };
function ChannelContent(props: Props) { function ChannelContent(props: Props) {
@ -43,6 +44,7 @@ function ChannelContent(props: Props) {
defaultPageSize = CS.PAGE_SIZE, defaultPageSize = CS.PAGE_SIZE,
defaultInfiniteScroll = true, defaultInfiniteScroll = true,
showMature, showMature,
tileLayout,
} = props; } = props;
const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0; const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
const [searchQuery, setSearchQuery] = React.useState(''); const [searchQuery, setSearchQuery] = React.useState('');
@ -122,6 +124,7 @@ function ChannelContent(props: Props) {
{claim && claimsInChannel > 0 ? ( {claim && claimsInChannel > 0 ? (
<ClaimListDiscover <ClaimListDiscover
tileLayout={tileLayout}
uris={searchResults} uris={searchResults}
channelIds={[claim.claim_id]} channelIds={[claim.claim_id]}
defaultOrderBy={CS.ORDER_BY_NEW} defaultOrderBy={CS.ORDER_BY_NEW}

View file

@ -302,25 +302,38 @@
} }
.claim-grid__header { .claim-grid__header {
@extend .button--link; margin-top: var(--spacing-m);
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
display: inline-block; display: inline-block;
.button {
&:hover {
text-decoration: none;
}
}
.icon__wrapper { .icon__wrapper {
height: 1.5rem; width: 0.5rem;
width: 1.5rem; height: 0.5rem;
background-color: var(--color-primary-alt); background-color: var(--color-primary-alt);
margin-right: var(--spacing-m); margin-right: var(--spacing-m);
.icon { .icon {
stroke: var(--color-primary); stroke: var(--color-primary);
} }
@media (min-width: $breakpoint-small) {
height: 1.5rem;
width: 1.5rem;
}
}
@media (min-width: $breakpoint-small) {
margin-top: var(--spacing-m);
} }
} }
.claim-grid__title { .claim-grid__title {
margin-top: var(--spacing-m);
margin-bottom: var(--spacing-m);
font-weight: 300; font-weight: 300;
font-size: var(--font-large); font-size: var(--font-large);
} }