Test: Update test_site expected folder

MarkBind · Mar 21, 2019 · 10c2db5 · 10c2db5
1 parent 871dc15
commit 10c2db5
Show file tree

Hide file tree

Showing 13 changed files with 601 additions and 640 deletions.
diff --git a/test/functional/test_site/expected/bugs/index.html b/test/functional/test_site/expected/bugs/index.html
@@ -21,8 +21,9 @@
     <link rel="icon" href="/test_site/favicon.png">
 </head>
 <body>
-<div id="app">
-    <div id="content-wrapper">
+    <div id="app">
+                <div id="flex-body">
+                        <div id="content-wrapper">
   <div>
     <navbar placement="top" type="inverse" class="temp-navbar">
       <a slot="brand" href="/" title="Home" class="navbar-brand">Markbind Test Site</a>
@@ -40,7 +41,8 @@ <h2 id="popover-initiated-by-trigger-honor-trigger-attribute">popover initiated
       <div slot="content">
         <div>
           <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
-            do.</p>
+            do.
+          </p>
         </div>
       </div>
     </popover>
@@ -54,7 +56,8 @@ <h2 id="support-multiple-inclusions-of-a-modal">Support multiple inclusions of a
       <modal large="" title="Establishing Requirements" id="modal:bugRepro">
         <div>
           <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
-            do.</p>
+            do.
+          </p>
         </div>
       </modal>
     </div>
@@ -65,7 +68,8 @@ <h2 id="support-multiple-inclusions-of-a-modal">Support multiple inclusions of a
       <modal large="" title="Establishing Requirements" id="modal:bugRepro">
         <div>
           <p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
-            do.</p>
+            do.
+          </p>
         </div>
       </modal>
     </div>
@@ -76,13 +80,12 @@ <h2 id="remove-extra-space-in-links">Remove extra space in links<a class="fa fa-
       <a href="https://github.com">link text</a>]</p>
   </div>
 </div>
-<div id="flex-div"></div>
-<footer>
+                    </div>
+        <footer>
   <div class="text-center">
     Default footer
   </div>
-</footer>
-</div>
+</footer>    </div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>

diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
diff --git a/test/functional/test_site/expected/markbind/css/markbind.css b/test/functional/test_site/expected/markbind/css/markbind.css
@@ -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 */
@@ -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 {

diff --git a/test/functional/test_site/expected/markbind/css/page-nav.css b/test/functional/test_site/expected/markbind/css/page-nav.css
@@ -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;
@@ -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) {
@@ -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;

diff --git a/test/functional/test_site/expected/markbind/css/site-nav.css b/test/functional/test_site/expected/markbind/css/site-nav.css
@@ -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;
 }
 
@@ -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 {
@@ -159,7 +149,7 @@
     #site-nav {
         border: none;
         opacity: 0;
-        overflow: hidden;
+        padding-right: 0;
         width: 0;
     }
 
@@ -169,10 +159,6 @@
         width: 60px;
     }
 
-    #page-content {
-        margin-left: 60px;
-    }
-
     footer {
         margin-left: 60px;
     }
@@ -208,10 +194,6 @@
         width: 0;
     }
 
-    #page-content {
-        margin-left: 0;
-    }
-
     footer {
         margin-left: 0;
     }
@@ -231,10 +213,6 @@
 /* Hide site navigation when printing */
 @media print {
 
-    #page-content {
-        margin-left: 0;
-    }
-
     #site-nav {
         border: none;
         display: none;

diff --git a/test/functional/test_site/expected/markbind/js/setup.js b/test/functional/test_site/expected/markbind/js/setup.js
@@ -90,12 +90,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({
@@ -105,7 +99,6 @@ function setup() {
     },
   });
   setupSiteNav();
-  setupPageNav();
 }
 
 function setupWithSearch() {
@@ -134,7 +127,6 @@ function setupWithSearch() {
     },
   });
   setupSiteNav();
-  setupPageNav();
 }
 
 if (enableSearch) {

diff --git a/test/functional/test_site/expected/sub_site/index.html b/test/functional/test_site/expected/sub_site/index.html
@@ -21,8 +21,9 @@
     <link rel="icon" href="/test_site/favicon.png">
 </head>
 <body>
-<div id="app">
-    <div id="content-wrapper">
+    <div id="app">
+                <div id="flex-body">
+                        <div id="content-wrapper">
   <p>This is a page from another Markbind site.</p>
   <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"></a></h2>
   <p>It is a list of features (or functionalities) grouped according to some criteria such as priority (e.g. must-have, nice-to-have, etc. ), order of delivery, object or process related (e.g. order-related, invoice-related, etc.). Here is a sample feature
@@ -34,13 +35,12 @@ <h2 id="feature-list">Feature list<a class="fa fa-anchor" href="#feature-list"><
     <li>Timer – Additional fixed time restriction on the player.</li>
   </ol>
   <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></div>
-<div id="flex-div"></div>
-<footer>
+                    </div>
+        <footer>
   <div class="text-center">
     Default footer
   </div>
-</footer>
-</div>
+</footer>    </div>
 </body>
 <script src="../markbind/js/vue.min.js"></script>
 <script src="../markbind/js/vue-strap.min.js"></script>

diff --git a/test/functional/test_site/expected/testAfterSetup.html b/test/functional/test_site/expected/testAfterSetup.html
@@ -21,20 +21,20 @@
     <link rel="icon" href="/test_site/favicon.png">
 </head>
 <body>
-<div id="app">
-    <div id="content-wrapper">
+    <div id="app">
+                <div id="flex-body">
+                        <div id="content-wrapper">
   <box id="alert-box">
     This Vue element should trigger a alert dialog when clicked on.
   </box>
   <p><span id="mouseover-span">This span should toggle the colour of the above box when hovered upon.</span></p>
 </div>
-<div id="flex-div"></div>
-<footer>
+                    </div>
+        <footer>
   <div class="text-center">
     testAfterSetup footer
   </div>
-</footer>
-</div>
+</footer>    </div>
 </body>
 <script src="markbind/js/vue.min.js"></script>
 <script src="markbind/js/vue-strap.min.js"></script>