LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

content notification style cleanup

Browse source
This commit is contained in:
Sean Yesmunt 2020-11-03 13:45:36 -05:00
parent d549aab89c
commit a836467714
2 changed files with 67 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/component/notification/view.jsx
View file

@ -122,8 +122,10 @@ export default function Notification(props: Props) {
})} })}
> >
<div className="notification__icon">{icon}</div> <div className="notification__icon">{icon}</div>
<div className="notification__content-wrapper">
<div className="notification__content"> <div className="notification__content">
<div> <div className="notification__text-wrapper">
{!isCommentNotification && ( {!isCommentNotification && (
<div className="notification__title">{notification_parameters.device.title}</div> <div className="notification__title">{notification_parameters.device.title}</div>
)} )}
@ -142,9 +144,13 @@ export default function Notification(props: Props) {
{notification_rule === NOTIFICATIONS.NEW_CONTENT && ( {notification_rule === NOTIFICATIONS.NEW_CONTENT && (
<> <>
<FileThumbnail uri={notification_parameters.device.target} className="notification__content-thumbnail" /> <FileThumbnail
uri={notification_parameters.device.target}
className="notification__content-thumbnail"
/>
</> </>
)} )}
</div>
<div className="notification__extra"> <div className="notification__extra">
<div className="notification__time"> <div className="notification__time">

64
ui/scss/component/_notification.scss
View file

@ -1,3 +1,6 @@
$thumbnailWidth: 4rem;
$contentMaxWidth: 35rem;
.notifications__empty { .notifications__empty {
background-color: var(--color-card-background); background-color: var(--color-card-background);
padding: var(--spacing-l); padding: var(--spacing-l);
@ -62,9 +65,10 @@
} }
} }
.notification__content { .notification__content-wrapper {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: space-between;
flex-direction: column; flex-direction: column;
@media (min-width: $breakpoint-small) { @media (min-width: $breakpoint-small) {
@ -74,6 +78,42 @@
} }
} }
.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)); //25rem;
}
.notification__title { .notification__title {
font-size: var(--font-small); font-size: var(--font-small);
color: var(--color-text); color: var(--color-text);
@ -96,9 +136,9 @@
overflow: hidden; overflow: hidden;
} }
.notification__title, .notification__text,
.notification__text { .notification__title {
max-width: 30rem; flex-shrink: 1;
} }
.notification__time { .notification__time {
@ -153,19 +193,3 @@
margin-top: 0; margin-top: 0;
} }
} }
.notification__content-thumbnail {
@include thumbnail;
position: relative;
margin-right: auto;
height: auto;
width: 100%;
margin-top: var(--spacing-s);
@media (min-width: $breakpoint-small) {
height: 4rem;
width: calc(4rem * 16 / 9);
margin-left: var(--spacing-s);
margin-top: 0;
}
}