Fix search input overlapping site nav

This commit is contained in:
Taylor Chaparro
2021-01-26 08:38:41 -08:00
parent 25c5aa783b
commit 9adf2c1b31
2 changed files with 39 additions and 33 deletions
+7
View File
@@ -810,6 +810,13 @@ section#cncf {
} }
} }
.td-search {
header > .header-filler {
height: $hero-padding-top;
background-color: black;
}
}
// Docs specific // Docs specific
#editPageButton { #editPageButton {
+32 -33
View File
@@ -3,9 +3,10 @@
<head> <head>
{{ partial "head.html" . }} {{ partial "head.html" . }}
</head> </head>
<body class="td-{{ .Kind }}{{- if ne .Params.cid "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}"> <body class="td-search {{- if ne .Params.cid "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}">
<header> <header>
{{ partial "navbar.html" . }} {{ partial "navbar.html" . }}
<div class="header-filler"></div>
</header> </header>
{{ block "announcement" . }} {{ block "announcement" . }}
{{ if .IsHome }} {{ if .IsHome }}
@@ -16,38 +17,36 @@
{{ end }} {{ end }}
<div class="td-outer"> <div class="td-outer">
<main role="main" class="td-main"> <main role="main" class="td-main">
<section class="row td-search-result"> <section class="row td-search-result">
<div class="col-12 col-md-4 offset-md-2"> <div class="col-12 col-md-4 offset-md-2">
<form class="td-sidebar__search d-flex align-items-center"> <form class="td-sidebar__search d-flex align-items-center">
{{ partial "search-input.html" . }} {{ partial "search-input.html" . }}
<button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation"> </form>
</button> </div>
</form> <div class="col-12 col-md-8 offset-md-2">
</div> <h2 class="ml-4">{{ .Title }}</h2>
<div class="col-12 col-md-8 offset-md-2"> {{ if .Site.Params.gcs_engine_id }}
<h2 class="ml-4">{{ .Title }}</h2> <script>
{{ if .Site.Params.gcs_engine_id }} (function() {
<script> var cx = '{{ . }}';
(function() { var gcse = document.createElement('script');
var cx = '{{ . }}'; gcse.type = 'text/javascript';
var gcse = document.createElement('script'); gcse.async = true;
gcse.type = 'text/javascript'; gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
gcse.async = true; var s = document.getElementsByTagName('script')[0];
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; s.parentNode.insertBefore(gcse, s);
var s = document.getElementsByTagName('script')[0]; })();
s.parentNode.insertBefore(gcse, s); </script>
})(); <gcse:searchresults-only></gcse:searchresults-only>
</script> {{ else if .Site.Params.k8s_search }}
<gcse:searchresults-only></gcse:searchresults-only> <script src="{{ "js/search.js" | relURL }}"></script>
{{ else if .Site.Params.k8s_search }} <gcse:searchresults-only linktarget="_parent">
<script src="{{ "js/search.js" | relURL }}"></script> <div id="bing-results-container">{{ T "layouts_docs_search_fetching" }}</div>
<gcse:searchresults-only linktarget="_parent"> <div id="bing-pagination-container"></div>
<div id="bing-results-container">{{ T "layouts_docs_search_fetching" }}</div> </gcse:searchresults-only>
<div id="bing-pagination-container"></div> {{ end }}
</gcse:searchresults-only> </div>
{{ end }} </section>
</div>
</section>
</main> </main>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
</div> </div>