mirror of https://gitlab.com/curben/blog
feat: implement search bar
a crude search bar by piggybacking on gitlab search. future enhancement is implement Algolia.
This commit is contained in:
parent
8614f62257
commit
a47ab65b54
|
@ -4,6 +4,11 @@
|
|||
<% for (let i in theme.menu) { %>
|
||||
<a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
|
||||
<% } %>
|
||||
|
||||
<div class="searchContainer">
|
||||
<input class="searchBox" type="text" id="search" placeholder="Search...">
|
||||
<a class="searchBtn" href="#" onClick="window.open('https://gitlab.com/search?utf8=%E2%9C%93&search=' + document.getElementById('search').value + '&group_id=&project_id=8306723&search_code=true&repository_ref=master')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg><!-- Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --></a>
|
||||
</div>
|
||||
</nav>
|
||||
<%/* Nav menu for mobile */%>
|
||||
<nav class="mobile-nav">
|
||||
|
|
|
@ -1410,6 +1410,54 @@ pre .keyword {
|
|||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* search bar */
|
||||
.searchContainer{
|
||||
width: 10em;
|
||||
color:#d8d8d8;
|
||||
background-color:#333;
|
||||
outline: 0;
|
||||
float: right;
|
||||
height: 1.8em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* inline-block to position them in same line */
|
||||
.searchBox,
|
||||
.searchBtn{
|
||||
display:inline-block;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
/* hide the border and fill the height to parent's */
|
||||
.searchBox {
|
||||
border: 0;
|
||||
height:100%;
|
||||
width: 85%;
|
||||
padding-left: 0.2em;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* highlight the text box when focused */
|
||||
.searchBox:focus {
|
||||
border: 1px solid #1abc9c;
|
||||
}
|
||||
|
||||
/* align the button to center */
|
||||
.searchBtn {
|
||||
width: 10%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(30%, -50%);
|
||||
}
|
||||
|
||||
/* fill the svg with parent's font color */
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
font-size: 1.2em;
|
||||
|
|
Loading…
Reference in New Issue