monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(collapsing): fix and simplify post collapsing CSS (#2757)

This commit is contained in:
Aria 2024-06-30 22:27:38 +02:00 committed by GitHub
parent a396985c14
commit 6d6064d2c0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 33 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/components/status.jsx
View File

@ -802,7 +802,7 @@ class Status extends ImmutablePureComponent {
{prepend} {prepend}
<div <div
className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted, 'has-background': isCollapsed && background, collapsed: isCollapsed })} className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted, 'has-background': isCollapsed && background })}
data-id={status.get('id')} data-id={status.get('id')}
style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null} style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null}
> >

39
app/javascript/flavours/glitch/styles/components.scss
View File

@ -1541,12 +1541,15 @@ body > [data-popper-placement] {
} }
} }
} }
}
&.collapsed { .status__wrapper.collapsed {
.status {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
user-select: none; user-select: none;
min-height: 0; min-height: 0;
}
&.has-background::before { &.has-background::before {
display: block; display: block;
@ -1574,41 +1577,13 @@ body > [data-popper-placement] {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-top: 0; padding-top: 0;
mask-image: linear-gradient(rgb(0 0 0 / 100%), transparent);
&::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
inset-inline-start: 0;
inset-inline-end: 0;
background: linear-gradient(transparent, var(--background-color));
pointer-events: none;
}
a:hover { a:hover {
text-decoration: none; text-decoration: none;
} }
} }
&:focus > .status__content::after {
background: linear-gradient(
rgba(lighten($ui-base-color, 4%), 0),
rgba(lighten($ui-base-color, 4%), 1)
);
}
// TODO: review
&.status-direct > .status__content::after {
background: linear-gradient(
rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0),
rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1)
);
}
}
}
.status__wrapper.collapsed {
.notification__message { .notification__message {
margin-bottom: 0; margin-bottom: 0;
white-space: nowrap; white-space: nowrap;
@ -1819,10 +1794,6 @@ body > [data-popper-placement] {
.status__wrapper-direct { .status__wrapper-direct {
background: rgba($ui-highlight-color, 0.05); background: rgba($ui-highlight-color, 0.05);
&:focus {
background: rgba($ui-highlight-color, 0.05);
}
.status__prepend { .status__prepend {
color: $highlight-text-color; color: $highlight-text-color;
} }