Updated StatusCard, LinkTimeline styles
• Updated: - StatusCard, LinkTimeline styles
This commit is contained in:
parent
0a1ee8224c
commit
efb2b7f0c2
@ -122,6 +122,7 @@ class StatusCard extends ImmutablePureComponent {
|
|||||||
const cardImg = card.get('image')
|
const cardImg = card.get('image')
|
||||||
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name')
|
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name')
|
||||||
const interactive = card.get('type') !== 'link'
|
const interactive = card.get('type') !== 'link'
|
||||||
|
const isOnLinkFeed = `${window.location.pathname}`.indexOf('/links/') > -1
|
||||||
|
|
||||||
const imgContainerClasses = CX({
|
const imgContainerClasses = CX({
|
||||||
d: 1,
|
d: 1,
|
||||||
@ -156,9 +157,11 @@ class StatusCard extends ImmutablePureComponent {
|
|||||||
</p>
|
</p>
|
||||||
<span className={[_s.d, _s.mtAuto, _s.flexRow, _s.flexWrap, _s.aiCenter, _s.displayFlex, _s.textOverflowEllipsis].join(' ')}>
|
<span className={[_s.d, _s.mtAuto, _s.flexRow, _s.flexWrap, _s.aiCenter, _s.displayFlex, _s.textOverflowEllipsis].join(' ')}>
|
||||||
<Icon id='link' size='10px' className={[_s.cSecondary, _s.mr5].join(' ')} fixedWidth />
|
<Icon id='link' size='10px' className={[_s.cSecondary, _s.mr5].join(' ')} fixedWidth />
|
||||||
<Text color='secondary' size='small' className={[_s.mrAuto, _s.whiteSpaceNoWrap, _s.overflowHidden, _s.maxW100PC120PX, _s.textOverflowEllipsis2].join(' ')}>
|
<Text color='secondary' size='small' className={[_s.mrAuto, _s.whiteSpaceNoWrap, _s.overflowHidden, _s.maxW100PC130PX, _s.textOverflowEllipsis2].join(' ')}>
|
||||||
{provider}
|
{provider}
|
||||||
</Text>
|
</Text>
|
||||||
|
{
|
||||||
|
!isOnLinkFeed &&
|
||||||
<Button
|
<Button
|
||||||
isNarrow
|
isNarrow
|
||||||
color='secondary'
|
color='secondary'
|
||||||
@ -166,8 +169,9 @@ class StatusCard extends ImmutablePureComponent {
|
|||||||
to={`/links/${card.get('id')}`}
|
to={`/links/${card.get('id')}`}
|
||||||
className={_s.px10}
|
className={_s.px10}
|
||||||
>
|
>
|
||||||
<Text color='inherit' size='extraSmall'>View on Gab</Text>
|
<Text color='inherit' size='extraSmall'>View Link Feed</Text>
|
||||||
</Button>
|
</Button>
|
||||||
|
}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -13,6 +13,7 @@ import ColumnIndicator from '../components/column_indicator'
|
|||||||
import Button from '../components/button'
|
import Button from '../components/button'
|
||||||
import Text from '../components/text'
|
import Text from '../components/text'
|
||||||
import PreviewCardItem from '../components/preview_card_item'
|
import PreviewCardItem from '../components/preview_card_item'
|
||||||
|
import ResponsiveClassesComponent from './ui/util/responsive_classes_component'
|
||||||
|
|
||||||
class LinkTimeline extends ImmutablePureComponent {
|
class LinkTimeline extends ImmutablePureComponent {
|
||||||
|
|
||||||
@ -79,7 +80,12 @@ class LinkTimeline extends ImmutablePureComponent {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
|
<ResponsiveClassesComponent
|
||||||
|
classNamesSmall={[_s.d, _s.w100PC, _s.pt10].join(' ')}
|
||||||
|
classNamesXS={[_s.d, _s.w100PC, _s.pt10].join(' ')}
|
||||||
|
>
|
||||||
<PreviewCardItem id={id} />
|
<PreviewCardItem id={id} />
|
||||||
|
</ResponsiveClassesComponent>
|
||||||
<StatusList
|
<StatusList
|
||||||
scrollKey='link_timeline'
|
scrollKey='link_timeline'
|
||||||
timelineId={`link:${id}`}
|
timelineId={`link:${id}`}
|
||||||
|
@ -530,7 +530,7 @@ pre {
|
|||||||
.maxW100PC { max-width: 100%; }
|
.maxW100PC { max-width: 100%; }
|
||||||
.maxW80PC { max-width: 80%; }
|
.maxW80PC { max-width: 80%; }
|
||||||
.maxW640PX { max-width: 640px; }
|
.maxW640PX { max-width: 640px; }
|
||||||
.maxW100PC120PX { max-width: calc(100% - 120px); }
|
.maxW100PC130PX { max-width: calc(100% - 130px); }
|
||||||
.maxW100PC86PX { max-width: calc(100% - 86px); }
|
.maxW100PC86PX { max-width: calc(100% - 86px); }
|
||||||
.maxW100PC42PX { max-width: calc(100% - 42px); }
|
.maxW100PC42PX { max-width: calc(100% - 42px); }
|
||||||
.maxW212PX { max-width: 212px; }
|
.maxW212PX { max-width: 212px; }
|
||||||
|
Loading…
x
Reference in New Issue
Block a user