aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu/avatar-notification.component.scss
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-19 14:51:35 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-19 14:53:01 +0100
commit10475dea7d2343c13014134b33bc75f7c59ac992 (patch)
tree2dd02dd49997e83b14d732b4fdcdd3def06c5d4d /client/src/app/menu/avatar-notification.component.scss
parentdddc8b1fe0c875f41c88f395b0d55cfea69add2c (diff)
downloadPeerTube-10475dea7d2343c13014134b33bc75f7c59ac992.tar.gz
PeerTube-10475dea7d2343c13014134b33bc75f7c59ac992.tar.zst
PeerTube-10475dea7d2343c13014134b33bc75f7c59ac992.zip
improve notification popup interactivity: read all, layout, position
fixes #1730
Diffstat (limited to 'client/src/app/menu/avatar-notification.component.scss')
-rw-r--r--client/src/app/menu/avatar-notification.component.scss34
1 files changed, 30 insertions, 4 deletions
diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
index d0f01fc32..713ac7cb9 100644
--- a/client/src/app/menu/avatar-notification.component.scss
+++ b/client/src/app/menu/avatar-notification.component.scss
@@ -4,12 +4,12 @@
4::ng-deep { 4::ng-deep {
5 .popover-notifications.popover { 5 .popover-notifications.popover {
6 max-width: none; 6 max-width: none;
7 left: 7px !important;
7 8
8 .popover-body { 9 .popover-body {
9 padding: 0; 10 padding: 0;
10 font-size: 14px; 11 font-size: 14px;
11 font-family: $main-fonts; 12 font-family: $main-fonts;
12 overflow-y: scroll;
13 width: 400px; 13 width: 400px;
14 box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30); 14 box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
15 15
@@ -24,10 +24,17 @@
24 .content { 24 .content {
25 max-height: 150px; 25 max-height: 150px;
26 transition: max-height 0.15s ease-out; 26 transition: max-height 0.15s ease-out;
27 display: flex;
28 height: 500px;
29 flex-direction: column;
27 30
28 &.loaded { 31 &.loaded {
29 max-height: 500px; 32 max-height: 500px;
30 } 33 }
34
35 & > my-user-notifications:nth-child(2) {
36 overflow-y: auto;
37 }
31 } 38 }
32 39
33 .notifications-header { 40 .notifications-header {
@@ -42,10 +49,19 @@
42 49
43 a { 50 a {
44 @include disable-default-a-behaviour; 51 @include disable-default-a-behaviour;
52 }
53
54 button {
55 @include peertube-button;
56
57 padding: 0;
58 background: transparent;
59 }
45 60
61 a, button {
46 color: rgba(20, 20, 20, 0.5); 62 color: rgba(20, 20, 20, 0.5);
47 63
48 &:hover { 64 &:hover:not(:disabled) {
49 color: rgba(20, 20, 20, 0.8); 65 color: rgba(20, 20, 20, 0.8);
50 } 66 }
51 } 67 }
@@ -58,6 +74,8 @@
58 font-weight: $font-semibold; 74 font-weight: $font-semibold;
59 color: $fg-color; 75 color: $fg-color;
60 padding: 7px 0; 76 padding: 7px 0;
77 margin-top: auto;
78 text-decoration: none;
61 } 79 }
62 } 80 }
63 } 81 }
@@ -100,8 +118,16 @@
100 118
101@media screen and (max-width: $mobile-view) { 119@media screen and (max-width: $mobile-view) {
102 ::ng-deep { 120 ::ng-deep {
103 .popover-notifications.popover .popover-body { 121 .popover-notifications.popover {
104 width: 400px; 122 left: unset !important;
123
124 .arrow {
125 left: calc(2em + 7px);
126 }
127
128 .popover-body {
129 width: 100vw;
130 }
105 } 131 }
106 } 132 }
107} 133}