Commit 4cd716f5 authored by onny's avatar onny

start implementing login popup, enhanced search box style & click handling

parent b39e6fd0
body {
margin: 0 !important;
padding: 0 !important;
font-family: 'Open Sans';
}
*{
......@@ -65,7 +66,7 @@ header > div {
justify-content: flex-end;
align-items: center;
padding: 10px 30px;
padding: 0px 30px;
border-right: 1px solid;
border-color: #d6d6d6;
flex: 1;
......@@ -73,6 +74,10 @@ header > div {
cursor: pointer;
}
.search .noBorder {
border-left: 0px;
}
.icon-search {
height: 100%;
border-left: 1px solid;
......@@ -88,12 +93,18 @@ header > div {
}
.searchArea {
display: none;
width: 100%;
border-bottom: 1px solid rgb(0, 99, 161);
padding-left: 2px;
padding-bottom: 5px;
margin-bottom: -5px;
display: flex;
align-items: center;
display: none;
}
.searchArea .fa-search {
font-size: 16px;
}
.lang {
......@@ -118,14 +129,62 @@ header > div {
cursor: pointer;
}
.icon {
text-transform: uppercase;
.loginOverlay {
position: absolute;
width: 100%;
height: 100%;
background-color: #373737;
top: 0px;
left: 0px;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.loginBox {
max-width: 570px;
max-height: 570px;
background-color: white;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0 0 15px;
}
.loginBox .header {
padding: 20px;
font-size: 25px;
font-weight: bold;
border-bottom: 1px solid #d6d6d6;
display: flex;
align-items: center;
}
.loginBox .header .title {
width: 100%;
}
.loginBox .header .fa {
font-size: 30px;
}
.loginBox .content {
text-align: center;
padding: 20px;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
}
.icon span {
text-transform: uppercase;
font-weight: bold;
}
.fa {
font-size: 20px;
}
......@@ -180,6 +239,7 @@ header > div {
}
.show {display: block;}
.showFlex {display: flex;}
main {
grid-row-start: 2;
......
document.addEventListener("DOMContentLoaded", function() {
window.onclick = function(event) {
console.log(event.target);
if (event.target.closest('.search')) {
document.getElementsByClassName("searchArea")[0].classList.toggle("show");
document.getElementsByClassName("search")[0].classList.toggle("active");
if (event.target.closest('.search') || event.target.closest('.fa-search-big')) {
document.getElementsByClassName("searchArea")[0].classList.add("showFlex");
document.getElementsByClassName("search")[0].classList.add("active");
document.getElementsByClassName("icon-search")[0].classList.add("noBorder");
document.getElementsByClassName("searchBox")[0].focus();
searchIcon = document.getElementsByClassName('fa-search')[0];
if (searchIcon) {
searchIcon.classList.remove('fa-search');
searchIcon.classList.add('fa-times');
} else {
searchIcon = document.getElementsByClassName('fa-times')[0];
searchIcon.classList.remove('fa-times');
searchIcon.classList.add('fa-search');
}
} else {
searchIcon = document.getElementsByClassName('fa-search-big')[0];
searchIcon.classList.remove('fa-search');
searchIcon.classList.add('fa-times');
};
if (! event.target.closest('.search') || event.target.closest('.fa-times')) {
searchArea = document.getElementsByClassName("searchArea")[0];
if (searchArea.classList.contains("show")) {
searchArea.classList.remove('show');
};
searchArea.classList.remove('showFlex');
searchBtn = document.getElementsByClassName("search")[0];
if (searchBtn.classList.contains('active')) {
searchBtn.classList.remove('active');
};
searchIcon = document.getElementsByClassName('fa-times')[0];
if (searchIcon) {
searchIcon.classList.remove('fa-times');
searchIcon.classList.add('fa-search');
};
searchBtn.classList.remove('active');
iconSearch = document.getElementsByClassName("icon-search")[0];
iconSearch.classList.remove('noBorder');
searchIcon = document.getElementsByClassName('fa-search-big')[0];
searchIcon.classList.remove('fa-times');
searchIcon.classList.add('fa-search');
};
if (event.target.closest('.lang')) {
......@@ -73,8 +62,17 @@ document.addEventListener("DOMContentLoaded", function() {
};
if (event.target.closest('.login')) {
document.getElementById("menu-login").classList.toggle("show");
document.getElementsByClassName("login")[0].classList.toggle("active");
console.log("login clicked");
menuProfile = document.getElementById("menu-profile")
if (menuProfile) {
menuProfile.classList.toggle("show");
document.getElementsByClassName("login")[0].classList.toggle("active");
} else {
document.getElementsByClassName("loginOverlay")[0].classList.toggle("showFlex");
};
} else {
loginBtn = document.getElementsByClassName("login")[0];
if (loginBtn.classList.contains('active')) {
......
......@@ -8,6 +8,7 @@
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon" />
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700' rel='stylesheet' type='text/css'>
<title>openArt</title>
</head>
<body>
......@@ -25,9 +26,10 @@
<div class='search'>
<div class='searchArea'>
<input class='searchBox' type='text' placeholder="{% trans "Search" %}">
<i class="fa fa-search"></i>
</div>
<span class='icon icon-search'>
<i class="fa fa-search"></i>
<i class="fa fa-search fa-search-big"></i>
</span>
</div>
<div class='lang'>
......@@ -52,15 +54,27 @@
{% if authenticated %}
<div class="dropdown">
<i class="fa fa-user"></i>
<div id="menu-login" class="dropdown-content dropdown-login">
<div id="menu-profile" class="dropdown-content dropdown-login">
ubezi@student.kit.edu
<hr>
<a href="/admin/logout">{% trans "Logout" %}</a>
</div>
</div>
</div>
{% else %}
<i class="fa fa-lock fa-margin"></i>
<span>{% trans "Sign In" %}</span>
<div class='loginOverlay'>
<div class='loginBox'>
<div class='header'>
<div class='title'>Sign In</div>
<i class="fa fa-times"></i>
</div>
<div class='content'>
<input type='email' placeholder="E-Mail *"></input><br>
<input type='password' placeholder="Password *"></input>
</div>
</div>
</div>
{% endif %}
</span>
</div>
......
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