hugo/panaetius-theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding new searchbox

Browse Source
This commit is contained in:
Daniel Tomlinson
2020-06-06 04:28:12 +01:00
parent 2f82ed660b
commit 75e0f67a2c
3 changed files with 51 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
layouts/_default/baseof.html
View File

@@ -11,7 +11,6 @@
<body> <body>
{{ partial "header.html" . }} {{ partial "header.html" . }}
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
{{ partial "foot.html" . }} {{ partial "foot.html" . }}

15
layouts/search/single.html
View File

@@ -8,14 +8,22 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="search-input-wrap"> <form id="search-form" method="get" action="/search" method="POST" class="form-inline">
<input type="text" name="q" id="search" class="form-control" placeholder="Search" style="width: 20%;">
<div class="input-group">
<div class="input-group-append">
<button type="submit" id="search-button" class="btn btn-secondary"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
<!-- <div class="search-input-wrap">
<form id="search-form" method="get" action=""> <form id="search-form" method="get" action="">
<input id="search" name="q" type="text" /> <input id="search" name="q" type="text" />
<br> <br>
<button id="search-button" type="submit" class="button">Search</button> <button id="search-button" type="submit" class="button">Search</button>
<a id="search-clear" href="/search/">Clear</a> <a id="search-clear" href="/search/">Clear</a>
</form> </form>
</div> </div> -->
<br> <br>
<div id="app-search" class="row listrecent"></div> <div id="app-search" class="row listrecent"></div>
</div> </div>
@@ -33,12 +41,13 @@
{{ end }} {{ end }}
{{ $p | jsonify }} {{ $p | jsonify }}
</div> </div>
<script src="{{ print "dist/" "lunr.b93de9e9609074d666f5123e866e25ed..min.js" | relURL }}"></script> <script src="{{ print "dist/" "lunr.b93de9e9609074d666f5123e866e25ed.min.js" | relURL }}"></script>
<script> <script>
const posts = JSON.parse( const posts = JSON.parse(
{{ $p | jsonify }} {{ $p | jsonify }}
); );
const query = new URLSearchParams(window.location.search); const query = new URLSearchParams(window.location.search);
console.log(query)
const searchString = query.get('q'); const searchString = query.get('q');
document.querySelector('#search').value = searchString; document.querySelector('#search').value = searchString;
const $target = document.querySelector('#app-search'); const $target = document.querySelector('#app-search');

78
src/scss/search.scss
View File

@@ -1,43 +1,43 @@
.searchbar { // .searchbar {
margin-bottom: auto; // margin-bottom: auto;
margin-top: auto; // margin-top: auto;
height: 60px; // height: 60px;
background-color: #353b48; // background-color: #353b48;
border-radius: 30px; // border-radius: 30px;
padding: 10px; // padding: 10px;
} // }
.search_input { // .search_input {
color: white; // color: white;
border: 0; // border: 0;
outline: 0; // outline: 0;
background: none; // background: none;
width: 0; // width: 0;
caret-color: transparent; // caret-color: transparent;
line-height: 40px; // line-height: 40px;
transition: width 0.4s linear; // transition: width 0.4s linear;
} // }
.searchbar:hover>.search_input { // .searchbar:hover>.search_input {
padding: 0 10px; // padding: 0 10px;
width: 450px; // width: 450px;
caret-color: red; // caret-color: red;
transition: width 0.4s linear; // transition: width 0.4s linear;
} // }
.searchbar:hover>.search_icon { // .searchbar:hover>.search_icon {
background: white; // background: white;
color: #e74c3c; // color: #e74c3c;
} // }
.search_icon { // .search_icon {
height: 40px; // height: 40px;
width: 40px; // width: 40px;
float: right; // float: right;
display: flex; // display: flex;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
border-radius: 50%; // border-radius: 50%;
color: white; // color: white;
text-decoration: none; // text-decoration: none;
} // }