Ensure that controls don't disappear in low resolution screens (#296)

Author: wandeg

pages/getting-started/basic-tutorial.html

@@ -982,10 +982,10 @@ <h4>Delete Entity with ETag</h4>
 </div>
 <div class="col-1-12"></div>
 <div class="col-1-4" id="tutorial-contents">
-    <nav class="tutorial-sidebar affix" aria-label="Page Contents">
+    <nav class="tutorial-sidebar affix" aria-label="Page Contents" id="affix-navbar">
         <ul class="nav tutorial-sidenav">
             <li class="active">
-                <a href="#requestData">Requesting Data</a></p>
+                <p><a href="#requestData" class="sidenav-link">Requesting Data</a></p>
                 <ul class="nav">
                     <li><a href="#entitySet">Requesting Entity Collections</a></li>
                     <li><a href="#entityByID">Requesting an Individual Entity by ID</a></li>
@@ -994,7 +994,7 @@ <h4>Delete Entity with ETag</h4>
                 </ul>
             </li>
             <li>
-                <a href="#queryData">Querying Data</a></p>
+                <p><a href="#queryData" class="sidenav-link">Querying Data</a></p>
                 <ul class="nav">
                     <li><a href="#filter">System Query Option $filter</a></li>
                     <li><a href="#orderby">System Query Option $orderby</a></li>
@@ -1007,7 +1007,7 @@ <h4>Delete Entity with ETag</h4>
                 </ul>
             </li>
             <li>
-                <a href="#modifyData">Data Modification</a></p>
+                <p><a href="#modifyData" class="sidenav-link">Data Modification</a></p>
                 <ul class="nav">
                     <li><a href="#create">Create an Entity</a></li>
                     <li><a href="#delete">Delete an Entity</a></li>
@@ -1025,4 +1025,24 @@ <h4>Delete Entity with ETag</h4>
 <!--/body-->
 <script type="text/javascript">
     $(".page-header").css({"width":"66.66%"});
+    const storeScroll = () => {
+        document.documentElement.dataset.scroll = window.scrollY;
+        var heightScrolled = window.scrollY;
+        var defaultHeight = 100;
+        if (heightScrolled < defaultHeight) {
+            $('#affix-navbar').removeClass("affix-top-30");
+          $('#affix-navbar').addClass("affix-top-50");
+            }
+        else{
+          $('#affix-navbar').removeClass("affix-top-50");
+          $('#affix-navbar').addClass("affix-top-30"); 
+            }
+    };
+
+    // Listen for new scroll events
+    document.addEventListener("scroll", storeScroll);
+
+    // Update scroll position for first time
+    storeScroll();
+    
 </script>

public/css/site.css

@@ -134,20 +134,26 @@ code {
     font-weight: 500;
     color: #bf3e11;
     padding: 4px 20px;
+    word-wrap:break-word;
+    overflow-wrap: break-word;
 }
 .tutorial-sidebar .nav>li>a:hover, .tutorial-sidebar .nav>li>a:focus {
     padding-left: 19px;
     color: #563d7c;
     text-decoration: none;
     background-color: transparent;
     border-left: 1px solid #563d7c;
+    word-wrap:break-word;
+    overflow-wrap: break-word;
 }
 .tutorial-sidebar .nav>.active>a, .tutorial-sidebar .nav>.active:hover>a, .tutorial-sidebar .nav>.active:focus>a {
     padding-left: 18px;
     font-weight: 700;
     color: #563d7c;
     background-color: transparent;
     border-left: 2px solid #563d7c;
+    word-wrap:break-word;
+    overflow-wrap: break-word;
 }
 .tutorial-sidebar .nav .nav {
     display: none;
@@ -159,6 +165,8 @@ code {
     padding-left: 30px;
     font-size: 14px;
     font-weight: 400;
+    word-wrap:break-word;
+    overflow-wrap: break-word;
 }
 .tutorial-sidebar .nav .nav>li>a:hover, .tutorial-sidebar .nav .nav>li>a:focus {
     padding-left: 29px;
@@ -168,7 +176,7 @@ code {
     padding-left: 28px;
 }
 .tutorial-sidebar.affix, .tutorial-sidebar.affix-bottom {
-    width: 213px;
+    word-wrap: break-word;
 }
 .tutorial-sidebar.affix {
     position: fixed;
@@ -190,7 +198,7 @@ code {
 	top: 50px;
 }
 
-@media (max-width: 991px) {
+@media (max-width: 767px) {
   .affix {
     position: static;
   	display: block;
@@ -199,7 +207,7 @@ code {
   }
 }
 
-@media (min-width:992px) {
+@media (min-width:768px) {
     .tutorial-sidebar .nav>.active>ul {
     display: block;
 	}
@@ -359,9 +367,18 @@ pre {
   text-decoration: underline;
 }
 
+.affix-top-50 {
+    top: 50%;
+  }
+
+.affix-top-30 {
+    top: 30%;
+  }
+
 @media screen and (-ms-high-contrast: active) {
      .tab-link { 
       -ms-high-contrast-adjust:none;
       color: white;
   }
 }
+