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. - Colorize and improve failing tests output.
- Fix `go` with a generic function: `go test<string>(c, 'abcd')`. - 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. - 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 ## V 0.2.1
*30 Dec 2020* *30 Dec 2020*

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

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

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

@ -149,11 +149,6 @@ body {
fill: #fff; fill: #fff;
fill: var(--menu-toggle-icon-color); 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 { .doc-nav > .heading-container {
position: relative; position: relative;
/* IE11 */ /* IE11 */
@ -165,31 +160,35 @@ body {
z-index: 10; z-index: 10;
} }
.doc-nav > .heading-container > .heading { .doc-nav > .heading-container > .heading {
display: flex;
flex-direction: column;
}
.doc-nav > .heading-container > .heading > .info {
display: flex; display: flex;
padding: 0 1rem; padding: 0 1rem;
height: 56px; height: 56px;
} }
.doc-nav > .heading-container > .heading > .module { .doc-nav > .heading-container > .heading > .info > .module {
font-size: 1.6rem; font-size: 1.6rem;
font-weight: 500; font-weight: 500;
margin: 0; margin: 0;
} }
.doc-nav > .heading-container > .heading > .toggle-version-container { .doc-nav > .heading-container > .heading > .info > .toggle-version-container {
display: flex; display: flex;
align-items: center; 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; cursor: pointer;
fill: #fff; fill: #fff;
display: flex; display: flex;
visibility: hidden; 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; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
} }
.doc-nav > .heading-container > .heading > #search { .doc-nav > .heading-container > .heading > #search {
margin-top: 1rem; margin: 0.6rem 1.2rem 1rem 1.2rem;
border: none; border: none;
border-radius: 0.2rem; border-radius: 0.2rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
@ -198,8 +197,6 @@ body {
background-color: var(--menu-search-background-color); background-color: var(--menu-search-background-color);
color: #fff; color: #fff;
color: var(--menu-search-text-color); color: var(--menu-search-text-color);
margin-left: -0.6rem;
margin-right: -0.6rem;
} }
.doc-nav > .heading-container > .heading > #search::placeholder { .doc-nav > .heading-container > .heading > #search::placeholder {
color: #edf2f7; color: #edf2f7;
@ -265,7 +262,7 @@ body {
.doc-nav > .content a:hover { .doc-nav > .content a:hover {
text-decoration: underline; text-decoration: underline;
} }
.doc-nav .search { .doc-nav .search.hidden {
display: none; display: none;
} }
.doc-nav .search li { .doc-nav .search li {
@ -619,17 +616,20 @@ pre {
.doc-nav.hidden { .doc-nav.hidden {
height: auto; 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; align-items: center;
} }
.doc-nav > .heading-container > .heading > .toggle-version-container { .doc-nav > .heading-container > .heading > .info > .toggle-version-container {
flex-grow: 1; flex-grow: 1;
padding: 0 1rem; padding: 0 1rem;
justify-content: space-between; justify-content: space-between;
} }
.doc-nav > .heading-container > .heading > #search {
display: none;
}
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
@ -642,19 +642,19 @@ pre {
.doc-nav #toggle-menu { .doc-nav #toggle-menu {
display: none; display: none;
} }
.doc-nav > .heading-container > .heading { .doc-nav > .heading-container > .heading > .info {
height: auto; height: auto;
padding: 1rem 2rem; padding: 1rem 2rem 0 2rem;
flex-direction: column-reverse; flex-direction: column-reverse;
justify-content: center; justify-content: center;
} }
.doc-nav > .heading-container > .heading > .toggle-version-container { .doc-nav > .heading-container > .heading > .info > .toggle-version-container {
align-items: center; align-items: center;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
display: flex; display: flex;
flex-direction: row-reverse; 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; margin-right: auto;
} }
.doc-nav .content.show, .doc-nav .content.show,

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

@ -53,13 +53,20 @@ function setupScrollSpy() {
function setupMobileToggle() { function setupMobileToggle() {
var toggle = document.getElementById('toggle-menu'); var toggle = document.getElementById('toggle-menu');
toggle.addEventListener('click', function(ev) { toggle.addEventListener('click', function(ev) {
document.querySelectorAll('.doc-nav').forEach(function(el) { var docNav = document.querySelector('.doc-nav');
el.classList.toggle('hidden'); var isHidden = docNav.classList.contains('hidden');
}); docNav.classList.toggle('hidden');
document.querySelectorAll('.doc-nav .content').forEach(function(el) { var search = document.querySelector('.doc-nav > .search');
el.classList.toggle('hidden'); console.log(search);
el.classList.toggle('show'); 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 === '') { if (searchValue === '') {
// reset to default // reset to default
menu.style.display = ''; 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) { } else if (searchValue.length > 2) {
// search for less than 3 characters can display too much results // search for less than 3 characters can display too much results
search.innerHTML = ''; search.innerHTML = '';
menu.style.display = 'none'; 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 // cache length for performance
var foundModule = false; var foundModule = false;
var searchModuleIndexLength = searchModuleIndex.length; var searchModuleIndexLength = searchModuleIndex.length;