Project header changes (#1013)

* new project header and navbar design * Add description text for get tickets btn * Styling fixes * CSS fixes * Registration text changes * Translation files * Add the js class for opening ticket widget * Change the registration text * Fix registration txt * Show the time of the next event on the calendar widget * Use project.current_roles.crew
hasgeek · Feb 1, 2021 · 3dbaf93 · 3dbaf93
1 parent 75ca888
commit 3dbaf93
Show file tree

Hide file tree

Showing 18 changed files with 1,248 additions and 839 deletions.
diff --git a/funnel/assets/js/project.js b/funnel/assets/js/project.js
@@ -84,7 +84,7 @@ const Ticketing = {
   },
 
   initTicketModal() {
-    $('.open-ticket-widget').click((event) => {
+    $('.js-open-ticket-widget').click((event) => {
       event.preventDefault();
       this.openTicketModal();
     });

diff --git a/funnel/assets/js/util.js b/funnel/assets/js/util.js
@@ -137,7 +137,9 @@ export const Utils = {
         : $(this).find('.calendar__weekdays__dates--latest');
 
       firstActiveWeek
-        .find('.calendar__weekdays__dates__date--showtime:first')
+        .find(
+          '.calendar__weekdays__dates__date--showtime.calendar__weekdays__dates__date--latest:first'
+        )
         .addClass('calendar__weekdays__dates__date--display');
 
       $(this)
@@ -153,15 +155,19 @@ export const Utils = {
         .find('.calendar__weekdays__dates__date--showtime')
         .mouseleave(function () {
           firstActiveWeek
-            .find('.calendar__weekdays__dates__date--showtime:first')
+            .find(
+              '.calendar__weekdays__dates__date--showtime.calendar__weekdays__dates__date--latest:first'
+            )
             .addClass('calendar__weekdays__dates__date--display');
         });
 
       let todayDate = $(this).find('.calendar__counting').data('today');
       let nextEventElem = $(this)
         .find('.calendar__weekdays__dates--upcoming--first')
         .first()
-        .find('.calendar__weekdays__dates__date--active')
+        .find(
+          '.calendar__weekdays__dates__date--showtime.calendar__weekdays__dates__date--latest'
+        )
         .first();
       let eventDate = nextEventElem.data('event-date');
       let eventMonth = nextEventElem.data('event-month');
@@ -425,29 +431,6 @@ export const ScrollActiveMenu = {
       }
     });
     this.activeNavItem = '';
-
-    if (document.getElementById('ticket-wrapper')) {
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (
-              !entry.isIntersecting &&
-              entry.intersectionRatio > 0.5 &&
-              entry.boundingClientRect.y < 0
-            ) {
-              $('#ticket-btn').addClass('sub-navbar__item--fixed');
-            } else if (entry.isIntersecting && entry.intersectionRatio === 1) {
-              $('#ticket-btn').removeClass('sub-navbar__item--fixed');
-            }
-          });
-        },
-        {
-          rootMargin: '0px',
-          threshold: 1,
-        }
-      );
-      observer.observe(document.getElementById('ticket-wrapper'));
-    }
   },
 
   handleObserver(entries) {

diff --git a/funnel/static/css/app.css b/funnel/static/css/app.css
@@ -938,8 +938,8 @@ a.loginbutton.hidden,
 }
 
 .mui-dropdown__menu--hg-link {
-  max-width: 105px;
-  min-width: 105px;
+  max-width: 125px;
+  min-width: 125px;
   z-index: 1003;
   overflow: hidden;
   margin-top: 0;
@@ -1684,7 +1684,7 @@ a.loginbutton.hidden,
     position: sticky;
     top: 50px;
     order: 1;
-    z-index: 2;
+    z-index: 6;
   }
 
   .sub-navbar {
@@ -3247,7 +3247,7 @@ a.loginbutton.hidden,
 .card--upcoming .card__body .card__body__bookmark {
   position: absolute;
   right: 16px;
-  top: 18px;
+  top: 16px;
   z-index: 4;
   line-height: 1;
 }
@@ -3469,8 +3469,97 @@ a.loginbutton.hidden,
   border-bottom: 1px solid rgba(121, 129, 139, 0.48);
 }
 
+.project-header {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+.project-header .project-links,
+.project-header .hg-link-btn {
+  padding-right: 16px;
+}
+.project-header .settings {
+  padding-left: 16px;
+}
+.project-header .hg-link-btn.hide {
+  display: none;
+}
+.project-header .mui-btn--nostyle + .mui-btn--nostyle {
+  margin: 0;
+}
+
+.register-block {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.register-block .register-block__txt {
+  font-size: 10px;
+  margin: 0 16px 0 0;
+}
+.register-block .register-block__right {
+  text-align: right;
+}
+.register-block .register-block__right__menu {
+  margin-left: 8px;
+}
+
+@media (min-width: 360px) {
+  .register-block .register-block__txt {
+    font-size: 14px;
+  }
+}
+.project-footer {
+  position: fixed;
+  width: calc(100% - 32px);
+  bottom: 0;
+  padding: 16px;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+  z-index: 1000;
+}
+.project-footer .mui-dropdown__menu {
+  top: -66px !important;
+  border-radius: 16px 16px 0px;
+}
+
+@media (min-width: 768px) {
+  .project-footer {
+    display: none;
+  }
+}
+.sub-navbar-container__inner .desktop-navbar-items {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .sub-navbar-container__inner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .sub-navbar-container__inner .sub-navbar {
+    max-width: calc(100% - 480px);
+    margin-left: 0;
+  }
+  .sub-navbar-container__inner .desktop-navbar-items {
+    display: flex;
+    min-width: 450px;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 0 16px;
+  }
+  .sub-navbar-container__inner .desktop-navbar-items .project-header {
+    margin: 0 16px 0 0;
+  }
+}
+@media (min-width: 768px) {
+  .sub-navbar-container__inner .desktop-navbar-items {
+    justify-content: flex-end;
+  }
+}
 .project-banner {
-  margin-top: 16px;
+  padding-top: 80px;
 }
 .project-banner .project-banner__profile-details {
   display: flex;
@@ -3542,40 +3631,15 @@ a.loginbutton.hidden,
   margin: 0;
   display: block;
 }
-.project-banner .project-banner__footer {
-  display: flex;
-  align-items: baseline;
-  margin: 16px 0 0;
-  padding: 0 16px;
-}
-.project-banner .project-banner__footer .bookmark {
-  padding-right: 8px;
-}
-.project-banner .project-banner__footer .bookmark a {
-  text-decoration: none !important;
-}
-.project-banner .project-banner__footer .hg-link-btn.hide {
-  display: none;
-}
-.project-banner .project-banner__footer .bookmark .txt,
-.project-banner .project-banner__footer .bookmark .login-txt {
-  position: relative;
-  top: -2px;
-}
-.project-banner .project-banner__footer .bookmark .animate-btn {
-  height: 20px;
-}
-.project-banner .project-banner__footer .bookmark .animate-btn--animate {
-  -webkit-animation: none;
-  animation: none;
-}
-.project-banner .project-banner__footer .mui-btn--nostyle + .mui-btn--nostyle {
-  margin: 0;
-}
 .project-banner .project-details__box {
   margin-top: 16px;
   position: relative;
 }
+.project-banner .project-details__box .bookmark {
+  position: absolute;
+  right: 14px;
+  z-index: 3;
+}
 .project-banner .project-details__box .card__calendar {
   padding: 0 16px 10px;
   margin: 0 0 25px;
@@ -3639,14 +3703,15 @@ a.loginbutton.hidden,
 .project-banner .project-details__box .propose .propose-btn--strike:hover {
   text-decoration: line-through;
 }
-.project-banner .project-details__box--ticketbox {
+.project-banner .project-details__box__content {
+  min-height: 22px;
   margin-bottom: 16px;
 }
-.project-banner .project-details__box--ticketbox .check-icon {
-  margin-right: 8px;
-}
 
 @media (min-width: 768px) {
+  .project-banner {
+    padding-top: 35px;
+  }
   .project-banner .project-banner__box {
     padding: 0 16px;
   }
@@ -3656,15 +3721,6 @@ a.loginbutton.hidden,
   .project-banner .project-banner__box .project-banner__box__add-btn--second {
     right: 60px;
   }
-  .project-banner .project-banner__footer {
-    padding: 0;
-    justify-content: unset;
-  }
-  .project-banner .project-banner__footer .bookmark,
-  .project-banner .project-banner__footer .project-links,
-  .project-banner .project-banner__footer .hg-link-btn {
-    padding-right: 24px !important;
-  }
   .project-banner .project-details__box .propose .propose__txt {
     font-size: 14px;
   }
@@ -3718,7 +3774,7 @@ a.loginbutton.hidden,
   .project-banner .project-details__box--topmargin {
     margin-top: 42px;
   }
-  .project-banner .project-details__box--ticketbox {
+  .project-banner .project-details__box__content {
     margin-bottom: 0;
   }
 }
@@ -3782,7 +3838,7 @@ a.loginbutton.hidden,
 @media (min-width: 768px) {
   .pinned {
     position: sticky;
-    top: 56px;
+    top: 128px;
     display: block;
   }
 }
@@ -5417,6 +5473,9 @@ body > .proposal-box.ui-draggable {
   color: #4d5763;
   position: relative;
 }
+.update .update__heading {
+  float: left;
+}
 .update .update__action-btn {
   float: right;
 }
@@ -5451,21 +5510,13 @@ body > .proposal-box.ui-draggable {
   }
 }
 @media (min-width: 768px) {
-  .pinned {
-    top: 110px;
-    margin-bottom: -10px;
-  }
-
   .update {
     padding: 32px 16px;
     margin-bottom: 16px;
     border-radius: 16px;
     border: solid 1px rgba(121, 129, 139, 0.16);
     background-color: #f9f9f9;
   }
-  .update .update__heading {
-    float: left;
-  }
   .update .update__action-btn {
     position: static;
   }

diff --git a/funnel/static/sass/_card.scss b/funnel/static/sass/_card.scss
@@ -473,7 +473,7 @@
     .card__body__bookmark {
       position: absolute;
       right: $mui-grid-padding;
-      top: 18px;
+      top: $mui-grid-padding;
       z-index: 4;
       line-height: 1;
     }

diff --git a/funnel/static/sass/_header.scss b/funnel/static/sass/_header.scss
@@ -519,7 +519,7 @@
     position: sticky;
     top: 50px;
     order: 1;
-    z-index: 2;
+    z-index: 6;
   }
 
   .sub-navbar {

diff --git a/funnel/static/sass/_layout.scss b/funnel/static/sass/_layout.scss
@@ -1016,8 +1016,8 @@ a.loginbutton.hidden,
 }
 
 .mui-dropdown__menu--hg-link {
-  max-width: 105px;
-  min-width: 105px;
+  max-width: 125px;
+  min-width: 125px;
   z-index: 1003;
   overflow: hidden;
   margin-top: 0;