[WIP] Notifications app

app/app/settings.py

@@ -110,6 +110,7 @@
     'bounty_requests',
     'perftools',
     'revenue',
+    'inbox',
 ]
 
 MIDDLEWARE = [
@@ -138,7 +139,7 @@
 
 TEMPLATES = [{
     'BACKEND': 'django.template.backends.django.DjangoTemplates',
-    'DIRS': ['retail/templates/', 'external_bounties/templates/', 'dataviz/templates', 'kudos/templates'],
+    'DIRS': ['retail/templates/', 'external_bounties/templates/', 'dataviz/templates', 'kudos/templates', 'inbox/templates'],
     'APP_DIRS': True,
     'OPTIONS': {
         'context_processors': [

app/app/urls.py

@@ -48,6 +48,7 @@
 import retail.views
 import revenue.views
 import tdi.views
+import inbox.views
 from dashboard.router import router as dbrouter
 from external_bounties.router import router as ebrouter
 from kudos.router import router as kdrouter
@@ -57,6 +58,8 @@
 urlpatterns = [
     path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),
 
+    path('api/v0.1/notifications/', inbox.views.notifications, name='notifications'),
+    path('inbox/', inbox.views.inbox, name='inbox'),
     # kudos
     path('kudos/', kudos.views.about, name='kudos_main'),
     path('kudos/about/', kudos.views.about, name='kudos_about'),

app/assets/v2/css/external_bounties/checkboxes.css

@@ -91,3 +91,76 @@
   background-color: #26cd7f;
   border: 3px solid #36E69B;
 }
+
+/* border checkbox  */
+
+.gc-checkbox input[type="checkbox"] {
+  -moz-appearance: none;
+	-webkit-appearance: none;
+	appearance: none;
+	margin-top: .75em;
+	opacity: .00001;
+	position: relative;
+	vertical-align: top;
+	z-index: 2;
+}
+
+.gc-checkbox label {
+  position: relative;
+  display: inline-block;
+
+  /*16px width of fake checkbox + 6px distance between fake checkbox and text*/
+  padding-left: 22px;
+  min-height: 16px;
+  vertical-align: middle;
+}
+
+.gc-checkbox label::before,
+.gc-checkbox label::after {
+  position: absolute;
+  content: "";
+
+  /*Needed for the line-height to take effect*/
+  display: inline-block;
+}
+
+/*Outer box of the fake checkbox*/
+.gc-checkbox label::before{
+  height: 18px;
+  width: 18px;
+  border: 2px solid #9F9F9F;
+  border-radius: 3px;
+  left: 0px;
+
+  /*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border
+   *to vertically center it.
+   */
+  top: 3px;
+}
+
+/*Checkmark of the fake checkbox*/
+.gc-checkbox label::after {
+  height: 6px;
+  width: 10px;
+  border-left: 2px solid;
+  border-bottom: 2px solid;
+  transform: rotate(-45deg);
+  left: 4px;
+  top: 8px;
+}
+
+/*Hide the checkmark by default*/
+.gc-checkbox input[type="checkbox"] + label::after {
+  content: none;
+}
+
+/*Unhide on the checked state*/
+.gc-checkbox input[type="checkbox"]:checked + label::after {
+  content: "";
+}
+
+/*Adding focus styles on the outer-box of the fake checkbox*/
+.gc-checkbox input[type="checkbox"]:focus + label::before {
+  outline: rgb(59, 153, 252) auto 5px;
+}
+

app/assets/v2/css/gitcoin.css

@@ -69,10 +69,12 @@ h4,
   position: fixed;
   top: 0;
   left: 0;
+  right: 0;
   z-index: -1;
   will-change: transform;
   overflow-y: hidden;
   overflow-x: hidden;
+  min-height: 112px;
 }
 
 .text-white {
@@ -201,6 +203,10 @@ div.button-pink {
   background-repeat: no-repeat;
 }
 
+.bg-lightblue {
+  background-color: #EFF3F6;
+}
+
 .white-light-bg {
   background-color: white;
   background-image: url('/static/v2/images/light-bg.png');
@@ -343,7 +349,7 @@ div.button-pink {
   text-decoration: none;
   padding-right: 1rem;
   padding-left: 1rem;
-  font-size: 0.9rem !important;
+  font-size: 0.9rem;
 }
 
 .footer .nav-link:hover {
@@ -486,8 +492,6 @@ div.button-pink {
   background-color: #FAFAFA;
   border-radius: 0px;
   padding: 0;
-  right: 0;
-  left: auto;
 }
 
 .dropdown-menu .dropdown-divider {
@@ -620,12 +624,24 @@ div.button-pink {
   }
 }
 
-.notification-dot {
-  background-color: #ef3427;
-  width: 0.5rem;
-  height: 0.5rem;
-  position: absolute;
-  top: 6px;
-  border-radius: 30px;
-  left: 6px;
+/* dropdown animation */
+.animation {
+  -webkit-animation-duration: 80ms;
+  animation-duration: 80ms;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+}
+.slideDownIn {
+  -webkit-animation-name: slideDownIn;
+  animation-name: slideDownIn;
+}
+
+@keyframes slideDownIn {
+  0% {
+    -webkit-transform: translateY(-20px) scale(0.9, 0.7);
+  }
+  100% {
+    -webkit-transform: translateY(0) scale(1, 1);
+  }
+
 }

app/assets/v2/css/notifications.css

@@ -0,0 +1,207 @@
+:root {
+  --color-notification: 37, 232, 153;
+  --badge-bg: #D6FBEB;
+  --badge-text: #00A55E;
+  --link-color: #3E00FF;
+
+}
+
+
+.navbar-nav .nav-link.notification__icon {
+  position: relative;
+  font-size: 18px;
+  color: white;
+}
+
+.notification__icon.dropdown-toggle::after {
+  content: none;
+}
+
+.notification__dot {
+  background: rgba(var(--color-notification), 1);
+  display: none;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 rgba(var(--color-notification), .4);
+  position: absolute;
+  top: 0.5em;
+  right: 0.9em;
+}
+
+.notification__dot_active {
+  display: block;
+  animation: BadgePulse 1.8s infinite;
+}
+
+.notification__dot-small {
+  background: rgba(var(--color-notification), 1);
+  display: block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  opacity: 0;
+}
+
+.notification__dot-small_active {
+  opacity: 1;
+}
+
+.badge--greenlight {
+  background-color: var(--badge-bg);
+  color: var(--badge-text);
+}
+
+.notifications__box {
+  width: 430px;
+  border-radius: 3px;
+  padding: 1em;
+  max-width: calc(100vw - 2em);
+}
+
+.notifications__link {
+  color: var(--link-color);
+  font-size: 0.75rem;
+}
+
+.notifications__header {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #D8D8D8;
+  padding-bottom: 0.8em;
+}
+
+.notifications__title {
+  font-size: 0.87rem;
+  font-weight: 600;
+}
+
+.notifications__list {
+  font-size: 12px;
+  max-height: 328px;
+  overflow-y: auto;
+  padding: 0;
+  position: relative;
+  z-index: 1;
+  background: #fafafa no-repeat;
+  background-image: -webkit-radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), -webkit-radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
+  background-image: -moz-radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), -moz-radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
+  background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
+  background-position: 0 0, 0 100%;
+  background-size: 100% 14px;
+}
+
+.notifications__list:before,
+.notifications__list:after {
+  content: "";
+  position: relative;
+  z-index: -1;
+  display: block;
+  height: 30px;
+  margin: 0 0 -30px;
+  background: -webkit-linear-gradient(top, #fafafa, #fafafa 30%, rgba(255, 255, 255, 0));
+  background: -moz-linear-gradient(top, #fafafa, #fafafa 30%, rgba(255, 255, 255, 0));
+  background: linear-gradient(to bottom, #fafafa, #fafafa 30%, rgba(255, 255, 255, 0));
+}
+
+.notifications__list:after {
+  margin: -30px 0 0;
+  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fafafa 70%, #fafafa);
+  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), #fafafa 70%, #fafafa);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fafafa 70%, #fafafa);
+}
+
+.notifications__item {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #D8D8D8;
+  padding: 1em 0;
+  animation: animateElement linear .3s;
+  animation-iteration-count: 1;
+}
+
+.notifications__item-readed {
+  padding: 0.6em 0.8em 0.6em 0;
+}
+
+.notifications__time {
+  flex: 1 0 68px;
+  text-align: right;
+}
+
+.notifications_content {
+  color: #212529;
+  display: flex;
+  align-items: center;
+}
+
+.notifications_content:hover {
+  color: #5d666f;
+  text-decoration: none;
+}
+
+.notifications_content p {
+  margin-bottom: 0;
+}
+
+.notifications__avatar {
+  border-radius:50px;
+  width: 28px;
+  height: 28px;
+  margin-right: 1em;
+}
+
+.notifications__button-all {
+  display: block;
+  text-align: center;
+  font-weight: 700;
+}
+
+@keyframes BadgePulse{
+  0% {
+    -moz-box-shadow:0 0 0 0 rgba(37, 232, 153, .4);
+    -webkit-box-shadow:0 0 0 0 rgba(37, 232, 153, .4);
+    box-shadow: 0 0 0 0 rgba(37, 232, 153, .4);
+  }
+
+  70% {
+    -moz-box-shadow: 0 0 0 10px rgba(37, 232, 153, 0);
+    -webkit-box-shadow: 0 0 0 10px rgba(37, 232, 153, 0);
+    box-shadow: 0 0 0 10px rgba(37, 232, 153, 0);
+  }
+
+  100% {
+    -moz-box-shadow: 0 0 0 20px rgba(37, 232, 153, 0);
+    -webkit-box-shadow: 0 0 0 20px rgba(37, 232, 153, 0);
+    box-shadow: 0 0 0 20px rgba(37, 232, 153, 0);
+  }
+}
+
+@keyframes animateElement{
+  0% {
+    opacity: 0;
+    transform: translate(0px,-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0px,0px);
+  }
+}
+
+
+.line-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.inbox-list {
+  background: white;
+  padding: 6em;
+  margin-top: -3em;
+  z-index: 0;
+  position: relative;
+  border-radius: 4px;
+}