Skip to content

GitLab

Genesys Backend
Genesys Backend
Commit a92e9160 authored by Maxym Borodenko's avatar Maxym Borodenko Committed by Matija Obreza
Browse files
Options

When page zoom equals 100%, menu items hidden in burger

parent 1ccff8b7
Hide whitespace changes
Inline Side-by-side
Showing with 215 additions and 13 deletions
src/main/sourceapp/1/js/crophub.js
View file @ a92e9160
......@@ -677,14 +677,72 @@ var XUtil = {
/* jshint ignore:end */
$(document).click(function(e) {
if (!$(e.target).is($('#navigation-menu')) && !$(e.target).is($('.humburger-btn'))) {
if (!$(e.target).is($('#navigation-menu')) && !$(e.target).is($('.humburger-btn')) && !$(e.target).is($('.js-search-input'))) {
if ($('#navbar').hasClass('in')) {
$('#navbar').removeClass('in');
}
}
});
$(window).resize(function() {
var windowWidth = window.innerWidth;
if (windowWidth <= 989) {
$('.header-search').show();
$('.header-search-desktop').hide();
} else {
$('.header-search').hide();
$('.header-search-desktop').show();
}
});
$(document).ready(function() {
var submitIcon = $('.searchbox-icon');
var submitSubmit= $('.searchbox-submit');
var inputBox = $('.searchbox-input');
var searchBox = $('.searchbox');
var isOpen = false;
submitIcon.click(function(){
if (isOpen === false){
searchBox.addClass('searchbox-open');
submitIcon.css('background', '#3e3c37');
submitSubmit.css('background', '#3e3c37');
inputBox.focus();
isOpen = true;
} else {
searchBox.removeClass('searchbox-open');
inputBox.focusout();
isOpen = false;
setTimeout(function () {
submitIcon.css('background', '#2b2924');
submitSubmit.css('background', '#2b2924');
}, 100);
}
});
submitIcon.mouseup(function(){
return false;
});
searchBox.mouseup(function(){
return false;
});
$(document).mouseup(function(){
if (isOpen){
$('.searchbox-icon').css('display','block');
submitIcon.click();
}
});
$('body').on('input', '.searchbox-input', function() {
var inputVal = $('.searchbox-input').val();
inputVal = $.trim(inputVal).length;
if (inputVal !== 0){
$('.searchbox-icon').css('display','none');
} else {
$('.searchbox-input').val('');
$('.searchbox-icon').css('display','block');
}
});
$('body').on('click', '.get_widget', function() {
var clientId = $(this).val();
$.ajax('/' + document.documentElement.lang + '/get_widget', {
......
src/main/sourceapp/1/styles/genesys.scss
View file @ a92e9160
......@@ -1276,6 +1276,91 @@ $light-font-family: 'Roboto-Light';
}
.header-search {
display: none;
}
.searchbox {
min-width: 50px;
width: 0;
height: 44px;
float: right;
overflow: hidden;
margin-top: 17px;
margin-right: 12px;
position: absolute;
right: 0;
-webkit-transition: cubic-bezier(.06,.14,.34,1.97) width 0.4s;
-moz-transition: cubic-bezier(.06,.14,.34,1.97) width 0.4s;
-ms-transition: cubic-bezier(.06,.14,.34,1.97) width 0.4s;
-o-transition: cubic-bezier(.06,.14,.34,1.97) width 0.4s;
transition: cubic-bezier(.06,.14,.34,1.97) width 0.4s;
&:after {
color: #6d6c69;
content: "\f002";
font-family: FontAwesome;
font-size: 20px;
position: absolute;
top: -4px;
width: 26px;
height: 100%;
line-height: 52px;
pointer-events: none;
right: 5px;
}
}
.searchbox-input {
top: 0;
right: 0;
border: 0;
outline: 0;
background: #3e3c37;
width: 100%;
height: 50px;
margin: 0;
padding: 0 55px 0 8px;
font-size: 18px;
font-family: Roboto-Medium, serif;
color: #6d6c69;
}
.searchbox-input::-webkit-input-placeholder {
color: #6d6c69;
}
.searchbox-input:-moz-placeholder {
color: #6d6c69;
}
.searchbox-input::-moz-placeholder {
color: #6d6c69;
}
.searchbox-input:-ms-input-placeholder {
color: #6d6c69;
}
.searchbox-icon, .searchbox-submit {
width: 50px;
height: 50px;
display: block;
position: absolute;
top: 0;
font-size: 22px;
right: 0;
padding: 0;
margin: 0;
border: 0;
outline: 0;
line-height: 50px;
text-align: center;
cursor: pointer;
color: #6d6c69;
background: #2b2924;
}
.searchbox-open {
width: 467px;
}
}
//LTR and RTL rules outside genesys-page class
......@@ -1289,6 +1374,52 @@ $light-font-family: 'Roboto-Light';
}
}
.search-wrap {
position: relative;
float: right;
html[dir="rtl"] & {
float: left;
}
.searchbox {
html[dir="rtl"] & {
right: initial;
float: left;
left: 0
}
&:after {
html[dir="rtl"] & {
right: initial;
left: 0;
}
}
}
.searchbox-input {
html[dir="rtl"] & {
right: initial;
left: 0;
padding: 0 8px 0 0;
}
}
.searchbox-submit {
html[dir="rtl"] & {
right: initial;
left: 0;
}
}
.searchbox-icon {
html[dir="rtl"] & {
right: initial;
left: 0;
}
}
}
//forms
form.form-horizontal .form-group {
html[dir="ltr"] & {
......@@ -3494,7 +3625,7 @@ table.accessions {
}
}
//
@media (min-width: 990px) and (max-width: 1919px) {
@media (min-width: 990px) and (max-width: 1288px) {
.genesys-page, .admin-page {
.navbar-collapse.collapse, .navbar-collapse.collapsing {
......@@ -3626,7 +3757,7 @@ table.accessions {
}
}
@media (max-width: 1919px) {
@media (max-width: 1288px) {
.genesys-page .nav-menu .active {
background-color: #33322D;
}
......@@ -4448,14 +4579,14 @@ table.accessions {
}
}
@media (min-width: 1920px) {
@media (min-width: 1289px) {
#navbar {
> div:first-child {
display: flex;
#navigation-menu {
display: flex;
justify-content: center;
justify-content: flex-start;
width: 100%;
}
}
......@@ -4653,6 +4784,7 @@ table.accessions {
}
&#navbar .header-search {
display: block;
float: none;
padding: 0px;
position: absolute;
......@@ -4673,6 +4805,10 @@ table.accessions {
}
}
}
&#navbar .header-search-desktop {
display: none;
}
}
#content {
......@@ -5559,7 +5695,7 @@ table.accessions {
}
}
@media (min-width: 1920px) {
@media (min-width: 1289px) {
.genesys-page {
#content .intro-text {
max-width: 625px;
......
src/main/webapp/WEB-INF/decorator/1/admin.jsp
View file @ a92e9160
......@@ -66,7 +66,7 @@
<a class="navbar-brand nav-logo clearfix" href="<c:url value="/admin/" />"><img src="/html/1/images/GENESYS-ICON.svg" /><img src="/html/1/images/GENESYS-LOGO.svg" /></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<div class="col-md-7 no-space">
<div class="col-md-7 col-lg-10 no-space">
<div class="navbar-header">
<button type="button" class="humburger-btn navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
......@@ -135,7 +135,7 @@
</ul>
</div>
<div class="col-md-5 no-space">
<div class="col-md-5 col-lg-2 no-space">
<ul class="nav navbar-nav navbar-right">
<%@ include file="languages.jspf" %>
</ul>
......
src/main/webapp/WEB-INF/decorator/1/menu.jsp
View file @ a92e9160
......@@ -13,7 +13,7 @@
<a class="navbar-brand nav-logo clearfix" href="<c:url value="/welcome" />"><img src="<c:url value="/html/1/images/GENESYS-ICON.svg" />" /><img src="<c:url value="/html/1/images/GENESYS-LOGO.svg" />" /></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<div class="col-md-6 no-space">
<div class="col-md-6 col-lg-9 no-space">
<div class="navbar-header">
<button type="button" class="humburger-btn navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
......@@ -131,7 +131,7 @@
</li> --%>
</ul>
</div>
<div class="col-md-6 no-space">
<div class="col-md-6 col-lg-3 no-space">
<ul class="nav navbar-nav navbar-right">
<%@ include file="languages.jspf" %>
......@@ -228,13 +228,21 @@
<div class="header-search pull-left">
<form action="/acn/search2" class="form-inline">
<div class="form-group">
<input type="text" name="q" class="form-control" placeholder="Search Genesys..." />
<input name="q" class="form-control js-search-input" placeholder="Search Genesys..." />
<input type="submit" class="btn btn-primary" value="" />
</div>
</form>
</div>
</div>
<div class="search-wrap">
<div class="header-search-desktop">
<form action="/acn/search2" class="searchbox">
<input type="search" name="q" class="searchbox-input" placeholder="Search Genesys..." />
<input type="submit" class="searchbox-submit" value="" />
<span class="searchbox-icon"></span>
</form>
</div>
</div>
</div>
</div>
<!--/.nav-collapse -->
</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