Updated StatusCard, LinkTimeline styles

• Updated:
- StatusCard, LinkTimeline styles
This commit is contained in:
mgabdev 2020-10-31 19:09:41 -05:00
parent 0a1ee8224c
commit efb2b7f0c2
3 changed files with 22 additions and 12 deletions

@ -122,6 +122,7 @@ class StatusCard extends ImmutablePureComponent {
const cardImg = card.get('image')
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name')
const interactive = card.get('type') !== 'link'
const isOnLinkFeed = `${window.location.pathname}`.indexOf('/links/') > -1
const imgContainerClasses = CX({
d: 1,
@ -156,18 +157,21 @@ class StatusCard extends ImmutablePureComponent {
</p>
<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 />
<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}
</Text>
<Button
isNarrow
color='secondary'
backgroundColor='secondary'
to={`/links/${card.get('id')}`}
className={_s.px10}
>
<Text color='inherit' size='extraSmall'>View on Gab</Text>
</Button>
{
!isOnLinkFeed &&
<Button
isNarrow
color='secondary'
backgroundColor='secondary'
to={`/links/${card.get('id')}`}
className={_s.px10}
>
<Text color='inherit' size='extraSmall'>View Link Feed</Text>
</Button>
}
</span>
</div>
)

@ -13,6 +13,7 @@ import ColumnIndicator from '../components/column_indicator'
import Button from '../components/button'
import Text from '../components/text'
import PreviewCardItem from '../components/preview_card_item'
import ResponsiveClassesComponent from './ui/util/responsive_classes_component'
class LinkTimeline extends ImmutablePureComponent {
@ -79,7 +80,12 @@ class LinkTimeline extends ImmutablePureComponent {
return (
<React.Fragment>
<PreviewCardItem id={id} />
<ResponsiveClassesComponent
classNamesSmall={[_s.d, _s.w100PC, _s.pt10].join(' ')}
classNamesXS={[_s.d, _s.w100PC, _s.pt10].join(' ')}
>
<PreviewCardItem id={id} />
</ResponsiveClassesComponent>
<StatusList
scrollKey='link_timeline'
timelineId={`link:${id}`}

@ -530,7 +530,7 @@ pre {
.maxW100PC { max-width: 100%; }
.maxW80PC { max-width: 80%; }
.maxW640PX { max-width: 640px; }
.maxW100PC120PX { max-width: calc(100% - 120px); }
.maxW100PC130PX { max-width: calc(100% - 130px); }
.maxW100PC86PX { max-width: calc(100% - 86px); }
.maxW100PC42PX { max-width: calc(100% - 42px); }
.maxW212PX { max-width: 212px; }