Support page top header #733

yamgent · 2019-03-01T11:02:36Z

Are you planning any workarounds to restore this feature?

With the new layout, the sticky page-nav now has the height of the <content> instead of the viewport. So scrollIntoView would not work.

A different work around would need to be implemented, which is an independently scrollable sticky element.

References
Scrollable Sticky Element
Sticky Sidebar

-Original file line number
+Diff line change
@@ Expand Up / @@ -78,12 +78,57 @@ code.hljs.inline { @@
         background-color: #fff;
     }
+    /**
+      * Holy Grail Layout
+      *
+      * This section covers the common styles used within Header, Footer and Side Navigation bars
+      */
+    /* #app is treated as the main container */
+    #app {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+    }
+    #flex-body {
+        display: flex;
+        flex: 1;
+    }
     #content-wrapper {
+        flex: 1;
         margin: 0 auto;
         max-width: 1000px;
-        overflow-x: hidden;
         padding: 0 20px;
+        transition: 0.4s;
         width: 100%;
+        -webkit-transition: 0.4s;
+    }
+    /* Footer */
+    footer {
+        background-color: #f5f5f5;
+        color: dimgrey;
+        padding: 10px 0;
+    }
+    /* Side Navigation menus */
+    .spacer-top {
+        /*
+          spacer-top class is a work around for MarkBind <navbar> component using "position: fixed".
+          This class can be removed once the component's position type is changed.
+        */
+        padding-top: 70px;
+    }
+    .scrollable {
+        overflow-y: auto;
+    }
+    .viewport-height-90 {
+        max-height: 90vh;
     }
     /* Bootstrap small(sm) responsive breakpoint */
@@ Expand Down Expand Up / @@ -111,24 +156,6 @@ code.hljs.inline { @@
         }
     }
-    /* Footer */
-    footer {
-        background-color: #f5f5f5;
-        color: dimgrey;
-        padding: 10px 0;
-    }
-    #app {
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
-    }
-    #flex-div {
-        flex: 1;
-    }
     /* Scrollbar */
     .slim-scroll::-webkit-scrollbar {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,11 +2,9 @@ @@
     #page-nav {
         border-left: solid 1px lightgrey;
-        display: inline-block;
-        max-height: 80vh;
-        overflow: auto;
-        position: fixed;
-        right: 0;
+        display: block;
+        flex: 0 0 auto;
+        max-width: 300px;
         transition: 0.4s;
         width: 300px;
         -webkit-transition: 0.4s;
@@ Expand All / @@ -27,13 +25,20 @@ @@
         color: black;
     }
-    #page-nav-content-wrapper {
-        margin-right: 300px;
-        transition: 0.4s;
-        -webkit-transition: 0.4s;
+    .page-nav-title {
+        color: black;
+        white-space: inherit;
     }
-    /* Responsive site navigation */
+    .nested {
+        margin-left: 5%;
+    }
+    .no-flex-wrap {
+        flex-wrap: nowrap;
+    }
+    /* Responsive page navigation */
     /* Hides page navigation on screen widths smaller than 1300px */
     @media screen and (max-width: 1299.98px) {
@@ Expand All / @@ -44,19 +49,11 @@ @@
             padding: 0;
             width: 0px;
         }
-        #page-nav-content-wrapper {
-            margin-right: 0;
-        }
     }
     /* Hide page navigation when printing */
     @media print {
-        #page-nav-content-wrapper {
-            margin-right: 0;
-        }
         #page-nav {
             border: none;
             display: none;
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,32 +1,15 @@
     /* Site navigation */
-    #flex-body {
-        display: flex;
-        flex: 1;
-    }
-    #page-content {
-        flex: 1;
-        margin-left: 300px;
-        overflow-x: hidden;
-        padding: 0;
-        transition: 0.4s;
-        -webkit-transition: 0.4s;
-    }
     #site-nav {
         background: white;
         border-right: 1px solid lightgrey;
-        display: inline-block;
-        left: 0;
-        max-height: 80vh;
-        overflow: auto;
+        display: block;
+        flex: 0 0 auto;
+        max-width: 300px;
+        padding-bottom: 20px;
         padding-right: 20px;
-        padding-top: 20px;
-        position: fixed;
         transition: 0.4s;
         width: 300px;
-        z-index: 1;
         -webkit-transition: 0.4s;
     }
@@ Expand Down Expand Up / @@ -73,6 +56,13 @@ @@
         -webkit-transition: 0.4s;
     }
+    /* Navigation list */
+    .site-nav-list {
+        list-style-type: none;
+        margin-left: -1em;
+    }
     /* Navigation dropdown menu */
     .dropdown-btn {
@@ Expand Down Expand Up / @@ -159,7 +149,7 @@ @@
         #site-nav {
             border: none;
             opacity: 0;
-            overflow: hidden;
+            padding-right: 0;
             width: 0;
         }
@@ Expand All / @@ -169,10 +159,6 @@ @@
             width: 60px;
         }
-        #page-content {
-            margin-left: 60px;
-        }
         footer {
             margin-left: 60px;
         }
@@ Expand Down Expand Up / @@ -208,10 +194,6 @@ @@
             width: 0;
         }
-        #page-content {
-            margin-left: 0;
-        }
         footer {
             margin-left: 0;
         }
@@ Expand All / @@ -231,10 +213,6 @@ @@
     /* Hide site navigation when printing */
     @media print {
-        #page-content {
-            margin-left: 0;
-        }
         #site-nav {
             border: none;
             display: none;
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -93,12 +93,6 @@ function setupSiteNav() { @@
       );
     }
