Commit 6cfe9d71 authored by onny's avatar onny

clean up css and menu styling

parent 3e4f8c2a
......@@ -14,6 +14,23 @@ a {
cursor: pointer;
}
.btn {
border: none;
padding: 10px;
font-weight: bold;
font-size: 20px;
background-color: white;
border: 1px solid #d6d6d6;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
color: white;
background-color: #07239c;
border-color: #07239c;
}
content {
min-height: 100vh;
display: grid;
......@@ -48,6 +65,7 @@ header > div {
border-right: 1px solid #d6d6d6;
cursor: pointer;
padding: 0px 30px;
font-size: 16px;
}
.menuItem > * {
......@@ -88,7 +106,7 @@ header > div {
display: none;
}
.searchArea .searchBox {
.inputField {
width: 100%;
border: none;
outline: none;
......@@ -100,13 +118,13 @@ header > div {
}
.loginOverlay {
pointer-events: all;
position: absolute;
width: 100%;
height: 100%;
background-color: #373737;
top: 0px;
left: 0px;
display: flex;
justify-content: center;
align-items: center;
display: none;
......@@ -140,17 +158,29 @@ header > div {
}
.loginBox .content {
text-align: center;
padding: 20px;
display: flex;
align-items: center;
flex-direction: column;
}
.loginBox .content div, button, p {
padding-top: 30px;
max-width: 370px;
width: 100%;
}
.loginBox .content .inputArea {
width: 100%;
border-bottom: 1px solid;
padding-left: 2px;
padding-bottom: 5px;
margin-bottom: -5px;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
}
.icon span {
text-transform: uppercase;
font-weight: bold;
}
......@@ -169,12 +199,12 @@ header > div {
}
.dropdown-content {
pointer-events: all;
display: none;
position: absolute;
font-size: 13px;
color: #d2cdcd;
background-color: white;
box-shadow: 12px 0 15px -4px #d2cdcd, -12px 0 15px -4px #d2cdcd;
overflow: auto;
z-index: 1;
padding: 15px;
......
......@@ -58,14 +58,20 @@ document.addEventListener("DOMContentLoaded", function() {
};
if (event.target.matches('.login')) {
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')) {
loginBtn.classList.remove('active');
......@@ -79,6 +85,7 @@ document.addEventListener("DOMContentLoaded", function() {
}
}
}
}
});
......@@ -25,7 +25,7 @@
</div>
<div class='search menuItem'>
<div class='searchArea'>
<input class='searchBox' type='text' placeholder="{% trans "Search" %}">
<input class='inputField' type='text' placeholder="{% trans "Search" %}">
<i class="fa fa-search"></i>
</div>
<span class='icon icon-search'>
......@@ -38,7 +38,7 @@
<i class="fa fa-chevron-down fa-margin"></i>
{% get_current_language as CURRENT_LANGUAGE_CODE %}
<span>{{ CURRENT_LANGUAGE_CODE }}</span>
<div id="menu-lang" class="dropdown-content dropdown-lang">
<div id="menu-lang" class="dropdown-content dropdown-lang active">
{% get_available_languages as LANGUAGES %}
{% for lang_code, lang_name in LANGUAGES %}
{% if lang_code != CURRENT_LANGUAGE_CODE %}
......@@ -54,7 +54,7 @@
{% if authenticated %}
<div class="dropdown">
<i class="fa fa-user"></i>
<div id="menu-profile" class="dropdown-content dropdown-login">
<div id="menu-profile" class="dropdown-content dropdown-login active">
ubezi@student.kit.edu
<hr>
<a href="/admin/logout">{% trans "Logout" %}</a>
......@@ -66,12 +66,25 @@
<div class='loginOverlay'>
<div class='loginBox'>
<div class='header'>
<div class='title'>Sign In</div>
<div class='title'>{% trans "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 class='inputArea'>
<input type='email' class='inputField' placeholder="E-Mail *"></input>
</div>
<div class='inputArea'>
<input type='password' class='inputField' placeholder="{% trans "Password" %} *"></input>
</div>
<p>
<a href=#>{% trans "Forgot password?" %}</a>
</p>
<button class='btn' type='submit'>{% trans "Sign In" %}</button>
<p>
{% trans "Don't have an account? Sign up." %}
</p>
</div>
</div>
</div>
</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