From df3350955accb0160b39ac6f0daae85bbeabf2a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Sat, 5 Dec 2020 14:49:56 +0100
Subject: [PATCH] Lock the position of the header and sidebars (#15820)

---
 sass/custom/_layout.scss           | 48 ++++++++++++++++++++++++++++++
 sass/oscailte/base/_footer.scss    |  2 +-
 sass/screen.scss                   |  3 +-
 source/_includes/site/sidebar.html | 12 ++++++++
 source/_layouts/default.html       |  2 ++
 5 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/sass/custom/_layout.scss b/sass/custom/_layout.scss
index 74c7de9d429..f9c18e8e4dd 100644
--- a/sass/custom/_layout.scss
+++ b/sass/custom/_layout.scss
@@ -19,3 +19,51 @@
 //$sidebar-pad-medium: 15px;
 //$sidebar-pad-wide: 20px;
 //$sidebar-width-wide: 300px;
+
+html {
+    overflow-y: hidden;
+}
+
+.page-content {
+    display: inline-block;
+    height: calc(100% - 68px);;
+    margin-top: 68px;
+    overflow-y: scroll;
+    padding-top: 32px;
+    width: 100%;
+}
+
+#sidebar {
+    .grid {
+        position: fixed;
+        width: 33.33%;
+        .brand-logo-container {
+            margin-top: 0;
+        }
+    }
+}
+
+.site-header {
+    position: fixed;
+    width: 100%;
+}
+
+
+@media only screen and (max-width: $lap-end) {
+    #sidebar {
+      .grid {
+          position: initial;
+          width: 100%;
+        }
+    }
+    .site-header {
+        .pull-right {
+            position: fixed;
+        }
+    }
+    .hero {
+        > .grid-wrapper {
+            z-index: 0;
+        }
+    }
+  }
\ No newline at end of file
diff --git a/sass/oscailte/base/_footer.scss b/sass/oscailte/base/_footer.scss
index b50da8d1930..56ded121310 100644
--- a/sass/oscailte/base/_footer.scss
+++ b/sass/oscailte/base/_footer.scss
@@ -8,7 +8,7 @@
   }
 }
 
-body > footer {
+body > footer, .page-content > footer {
   @include box-shadow(0 0 3px rgba(0, 0, 0, 0.25));
   background-color: $footer-background;
   // height: $footer-height;
diff --git a/sass/screen.scss b/sass/screen.scss
index 78c73c19af2..7470f86f37b 100644
--- a/sass/screen.scss
+++ b/sass/screen.scss
@@ -2,4 +2,5 @@
 @import 'custom/paulus';
 @import 'custom/component_page';
 @import 'custom/syntax';
-@import 'custom/print';
\ No newline at end of file
+@import 'custom/print';
+@import 'custom/layout';
\ No newline at end of file
diff --git a/source/_includes/site/sidebar.html b/source/_includes/site/sidebar.html
index 1c77a198122..dff093e5fcf 100644
--- a/source/_includes/site/sidebar.html
+++ b/source/_includes/site/sidebar.html
@@ -32,3 +32,15 @@
     {% endif %}
   {% endif %}
 </div>
+<script type="text/javascript">
+  // Some sidebars are longer than the screen so they can't be locked.
+  document.addEventListener('DOMContentLoaded', function() {
+    const sidebar = document.querySelector("#sidebar").querySelector(".grid");
+    if (sidebar) {
+      const content = document.querySelector(".page-content").querySelector(".grid-wrapper")
+      if (sidebar.clientHeight > content.clientHeight || sidebar.clientHeight > window.innerHeight) {
+        sidebar.style.display = "contents"
+      }
+    }
+  });
+</script>
\ No newline at end of file
diff --git a/source/_layouts/default.html b/source/_layouts/default.html
index 5309f067bcb..15d7d57be4b 100644
--- a/source/_layouts/default.html
+++ b/source/_layouts/default.html
@@ -4,6 +4,7 @@
     <header class='site-header'>
       {% include site/header.html %}
     </header>
+    <div class="page-content">
 
     {% if page.hero_unit %}
       {% include site/hero_unit.html %}
@@ -38,6 +39,7 @@
       {% include site/footer.html %}
     </footer>
 
+  </div>
     {% include javascripts/scripts.html %}
   </body>
 </html>