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

Use wrapper div as a spacer (#2046) 

Keeps the alignment of timestamps, while also reducing clickable size

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>

Signed-off-by: Plastikmensch <plastikmensch@users.noreply.github.com>
pull/41/head
Plastikmensch 2022-12-23 18:59:20 +01:00 committed by GitHub
parent 4b51d1386b
commit 08837f730d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -444,7 +444,6 @@
.status__relative-time { .status__relative-time {
display: inline-block; display: inline-block;
flex-grow: 1;
color: $dark-text-color; color: $dark-text-color;
font-size: 14px; font-size: 14px;
text-align: right; text-align: right;
@ -590,11 +589,8 @@
width: 23.15px; width: 23.15px;
} }
.status__action-bar-timestamp { .status__action-bar-spacer {
flex-grow: 1; flex-grow: 1;
text-align: end;
display: flex;
overflow: hidden;
} }
.detailed-status__action-bar-dropdown { .detailed-status__action-bar-dropdown {