Commit 7e36cc8a authored by onny's avatar onny

further responsive design enhancements

parent a1941841
......@@ -121,10 +121,13 @@ table th {
max-width: 750px;
/* hide sidebar */
}
.login > span {
.sidebar {
display: none;
}
.login .fa-margin {
margin-right: 0px;
}
@media (max-width: 760px) {
header > div, main > div, footer > div {
max-width: 500px;
}
}
......@@ -21,13 +21,17 @@
margin-left:-1px;
}
.logo {
.menu {
display: none;
}
.logo-text {
font-weight: bold;
text-transform: lowercase;
font-size: 25px;
}
.logo > div > div {
.logo-text > div {
display: inline-block;
font-stretch: ultra-condensed;
color: #f08b00;
......@@ -38,6 +42,13 @@
flex: 1;
}
.search .logo-text {
justify-content: center;
flex: 1;
text-align: center;
margin-left: -30px;
}
.search .noBorder {
border-left: 0px;
}
......@@ -76,6 +87,10 @@
display: none;
}
.searchArea .inputField:hover .search .logo-text {
display: none;
}
.inputField {
width: 100%;
border: none;
......@@ -163,6 +178,10 @@
margin-right: 15px;
}
.fa-margin-small {
margin-right: 7px;
}
.dropdown {
position: relative;
display: inline-block;
......@@ -208,5 +227,30 @@
box-shadow: 12px 0 15px -4px #d2cdcd, -12px 0 15px -4px #d2cdcd;
}
@media (max-width: 1000px) {
.login > span {
display: none;
}
.login .fa-margin {
margin-right: 0px;
}
.menu {
display: flex;
}
.logo {
display: none;
}
.search .logo-text {
display: flex;
}
}
@media (max-width: 760px) {
.login, .lang {
display: none;
}
}
.show {display: block;}
.showFlex {display: flex;}
.hide {display: none;}
function toggle_search(state) {
if (state) {
/* open search box */
searchMenu = document.getElementsByClassName("search")[0];
document.getElementsByClassName("searchArea")[0].classList.add("showFlex");
document.getElementsByClassName("search")[0].classList.add("active");
searchMenu.classList.add("active");
document.getElementsByClassName("icon-search")[0].classList.add("noBorder");
document.getElementsByClassName("inputField")[0].focus();
searchIcon = document.getElementsByClassName('ion-md-search-big')[0];
searchIcon.classList.remove('ion-md-search');
searchIcon.classList.add('ion-md-close');
searchLogo = document.querySelector('.search .logo-text');
searchLogo.classList.add('hide');
} else {
/* close search box */
searchMenu = document.getElementsByClassName("search")[0];
searchArea = document.getElementsByClassName("searchArea")[0];
searchArea.classList.remove('showFlex');
searchBtn = document.getElementsByClassName("search")[0];
searchBtn.classList.remove('active');
searchMenu.classList.remove('active');
iconSearch = document.getElementsByClassName("icon-search")[0];
iconSearch.classList.remove('noBorder');
searchIcon = document.getElementsByClassName('ion-md-search-big')[0];
searchIcon.classList.remove('ion-md-close');
searchIcon.classList.add('ion-md-search');
searchLogo = document.querySelector('.search .logo-text');
searchLogo.classList.remove('hide');
}
}
......
......@@ -20,8 +20,11 @@
<content id="app">
<header>
<div>
<div class='menu menuItem'>
<i class="icon ion-ios-menu"></i>
</div>
<div class='logo menuItem'>
<div>
<div class='logo-text'>
open<div>saai</div>
</div>
</div>
......@@ -29,6 +32,9 @@
<div class='searchArea'>
<input class='inputField' type='text' placeholder="{% trans "Search" %}">
<i class="icon ion-md-search"></i>
</div>
<div class='logo-text'>
open<div>saai</div>
</div>
<span class='icon-search'>
<i class="icon ion-md-search ion-md-search-big"></i>
......@@ -46,7 +52,7 @@
{% endfor %}
</div>
</div>
<i class="icon ion-ios-arrow-down fa-margin"></i>
<i class="icon ion-ios-arrow-down fa-margin-small"></i>
<span>{{ CURRENT_LANGUAGE_CODE }}</span>
</div>
<div class='login menuItem'>
......
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