Commit b39e6fd0 authored by onny's avatar onny
Browse files

further enhanced search box

parent 03da430a
......@@ -80,6 +80,22 @@ header > div {
padding-left: 30px;
}
.searchBox {
width: 100%;
border: none;
outline: none;
font-size: 14px;
}
.searchArea {
display: none;
width: 100%;
border-bottom: 1px solid rgb(0, 99, 161);
padding-left: 2px;
padding-bottom: 5px;
margin-bottom: -5px;
}
.lang {
height: 100%;
display:flex;
......@@ -118,13 +134,6 @@ header > div {
margin-right: 15px;
}
.searchbox {
width: 100%;
border: none;
outline: none;
font-size: 14px;
}
.dropdown {
position: relative;
display: inline-block;
......
......@@ -2,7 +2,9 @@ document.addEventListener("DOMContentLoaded", function() {
window.onclick = function(event) {
if (event.target.closest('.search')) {
document.getElementsByClassName("searchArea")[0].classList.toggle("show");
document.getElementsByClassName("search")[0].classList.toggle("active");
document.getElementsByClassName("searchBox")[0].focus();
searchIcon = document.getElementsByClassName('fa-search')[0];
if (searchIcon) {
......@@ -16,6 +18,11 @@ document.addEventListener("DOMContentLoaded", function() {
} else {
searchArea = document.getElementsByClassName("searchArea")[0];
if (searchArea.classList.contains("show")) {
searchArea.classList.remove('show');
};
searchBtn = document.getElementsByClassName("search")[0];
if (searchBtn.classList.contains('active')) {
searchBtn.classList.remove('active');
......
......@@ -23,7 +23,9 @@
</div>
</div>
<div class='search'>
<input class='searchbox' type='text' placeholder="{% trans "Search" %}">
<div class='searchArea'>
<input class='searchBox' type='text' placeholder="{% trans "Search" %}">
</div>
<span class='icon icon-search'>
<i class="fa fa-search"></i>
</span>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment