Merge pull request #14920 from CartoDB/fix-notification-warning

Fix notification warning positioning issue

NEWS.md

@@ -33,7 +33,7 @@ Development
 - Fix empty navigation for non engine users in API keys page ([#14916](https://github.com/CartoDB/cartodb/pull/14916))
 - Update Welcome message with plan info ([#14871](https://github.com/CartoDB/cartodb/issues/14871))
 - Minor copy edit ([#14922](https://github.com/CartoDB/cartodb/pull/14922))
-
+- Fix notification warning positioning issue ([#14920](https://github.com/CartoDB/cartodb/pull/14920))
 
 4.26.1 (2019-05-06)
 -------------------

assets/stylesheets/common/account_forms.scss

@@ -9,7 +9,6 @@ $sLabel-width: 140px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding-top: 64px;
 }
 
 .FormAccount-container {

lib/assets/javascripts/new-dashboard/App.vue

@@ -1,16 +1,15 @@
 <template>
   <div id="app">
-
-    <NavigationBar
-      :user="user"
-      :baseUrl="baseUrl"
-      :notificationsCount="notificationsCount"
-      :isNotificationVisible=isNotificationVisible
-      :isFirstTimeInDashboard="isFirstTimeInDashboard"
-      bundleType="dashboard"/>
-    
-    <NotificationWarning v-if="isNotificationVisible" :htmlBody=user.notification />
-
+    <header :class="{ 'is-user-notification': isNotificationVisible }">
+      <NotificationWarning v-if="isNotificationVisible" :htmlBody=user.notification />
+      <NavigationBar
+        :user="user"
+        :baseUrl="baseUrl"
+        :notificationsCount="notificationsCount"
+        :isNotificationVisible=isNotificationVisible
+        :isFirstTimeInDashboard="isFirstTimeInDashboard"
+        bundleType="dashboard"/>
+    </header>
     <router-view/>
 
     <Footer :user="user"/>
@@ -85,4 +84,12 @@ export default {
   box-sizing: border-box;
 }
 
+header {
+  padding-top: 60px;
+
+  &.is-user-notification {
+    padding-top: 124px;
+  }
+}
+
 </style>

lib/assets/javascripts/new-dashboard/bundles/header/header.js

@@ -36,14 +36,14 @@ new Vue({
     };
   },
   template: `
-    <header>
+    <header id="header" :class="{ 'is-user-notification': isNotificationVisible }">
+      <NotificationWarning v-if="isNotificationVisible" :htmlBody="userNotification" />
       <NavigationBar
         class="nd-navbar"
         :user="user"
         :baseUrl="baseUrl"
         :isNotificationVisible="isNotificationVisible"
         :notificationsCount="notificationsCount" />
-      <NotificationWarning v-if="isNotificationVisible" :htmlBody="userNotification" />
     </header>
   `
 });

lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue

@@ -125,6 +125,7 @@ export default {
 .navbar {
   display: flex;
   position: fixed;
+  top: 0;
   z-index: $z-index__navbar;
   align-items: center;
   justify-content: space-between;
@@ -273,7 +274,7 @@ export default {
 }
 
 .navbar.is-user-notification {
-  margin-top: $notification-warning__height;
+  top: $notification-warning__height;
 }
 
 .feedback-popup {

lib/assets/javascripts/new-dashboard/components/Page.vue

@@ -25,16 +25,16 @@ export default {
   padding: 128px 0 120px;
   border-bottom: 1px solid $border-color;
 
+  &--welcome {
+    padding-top: 64px;
+  }
+
   &.is-user-notification {
-    padding-top: 128px + $notification-warning__height;
+    padding-top: 128px - $notification-warning__height;
   }
 }
 
 .page.page__sticky-subheader {
   padding: 192px 0 120px;
-
-  &.is-user-notification {
-    padding-top: 192px + $notification-warning__height;
-  }
 }
 </style>

lib/assets/javascripts/new-dashboard/components/StickySubheader.vue

@@ -43,10 +43,11 @@ export default {
 
   &.is-visible {
     transform: translate3d(0, 64px, 0);
-  }
 
-  &.is-user-notification {
-    top: $notification-warning__height;
+    &.is-user-notification {
+      $stickyHeaderPosition: calc(64px + #{$notification-warning__height});
+      transform: translate3d(0, #{$stickyHeaderPosition}, 0);
+    }
   }
 }
 

lib/assets/javascripts/new-dashboard/pages/Home/Home.vue

@@ -76,10 +76,8 @@ export default {
 <style scoped lang="scss">
 @import 'new-dashboard/styles/variables';
 
-.page.page {
-  &--welcome {
-    padding: 64px 0 0;
-  }
+header.is-user-notification + section.page--welcome {
+  padding: 0;
 }
 
 .section {

lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/Welcome.vue

@@ -93,10 +93,3 @@ export default {
   }
 };
 </script>
-<style scoped lang="scss">
-@import 'new-dashboard/styles/variables';
-
-.welcome-section.is-user-notification {
-  margin-top: $notification-warning__height;
-}
-</style>

lib/assets/javascripts/new-dashboard/styles/bundles/header.scss

@@ -4,8 +4,6 @@
 @import "../helpers/colors";
 @import "../helpers/utilities";
 
-#app,
-.FormAccount-Section,
 .FlashMessage-container {
   padding-top: 64px;
 }
@@ -26,3 +24,11 @@
   width: 24px;
   height: 24px;
 }
+
+#header {
+  padding-top: 60px;
+
+  &.is-user-notification {
+    padding-top: 124px;
+  }
+}

lib/assets/javascripts/new-dashboard/styles/layout/_grid.scss

@@ -50,6 +50,10 @@
   top: 0;
 }
 
+header.is-user-notification + section .grid__head--sticky {
+  top: 124px;
+}
+
 .grid-cell {
   padding-right: 10px;
   padding-left: 10px;