From 9e4ebf4e04274c0f6d2662c4f375cfab708d3fd2 Mon Sep 17 00:00:00 2001
From: Roberto Rosario <Roberto.Rosario@mayan-edms.com>
Date: Tue, 25 Dec 2018 03:39:22 -0400
Subject: [PATCH] New sidebar layout

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>
---
 .../appearance/static/appearance/css/base.css | 71 +++++++++++----
 .../appearance/templates/appearance/base.html | 88 +++++++++----------
 .../templates/appearance/menu_main.html       | 12 +--
 .../templates/appearance/menu_topbar.html     |  4 +-
 .../appearance/templates/appearance/root.html |  2 +-
 .../forms/widgets/document_page_carousel.html |  4 +-
 6 files changed, 102 insertions(+), 79 deletions(-)

diff --git a/mayan/apps/appearance/static/appearance/css/base.css b/mayan/apps/appearance/static/appearance/css/base.css
index 3e7d71667c..c18c9a370d 100644
--- a/mayan/apps/appearance/static/appearance/css/base.css
+++ b/mayan/apps/appearance/static/appearance/css/base.css
@@ -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;
+    }
+}
diff --git a/mayan/apps/appearance/templates/appearance/base.html b/mayan/apps/appearance/templates/appearance/base.html
index e983c5cc1b..c1db3d4374 100644
--- a/mayan/apps/appearance/templates/appearance/base.html
+++ b/mayan/apps/appearance/templates/appearance/base.html
@@ -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>
diff --git a/mayan/apps/appearance/templates/appearance/menu_main.html b/mayan/apps/appearance/templates/appearance/menu_main.html
index 9a8d3b9c8d..af9132bc75 100644
--- a/mayan/apps/appearance/templates/appearance/menu_main.html
+++ b/mayan/apps/appearance/templates/appearance/menu_main.html
@@ -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 %}
diff --git a/mayan/apps/appearance/templates/appearance/menu_topbar.html b/mayan/apps/appearance/templates/appearance/menu_topbar.html
index f4ed933c7d..99d0890501 100644
--- a/mayan/apps/appearance/templates/appearance/menu_topbar.html
+++ b/mayan/apps/appearance/templates/appearance/menu_topbar.html
@@ -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 %}
diff --git a/mayan/apps/appearance/templates/appearance/root.html b/mayan/apps/appearance/templates/appearance/root.html
index d16a88a257..e6f1d1d5ee 100644
--- a/mayan/apps/appearance/templates/appearance/root.html
+++ b/mayan/apps/appearance/templates/appearance/root.html
@@ -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">
diff --git a/mayan/apps/documents/templates/documents/forms/widgets/document_page_carousel.html b/mayan/apps/documents/templates/documents/forms/widgets/document_page_carousel.html
index de0c80bd53..a136846d6e 100644
--- a/mayan/apps/documents/templates/documents/forms/widgets/document_page_carousel.html
+++ b/mayan/apps/documents/templates/documents/forms/widgets/document_page_carousel.html
@@ -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 %}