* Code for task #90776 .

module/doc/css/view.css

@@ -64,10 +64,9 @@
 .info .version, .info .crumbs {float: left;}
 .crumbs img {margin-right: 3px; margin-bottom: 4px;}
 .crumbs {float: left; display: flex;height: 32px; width: 670px; align-items: center; overflow: hidden;}
-.crumbs a {padding: 6px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
-.crumbs .separator {flex: 0 0 15px; display: flex; justify-content: center; align-items: center;}
-.crumbs :last-child {flex: none;}
-.crumbs a {flex: none;}
-.flex-auto {flex: auto!important;}
-
+.crumbs .crumb-item {padding: 6px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; display: flex;}
+.crumb-item .separator {flex: 0 0 15px; display: flex; justify-content: center; align-items: center;}
+.crumb-item a {flex: none}
 .main-col {position: relative;}
+#autoBox {display: flex; overflow: hidden; text-overflow: ellipsis; padding-right: 15px; position: relative;}
+#autoBox > .ellipsis {position: absolute; top: 3px; right: 0; width: 10px; background: #F4F5F7; height: 100%;}

module/doc/js/common.js

@@ -402,21 +402,23 @@ function submit(object)
 function updateCrumbs()
 {
     var $crumbs       = $('#crumbs');
-    var $crumbItems   = $('#crumbs > a');
+    var $crumbItems   = $('#crumbs > .crumb-item');
     var crumbMaxWidth = 660;
     if($crumbs.width < crumbMaxWidth || $crumbItems.length == 1) return;
 
     /* last crumbItem width major */
     var $lastChild = $($crumbItems[$crumbItems.length -1]);
     var widthSum = 0 + $lastChild.width();
-    var separatorWidth = 20;
     for(var i = 0; i < $crumbItems.length - 1; i++)
     {
         var crumbItem = $crumbItems[i];
-        var widthSum  = widthSum + $(crumbItem).width() + separatorWidth;
+        var widthSum  = widthSum + $(crumbItem).width();
         if(widthSum >= crumbMaxWidth)
         {
-            $(crumbItem).addClass('flex-auto');
+            $(crumbItem).addClass('in-auto-box');
         }
     }
+    var $autoCrumbItems = $('#crumbs > .in-auto-box');
+    $lastChild.before('<div id="autoBox" class="flex-auto"><div class="ellipsis">...<div></div>');
+    $('#autoBox').prepend($autoCrumbItems);
 }

module/doc/view/view.html.php

@@ -27,7 +27,12 @@
   <?php echo html::backButton("<i class='icon icon-back icon-sm'></i> " . $lang->goback, "id='backBtn'", 'btn btn-link')?>
   </div>
   <div id="crumbs" class="crumbs">
-    <?php echo implode('<div class="separator"> > </div>', $crumbs);?>
+    <?php foreach($crumbs as $crumbKey => $crumb):?>
+    <div class="crumb-item">
+    <?php if($crumbKey != 0) echo '<div class="separator"> > </div>'?>
+    <?php echo $crumb;?>
+    </div>
+    <?php endforeach;?>
   </div>
   <div class="btn-toolbar pull-right">
     <?php