link style cleanup + tile mode on channels
This commit is contained in:
parent
4f770ec83e
commit
110ba59ea0
3 changed files with 22 additions and 5 deletions
|
@ -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),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue