Tweaked the jstree component's appearance

Improve usage with long cabinet labels.
Thanks for forum user @briboe for the report.

Signed-off-by: Roberto Rosario <roberto.rosario@mayan-edms.com>

HISTORY.rst

@@ -1,6 +1,8 @@
 3.2.8 (2019-XX-XX)
 ==================
 * Add cabinet add and remove workflow actions.
+* Tweaked the jstree component's appearance to cope with
+  long labels.
 
 3.2.7 (2019-08-28)
 ==================

docs/releases/3.2.8.rst

@@ -7,8 +7,20 @@ Released: XX, 2019
 Changes
 -------
 
+Cabinets
+^^^^^^^^
+
+Tweaked the jstree component's appearance to cope with long labels.
+Added a scrollbar, reduced the font size, switched to a sans serif font,
+and reduced padding. Thanks for forum user @briboe for the report.
+
+
+Other changes
+^^^^^^^^^^^^^
+
 - Add cabinet add and remove workflow actions.
 
+
 Removals
 --------
 
@@ -101,6 +113,6 @@ Bugs fixed or issues closed
 ---------------------------
 
 - :gitlab-issue:`643` The "Actions" button won't show up, if window size between 992 and 1248 px
-- :forum-topic:`1050` edit/delete sub-cabinet
+- :forum-topic:`1120` Cabinet Presentation
 
 .. _PyPI: https://pypi.python.org/pypi/mayan-edms/

mayan/apps/appearance/static/appearance/css/base.css

@@ -410,3 +410,13 @@ a i {
 .btn-list {
     margin-bottom: 2px;
 }
+
+/* jstree - cabinets */
+#jstree {
+    max-width: 100%;
+    overflow: auto;
+    font: 11px Verdana, sans-serif;
+    padding: 0px;
+    padding-bottom: 10px; /* Padding for scrollbar */
+    border-radius: 5px;
+}

mayan/apps/cabinets/templates/cabinets/cabinet_details.html

@@ -15,7 +15,7 @@
     <div class="row">
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-2">
             <h4>{% trans 'Navigation:' %}</h4>
-            <div class="jstree"></div>
+            <div id="jstree"></div>
         </div>
 
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-10">
@@ -31,11 +31,11 @@
 {% block javascript %}
     <script>
         $.getScript( "{% static 'cabinets/node_modules/jstree/dist/jstree.min.js' %}" )
-            .done(function( script, textStatus ) {
-            $(function () {
-                var jstreeElement = $('.jstree');
+            .done(function(script, textStatus) {
+                $(function () {
+                    var jstreeElement = $('#jstree');
 
-                jstreeElement
+                    jstreeElement
                     .on('select_node.jstree', function (e, data) {
                         if(data.selected.length) {
                             partialNavigation.setLocation(data.instance.get_node(data.selected[0]).data.href);