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}
<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')}
style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null}
>

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

@ -1541,74 +1541,49 @@ body > [data-popper-placement] {
}
}
}
}
&.collapsed {
.status__wrapper.collapsed {
.status {
background-position: center;
background-size: cover;
user-select: none;
min-height: 0;
}
&.has-background::before {
display: block;
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
top: 0;
bottom: 0;
background-image: linear-gradient(
to bottom,
rgba($base-shadow-color, 0.75),
rgba($base-shadow-color, 0.65) 24px,
rgba($base-shadow-color, 0.8)
);
pointer-events: none;
content: '';
}
&.has-background::before {
display: block;
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
top: 0;
bottom: 0;
background-image: linear-gradient(
to bottom,
rgba($base-shadow-color, 0.75),
rgba($base-shadow-color, 0.65) 24px,
rgba($base-shadow-color, 0.8)
);
pointer-events: none;
content: '';
}
.display-name:hover .display-name__html {
.display-name:hover .display-name__html {
text-decoration: none;
}
.status__content {
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 0;
mask-image: linear-gradient(rgb(0 0 0 / 100%), transparent);
a:hover {
text-decoration: none;
}
.status__content {
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 0;
&::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 {
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 {
margin-bottom: 0;
white-space: nowrap;
@ -1819,10 +1794,6 @@ body > [data-popper-placement] {
.status__wrapper-direct {
background: rgba($ui-highlight-color, 0.05);
&:focus {
background: rgba($ui-highlight-color, 0.05);
}
.status__prepend {
color: $highlight-text-color;
}