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>
{{ partial "header.html" . }}
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }}
{{ partial "foot.html" . }}

15
layouts/search/single.html
View File

@@ -8,14 +8,22 @@
</div>
<div class="row">
<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="">
<input id="search" name="q" type="text" />
<br>
<button id="search-button" type="submit" class="button">Search</button>
<a id="search-clear" href="/search/">Clear</a>
</form>
</div>
</div> -->
<br>
<div id="app-search" class="row listrecent"></div>
</div>
@@ -33,12 +41,13 @@
{{ end }}
{{ $p | jsonify }}
</div>
<script src="{{ print "dist/" "lunr.b93de9e9609074d666f5123e866e25ed..min.js" | relURL }}"></script>
<script src="{{ print "dist/" "lunr.b93de9e9609074d666f5123e866e25ed.min.js" | relURL }}"></script>
<script>
const posts = JSON.parse(
{{ $p | jsonify }}
);
const query = new URLSearchParams(window.location.search);
console.log(query)
const searchString = query.get('q');
document.querySelector('#search').value = searchString;
const $target = document.querySelector('#app-search');

78
src/scss/search.scss
View File

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