Merge pull request TryGhost#4544 from PaulAdamDavis/notification-over…

…-nav Allow notifications to sit over the nav bar
macedigital · Dec 3, 2014 · 26117ea · 26117ea
2 parents 52de820 + a2e550f
commit 26117ea
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/core/client/assets/sass/layouts/default.scss b/core/client/assets/sass/layouts/default.scss
@@ -38,7 +38,6 @@
     bottom: 0;
     left: 0;
     overflow: hidden;
-    z-index: 500; // Above the .global-nav when collapsed
     transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
 
     @media (max-width: 900px) {
@@ -97,6 +96,16 @@
     }
 }
 
+// A <span> that wraps the main {{outlet}} which created a new z-index stack, separate to the nav
+.viewport-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 500; // Above the .global-nav when collapsed
+}
+
 
 //
 // The header bar

diff --git a/core/client/templates/application.hbs b/core/client/templates/application.hbs
@@ -7,7 +7,9 @@
 <main id="gh-main" class="viewport" role="main" {{bind-attr data-notification-count=topNotificationCount}}>
     {{gh-notifications location="top" notify="topNotificationChange"}}
     {{gh-notifications location="bottom"}}
-    {{outlet}}
+    <span class="viewport-content">
+        {{outlet}}
+    </span>
 </main>
 
 {{outlet modal}}