mirror of
https://github.com/mastodon/mastodon.git
synced 2024-11-09 09:12:19 +00:00
Try to switch grouped notifications to CSS grids
This commit is contained in:
parent
04f0468016
commit
23a4243fa8
|
@ -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 className='notification-group__main__header__label'>
|
||||
{message}
|
||||
<RelativeTimestamp timestamp={report.created_at} />
|
||||
</div>
|
||||
|
||||
{report.comment.length > 0 && (
|
||||
<div className='notification-group__embedded-status__content'>
|
||||
“{report.comment}”
|
||||
</div>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -87,34 +87,30 @@ 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} />
|
||||
<div className='notification-group__main__header__wrapper'>
|
||||
<AvatarGroup accountIds={accountIds} />
|
||||
|
||||
{actions && (
|
||||
<div className='notification-group__actions'>{actions}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='notification-group__main__header__label'>
|
||||
{label}
|
||||
{timestamp && <RelativeTimestamp timestamp={timestamp} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{statusId && (
|
||||
<div className='notification-group__main__status'>
|
||||
<EmbeddedStatus statusId={statusId} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{additionalContent && (
|
||||
<div className='notification-group__main__additional-content'>
|
||||
{additionalContent}
|
||||
</div>
|
||||
{actions && (
|
||||
<div className='notification-group__actions'>{actions}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='notification-group__main__header__label'>
|
||||
{label}
|
||||
{timestamp && <RelativeTimestamp timestamp={timestamp} />}
|
||||
</div>
|
||||
|
||||
{statusId && (
|
||||
<div className='notification-group__main__status'>
|
||||
<EmbeddedStatus statusId={statusId} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{additionalContent && (
|
||||
<div className='notification-group__main__additional-content'>
|
||||
{additionalContent}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</HotKeys>
|
||||
);
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue