vieter-v
/
v
2
0
Fork 0
Code Issues Pull Requests Releases Activity

vdoc: implement advanced search on mobile layout (#8176)

pull/8178/head
Daniel Däschle 2021-01-18 06:04:59 +01:00 committed by GitHub
parent 73fd4396c3
commit b4a542c51c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 55 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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*

16
cmd/tools/vdoc/html.v
View File

@ -39,16 +39,18 @@ 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="module">{{ head_name }}</div>
<div class="toggle-version-container">
<span>{{ version }}</span>
<div id="dark-mode-toggle" role="switch" aria-checked="false" aria-label="Toggle dark mode">{{ light_icon }}{{ dark_icon }}</div>
<div class="info">
<div class="module">{{ head_name }}</div>
<div class="toggle-version-container">
<span>{{ version }}</span>
<div id="dark-mode-toggle" role="switch" aria-checked="false" aria-label="Toggle dark mode">{{ light_icon }}{{ dark_icon }}</div>
</div>
{{ menu_icon }}
</div>
{{ menu_icon }}
<input type="text" id="search" placeholder="Search... (beta)" autocomplete="off">
</div>
</div>
<nav class="search"></nav>
<nav class="search hidden"></nav>
<nav class="content hidden">
<ul>
{{ toc_links }}

44
cmd/tools/vdoc/resources/doc.css
View File

@ -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,

32
cmd/tools/vdoc/resources/doc.js
View File

@ -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;