mirror of https://gitlab.com/curben/blog
feat: add search function to mobile page
* add a gap after search form to prevent misclick * use addEventListener() instead of onclick() - https://stackoverflow.com/a/34216918
This commit is contained in:
parent
035dc384ee
commit
60d62f94f3
|
@ -12,7 +12,7 @@ Website usually embed SVG using `<img>` tag or directly use the `<svg>` tag. Usi
|
|||
|
||||
## Embed SVG file
|
||||
|
||||
Utilise `<use>` tag to embed an SVG file in `svg`. For example in this blog, I have a search button on the top right corner (I haven't implement it for mobile). This is how I embed the [search.svg](/svg/search.svg):
|
||||
Utilise `<use>` tag to embed an SVG file in `svg`. For example in this blog, I have a search button on the top right corner. This is how I embed the [search.svg](/svg/search.svg):
|
||||
|
||||
```html
|
||||
<svg viewBox="0 0 512 512">
|
||||
|
|
|
@ -23,9 +23,20 @@
|
|||
<label for="mobile-menu-toggle"><a class="no-underline">☰ Menu</a></label>
|
||||
<input id="mobile-menu-toggle" type="checkbox"/>
|
||||
<ul class="mobile-nav-link">
|
||||
<% for (let i in theme.menu) { %>
|
||||
<a href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
|
||||
<% } %>
|
||||
<div class="searchContainer">
|
||||
<input class="searchBox" type="text" id="searchTxtMob" placeholder="Search...">
|
||||
<a class="searchBtn no-underline" id="searchClickMob" href="#">
|
||||
<svg viewBox="0 0 512 512">
|
||||
<title>Search</title>
|
||||
<desc>Search icon</desc>
|
||||
<use href="/svg/search.svg#search"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<p><br></p>
|
||||
<% for (let i in theme.menu) { %>
|
||||
<a class="mobile-nav-link-a" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
|
||||
<% } %>
|
||||
</ul>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
@ -1407,7 +1407,10 @@ pre .keyword {
|
|||
margin-left: 5px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.mobile-nav-link-a {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* search bar */
|
||||
|
|
|
@ -1,10 +1,17 @@
|
|||
// Search button function
|
||||
const searchClick = document.getElementById('searchClick')
|
||||
searchClick.onclick = function () {
|
||||
searchClick.addEventListener('click', () => {
|
||||
window.open('https://gitlab.com/search?utf8=%E2%9C%93&search=' +
|
||||
document.getElementById('searchTxt').value +
|
||||
'&group_id=&project_id=8306723&search_code=true&repository_ref=master')
|
||||
}
|
||||
}, false);
|
||||
|
||||
const searchClickMob = document.getElementById('searchClickMob')
|
||||
searchClickMob.addEventListener('click', () => {
|
||||
window.open('https://gitlab.com/search?utf8=%E2%9C%93&search=' +
|
||||
document.getElementById('searchTxtMob').value +
|
||||
'&group_id=&project_id=8306723&search_code=true&repository_ref=master')
|
||||
}, false)
|
||||
|
||||
/*
|
||||
* Copy button and Cloudinary functions.
|
||||
|
|
Loading…
Reference in New Issue