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 { .desktopmenu {
display: inline-block; display: inline-block;
} }
.inline {
display: inline-block !important;
}
.show-menu { .show-menu {
display: none; display: none;
i { i {
@@ -189,25 +192,79 @@ $mainMenuBottomBorder: none !default;
} }
} }
} }
#nav_customlink_container {
left: 10px;
.arrow-up {
margin-left: 82px;
display: block;
}
}
#nav_menu_container { #nav_menu_container {
left: 10px; top: 35px;
.nav_menu {
top: 9px;
}
.arrow-up { .arrow-up {
margin-left: 51px; left: 62px;
display: block; 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 { #nav_account_container {
position: relative;
right: 10px; 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 { .arrow-up {
margin-left: 147px; right: 23px;
display: block; display: block;
position: absolute;
} }
} }
#nav_notification_container { #nav_notification_container {

View File

@@ -122,8 +122,10 @@
</li> </li>
<div id="nav_customlink_container" class="desktopmenu"> <div id="nav_customlink_container" class="desktopmenu">
<div class="arrow-up"></div> <div class="arrow-up"></div>
<div class="nav-wrapper-box">
<ol class="nav_menu"></ol> <ol class="nav_menu"></ol>
</div> </div>
</div>
<div id="nav_notification_container"> <div id="nav_notification_container">
{% if app.getAuthenticator().isAuthenticated() and module == "prod" %} {% if app.getAuthenticator().isAuthenticated() and module == "prod" %}
<li id="notification_trigger"> <li id="notification_trigger">
@@ -203,8 +205,9 @@
</ol> </ol>
</div> </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="arrow-up"></div>
<div class="nav-wrapper-box">
<ol class="nav_menu"> <ol class="nav_menu">
<li class="menu-bar-item"> <li class="menu-bar-item">
@@ -226,7 +229,8 @@
</li> </li>
<li class="menu-bar-item"> <li class="menu-bar-item">
{% if app.getAuthenticator().isAuthenticated() %} {% 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"/> <img src="/assets/common/images/icons/menu-logout.png"/>
<span> <span>
{{ 'phraseanet:: deconnection' | trans }} {{ 'phraseanet:: deconnection' | trans }}
@@ -264,6 +268,7 @@
</ol> </ol>
</div> </div>
</div> </div>
</div>
{% if app.getAuthenticator().isAuthenticated() and module == "prod" %} {% if app.getAuthenticator().isAuthenticated() and module == "prod" %}
<div style="display:none;z-index:30000;" id="notification_box"> <div style="display:none;z-index:30000;" id="notification_box">
@@ -360,6 +365,7 @@
} }
if ($('#nav_customlink_container').is(":hidden")) { if ($('#nav_customlink_container').is(":hidden")) {
$('#nav_customlink_container').show(); $('#nav_customlink_container').show();
$('#nav_customlink_container').addClass('inline');
} }
if ($('#nav_account_container').is(":visible")) { if ($('#nav_account_container').is(":visible")) {
$('#nav_account_container').hide(); $('#nav_account_container').hide();
@@ -371,6 +377,7 @@
if ($('#nav_menu_container').is(":visible")) { if ($('#nav_menu_container').is(":visible")) {
$('#nav_menu_container').hide(); $('#nav_menu_container').hide();
} }
$('#nav_customlink_container').removeClass('inline');
} }
}); });