janis/shop-ejs-expressjs
1
0
Fork 0
mirror of https://github.com/DerTyp7/shop-ejs-expressjs.git synced 2025-10-29 20:42:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Header Searchbar center fix, Search page integration

Browse Source
This commit is contained in:
Ben PC
2022-03-30 09:17:42 +02:00
parent d990dd3db0
commit fb4e88e290
2 changed files with 55 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
static/css/header.css
View File

@@ -1,12 +1,23 @@
/* UTIL */ /* UTIL */
.vertical-center { .vertical-center {
float: left; float: left;
top: 50%; top: 50%;
position: relative; position: relative;
transform: translateY(-50%); transform: translateY(-50%);
} }
body {
margin: 0;
}
/* BACKGROUND */ /* BACKGROUND */
.headerDIV {
width: 100%;
height: 65px;
background-color: #414854;
margin: 0;
}
.headerDIV > div { .headerDIV > div {
height: 100%; height: 100%;
text-align: center; text-align: center;
@@ -16,7 +27,7 @@
/* LOGO PART */ /* LOGO PART */
.headerDIVLogo { .headerDIVLogo {
width: 35px; width: 20%;
} }
.headerDIVLogo > img { .headerDIVLogo > img {
float: left; float: left;
@@ -47,11 +58,21 @@
height: 30px; height: 30px;
} }
/* LOGIN PART */
.headerDIVLogin {
width: 20%;
}
.headerDIVLogin > button {
height: 30px;
float: right;
margin-right: 10px;
}
/* BUTTON PART */ /* BUTTON PART */
.headerDIVButton { .headerDIVUser {
float: right; float: right;
} }
.headerDIVButton button { .headerDIVUser button {
height: 30px; height: 30px;
float: right; float: right;
margin-right: 5px; margin-right: 5px;
@@ -77,20 +98,6 @@
background-color: rgb(206, 50, 50); background-color: rgb(206, 50, 50);
} }
.headerDIVUser > button:hover {
.headerDIVButton > button:hover {
background-color: rgb(23, 114, 167); background-color: rgb(23, 114, 167);
} }
.headerDIV {
width: 100%;
height: 65px;
background-color: #414854;
margin: 0;
}
@media only screen and (max-width: 800px) {
.headerDIVSearch {
}
}

34
views/partials/header.ejs
View File

@@ -1,10 +1,14 @@
<div class="headerDIV"> <div class="headerDIV">
<div class="headerDIVLogo"> <div class="headerDIVLogo">
<img style="cursor:pointer"onclick="window.open('/', '_self')" src="https://bock-drauf.com/wp-content/uploads/2019/09/amazon-logo-1024x576.png"> <img style="cursor:pointer" onclick="window.open('/', '_self')" src="https://bock-drauf.com/wp-content/uploads/2019/09/amazon-logo-1024x576.png">
</div><div class="headerDIVSearch"> </div>
<input placeholder="Suche" class="vertical-center"></input
><button class="vertical-center"><i class="material-icons">search</i></button> <div class="headerDIVSearch">
</div><div class="headerDIVButton"> <input placeholder="Suche" class="vertical-center" id="searchbar" value="<%=typeof search !== 'undefined' ? search : '' %>"></input>
<button class="vertical-center" onclick="doSearch()"><i class="material-icons">search</i></button>
</div>
<div class="headerDIVUser">
<% if(user){ %> <% if(user){ %>
<button class="vertical-center" id="headerBtnLogout" onclick="window.open('/logout', '_self')">Log out</button> <button class="vertical-center" id="headerBtnLogout" onclick="window.open('/logout', '_self')">Log out</button>
<button class="vertical-center" onclick="window.open('/account', '_self')">Ihr Konto</button> <button class="vertical-center" onclick="window.open('/account', '_self')">Ihr Konto</button>
@@ -13,4 +17,22 @@
<button class="vertical-center" onclick="window.open('/login', '_self')">Login</button> <button class="vertical-center" onclick="window.open('/login', '_self')">Login</button>
<% } %> <% } %>
</div> </div>
</div> </div>
<script>
var input = document.getElementById("searchbar");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
doSearch();
}
});
function doSearch() {
var val = input.value.trim()
if (val) {
window.open('/search/'+val, '_self')
}
}
</script>