ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-30 08:35:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Top nav: make search bar scale

Browse Source
This commit is contained in:
mDuo13
2021-06-17 20:28:01 -07:00
parent acd2a2e624
commit 0c0121acca
3 changed files with 52 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/devportal2020.css
View File

File diff suppressed because one or more lines are too long

69
styles/_top-nav.scss
View File

@@ -1,6 +1,7 @@
/* Top navigation ----------------------------------------------------------- */ /* Top navigation ----------------------------------------------------------- */
.top-nav { .top-nav {
background-color: $gray-900; background-color: $gray-900;
height: 80px;
// Logo // Logo
.navbar-brand { .navbar-brand {
@@ -22,18 +23,18 @@
// Main Links ---------------------------------------------------------------- // Main Links ----------------------------------------------------------------
.navbar-nav { .navbar-nav {
@include media-breakpoint-up(lg) {
flex-grow: 1;
}
.nav-link { .nav-link {
color: $white; // TODO: change to black-050 color: $gray-100;
font-size: 1rem; font-size: 1rem;
line-height: 1.25rem; line-height: 1.25rem;
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
@include media-breakpoint-only(lg) { @include media-breakpoint-up(lg) {
padding: .5rem 2rem;
&.github-edit {
padding-left: 40px;
}
} }
} }
// Buttons in top nav // Buttons in top nav
@@ -99,7 +100,7 @@
} }
// Desktop version // Desktop version
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
padding: 0 7.5rem; padding: 0 3rem;
.dropdown-toggle { .dropdown-toggle {
&::after { &::after {
@@ -110,9 +111,10 @@
} }
} }
.dropdown:hover .dropdown-toggle span, .dropdown:hover .dropdown-toggle span {
.dropdown:active .dropdown-toggle span { padding-bottom: 8px;
border-bottom: 2px solid $blue-purple-400; border-bottom: 2px solid $blue-purple-400;
margin-bottom: -8px;
} }
.dropdown-menu { .dropdown-menu {
@@ -125,10 +127,6 @@
gap: 40px; gap: 40px;
left: -200px; left: -200px;
// &#topnav_dd_docshtml {
// grid-template-columns: 180px 180px 300px;
// }
&#topnav_dd_contributehtml { &#topnav_dd_contributehtml {
grid-template-columns: 200px; grid-template-columns: 200px;
} }
@@ -207,24 +205,55 @@
} }
} }
} }
#navbar-search {
flex-grow: 1;
.input-group {
flex-grow: 1;
}
}
#topsearchbox {
width: 100%;
}
.language-selector {
flex-grow: 0;
#language_selector_header_btn {
padding-right: 0;
// TODO: caret
}
}
} }
// Search bar & controls ----------------------------------------------------- // Search bar & controls -----------------------------------------------------
#navbar-search { #navbar-search {
.input-group-text, .input-group-text {
.input-group > .input-group-append > .btn {
color: $white;
background-color: transparent;
border-width: 0; border-width: 0;
color: $white;
background-color: $gray-800;
border-radius: $border-radius-sm 0 0 $border-radius-sm;
height: 40px;
padding: .5rem .5rem .5rem 1rem;
line-height: 1.5;
} }
.algolia-autocomplete { .algolia-autocomplete {
flex-grow: 1; flex-grow: 1;
} }
#topsearchbox:focus { #topsearchbox {
box-shadow: none; background-color: $gray-800;
border-color: $white; border-radius: 0 $border-radius-sm $border-radius-sm 0;
padding: .75rem 1rem .75rem .5rem;
height: 40px;
border: 1px solid $gray-800;
&:focus {
box-shadow: none;
border-color: $white;
}
} }
// Algolia Search results -------------------------------------------------- // Algolia Search results --------------------------------------------------

2
template/component-top-nav.html.jinja
View File

@@ -4,7 +4,7 @@
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarHolder" aria-controls="navbarHolder" 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> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse justify-content-center" id="navbarHolder"> <div class="collapse navbar-collapse justify-content-between" id="navbarHolder">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
{% macro dropdown(top_page) %} {% macro dropdown(top_page) %}
{% set printed_groupings = [] %} {% set printed_groupings = [] %}