Merge pull request #13540 from unoplatform/mergify/bp/release/stable/…

…4.10/pr-13536

docs: Revert #12816 and #12867 (backport #13536)

doc/templates/uno/component/navbar.js

@@ -1,11 +1,3 @@
-function setNavbarHeight() {
-    let headerHeight = $("#header-container").outerHeight();
-    let intViewportHeight = window.innerHeight;
-    let maxHeightNavbar = intViewportHeight - headerHeight;
-    $("#navbar").css("max-height", maxHeightNavbar);
-}
-
-
 /**
  * Load the navbar from the uno website
  */
@@ -66,9 +58,6 @@ function initializeNavbar() {
 
         }
     });
-
-    setNavbarHeight();
-
 }
 
 /**
@@ -94,13 +83,6 @@ function updateLogoOnResize() {
 }
 
 
-function updateNavbarHeightOnResize() {
-    $(window).on('resize', function () {
-        setNavbarHeight();
-    });
-}
-
-
 // Update href in navbar
 function renderNavbar() {
     const navbar = $('#navbar ul')[0];

doc/templates/uno/component/navbar.scss

@@ -16,28 +16,26 @@
 .visibility-opacity-transition {
   @include media-breakpoint-up(lg) {
     visibility: hidden;
+    opacity: 0;
+    transition: visibility 100ms, opacity 100ms ease-in-out;
 
     list-style: none;
-
-    transition: visibility 100ms, opacity 100ms ease-in-out;
-    opacity: 0;
   }
 }
 
 #header-container {
-  display: flex;
-  position: fixed;
+  padding: 16px 32px;
+  z-index: 9999;
   background: #fff;
 
+  display: flex;
+  position: fixed;
   width: 100%;
-  min-height: 75px;
-
-  padding: 16px 32px;
+  min-height: 67px;
+  max-height: 67px;
   border-bottom: 1px solid #f4f2f3;
-
   justify-content: space-between;
 
-  z-index: 9999;
 
   &::after,
   &::before {
@@ -46,11 +44,13 @@
 
   #menu-menu-principal {
     float: right;
-
     list-style: none;
 
     @include media-breakpoint-down(lg) {
       width: 100%;
+      // 70vh is a magic value found by trial and error.
+      max-height: 70vh;
+      overflow-y: auto;
     }
 
     @include media-breakpoint-up(lg) {
@@ -62,20 +62,23 @@
   #header-logo-container {
     width: 36px;
     vertical-align: middle;
+    z-index: 9;
+
 
     img {
       width: 100%;
     }
 
     @include media-breakpoint-up(lg) {
-      width: 120px;
+      min-width: 120px;
     }
   }
 
   .navbar-toggle {
     padding: 0;
     margin: 10px 0;
     display: none !important;
+    z-index: 9;
 
     .icon-bar {
       background: $darkgray;
@@ -98,29 +101,36 @@
   nav {
     a {
       padding: 10px;
-
-      font-size: 16px;
+      font-size: 13px;
       font-weight: 600;
       font-stretch: normal;
       font-style: normal;
-      line-height: 16px;
+      line-height: 14px;
       letter-spacing: normal;
       text-transform: uppercase;
       color: $black;
 
       &:hover,
       &:focus {
-        border-radius: 4px;
-        background-color: transparentize($turquoise, 0.8);
+        color: $purple;
+      }
+
+      @include media-breakpoint-up(lg) {
+        font-size: 19px;
+        line-height: 17px;
       }
     }
 
     /**
      * Top level menu items
      */
     & > ul > li {
-      margin: 0 16px;
-      align-self: center;
+
+      @include media-breakpoint-up(lg) {
+        margin: 0 16px;
+        align-self: center;
+        min-width: max-content;
+      }
 
       /**
        * has-children means there is a submenu
@@ -129,26 +139,54 @@
         // actual submenu
         position: relative;
 
+        & > a {
+
+
+          &::after {
+            display: inline-block;
+            text-rendering: auto;
+            -webkit-font-smoothing: antialiased;
+            font: normal normal normal 10px/1 FontAwesome;
+            content: "\f078";
+            line-height: 12px;
+            margin-left: 12px;
+            vertical-align: top;
+
+            @include media-breakpoint-up(lg) {
+              line-height: 21px;
+              font: normal normal normal 15px/1 FontAwesome;
+            }
+          }
+        }
+
         & > ul {
           @extend .visibility-opacity-transition;
-          width: inherit;
+          width: 100%;
 
           @include media-breakpoint-up(lg) {
+            width: max-content;
             display: flex;
             position: absolute;
-            padding: 24px 48px;
+            padding: 20px;
             top: 170% !important;
-            left: -100% !important;
+            left: -25% !important;
 
             flex-direction: column;
 
-            border-radius: 4px;
+            //border-radius: 4px;
             box-shadow: 0 0 20px 2px rgba(36, 36, 36, 0.2);
             background-color: $white;
           }
 
           li {
             display: flex;
+            border-bottom: 1px solid $lightblue;
+            background: $white;
+
+            @include media-breakpoint-up(lg) {
+              border: none;
+            }
+
           }
 
           a {
@@ -164,16 +202,8 @@
             flex-direction: column;
 
             & > a {
-              cursor: default;
-
               font-weight: 700;
               line-height: normal !important;
-              color: $black;
-
-              &:hover,
-              &:focus {
-                background-color: transparent;
-              }
             }
 
             ul {
@@ -238,6 +268,7 @@
       padding: 8px 32px;
 
       font-size: 16px;
+      line-height: 24px;
       font-weight: 700;
       min-width: 125px;
       text-align: center;
@@ -247,12 +278,12 @@
       background-color: $turquoise;
       background: linear-gradient(to top, $blue 50%, $turquoise 50%);
       background-size: 100% 200%;
-      background-position:left top;
-      transition:all 0.5s cubic-bezier(.69,.04,.9,.65);
+      background-position: left top;
+      transition: all 0.5s cubic-bezier(.69, .04, .9, .65);
 
       &:hover {
         color: $white;
-        background-position:bottom left;
+        background-position: bottom left;
       }
     }
   }
@@ -262,24 +293,32 @@
   @media (max-width: 979px) {
 
     overflow: auto !important;
-    
+
     position: fixed;
     width: 100%;
-    margin: 0;
+    margin: -16px 0 0 0;
     padding: 0;
 
-    top: 75px;
+    padding-top: 67px;
     left: 0;
 
     text-align: left;
 
-    background: #fff;
+    background: $lightblue;
+
+    transition: height .4s ease .1s, opacity .6s ease;
+    opacity: 0;
 
     &.collapse {
-      display: none!important;
+      height: 67px !important;
+      display: none !important;
     }
+
+
     &.collapse.in {
-      display: block!important;
+      display: block !important;
+      height: 100vh !important;
+      opacity: 1;
     }
 
     .menu {
@@ -291,6 +330,13 @@
         display: block;
         padding: 0;
 
+        &.get-started-btn {
+          position: absolute;
+          padding: 0 16px;
+          bottom: 10%;
+          width: 100%;
+        }
+
         &.has-children {
           position: relative;
 
@@ -314,17 +360,14 @@
       a {
         display: block;
         padding: 10px 25px;
-
-        line-height: 1.4;
-        font-weight: 700;
       }
     }
   }
 }
 
 .subnav {
   position: fixed;
-  top: 75px;
+  top: 67px;
   width: 100%;
   z-index: 999;
   background-color: #f8f8f8;

doc/templates/uno/main.scss

@@ -350,3 +350,9 @@ h3 {
     }
   }
 }
+
+
+// Algolia
+.DocSearch-Hit-content-wrapper {
+  height: 100%;
+}

doc/templates/uno/render.js

@@ -16,6 +16,7 @@ renderNavbar();
 renderLogo();
 updateLogo()
 updateLogoOnResize();
+updateNavbarHeightOnResize();
 updateTocHeightOnResize();
 updateSidenavTopOnResize();
 renderFooter();