27a9f654d4
## Issue Closes "6056 Extend notificaiton text to show more characters" ## Notes Looking at the code and comments, I couldn't figure out what was the reason for adding the width constraint (just in case this breaks something). My guesses: - Try not to make the rhs thumbnail too far apart from the lhs thumbnail. - Try not to make the rhs thumbnail misaligned due to dynamic width of the "xx days ago" string on the far right. ## Changes: Extended the width as much as possible, while retaining some gap before the "xx days ago" string and "unread dot" so that thumbnails stay align in the general case. The components still reflows nicely (as it did previously) per window-size.
238 lines
4.4 KiB
SCSS
238 lines
4.4 KiB
SCSS
$thumbnailWidth: 4rem;
|
|
$contentMaxWidth: 60rem;
|
|
|
|
.notifications__empty {
|
|
background-color: var(--color-card-background);
|
|
padding: var(--spacing-l);
|
|
}
|
|
|
|
.notification_list {
|
|
> * {
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
&:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notification__icon {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.icon__wrapper {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
padding: 1.2rem;
|
|
border-radius: var(--border-radius);
|
|
margin-right: var(--spacing-m);
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
padding: 1.5rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
align-items: center;
|
|
margin-left: var(--spacing-m);
|
|
}
|
|
}
|
|
|
|
.notification__wrapper {
|
|
width: 100%;
|
|
display: flex;
|
|
padding: var(--spacing-m) 0;
|
|
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(3rem);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
.channel-thumbnail {
|
|
@include handleChannelGif(2rem);
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
padding: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
.notification__wrapper--unread {
|
|
background-color: var(--color-card-background-highlighted);
|
|
|
|
&:hover {
|
|
background-color: var(--color-button-secondary-bg);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
padding: var(--spacing-s);
|
|
}
|
|
}
|
|
|
|
.notification__content-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.notification__content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
max-width: $contentMaxWidth;
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.notification__content-thumbnail {
|
|
@include thumbnail;
|
|
position: relative;
|
|
margin-left: auto;
|
|
height: auto;
|
|
width: 100%;
|
|
margin-top: var(--spacing-s);
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
height: thumbnailWidth;
|
|
width: calc(#{$thumbnailWidth} * 16 / 9);
|
|
max-width: calc(#{$thumbnailWidth} * 16 / 9);
|
|
margin-left: var(--spacing-m);
|
|
margin-top: 0;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.notification__text-wrapper {
|
|
max-width: calc(#{$contentMaxWidth} - (#{$thumbnailWidth} * 16 / 9) - var(--spacing-m));
|
|
}
|
|
|
|
.notification__title {
|
|
font-size: var(--font-small);
|
|
color: var(--color-text);
|
|
margin-bottom: var(--spacing-s);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.notification__text {
|
|
font-size: var(--font-body);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.notification__text,
|
|
.notification__title {
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.notification__time {
|
|
font-size: var(--font-small);
|
|
color: var(--color-text-help);
|
|
flex-shrink: 0;
|
|
margin-top: var(--spacing-s);
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
margin-left: var(--spacing-s);
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.notification__bubble {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
border-radius: 50%;
|
|
background-color: var(--color-notification);
|
|
position: absolute;
|
|
top: -0.5rem;
|
|
right: -0.5rem;
|
|
color: white;
|
|
font-size: var(--font-small);
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.notification__bubble--small {
|
|
font-size: var(--font-xsmall);
|
|
}
|
|
|
|
.notification__bubble--inline {
|
|
@extend .notification__bubble;
|
|
top: 0.75rem;
|
|
right: 1rem;
|
|
}
|
|
|
|
.notification__extra {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-right: var(--spacing-m);
|
|
flex-direction: row-reverse;
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
margin-left: var(--spacing-s);
|
|
margin-top: 0;
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.notification__mark-seen {
|
|
height: 12px;
|
|
width: 12px;
|
|
border-radius: 50%;
|
|
background-color: var(--color-primary);
|
|
margin-left: var(--spacing-s);
|
|
margin-top: var(--spacing-s);
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.notification__menu {
|
|
margin-right: var(--spacing-m);
|
|
|
|
.icon {
|
|
stroke: var(--color-text-help);
|
|
}
|
|
|
|
button {
|
|
border-radius: var(--border-radius);
|
|
|
|
&:focus {
|
|
@include linkFocus;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notification__filter {
|
|
display: none;
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
display: block;
|
|
}
|
|
}
|