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

convert navigation menu to dropdown on small screen

Browse Source
This commit is contained in:
mike-esokia
2018-05-28 14:20:41 +04:00
committed by Mike Ng
parent 6527c8c9f7
commit 252149899f
2 changed files with 120 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,6 +19,18 @@ $mainMenuBottomBorder: none !default;
margin-bottom: $mainMenuMarginBottom; margin-bottom: $mainMenuMarginBottom;
z-index: 100; z-index: 100;
box-sizing: border-box; box-sizing: border-box;
.show-menu {
display: none;
i {
font-size: 26px;
vertical-align: middle;
color: $mainMenuLinkActiveColor;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #nav_menu {
display: block;
}
}
ol { ol {
display: block; display: block;
margin: 0; margin: 0;
@@ -96,3 +108,36 @@ $mainMenuBottomBorder: none !default;
} }
} }
} }
@media screen and (max-width: 760px) {
#mainMenu {
.show-menu {
display: block;
}
#nav_menu {
display: none;
z-index: 1000;
ol {
position: static;
}
li.menu-bar-item {
width: 100%;
clear: both;
background: $mainMenuBackgroundColor;
border-bottom: 1px solid $mainMenuLinkActiveColor;
z-index: 1000;
}
li.menu-bar-item a {
width: 100%;
> span {
text-align: center;
font-size: 14px;
font-weight: bold;
&.selected {
border-top: none !important;
}
}
}
}
}
}

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

@@ -1,104 +1,109 @@
<div id="mainMenu" class=""> <div id="mainMenu" class="">
{% set configuration = app['conf'].get(['registry', 'custom-links']) %} {% set configuration = app['conf'].get(['registry', 'custom-links']) %}
<div class="PNB menu-bar" style="right:auto;overflow:hidden;"> <div class="PNB menu-bar" style="overflow:hidden;">
<ol> <ol>
<li> <li>
<span class="title"> <span class="title">
<img src="/assets/common/images/logo.png" alt="" id="mainLogo"> <img src="/assets/common/images/logo.png" alt="" id="mainLogo">
</span> </span>
</li> </li>
{% if module is defined and module != "lightbox" and app.getAuthenticator().isAuthenticated() %} <li class="show-menu" id="toggle-menu">
<li> <i class="fa fa-bars"></i>
<a target="_blank" href="{{ path('prod') }}"> </li>
<ol id="nav_menu">
{% if module is defined and module != "lightbox" and app.getAuthenticator().isAuthenticated() %}
<li class="menu-bar-item">
<a target="_blank" href="{{ path('prod') }}">
<span class="{% if module is defined and module == "prod" %}selected{% endif %}"> <span class="{% if module is defined and module == "prod" %}selected{% endif %}">
{{ 'admin::monitor: production' | trans }} {{ 'admin::monitor: production' | trans }}
</span> </span>
</a> </a>
</li> </li>
{% if app['browser'].isNewGeneration and app['conf'].get(['registry', 'modules', 'thesaurus']) == true and app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('thesaurus') %} {% if app['browser'].isNewGeneration and app['conf'].get(['registry', 'modules', 'thesaurus']) == true and app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('thesaurus') %}
<li> <li class="menu-bar-item">
<a target="_blank" href="{{ path('thesaurus') }}"> <a target="_blank" href="{{ path('thesaurus') }}">
<span class="{% if module is defined and module == "thesaurus" %}selected{% endif %}"> <span class="{% if module is defined and module == "thesaurus" %}selected{% endif %}">
{{ 'admin::monitor: module thesaurus' | trans }} {{ 'admin::monitor: module thesaurus' | trans }}
</span> </span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{# MODULE #} {# MODULE #}
{% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('admin') %} {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('admin') %}
<li> <li class="menu-bar-item">
<a target="_blank" href="{{ path('admin') }}"> <a target="_blank" href="{{ path('admin') }}">
<span class="{% if module is defined and module == "admin" %}selected{% endif %}"> <span class="{% if module is defined and module == "admin" %}selected{% endif %}">
{{ 'admin::monitor: module admin' | trans }} {{ 'admin::monitor: module admin' | trans }}
</span> </span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{# MODULE #} {# MODULE #}
{% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('report') %} {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('report') %}
<li> <li class="menu-bar-item">
<a target="_blank" href="{{ path('report_dashboard') }}"> <a target="_blank" href="{{ path('report_dashboard') }}">
<span class="{% if module is defined and module == "report" %}selected{% endif %}"> <span class="{% if module is defined and module == "report" %}selected{% endif %}">
{{ 'admin::monitor: module report' | trans }} {{ 'admin::monitor: module report' | trans }}
</span> </span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{# MODULE #} {# MODULE #}
<li> <li class="menu-bar-item">
<a id="validation_link" target="_blank" href="{{ path('lightbox') }}"> <a id="validation_link" target="_blank" href="{{ path('lightbox') }}">
<span> <span>
{{ 'admin::monitor: module validation' | trans }} {{ 'admin::monitor: module validation' | trans }}
</span> </span>
</a> </a>
</li> </li>
{# MODULE #} {# MODULE #}
{% if module is defined and module == "prod" %} {% if module is defined and module == "prod" %}
{% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('upload') %} {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('upload') %}
<li> <li class="menu-bar-item">
{% set link = path('upload_html5_form') %} {% set link = path('upload_html5_form') %}
{% if not app['browser'].supportFileAPI() %} {% if not app['browser'].supportFileAPI() %}
{% set link = path('upload_flash_form') %} {% set link = path('upload_flash_form') %}
{% endif %} {% endif %}
<a href="{{ link }}" class="uploader-open-action" title="{{ 'Upload' | trans }}"> <a href="{{ link }}" class="uploader-open-action" title="{{ 'Upload' | trans }}">
<span> <span>
{{ 'admin::monitor: module upload' | trans }} {{ 'admin::monitor: module upload' | trans }}
</span> </span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% endif %} {% endif %}
{# MODULE #} {# MODULE #}
{% if module == "prod" %} {% if module == "prod" %}
<li> <li class="menu-bar-item">
<a href="#" class="state-navigation" data-state="publication" > <a href="#" class="state-navigation" data-state="publication">
<span> <span>
{{ 'Publications' | trans }} {{ 'Publications' | trans }}
</span> </span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% if module is defined and module == "prod" and app.getAclForUser(app.getAuthenticatedUser()).has_right(constant('\\ACL::ORDER_MASTER')) %} {% if module is defined and module == "prod" and app.getAclForUser(app.getAuthenticatedUser()).has_right(constant('\\ACL::ORDER_MASTER')) %}
<li> <li class="menu-bar-item">
<a href="#" class="order-open-action" title="{{ 'Orders manager' | trans }}"> <a href="#" class="order-open-action" title="{{ 'Orders manager' | trans }}">
<span> <span>
{{ 'Commandes' | trans }} {{ 'Commandes' | trans }}
</span> </span>
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% endif %} {% endif %}
</ol>
</ol> </ol>
</div> </div>
@@ -227,6 +232,18 @@
} }
} }
$('#toggle-menu').on('click', function (event) {
$('#nav_menu').toggle();
});
var windowsize = $(window).width();
$(window).resize(function (event) {
windowsize = $(window).width();
if (windowsize > 760) {
if ($('#nav_menu').is(":hidden")) {
$('#nav_menu').show();
}
}
});
}); });
</script> </script>