Wraps status timestamps in a `div` (#2038)
* Wraps status timestamps in a `div` Fixes #1985 This wraps the status timestamp in a `div` to reduce the clickable target size of the link. The `div` gets a `margin: 0 0 0 auto` to stick it to the right margin of the status. * Update app/javascript/flavours/glitch/styles/components/status.scss Co-authored-by: Claire <claire.github-309c@sitedethib.com> Co-authored-by: Claire <claire.github-309c@sitedethib.com>main
parent
db420fb779
commit
6cde3dd08b
|
@ -328,9 +328,11 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'>
|
<div className='status__action-bar-timestamp'>
|
||||||
<RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { hour12: false, year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
|
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'>
|
||||||
</a>
|
<RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { hour12: false, year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -590,6 +590,11 @@
|
||||||
width: 23.15px;
|
width: 23.15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.status__action-bar-timestamp {
|
||||||
|
flex-grow: 1;
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
.detailed-status__action-bar-dropdown {
|
.detailed-status__action-bar-dropdown {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
Loading…
Reference in New Issue