mirror of
https://github.com/vlang/v.git
synced 2023-08-10 21:13:21 +03:00
vdoc: implement advanced search on mobile layout (#8176)
This commit is contained in:
Daniel Däschle
GitHub
parent
73fd4396c3
commit
b4a542c51c
@ -15,6 +15,7 @@
|
||||
- Colorize and improve failing tests output.
|
||||
- Fix `go` with a generic function: `go test<string>(c, 'abcd')`.
|
||||
- Add comptime `x := $embed_file('v.png') println(x.len) println(ptr_str(x.data()))`, for embedding files into binaries.
|
||||
- Advanced vdoc search on mobile layout.
|
||||
|
||||
## V 0.2.1
|
||||
*30 Dec 2020*
|
||||
|
||||
@ -39,7 +39,7 @@ const (
|
||||
<header class="doc-nav hidden">
|
||||
<div class="heading-container">
|
||||
<div class="heading">
|
||||
<input type="text" id="search" placeholder="Search... (beta)" autocomplete="off">
|
||||
<div class="info">
|
||||
<div class="module">{{ head_name }}</div>
|
||||
<div class="toggle-version-container">
|
||||
<span>{{ version }}</span>
|
||||
@ -47,8 +47,10 @@ const (
|
||||
</div>
|
||||
{{ menu_icon }}
|
||||
</div>
|
||||
<input type="text" id="search" placeholder="Search... (beta)" autocomplete="off">
|
||||
</div>
|
||||
<nav class="search"></nav>
|
||||
</div>
|
||||
<nav class="search hidden"></nav>
|
||||
<nav class="content hidden">
|
||||
<ul>
|
||||
{{ toc_links }}
|
||||
|
||||
@ -149,11 +149,6 @@ body {
|
||||
fill: #fff;
|
||||
fill: var(--menu-toggle-icon-color);
|
||||
}
|
||||
.doc-nav #toggle-menu:active {
|
||||
background-color: #00000044;
|
||||
background-color: var(--menu-toggle-icon-hover-color);
|
||||
border-radius: 5rem;
|
||||
}
|
||||
.doc-nav > .heading-container {
|
||||
position: relative;
|
||||
/* IE11 */
|
||||
@ -165,31 +160,35 @@ body {
|
||||
z-index: 10;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading > .info {
|
||||
display: flex;
|
||||
padding: 0 1rem;
|
||||
height: 56px;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading > .module {
|
||||
.doc-nav > .heading-container > .heading > .info > .module {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading > .toggle-version-container {
|
||||
.doc-nav > .heading-container > .heading > .info > .toggle-version-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading > .toggle-version-container > #dark-mode-toggle {
|
||||
.doc-nav > .heading-container > .heading > .info > .toggle-version-container > #dark-mode-toggle {
|
||||
cursor: pointer;
|
||||
fill: #fff;
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading > .toggle-version-container > #dark-mode-toggle > svg {
|
||||
.doc-nav > .heading-container > .heading > .info > .toggle-version-container > #dark-mode-toggle > svg {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading > #search {
|
||||
margin-top: 1rem;
|
||||
margin: 0.6rem 1.2rem 1rem 1.2rem;
|
||||
border: none;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
@ -198,8 +197,6 @@ body {
|
||||
background-color: var(--menu-search-background-color);
|
||||
color: #fff;
|
||||
color: var(--menu-search-text-color);
|
||||
margin-left: -0.6rem;
|
||||
margin-right: -0.6rem;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading > #search::placeholder {
|
||||
color: #edf2f7;
|
||||
@ -265,7 +262,7 @@ body {
|
||||
.doc-nav > .content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.doc-nav .search {
|
||||
.doc-nav .search.hidden {
|
||||
display: none;
|
||||
}
|
||||
.doc-nav .search li {
|
||||
@ -619,17 +616,20 @@ pre {
|
||||
.doc-nav.hidden {
|
||||
height: auto;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading {
|
||||
.doc-nav.hidden #search {
|
||||
display: none;
|
||||
}
|
||||
.doc-nav .search.mobile-hidden {
|
||||
display: none;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading > .info {
|
||||
align-items: center;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading > .toggle-version-container {
|
||||
.doc-nav > .heading-container > .heading > .info > .toggle-version-container {
|
||||
flex-grow: 1;
|
||||
padding: 0 1rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading > #search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@ -642,19 +642,19 @@ pre {
|
||||
.doc-nav #toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading {
|
||||
.doc-nav > .heading-container > .heading > .info {
|
||||
height: auto;
|
||||
padding: 1rem 2rem;
|
||||
padding: 1rem 2rem 0 2rem;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading > .toggle-version-container {
|
||||
.doc-nav > .heading-container > .heading > .info > .toggle-version-container {
|
||||
align-items: center;
|
||||
margin-bottom: 0.2rem;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.doc-nav > .heading-container > .heading > .toggle-version-container > #dark-mode-toggle {
|
||||
.doc-nav > .heading-container > .heading > .info > .toggle-version-container > #dark-mode-toggle {
|
||||
margin-right: auto;
|
||||
}
|
||||
.doc-nav .content.show,
|
||||
|
||||
@ -53,13 +53,20 @@ function setupScrollSpy() {
|
||||
function setupMobileToggle() {
|
||||
var toggle = document.getElementById('toggle-menu');
|
||||
toggle.addEventListener('click', function(ev) {
|
||||
document.querySelectorAll('.doc-nav').forEach(function(el) {
|
||||
el.classList.toggle('hidden');
|
||||
});
|
||||
document.querySelectorAll('.doc-nav .content').forEach(function(el) {
|
||||
el.classList.toggle('hidden');
|
||||
el.classList.toggle('show');
|
||||
});
|
||||
var docNav = document.querySelector('.doc-nav');
|
||||
var isHidden = docNav.classList.contains('hidden');
|
||||
docNav.classList.toggle('hidden');
|
||||
var search = document.querySelector('.doc-nav > .search');
|
||||
console.log(search);
|
||||
var searchHasResults = search.classList.contains('has-results');
|
||||
if (isHidden && searchHasResults) {
|
||||
search.classList.remove('mobile-hidden');
|
||||
} else {
|
||||
search.classList.add('mobile-hidden');
|
||||
}
|
||||
var content = document.querySelector('.doc-nav .content');
|
||||
content.classList.toggle('hidden');
|
||||
content.classList.toggle('show');
|
||||
});
|
||||
}
|
||||
|
||||
@ -87,12 +94,19 @@ function setupSearch() {
|
||||
if (searchValue === '') {
|
||||
// reset to default
|
||||
menu.style.display = '';
|
||||
search.style.display = '';
|
||||
if (!search.classList.contains('hidden')) {
|
||||
search.classList.add('hidden');
|
||||
search.classList.remove('has-results');
|
||||
}
|
||||
} else if (searchValue.length > 2) {
|
||||
// search for less than 3 characters can display too much results
|
||||
search.innerHTML = '';
|
||||
menu.style.display = 'none';
|
||||
search.style.display = 'block';
|
||||
if (search.classList.contains('hidden')) {
|
||||
search.classList.remove('hidden');
|
||||
search.classList.remove('mobile-hidden');
|
||||
search.classList.add('has-results');
|
||||
}
|
||||
// cache length for performance
|
||||
var foundModule = false;
|
||||
var searchModuleIndexLength = searchModuleIndex.length;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user