Enable main menu in small devices
Signed-off-by: Roberto Rosario <roberto.rosario@mayan-edms.com>
This commit is contained in:
Roberto Rosario
@@ -435,23 +435,56 @@ a i {
|
||||
/* Hide for mobile, show later */
|
||||
|
||||
#menu-main {
|
||||
display: none;
|
||||
display: block;
|
||||
background-color: #2c3e50;
|
||||
border-right: 1px solid #18bc9c;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
left: -210px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding-top: 10px;
|
||||
position: fixed;
|
||||
top: 51px;
|
||||
transition: left 0.3s;
|
||||
width: 210px;
|
||||
z-index: 1000;
|
||||
|
||||
}
|
||||
|
||||
#menu-main-button-close {
|
||||
border-radius: 0;
|
||||
border-top: 2px solid #1c2733;
|
||||
border-bottom: 2px solid #1c2733;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 209px;
|
||||
}
|
||||
|
||||
#main-menu-button-open {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-right: 1px solid #95a5a6;
|
||||
display: block;
|
||||
padding: 6px 20px 0px 10px;
|
||||
margin: 0 10px 0 -15px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#menu-main {
|
||||
display: block;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#menu-main-button-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#main-menu-button-open {
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
@@ -460,6 +493,11 @@ a i {
|
||||
}
|
||||
}
|
||||
|
||||
.menu-main-opened {
|
||||
display: block !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.main .page-header {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@@ -305,6 +305,16 @@ class MayanApp {
|
||||
$('.navbar-collapse').collapse('hide');
|
||||
}
|
||||
});
|
||||
|
||||
// Small screen main menu toggle to open
|
||||
$('body').on('click', '#main-menu-button-open', function (event) {
|
||||
$('#menu-main').addClass('menu-main-opened');
|
||||
});
|
||||
|
||||
// Small screen main menu toggle to close
|
||||
$('body').on('click', '#menu-main-button-close', function (event) {
|
||||
$('#menu-main').removeClass('menu-main-opened');
|
||||
});
|
||||
}
|
||||
|
||||
setupNewWindowAnchor () {
|
||||
|
||||
@@ -5,13 +5,31 @@
|
||||
{% common_calculate_title as result %}
|
||||
|
||||
{% if not non_html_title %}
|
||||
<h3 title='{{ result.title_full }}'>
|
||||
<div style="display: flex;">
|
||||
<button id="main-menu-button-open">
|
||||
<span class="sr-only">{% trans 'Open main menu' %}</span>
|
||||
<i aria-hidden="true" data-hidden="true" class="fa fa-bars"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
{{ result.title }}
|
||||
|
||||
{% if not non_html_title %}
|
||||
</h3>
|
||||
{% if subtitle %}
|
||||
<small>{{ subtitle }}</small>
|
||||
{% endif %}
|
||||
<div>
|
||||
<h3 id="content-title" title='{{ result.title_full }}'>
|
||||
{% endif %}
|
||||
|
||||
{{ result.title }}
|
||||
|
||||
{% if not non_html_title %}
|
||||
</h3>
|
||||
{% if subtitle %}
|
||||
<p>
|
||||
<small>{{ subtitle }}</small>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if not non_html_title %}
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
{% endif %}
|
||||
|
||||
@@ -5,64 +5,71 @@
|
||||
{% load smart_settings_tags %}
|
||||
|
||||
{% spaceless %}
|
||||
<div class="panel-group" id="accordion-sidebar" role="tablist" aria-multiselectable="true">
|
||||
{% navigation_resolve_menu name='main' as main_menus_results %}
|
||||
{% for main_menu_results in main_menus_results %}
|
||||
{% for link_group in main_menu_results.link_groups %}
|
||||
{% for link in link_group.links %}
|
||||
{% with 'active' as li_class_active %}
|
||||
{% with ' ' as link_classes %}
|
||||
{% if link|common_get_type == "<class 'mayan.apps.navigation.classes.Menu'>" %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingOne">
|
||||
<h4 class="panel-title">
|
||||
<a class="non-ajax collapsed" role="button" data-toggle="collapse" data-parent="#accordion-sidebar" href="#accordion-body-{{ forloop.counter }}" aria-expanded="false" aria-controls="collapseOne">
|
||||
<div class="pull-left">
|
||||
{% if link.icon %}
|
||||
<i class="hidden-xs hidden-sm hidden-md {{ link.icon }}"></i>
|
||||
{% endif %}
|
||||
{% if link.icon_class %}{{ link.icon_class.render }}{% endif %}
|
||||
{{ link.label }}
|
||||
</div>
|
||||
<div class="accordion-indicator pull-right"><span class="caret"></span></div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="accordion-body-{{ forloop.counter }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
|
||||
<div class="panel-body">
|
||||
<ul class="list-unstyled">
|
||||
{% navigation_resolve_menu name=link.name as sub_menus_results %}
|
||||
{% for sub_menu_results in sub_menus_results %}
|
||||
{% for link_group in sub_menu_results.link_groups %}
|
||||
{% with '' as link_class_active %}
|
||||
{% with 'a-main-menu-accordion-link' as link_classes %}
|
||||
{% with 'true' as as_li %}
|
||||
{% with link_group.links as object_navigation_links %}
|
||||
{% include 'navigation/generic_navigation.html' %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
<div class="panel-group" id="accordion-sidebar" role="tablist" aria-multiselectable="true">
|
||||
<div class="panel-heading" role="tab" id="menu-main-button-close">
|
||||
<h4 class="panel-title">
|
||||
<a class="disabled" href="">
|
||||
<i class="fa fa-angle-double-left"></i>
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
{% navigation_resolve_menu name='main' as main_menus_results %}
|
||||
{% for main_menu_results in main_menus_results %}
|
||||
{% for link_group in main_menu_results.link_groups %}
|
||||
{% for link in link_group.links %}
|
||||
{% with 'active' as li_class_active %}
|
||||
{% with ' ' as link_classes %}
|
||||
{% if link|common_get_type == "<class 'mayan.apps.navigation.classes.Menu'>" %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingOne">
|
||||
<h4 class="panel-title">
|
||||
<a class="non-ajax collapsed" role="button" data-toggle="collapse" data-parent="#accordion-sidebar" href="#accordion-body-{{ forloop.counter }}" aria-expanded="false" aria-controls="collapseOne">
|
||||
<div class="pull-left">
|
||||
{% if link.icon %}
|
||||
<i class="hidden-xs hidden-sm hidden-md {{ link.icon }}"></i>
|
||||
{% endif %}
|
||||
{% if link.icon_class %}{{ link.icon_class.render }}{% endif %}
|
||||
{{ link.label }}
|
||||
</div>
|
||||
<div class="accordion-indicator pull-right"><span class="caret"></span></div>
|
||||
<div class="clearfix"></div>
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="accordion-body-{{ forloop.counter }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
|
||||
<div class="panel-body">
|
||||
<ul class="list-unstyled">
|
||||
{% navigation_resolve_menu name=link.name as sub_menus_results %}
|
||||
{% for sub_menu_results in sub_menus_results %}
|
||||
{% for link_group in sub_menu_results.link_groups %}
|
||||
{% with '' as link_class_active %}
|
||||
{% with 'a-main-menu-accordion-link' as link_classes %}
|
||||
{% with 'true' as as_li %}
|
||||
{% with link_group.links as object_navigation_links %}
|
||||
{% include 'navigation/generic_navigation.html' %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingOne">
|
||||
<h4 class="panel-title">
|
||||
{% include 'navigation/generic_link_instance.html' %}
|
||||
</h4>
|
||||
{% else %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" id="headingOne">
|
||||
<h4 class="panel-title">
|
||||
{% include 'navigation/generic_link_instance.html' %}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endspaceless %}
|
||||
|
||||
@@ -4,40 +4,40 @@
|
||||
{% load smart_settings_tags %}
|
||||
|
||||
{% spaceless %}
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" type="button">
|
||||
<span class="sr-only">{% trans 'Toggle navigation' %}</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="{% url home_view %}">{% smart_setting 'COMMON_PROJECT_TITLE' %}</a>
|
||||
</div>
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" type="button">
|
||||
<span class="sr-only">{% trans 'Toggle navigation' %}</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="{% url home_view %}">{% smart_setting 'COMMON_PROJECT_TITLE' %}</a>
|
||||
</div>
|
||||
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
{% navigation_resolve_menu name='topbar' as topbar_menus_results %}
|
||||
{% for tobpar_menu_result in topbar_menus_results %}
|
||||
{% for link_group in tobpar_menu_result.link_groups %}
|
||||
{% for link in link_group.links %}
|
||||
{% with 'true' as as_li %}
|
||||
{% with 'true' as hide_active_anchor %}
|
||||
{% with 'active' as li_class_active %}
|
||||
{% with 'first' as li_class_first %}
|
||||
{% with ' ' as link_classes %}
|
||||
{% include 'navigation/generic_subnavigation.html' %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
{% navigation_resolve_menu name='topbar' as topbar_menus_results %}
|
||||
{% for tobpar_menu_result in topbar_menus_results %}
|
||||
{% for link_group in tobpar_menu_result.link_groups %}
|
||||
{% for link in link_group.links %}
|
||||
{% with 'true' as as_li %}
|
||||
{% with 'true' as hide_active_anchor %}
|
||||
{% with 'active' as li_class_active %}
|
||||
{% with 'first' as li_class_first %}
|
||||
{% with ' ' as link_classes %}
|
||||
{% include 'navigation/generic_subnavigation.html' %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
{% endspaceless %}
|
||||
|
||||
Reference in New Issue
Block a user