add breakpoint for small display on custom links and account

make width of dialog dynamic
This commit is contained in:
Mike Ng
2018-06-05 14:28:17 +04:00
parent 0a85145ad2
commit 233e6f2a6e
2 changed files with 114 additions and 50 deletions

View File

@@ -34,6 +34,9 @@ $mainMenuBottomBorder: none !default;
.desktopmenu {
display: inline-block;
}
.inline {
display: inline-block !important;
}
.show-menu {
display: none;
i {
@@ -189,25 +192,79 @@ $mainMenuBottomBorder: none !default;
}
}
}
#nav_customlink_container {
left: 10px;
.arrow-up {
margin-left: 82px;
display: block;
}
}
#nav_menu_container {
left: 10px;
top: 35px;
.nav_menu {
top: 9px;
}
.arrow-up {
margin-left: 51px;
left: 62px;
display: block;
position: absolute;
}
}
#nav_customlink_container {
display: none;
position: relative;
left: 10px;
width: auto;
.nav-wrapper-box {
position: absolute;
background: #d8d8d8;
border-radius: 5px;
padding-right: 10px;
padding-left: 10px;
top: 9px;
.nav_menu {
position: relative;
li.menu-bar-item {
width: 100%;
left: 0;
}
li.menu-bar-item a {
> span {
padding: 0;
display: inline-block;
}
}
}
}
.arrow-up {
left: 82px;
display: block;
position: absolute;
}
}
#nav_account_container {
position: relative;
right: 10px;
width: auto;
.nav-wrapper-box {
position: absolute;
right: 10px;
background: #d8d8d8;
border-radius: 5px;
padding-right: 10px;
padding-left: 10px;
top: 9px;
.nav_menu {
position: relative;
li.menu-bar-item {
width: 100%;
left: 0;
}
li.menu-bar-item a {
> span {
padding: 0;
display: inline-block;
}
}
}
}
.arrow-up {
margin-left: 147px;
right: 23px;
display: block;
position: absolute;
}
}
#nav_notification_container {

View File

@@ -122,8 +122,10 @@
</li>
<div id="nav_customlink_container" class="desktopmenu">
<div class="arrow-up"></div>
<div class="nav-wrapper-box">
<ol class="nav_menu"></ol>
</div>
</div>
<div id="nav_notification_container">
{% if app.getAuthenticator().isAuthenticated() and module == "prod" %}
<li id="notification_trigger">
@@ -203,8 +205,9 @@
</ol>
</div>
<div class="PNB right mobilemenu" id="nav_account_container" style="left:auto;overflow:hidden;">
<div class="PNB right mobilemenu" id="nav_account_container">
<div class="arrow-up"></div>
<div class="nav-wrapper-box">
<ol class="nav_menu">
<li class="menu-bar-item">
@@ -226,7 +229,8 @@
</li>
<li class="menu-bar-item">
{% if app.getAuthenticator().isAuthenticated() %}
<a href="{{ path('logout', { 'redirect' : '..' ~ app['request'].getPathInfo() }) }}" target="_self">
<a href="{{ path('logout', { 'redirect' : '..' ~ app['request'].getPathInfo() }) }}"
target="_self">
<img src="/assets/common/images/icons/menu-logout.png"/>
<span>
{{ 'phraseanet:: deconnection' | trans }}
@@ -263,6 +267,7 @@
</li>
</ol>
</div>
</div>
</div>
{% if app.getAuthenticator().isAuthenticated() and module == "prod" %}
@@ -360,6 +365,7 @@
}
if ($('#nav_customlink_container').is(":hidden")) {
$('#nav_customlink_container').show();
$('#nav_customlink_container').addClass('inline');
}
if ($('#nav_account_container').is(":visible")) {
$('#nav_account_container').hide();
@@ -371,6 +377,7 @@
if ($('#nav_menu_container').is(":visible")) {
$('#nav_menu_container').hide();
}
$('#nav_customlink_container').removeClass('inline');
}
});