hazza/Phraseanet
1
0
Fork 0
mirror of https://github.com/alchemy-fr/Phraseanet.git synced 2025-10-23 18:03:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

PHRAS-2608 #comment Fix custom-link of nav-bar on responsive, hide the Navigation bar if there is no sub menu #time 2h

Browse Source
This commit is contained in:
Harrys Ravalomanana
2019-05-28 15:30:10 +04:00
parent 3df03d8abf
commit 1eda490e65
2 changed files with 182 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
resources/www/_shared/styles/_main-menu.scss
View File

@@ -63,6 +63,9 @@ $mainMenuBottomBorder: none !default;
#mainLogo { #mainLogo {
margin:0 5px; margin:0 5px;
vertical-align: middle; vertical-align: middle;
@media screen and (max-width: 1064px) {
max-width: 100px;
}
} }
li { li {
display: inline-block; display: inline-block;
@@ -160,7 +163,6 @@ $mainMenuBottomBorder: none !default;
} }
#nav_menu_container, #nav_customlink_container, #nav_account_container { #nav_menu_container, #nav_customlink_container, #nav_account_container {
position: absolute; position: absolute;
top: 35px;
z-index: 1000; z-index: 1000;
.nav_menu { .nav_menu {
z-index: 1000; z-index: 1000;
@@ -209,13 +211,13 @@ $mainMenuBottomBorder: none !default;
} }
} }
#nav_menu_container { #nav_menu_container {
left: 10px; left: 0;
width: 172px; width: 172px;
.nav_menu { .nav_menu {
top: 9px; top: 9px;
} }
.arrow-up { .arrow-up {
left: 52px; left: 10px;
display: block; display: block;
position: absolute; position: absolute;
} }
@@ -223,7 +225,7 @@ $mainMenuBottomBorder: none !default;
#nav_customlink_container { #nav_customlink_container {
display: none; display: none;
position: relative; position: relative;
left: 10px; left: 0;
width: auto; width: auto;
.nav-wrapper-box { .nav-wrapper-box {
position: absolute; position: absolute;
@@ -235,19 +237,21 @@ $mainMenuBottomBorder: none !default;
.nav_menu { .nav_menu {
position: relative; position: relative;
li.menu-bar-item { li.menu-bar-item {
width: 100%; /* width: 100%;
left: 0; left: 0;*/
} }
li.menu-bar-item a { li.menu-bar-item a {
> span { > span {
padding: 0; padding: 0;
display: inline-block; display: inline-block;
max-width: 140px;
overflow: hidden;
} }
} }
} }
} }
.arrow-up { .arrow-up {
left: 82px; left: 10px;
display: block; display: block;
position: absolute; position: absolute;
} }
@@ -259,12 +263,13 @@ $mainMenuBottomBorder: none !default;
width: auto; width: auto;
.nav-wrapper-box { .nav-wrapper-box {
position: absolute; position: absolute;
right: 10px; right: -4px;
background: #d8d8d8; background: #d8d8d8;
border-radius: 5px; border-radius: 5px;
padding-right: 10px; padding-right: 10px;
padding-left: 10px; padding-left: 10px;
top: 9px; top: 9px;
width: 200px;
.nav_menu { .nav_menu {
position: relative; position: relative;
li.menu-bar-item { li.menu-bar-item {
@@ -275,12 +280,14 @@ $mainMenuBottomBorder: none !default;
> span { > span {
padding: 0; padding: 0;
display: inline-block; display: inline-block;
max-width: 170px;
overflow: hidden;
} }
} }
} }
} }
.arrow-up { .arrow-up {
right: 23px; right: 6px;
display: block; display: block;
position: absolute; position: absolute;
} }

150
templates/web/common/menubar.html.twig
View File