-    function setupPageNav() {
-      jQuery(window).on('activate.bs.scrollspy', (event, obj) => {
-        document.querySelectorAll(`a[href='${obj.relatedTarget}']`).item(0).scrollIntoView(false);
-      });
-    }
     function setup() {
       // eslint-disable-next-line no-unused-vars
       const vm = new Vue({
@@ Expand All / @@ -111,7 +105,6 @@ function setup() { @@
         },
       });
       setupSiteNav();
-      setupPageNav();
     }
     function setupWithSearch() {
@@ Expand Down Expand Up / @@ -143,7 +136,6 @@ function setupWithSearch() { @@
         },
       });
       setupSiteNav();
-      setupPageNav();
     }
     if (enableSearch) {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -37,6 +37,7 @@ @@
       boxes : ['Boxes', ['component', 'reader-facing']],
       dropdowns : ['Dropdowns', ['component', 'reader-facing']],
       footers : ['Footers', ['other', 'reader-facing']],
+      headers: ['Headers', ['other', 'reader-facing']],
       modals : ['Modals', ['component', 'reader-facing']],
       navBars : ['Nav Bars', ['component', 'reader-facing']],
       pageNavigationMenus : ['Page Navigation Menus', ['component', 'reader-facing']],
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support page top header #733

Uh oh!

Diff view

Diff view

There are no files selected for viewing

yamgent Mar 1, 2019

Uh oh!

Chng-Zhi-Xuan Mar 4, 2019

Uh oh!

Uh oh!

-Original file line number
+Diff line change
@@ -1,20 +1,8 @@
     ## Footers
-    **You can specify a <tooltip content="For an example of a page footer, see the bottom of this page.">page footer</tooltip>** using a `<footer>` tag.
-    <div class="indented">
-    {{ icon_example }}
-    ```html
-    <!-- main body of the page -->
-    <footer>
-      This page is not updated anymore!
-    </footer>
-    ```
-    </div>
-    If the same footer is to appear in many pages, instead of specifying it _inline_ as explained above, you can save it as a separate file in the `_markbind/footers` and specify it in the `<frontmatter>` of the pages in which it should appear.
+    **You can specify a <tooltip content="For an example of a page footer, see the bottom of this page.">page footer</tooltip>** using a footer file.
+    You can save multiple footer files in the `_markbind/footers` folder and specify it in the `<frontmatter>` of the pages in which it should appear.
     <div class="indented">
@@ Expand All / @@ -34,9 +22,8 @@ In the page that you want to include the footer: @@
     </div>
     Notes:
-    - An inline footer needs to be the last element in the page.
-    - The footer specified in the `<frontmatter>` overrides the inline footer, if the page has any.
-    - Footers nested in other components or HTML tags will be shifted outside of the enclosing tag.
+    - Any inline footers will be removed by MarkBind to ensure compatibility with footer files.
+    - If a [Layout]({{ baseUrl }}/userGuide/tweakingThePageStructure.html#page-layouts) is specified, the footer file specified in the `<frontmatter>` will override the footer within the Layout.
     - [MarkBind Components]({{ baseUrl }}/userGuide/usingComponents.html) and [`<include>` tags]({{ baseUrl }}/userGuide/reusingContents.html#the-include-tag) are not supported in footers.
     <span id="short" class="d-none">
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -0,0 +1,49 @@
+    ## Headers
+    **You can specify a <tooltip content="Content to be placed at the top of a page.">page header</tooltip>** above your page contents and <tooltip content="Site Navigation and <br>Page Navigation menus">navigation menus</tooltip> using a header file.
+    You can save multiple header files in the `_markbind/headers` folder and specify it in the `<frontmatter>` of the pages in which it should appear.
+    <div class="indented">
+    {{ icon_example }}
+    **`_markbind/headers/`**`welcomeBanner.md`:
+    ```html
+    <header>
+      <div class="bg-primary display-4 text-center text-white">
+        Welcome!
+      </div>
+    </header>
+    ```
+    In the page that you want to include the header:
+    ```html
+    <frontmatter>
+      header: welcomeBanner.md
+    </frontmatter>
+    ```
+    </div>
+    Notes:
+    - Any inline headers will be removed by MarkBind to ensure compatibility with header files.
+    - If a [Layout]({{ baseUrl }}/userGuide/tweakingThePageStructure.html#page-layouts) is specified, the header file specified in the `<frontmatter>` will override the header within the Layout.
+    - [MarkBind Components]({{ baseUrl }}/userGuide/usingComponents.html) and [`<include>` tags]({{ baseUrl }}/userGuide/reusingContents.html#the-include-tag) are not supported in headers.
+    <span id="short" class="d-none">
+    ```html
+    <header>
+      <div class="bg-primary display-4 text-center text-white" style="height: 200px;">
+        Welcome!
+      </div>
+    </header>
+    ```
+    ```html
+    <frontmatter>
+      header: welcomeBanner.md
+    </frontmatter>
+    ```
+    </span>
+    <span id="examples" class="d-none">
+      <div class="bg-primary display-4 text-center text-white" style="height: 150px;">
+        Content to be placed at the top of your page.
+      </div>
+    </span>

-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,10 @@ @@
     <hr><!-- ======================================================================================================= -->
+    <include src="syntax/headers.mbdf" />
+    <hr><!-- ======================================================================================================= -->
     <include src="syntax/footers.mbdf" />
     <hr><!-- ======================================================================================================= -->
@@ Expand Down @@

Support page top header #733

Uh oh!

Support page top header #733

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

yamgent Mar 1, 2019

Choose a reason for hiding this comment

Uh oh!

Chng-Zhi-Xuan Mar 4, 2019

Choose a reason for hiding this comment

Uh oh!

Uh oh!