matthias/mayan-edms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

New sidebar layout

Browse Source 
Update UI code to display a fixed location sidebar. The sidebar is
also of a fixed width instead of being a certain number columns
wide. The action dropdown is also now in a fixed location.

Signed-off-by: Roberto Rosario <Roberto.Rosario@mayan-edms.com>
This commit is contained in:
Roberto Rosario
2018-12-25 03:39:22 -04:00
parent bd194a70cb
commit 9e4ebf4e04
6 changed files with 102 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
mayan/apps/appearance/static/appearance/css/base.css
View File

@@ -67,7 +67,7 @@
}
#carousel-container {
overflow-x: scroll; height: 500px;
overflow: scroll; height: 100%;
}
#carousel-container img {
@@ -356,22 +356,23 @@ body {
*/
/* Hide for mobile, show later */
.sidebar {
#menu-main {
display: none;
background-color: #2c3e50;
border-right: 1px solid #18bc9c;
bottom: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-top: 10px;
position: fixed;
top: 51px;
width: 210px;
z-index: 1000;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
#menu-main {
display: block;
padding-top: 10px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #2c3e50;
border-right: 1px solid #18bc9c;
}
.navbar-brand {
@@ -399,10 +400,6 @@ body {
margin-top: 0;
}
.sidebar {
width: 210px;
}
.navbar-brand {
}
@@ -487,3 +484,43 @@ body {
.td-container-thumbnail {
height: 100px;
}
/* Side bar */
#menu-actions {
position: fixed;
right: 5px;
top: 65px;
z-index: 1020;
}
#viewport {
width: 100%;
}
.has-sidebar {
padding-right: 0px;
}
#sidebar {
display: none;
}
@media (min-width: 768px) {
#sidebar {
bottom: 0;
display: block;
overflow-x: visible;
overflow-y: auto;
padding-top: 10px;
position: fixed;
right: 0;
top: 100px;
width: 150px;
z-index: 1000;
}
.has-sidebar {
padding-right: 150px;
}
}

88
mayan/apps/appearance/templates/appearance/base.html
View File

@@ -37,55 +37,53 @@
</div>
</div>
{% get_menus_links names='object,sidebar,secondary' sort_results=True as links %}
{% get_menus_links names='facet,list facet' sort_results=True as form_navigation_links %}
{% get_menus_links names='facet,list facet' sort_results=True as links_facet %}
<style>
</style>
<div class="row">
{% if links or form_navigation_links %}
<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10">
{% else %}
<div class="col-xs-12">
{% endif %}
<div class="col-xs-12 {% if links_facet %}has-sidebar{% endif %}" id="viewport">
{% include 'appearance/calculate_form_title.html' %}
{# action menu #}
{% get_menus_links names='object,sidebar,secondary' sort_results=True as links_actions %}
{% if links_actions %}
<div class="pull-right btn-group" id="menu-actions">
<button aria-expanded="true" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" type="button">
{% trans 'Actions' %}
<span class="caret"></span>
<span class="sr-only">{% trans 'Toggle Dropdown' %}</span>
</button>
<ul class="dropdown-menu" role="menu">
{% for object_navigation_links in links_actions %}
{% with 'true' as as_li %}
{% with 'true' as hide_active_anchor %}
{% with 'btn-sm' as link_classes %}
{% include 'navigation/generic_navigation.html' %}
{% endwith %}
{% endwith %}
{% endwith %}
{% if not forloop.last and object_navigation_links %}
<li class="divider"></li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="clearfix"></div>
{% endif %}
{% block content %}{% endblock %}
{% block footer %}{% endblock %}
</div>
{% if links or form_navigation_links %}
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
{% endif %}
{% if links %}
<div class="pull-right btn-group" style="margin-bottom: 10px;">
<button aria-expanded="true" type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown">
{% trans 'Actions' %}
<span class="caret"></span>
<span class="sr-only">{% trans 'Toggle Dropdown' %}</span>
</button>
<ul class="dropdown-menu" role="menu">
{% for object_navigation_links in links %}
{% with 'true' as as_li %}
{% with 'true' as hide_active_anchor %}
{% with 'btn-sm' as link_classes %}
{% include 'navigation/generic_navigation.html' %}
{% endwith %}
{% endwith %}
{% endwith %}
{% if not forloop.last and object_navigation_links %}
<li class="divider"></li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
{% endif %}
{% if form_navigation_links %}
<div class="pull-right list-group">
{% if form_navigation_links %}
{% for object_navigation_links in form_navigation_links %}
{% if links_facet %}
<div id="sidebar">
<div class="pull-right list-group">
{% for object_navigation_links in links_facet %}
{% with 'true' as hide_active_anchor %}
{% with 'active' as link_class_active %}
{% with 'list-group-item btn-sm' as link_classes %}
@@ -94,11 +92,7 @@
{% endwith %}
{% endwith %}
{% endfor %}
{% endif %}
</div>
{% endif %}
{% if links or form_navigation_links %}
</div>
</div>
{% endif %}
</div>

12
mayan/apps/appearance/templates/appearance/menu_main.html
View File

@@ -11,12 +11,8 @@
{% get_menu_links name='main' as menu_links %}
{% for link_set in menu_links %}
{% for link in link_set %}
{% 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 %}
{% if link|get_type == "<class 'mayan.apps.navigation.classes.Menu'>" %}
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
@@ -39,7 +35,7 @@
<ul class="list-unstyled">
{% get_menu_links name=link.name as menu_links %}
{% for linkset in menu_links %}
{% with '' as li_class_active %}
{% with '' as link_class_active %}
{% with linkset as object_navigation_links %}
{% include 'navigation/generic_navigation.html' %}
{% endwith %}
@@ -50,7 +46,6 @@
</div>
</div>
{% else %}
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
@@ -58,12 +53,7 @@
</h4>
</div>
</div>
{% endif %}
{% endwith %}
{% endwith %}
{% endwith %}
{% endwith %}
{% endwith %}
{% endfor %}

4
mayan/apps/appearance/templates/appearance/menu_topbar.html
View File

@@ -7,7 +7,7 @@
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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>
@@ -15,6 +15,8 @@
</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">
{% get_menu_links name='topbar' as menu_links %}

2
mayan/apps/appearance/templates/appearance/root.html
View File

@@ -37,7 +37,7 @@
{% include 'appearance/menu_topbar.html' %}
</div>
<div class="container-fluid">
<div class="sidebar" id="menu-main">
<div id="menu-main">
{% include 'appearance/menu_main.html' %}
</div>
<div class="main">

4
mayan/apps/documents/templates/documents/forms/widgets/document_page_carousel.html
View File

@@ -1,6 +1,6 @@
{% load i18n %}
<div class="full-height scrollable" data-height-difference=230 id="carousel-container">
<div id="carousel-container">
{% for document_page in widget.value.pages.all %}
<div class="carousel-item">
<a href="{% url 'documents:document_page_view' document_page.pk %}">
@@ -17,7 +17,7 @@
Page {{ page_number }} of {{ total_pages }}
{% endblocktrans %}
</div>
</div>
</div>
{% empty %}
<p>{% trans 'No pages to display' %}</p>
{% endfor %}