@@ -20,7 +20,7 @@
</li> </li>
<li class="show-menu" id="toggle-menu-main"> <li class="show-menu" id="toggle-menu-main">
<img src="/assets/common/images/icons/menu-burger.png"/> <img src="/assets/common/images/icons/menu-burger.png"/>
</li>
<div id="nav_menu_container" class="desktopmenu"> <div id="nav_menu_container" class="desktopmenu">
<div class="arrow-up"></div> <div class="arrow-up"></div>
<ol class="nav_menu"> <ol class="nav_menu">
@@ -125,18 +125,83 @@
{% endif %} {% endif %}
</ol> </ol>
</div> </div>
<li class="show-menu" id="toggle-menu-link"> </li>
<li class="show-menu" id="toggle-menu-link" style="display: none">
<img src="/assets/common/images/icons/menu-web-site.png"/> <img src="/assets/common/images/icons/menu-web-site.png"/>
</li> <div id="nav_customlink_container" class="mobile-link">
<li class="show-menu" id="toggle-menu-account" style="float: right;margin-right: 16px;">
<img src="/assets/common/images/icons/menu-user.png"/>
</li>
<div id="nav_customlink_container">
<div class="arrow-up"></div> <div class="arrow-up"></div>
<div class="nav-wrapper-box"> <div class="nav-wrapper-box">
<ol class="nav_menu"></ol> <ol class="nav_menu"></ol>
</div> </div>
</div> </div>
</li>
<li class="show-menu" id="toggle-menu-account" style="float: right;margin-right: 16px;">
<img src="/assets/common/images/icons/menu-user.png"/>
<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">
{% if app.getAuthenticator().isAuthenticated() %}
{% if app.getAuthenticatedUser().isGuest %}
<img src="/assets/common/images/icons/menu-name-user.png"/>
<span>
{{ 'Guest' | trans }}
</span>
{% else %}
<a target="_blank" href="{{ path('account') }}" title="{{ 'login:: Mon compte' | trans }}">
<img src="/assets/common/images/icons/menu-name-user.png"/>
<span>
{{ app.getAuthenticatedUser().getDisplayName() }}
</span>
</a>
{% endif %}
{% endif %}
</li>
<li class="menu-bar-item">
{% if app.getAuthenticator().isAuthenticated() %}
<a href="{{ path('logout', { 'redirect' : '..' ~ app['request'].getPathInfo() }) }}"
target="_self">
<img src="/assets/common/images/icons/menu-logout.png"/>
<span>
{{ 'phraseanet:: deconnection' | trans }}
</span>
</a>
{% endif %}
</li>
<li class="menu-bar-item">
<a target="_blank" href="https://docs.phraseanet.com/4.0/">
<img src="/assets/common/images/icons/menu-help.png"/>
<span>
{{ 'phraseanet:: aide' | trans }}
<span style="display:inline-block;cursor:pointer;padding:0;border:none;padding-right:4px;padding-left:4px;"
id="help-trigger"></span>
</span>
</a>
</li>
{% if module is defined and module == "prod" %}
<li class="menu-bar-item">
<a href="#">
<img src="/assets/common/images/icons/menu-help.png"/>
<span style="" class="shortcuts-trigger">
{{ 'phraseanet:: raccourcis clavier' | trans }}
</span>
</a>
</li>
{% endif %}
<li class="menu-bar-item">
<a href="#">
<img src="/assets/common/images/icons/menu-help.png"/>
<span style="" class="infoDialog"
infos="<div><span style='font-size:18px;'>PHRASEANET</span> {{ app['phraseanet.version'].getName() }} (V{{ app['phraseanet.version'].getNumber() }})</div><div></div><br/><div><a href='http://www.gnu.org/licenses/gpl.html' target='_blank'><img src='http://www.gnu.org/graphics/gplv3-88x31.png' style='vertical-align:middle;'/><span>License GNU GPL v3</span></a></div><br/><div><a href='http://www.phraseanet.com/' target='_blank'> &copy; Copyright Alchemy 2005-{{ "now"|date("Y") }}</a><p style='margin-top: 10px' ><a href='../../gitlog.txt' target='_blank'>gitlog</a></p></div>">{{ 'phraseanet:: a propos' | trans }}</span>
</a>
</li>
</ol>
</div>
</div>
</li>
</ol> </ol>
</div> </div>
@@ -232,70 +297,6 @@
</li> </li>
{% endif %} {% endif %}
</div> </div>
<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">
{% if app.getAuthenticator().isAuthenticated() %}
{% if app.getAuthenticatedUser().isGuest %}
<img src="/assets/common/images/icons/menu-name-user.png"/>
<span>
{{ 'Guest' | trans }}
</span>
{% else %}
<a target="_blank" href="{{ path('account') }}" title="{{ 'login:: Mon compte' | trans }}">
<img src="/assets/common/images/icons/menu-name-user.png"/>
<span>
{{ app.getAuthenticatedUser().getDisplayName() }}
</span>
</a>
{% endif %}
{% endif %}
</li>
<li class="menu-bar-item">
{% if app.getAuthenticator().isAuthenticated() %}
<a href="{{ path('logout', { 'redirect' : '..' ~ app['request'].getPathInfo() }) }}"
target="_self">
<img src="/assets/common/images/icons/menu-logout.png"/>
<span>
{{ 'phraseanet:: deconnection' | trans }}
</span>
</a>
{% endif %}
</li>
<li class="menu-bar-item">
<a target="_blank" href="https://docs.phraseanet.com/4.0/">
<img src="/assets/common/images/icons/menu-help.png"/>
<span>
{{ 'phraseanet:: aide' | trans }}
<span style="display:inline-block;cursor:pointer;padding:0;border:none;padding-right:4px;padding-left:4px;"
id="help-trigger"></span>
</span>
</a>
</li>
{% if module is defined and module == "prod" %}
<li class="menu-bar-item">
<a href="#">
<img src="/assets/common/images/icons/menu-help.png"/>
<span style="" class="shortcuts-trigger">
{{ 'phraseanet:: raccourcis clavier' | trans }}
</span>
</a>
</li>
{% endif %}
<li class="menu-bar-item">
<a href="#">
<img src="/assets/common/images/icons/menu-help.png"/>
<span style="" class="infoDialog"
infos="<div><span style='font-size:18px;'>PHRASEANET</span> {{ app['phraseanet.version'].getName() }} (V{{ app['phraseanet.version'].getNumber() }})</div><div></div><br/><div><a href='http://www.gnu.org/licenses/gpl.html' target='_blank'><img src='http://www.gnu.org/graphics/gplv3-88x31.png' style='vertical-align:middle;'/><span>License GNU GPL v3</span></a></div><br/><div><a href='http://www.phraseanet.com/' target='_blank'> &copy; Copyright Alchemy 2005-{{ "now"|date("Y") }}</a><p style='margin-top: 10px' ><a href='../../gitlog.txt' target='_blank'>gitlog</a></p></div>">{{ 'phraseanet:: a propos' | trans }}</span>
</a>
</li>
</ol>
</div>
</div>
</div> </div>
{% if app.getAuthenticator().isAuthenticated() and module == "prod" %} {% if app.getAuthenticator().isAuthenticated() and module == "prod" %}
@@ -312,10 +313,15 @@
//seperate array based on location of link //seperate array based on location of link
var seperatedLinksByLocation = _.groupBy(configurationSettingLinks, "linkLocation"); var seperatedLinksByLocation = _.groupBy(configurationSettingLinks, "linkLocation");
for (key in seperatedLinksByLocation) { for (key in seperatedLinksByLocation) {
if (key === 'navigation-bar') { if (key === 'navigation-bar') {
var sortedCustomLinks = _.sortBy(seperatedLinksByLocation[key], 'linkOrder'); var sortedCustomLinks = _.sortBy(seperatedLinksByLocation[key], 'linkOrder');
/*show navigation-bar if there is some result*/
console.log(sortedCustomLinks);
if (sortedCustomLinks != undefined ) {
$('#toggle-menu-link').show();
}
_.each(sortedCustomLinks, function (linksData) { _.each(sortedCustomLinks, function (linksData) {
if (linksData.linkLanguage == 'all' || linksData.linkLanguage === '{{ app['locale'] }}') { if (linksData.linkLanguage == 'all' || linksData.linkLanguage === '{{ app['locale'] }}') {
var styleAttr = ""; var styleAttr = "";