curben
/
blog
mirror of https://gitlab.com/curben/blog
1
0
Fork 0
Code Issues Releases Wiki Activity

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:
curben 2019-06-01 18:51:51 +09:30
parent 035dc384ee
commit 60d62f94f3
4 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
source/_posts/how-to-embed-svg.md
View File

@ -12,7 +12,7 @@ Website usually embed SVG using `<img>` tag or directly use the `<svg>` tag. Usi
## Embed SVG file ## 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 ```html
<svg viewBox="0 0 512 512"> <svg viewBox="0 0 512 512">

17
themes/typing/layout/_partial/header.ejs
View File

@ -23,9 +23,20 @@
<label for="mobile-menu-toggle"><a class="no-underline">&#9776; Menu</a></label> <label for="mobile-menu-toggle"><a class="no-underline">&#9776; Menu</a></label>
<input id="mobile-menu-toggle" type="checkbox"/> <input id="mobile-menu-toggle" type="checkbox"/>
<ul class="mobile-nav-link"> <ul class="mobile-nav-link">
<% for (let i in theme.menu) { %> <div class="searchContainer">
<a href="<%- url_for(theme.menu[i]) %>"><%= i %></a> <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>
</ul> </ul>
</nav> </nav>

5
themes/typing/source/css/typing.css
View File

@ -1407,7 +1407,10 @@ pre .keyword {
margin-left: 5px; margin-left: 5px;
padding: 10px; padding: 10px;
position: absolute; position: absolute;
text-align: left; }
.mobile-nav-link-a {
text-align: center;
} }
/* search bar */ /* search bar */

11
themes/typing/source/js/typing.js
View File

@ -1,10 +1,17 @@
// Search button function // Search button function
const searchClick = document.getElementById('searchClick') const searchClick = document.getElementById('searchClick')
searchClick.onclick = function () { searchClick.addEventListener('click', () => {
window.open('https://gitlab.com/search?utf8=%E2%9C%93&search=' + window.open('https://gitlab.com/search?utf8=%E2%9C%93&search=' +
document.getElementById('searchTxt').value + document.getElementById('searchTxt').value +
'&group_id=&project_id=8306723&search_code=true&repository_ref=master') '&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. * Copy button and Cloudinary functions.