gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-26 15:31:52 +00:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

Try to switch grouped notifications to CSS grids

Browse Source
This commit is contained in:
Claire 2024-08-28 20:44:38 +02:00
parent 04f0468016
commit 23a4243fa8
3 changed files with 42 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/mastodon/features/notifications_v2/components/notification_admin_report.tsx
View File

@ -113,20 +113,16 @@ export const NotificationAdminReport: React.FC<{
<Icon id='flag' icon={FlagIcon} />
</div>
<div className='notification-group__main'>
<div className='notification-group__main__header'>
<div className='notification-group__main__header__label'>
{message}
<RelativeTimestamp timestamp={report.created_at} />
</div>
</div>
{report.comment.length > 0 && (
<div className='notification-group__embedded-status__content'>
“{report.comment}”
</div>
)}
</div>
</a>
);
};

4
app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx
View File

@ -87,8 +87,6 @@ export const NotificationGroupWithStatus: React.FC<{
<Icon icon={icon} id={iconId} />
</div>
<div className='notification-group__main'>
<div className='notification-group__main__header'>
<div className='notification-group__main__header__wrapper'>
<AvatarGroup accountIds={accountIds} />
@ -101,7 +99,6 @@ export const NotificationGroupWithStatus: React.FC<{
{label}
{timestamp && <RelativeTimestamp timestamp={timestamp} />}
</div>
</div>
{statusId && (
<div className='notification-group__main__status'>
@ -115,7 +112,6 @@ export const NotificationGroupWithStatus: React.FC<{
</div>
)}
</div>
</div>
</HotKeys>
);
};

24
app/javascript/styles/mastodon/components.scss
View File

@ -10466,11 +10466,17 @@ noscript {
}
.notification-group {
display: flex;
display: grid;
align-items: flex-start;
gap: 8px;
padding: 16px 24px;
grid-template-columns: 40px 1fr;
grid-template-areas:
'icon header-wrapper'
'. header-label'
'. content';
border-bottom: 1px solid var(--background-border-color);
container-type: inline-size;
&__icon {
width: 40px;
@ -10479,6 +10485,7 @@ noscript {
justify-content: center;
flex: 0 0 auto;
color: $dark-text-color;
grid-area: icon;
.icon {
width: 28px;
@ -10522,13 +10529,6 @@ noscript {
}
&__main {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 auto;
overflow: hidden;
container-type: inline-size;
@container (width < 350px) {
&__header time {
display: none;
@ -10536,13 +10536,10 @@ noscript {
}
&__header {
display: flex;
flex-direction: column;
gap: 8px;
&__wrapper {
display: flex;
justify-content: space-between;
grid-area: header-wrapper;
}
&__label {
@ -10551,6 +10548,7 @@ noscript {
font-size: 15px;
line-height: 22px;
color: $darker-text-color;
grid-area: header-label;
a {
color: inherit;
@ -10572,6 +10570,8 @@ noscript {
border: 1px solid var(--background-border-color);
border-radius: 8px;
padding: 8px;
grid-area: content;
overflow: hidden;
}
&__additional-content {