Mobile top nav, related cleanup

assets/js/jump-to-top.js

@@ -1,20 +1,5 @@
 $(document).ready(function() {
 
-  // Mobile menu.
-  $('[data-toggle="slide-collapse"]').on('click', function() {
-    $navMenuCont = $($(this).data('target'));
-    $navMenuCont.toggleClass('show');
-    $(".menu-overlay").toggleClass('active');
-  });
-  $(".menu-overlay").click(function(event) {
-    $(".navbar-toggler").trigger("click");
-  });
-
-
-
-
-
-
   var TO_TOP_MIN = 50;
   var TO_TOP_SPEED = 500;
   var TO_TOP_POS = 0;

styles/_buttons.scss

@@ -3,12 +3,13 @@
   border: 2px solid $white;
 }
 .content a.button:hover {
-  border: 1px solid $black;
+  border: 2px solid $black;
 }
 
 .btn-outline-secondary {
   color: $white;
   border-color: $white;
+  border-width: 2px;
 }
 
 #main_content_wrapper .btn-outline-secondary:hover,
@@ -49,7 +50,6 @@ a.button {
 /* (Jump to) "Top" button */
 
 .jump-to-top {
-  background-color: $gray-700;
   display: none;
   position: fixed;
   bottom: 15px;

styles/_colors.scss

@@ -116,3 +116,6 @@ $dropdown-link-color: $white;
 $dropdown-link-hover-color: $primary;
 $dropdown-link-hover-bg: $gray-900;
 $dropdown-link-active-bg: transparent;
+$navbar-dark-color: $white;
+$navbar-dark-hover-color: $secondary;
+$navbar-dark-active-color: $primary;

styles/_top-nav.scss

@@ -1,229 +1,250 @@
 /* Top navigation ----------------------------------------------------------- */
+.top-nav {
+  // Logo
 
-.navbar .navbar-nav .nav-link {
+  .navbar-brand {
-  color: $white;
+    text-decoration: none;
-}
+    white-space: pre;
-
+    -webkit-transition: opacity 200ms ease, color 200ms ease;
-.dropdown-toggle::after {
+    transition: opacity 200ms ease, color 200ms ease;
-  border-width: 0;
+  }
-  position: absolute;
+  .navbar-brand:hover {
-  top: 80%;
+    opacity: 0.5;
-  left: 50%;
-}
-
-.dropdown-toggle.with-caret::after {
-  position: relative;
-  top: 4px;
-  left: 0;
-  border-top: 8px solid $primary;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-  border-bottom: 0;
-  transition: 0.2s;
-}
-
-.dropdown.show .dropdown-toggle.with-caret::after {
-  // border-top: 0;
-  // border-right: 5px solid transparent;
-  // border-left: 5px solid transparent;
-  // border-bottom: 8px solid $primary;
-  transform: scaleY(-1);
-}
-
-.dropdown.show .dropdown-toggle {
-  color: $gray-500;
-  position: relative;
-}
-
-.dropdown.show .dropdown-toggle:not(.with-caret)::after,
-.dropdown-toggle:not(.with-caret):hover::after {
-  content: " ";
-  display: static;
-  border: 3px solid $primary;
-  border-radius: 50%;
-  font-size: 0;
-  height: 0;
-  width: 0;
-}
-
-
-
-.navbar .dropdown-menu {
-  backdrop-filter: blur(8px);
-  border-radius: 4px;
-  padding: 0.5rem 1rem;
-  min-width: 250px;
-
-  .dropdown-item {
-    line-height: 44px;
   }
-}
 
-.navbar-brand {
+  // Main Links ----------------------------------------------------------------
-  text-decoration: none;
+  .navbar-nav {
-  white-space: pre;
+    .nav-link {
-  -webkit-transition: opacity 200ms ease, color 200ms ease;
+      color: $white;
-  transition: opacity 200ms ease, color 200ms ease;
+      font-size: 1rem;
-}
+      line-height: 52px;
-.navbar-brand:hover {
+      text-decoration: none;
-  opacity: 0.5;
-}
 
-.navbar .navbar-nav .nav-link {
+      &:hover {
-  font-size: 1rem;
+        background-color: transparent;
-  line-height: 52px;
+        box-shadow: inset 0 -1px 0 0 #000;
-  text-decoration: none;
+        text-decoration: none;
-}
+      }
 
-.navbar .navbar-nav .nav-link:hover {
+      &.active a {
-  background-color: transparent;
+        font-weight: 700;
-  box-shadow: inset 0 -1px 0 0 #000;
+        box-shadow: inset 0 -1px 0 0 #000;
-  text-decoration: none;
+      }
-}
+      &.active-parent a {
+        font-weight: 700;
+        box-shadow: inset 0 -1px 0 0 #000;
+      }
+    }
+    // Buttons in top nav
+    .btn-outline-secondary {
+      font-size: 14px;
+      line-height: 125%;
+      margin-top: .5rem;
+    }
+    @media(max-width: 991px) {
+      .wrap-button {
+        padding: 1.5rem 0;
 
-.navbar .navbar-nav .active a {
+        .btn {
-  font-weight: 700;
+          display: inline;
-  box-shadow: inset 0 -1px 0 0 #000;
+          padding: 1rem 1.25rem;
-}
+        }
-.navbar .active-parent a {
+      }
-  font-weight: 700;
+    }
-  box-shadow: inset 0 -1px 0 0 #000;
+  }
-}
 
-#navbar-search {
+
-  @media(min-width: 992px) {
+  // Dropdowns -----------------------------------------------------------------
-    position: static; // allows search bar to be positioned screen-center
+  // (Mobile first)
+  .dropdown-toggle {
+    position: relative;
+  }
+  .dropdown-toggle::after {
+    position: absolute;
+    border-color: $gray-500 transparent transparent transparent;
+    border-width: 8px 5px 0 5px;
+    top: 40%;
+    left: auto;
+  }
+  .dropdown.show {
     .dropdown-toggle {
+      color: $gray-500;
+    }
+    .dropdown-toggle::after {
+      border-color: $primary transparent transparent transparent;
+    }
+  }
+  .dropdown-menu {
+    border-width: 0;
+
+    .dropdown-item {
+      line-height: 262%;
+      padding: 0 3rem;
+
+      &:hover {
+        color: $primary;
+      }
+    }
+  }
+  // Desktop version
+  @media(min-width: 992px) {
+    .dropdown-toggle::after {
+      border-width: 0;
+      top: 80%;
+      left: 50%;
+    }
+
+    .dropdown-toggle.with-caret::after {
+      position: relative;
+      top: 4px;
+      left: 0;
+      border-top: 8px solid $primary;
+      border-right: 5px solid transparent;
+      border-left: 5px solid transparent;
+      border-bottom: 0;
+      transition: 0.2s;
+    }
+
+    .dropdown.show .dropdown-toggle.with-caret::after {
+      transform: scaleY(-1);
+    }
+
+    .dropdown.show .dropdown-toggle {
+      color: $gray-500;
       position: relative;
     }
 
+    .dropdown.show .dropdown-toggle:not(.with-caret)::after,
+    .dropdown-toggle:not(.with-caret):hover::after {
+      content: " ";
+      display: static;
+      border: 3px solid $primary;
+      border-radius: 50%;
+      font-size: 0;
+      height: 0;
+      width: 0;
+    }
+
     .dropdown-menu {
-      padding: 0;
+      border-width: 1px;
+      backdrop-filter: blur(8px);
       border-radius: 8px;
-      width: 640px;
+      padding: 0.5rem 1rem;
-      left: calc(50% - 320px);
+      min-width: 250px;
+
+      .dropdown-item {
+        line-height: 44px;
+      }
+    }
+  }
+
+  // Search bar & controls -----------------------------------------------------
+  #navbar-search {
+    @media(min-width: 992px) {
+      position: static; // allows search bar to be positioned screen-center
+      .dropdown-toggle {
+        position: relative;
+      }
+
+      .dropdown-menu {
+        padding: 0;
+        border-radius: 8px;
+        width: 640px;
+        left: calc(50% - 320px);
+      }
+
+      .input-group {
+        width: 100%;
+      }
+
+      #topsearchbox,
+      .input-group-text,
+      .input-group > .input-group-append > .btn {
+        color: $white;
+        background-color: transparent;
+        border-width: 0;
+      }
+      #topsearchbox {
+        line-height: 24px;
+        height: 100%;
+        width: 100%;
+      }
+
+      .input-group > .input-group-append > .btn {
+        border-left: 1px solid black;
+      }
+      .algolia-autocomplete {
+        flex-grow: 1;
+      }
     }
 
-    .input-group {
+    // Algolia Search results --------------------------------------------------
-      width: 100%;
+    .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
+      background-color: rgba(0,0,0,0.9);
+      border: 1px solid $gray-900;
+      border-radius: 8px;
     }
-
+    .algolia-autocomplete .ds-dropdown-menu::before {
-    #topsearchbox,
+      background-color: rgba(0,0,0,0.9);
-    .input-group-text,
+      border-color: $gray-900;
-    .input-group > .input-group-append > .btn {
+    }
+    .algolia-docsearch-suggestion {
+      background-color: rgba(0,0,0,0.9);
+    }
+    .algolia-autocomplete .algolia-docsearch-suggestion--category-header {
       color: $white;
-      background-color: transparent;
+      border: 0 solid $secondary;
-      border-width: 0;
+      border-bottom-width: 1px;
-    }
+      font-weight: bold;
-    #topsearchbox {
-      line-height: 24px;
-      height: 100%;
-      width: 100%;
     }
 
-    .input-group > .input-group-append > .btn {
+    .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
-      border-left: 1px solid black;
+      color: $white;
     }
-    .algolia-autocomplete {
+
-      flex-grow: 1;
+    .algolia-autocomplete .algolia-docsearch-suggestion--title {
+      color: $white;
+    }
+
+    .algolia-autocomplete .algolia-docsearch-suggestion--text {
+      font-size: 0.8rem;
+      color: $gray-200;
+    }
+
+    .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+      color: $white;
+      background-color: $green-800;
     }
   }
 
+  // Mobile --------------------------------------------------------------------
+  @media (max-width: 991px) {
+    .navbar-brand {
+      padding-left: 15px;
+    }
+    .navbar-toggler {
+      border: 0;
+      padding: 0;
+
+      &:not(.collapsed) {
+        // Hack: turn white hamburger to approximately $green
+        filter: brightness(0.5) sepia(1) saturate(5000%) hue-rotate(114deg) brightness(1.96) saturate(87%);
+      }
+    }
+
+    .navbar-nav .nav-link {
+      line-height: 150%;
+    }
+
+    .github-edit-wrap .github-edit.nav-link {
+      background-image: unset;
+      padding-left: inherit;
+    }
 
-  .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
-    background-color: rgba(0,0,0,0.9);
-    border: 1px solid $gray-900;
-    border-radius: 8px;
-  }
-  .algolia-autocomplete .ds-dropdown-menu::before {
-    background-color: rgba(0,0,0,0.9);
-    border-color: $gray-900;
-  }
-  .algolia-docsearch-suggestion {
-    background-color: rgba(0,0,0,0.9);
-  }
-  .algolia-autocomplete .algolia-docsearch-suggestion--category-header {
-    color: $white;
-    border: 0 solid $secondary;
-    border-bottom-width: 1px;
-    font-weight: bold;
   }
 
-  .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+  // Language toggle -----------------------------------------------------------
-    color: $white;
+  .language-selector {
-  }
+    font-size: 0.875rem;
-
-  .algolia-autocomplete .algolia-docsearch-suggestion--title {
-    color: $white;
-  }
-
-  .algolia-autocomplete .algolia-docsearch-suggestion--text {
-    font-size: 0.8rem;
-    color: $gray-200;
-  }
-
-  .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
-    color: $white;
-    background-color: $green-800;
   }
 }
-
-/* Top navigation Mobile ----------------------------------------------------------- */
-@media (max-width: 991px) {
-
-  .navbar .navbar-nav .nav-link {
-    height: 48px;
-  }
-  .github-edit-wrap {
-    margin: 20px 10px 20px 0;
-  }
-
-  .navbar-collapse {
-    background-color: white;
-    position: absolute;
-    top: 200px;
-    right: 0;
-    overflow: scroll;
-    width: 260px;
-    max-height: 60vh;
-    margin-right: 24px;
-    margin-bottom: 108px;
-    padding: 24px;
-    -webkit-box-flex: 1;
-    z-index: 10;
-
-    transform: translateX(1000px);
-    transition-duration: 1s;
-  }
-
-  .navbar-collapse.show {
-    transform: translateX(0px);
-    transition-duration: 0.5s;
-  }
-
-  .menu-overlay.active {
-    transform: translateX(0px);
-    transition-duration: 0.5s;
-  }
-
-  .menu-overlay {
-    background-color: black;
-    bottom: 0;
-    left: 0;
-    opacity: 0.88;
-    filter: alpha(opacity=80);
-    /* IE7 & 8 */
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 5;
-    transform: translateX(1000px);
-    transition-duration: 0.5s;
-  }
-
-}
-
-
-#navbarHolder .language-selector {
-  font-size: 0.875rem;
-}

tool/template-top-nav.html

@@ -1,7 +1,7 @@
 <div class="container">
-<nav class="navbar navbar-expand-lg row">
+<nav class="top-nav navbar navbar-expand-lg navbar-dark row">
   <a href="{{target.prefix}}" class="navbar-brand"><img src="assets/img/XRPLedger_DevPortal-white.svg" class="logo"  height="44" alt="{{target.display_name}}" /></a>
-  <button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#navbarHolder" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarHolder" aria-controls="navbarHolder" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse justify-content-center" id="navbarHolder">
@@ -38,7 +38,7 @@
 
       {% include 'template-github-edit.html' %}
 
-      <div class="nav-item dropdown" id="navbar-search">
+      <li class="nav-item dropdown" id="navbar-search">
         <a class="nav-link dropdown-toggle" data-toggle="dropdown" id="topnav-search-dropdown-toggle"><i class="fa fa-search"></i><span class="sr-only">{% trans %}Open Search{% endtrans %}</span></a>
         <div class="dropdown-menu">
           <form class="navbar-form navbar-right" role="search">
@@ -53,7 +53,11 @@
             </div>
           </form>
         </div><!--/.dropdown-menu-->
-      </div><!--/.dropdown-->
+      </li><!--/.dropdown-->
+
+      <li class="nav-item wrap-button">
+        <a class="btn btn-outline-secondary nav-link" href="get-started-with-the-rippled-api.html">{% trans %}Get Started{% endtrans %}</a>
+      </li>
 
     </ul><!-- /.navbar-nav -->
 
@@ -70,6 +74,5 @@
       </div><!--/.dropdown-->
     </div><!--/.language-selector-->
   </div><!--/#navbarHolder-->
-  <div class="menu-overlay"></div>
 </nav>
 </div>