treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

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>
pull/41/head
prplecake 2022-12-22 08:18:02 -06:00 committed by GitHub
parent db420fb779
commit 6cde3dd08b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/flavours/glitch/components/status_action_bar.js
View File

@ -328,9 +328,11 @@ class StatusActionBar extends ImmutablePureComponent {
/>
</div>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'>
<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 className='status__action-bar-timestamp'>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'>
<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>
);
}

5
app/javascript/flavours/glitch/styles/components/status.scss
View File

@ -590,6 +590,11 @@
width: 23.15px;
}
.status__action-bar-timestamp {
flex-grow: 1;
text-align: end;
}
.detailed-status__action-bar-dropdown {
flex: 1 1 auto;
display: flex;