Make flash notifications sticky

This commit also unifies layout structure
and remove no_container flag

5 files changed, 65 insertions, 16 deletions

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index c2397842125..660f0f0ba3e 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import { spriteIcon } from './lib/utils/common_utils';
 
 const hideFlash = (flashEl, fadeTransition = true) => {
   if (fadeTransition) {
@@ -35,16 +36,11 @@ const createAction = config => `
   </a>
 `;
 
-const createFlashEl = (message, type, isFixedLayout = false) => `
-  <div
-    class="flash-${type}"
-  >
-    <div
-      class="flash-text ${
-        isFixedLayout ? 'container-fluid container-limited limit-container-width' : ''
-      }"
-    >
+const createFlashEl = (message, type) => `
+  <div class="flash-content flash-${type} rounded">
+    <div class="flash-text">
       ${_.escape(message)}
+      ${spriteIcon('close', 'close-icon')}
     </div>
   </div>
 `;
@@ -76,15 +72,10 @@ const createFlash = function createFlash(
   addBodyClass = false,
 ) {
   const flashContainer = parent.querySelector('.flash-container');
-  const navigation = parent.querySelector('.content');
 
   if (!flashContainer) return null;
 
-  const isFixedLayout = navigation
-    ? navigation.parentNode.classList.contains('container-limited')
-    : true;
-
-  flashContainer.innerHTML = createFlashEl(message, type, isFixedLayout);
+  flashContainer.innerHTML = createFlashEl(message, type);
 
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
   removeFlashClickListener(flashEl, fadeTransition);
diff --git a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
index 820f0f7f12d..0d377eb9c68 100644
--- a/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
+++ b/app/assets/javascripts/pages/profiles/two_factor_auths/index.js
@@ -5,9 +5,10 @@ import { parseBoolean } from '~/lib/utils/common_utils';
 document.addEventListener('DOMContentLoaded', () => {
   const twoFactorNode = document.querySelector('.js-two-factor-auth');
   const skippable = parseBoolean(twoFactorNode.dataset.twoFactorSkippable);
+
   if (skippable) {
     const button = `<a class="btn btn-sm btn-warning float-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
-    const flashAlert = document.querySelector('.flash-alert .container-fluid');
+    const flashAlert = document.querySelector('.flash-alert');
     if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button);
   }
 
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 96f6d02a68f..af05d069f97 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -1,3 +1,5 @@
+$notification-box-shadow-color: rgba(0, 0, 0, 0.25);
+
 .flash-container {
   cursor: pointer;
   margin: 0;
@@ -6,12 +8,32 @@
   position: relative;
   z-index: 1;
 
+  &.sticky {
+    position: sticky;
+    position: -webkit-sticky;
+    top: $flash-container-top;
+    z-index: 200;
+
+    .flash-content {
+      box-shadow: 0 2px 4px 0 $notification-box-shadow-color;
+    }
+  }
+
+  .close-icon {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    right: $gl-padding;
+    top: $gl-padding;
+  }
+
   .flash-notice,
   .flash-alert,
   .flash-success,
   .flash-warning {
     border-radius: $border-radius-default;
     color: $white-light;
+    padding-right: $gl-padding * 2;
 
     .container-fluid,
     .container-fluid.container-limited {
@@ -97,3 +119,28 @@
     }
   }
 }
+
+.gl-browser-ie .flash-container {
+  position: fixed;
+  max-width: $limited-layout-width;
+  left: 50%;
+
+  .flash-alert {
+    position: relative;
+    left: -50%;
+  }
+}
+
+.with-system-header .flash-container {
+  top: $flash-container-top + $system-header-height;
+}
+
+.with-performance-bar {
+  .flash-container {
+    top: $flash-container-top + $performance-bar-height;
+  }
+
+  &.with-system-header .flash-container {
+    top: $flash-container-top + $performance-bar-height + $system-header-height;
+  }
+}
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 97cb9d90ff0..7205324e86f 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -29,6 +29,15 @@ body {
   }
 }
 
+.container-fluid {
+  &.limit-container-width {
+    .flash-container.sticky {
+      max-width: $limited-layout-width;
+      margin: 0 auto;
+    }
+  }
+}
+
 .content-wrapper {
   margin-top: $header-height;
   padding-bottom: 100px;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 7a3fd2adfbb..15a779dde1d 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -377,6 +377,7 @@ $performance-bar-height: 35px;
 $system-header-height: 16px;
 $system-footer-height: $system-header-height;
 $flash-height: 52px;
+$flash-container-top: 48px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;
 $home-panel-title-row-height: 64px;