Portal: Used BS breadcrumb in BrowseBrick instead of the previous which was home-made.

SVN:trunk[4591]
This commit is contained in:
Guillaume Lajarige
2017-03-15 17:03:32 +00:00
parent 0a5708272d
commit 64ca121f5b
3 changed files with 22 additions and 52 deletions

View File

@@ -5,9 +5,9 @@
{% block bBrowseMainContent %}
<div id="brick_content_grid">
{% block bBrowseGridContent %}
<ul id="grid-breadcrumb">
<li class="grid-crumb grid-crumb-root" data-level-id="L"><span class="fa fa-home"></span></li>
</ul>
<ol id="grid-breadcrumb" class="breadcrumb">
<li><a href="#" data-level-id="L"><span class="fa fa-home"></span></a></li>
</ol>
<div class="grid-group" data-level-id="L">
</div>
{% endblock %}
@@ -338,10 +338,13 @@
var buildBreadcrumb = function(oCurrentElem)
{
var aCurrentLevelParts = [];
var bLeafLevel = false;
// If no current item, it's because we begin to build the breadcrumb, starting from the bottom
if(oCurrentElem === undefined)
{
bLeafLevel = true;
// Retrieving current level id
var sCurrentLevelId = $('#brick_content_grid > .grid-group:visible').attr('data-level-id');
aCurrentLevelParts = sCurrentLevelId.split('::');
@@ -362,12 +365,17 @@
}
// Adding level as crumb
var oCrumb = $('<li></li>').html( oCurrentElem.find('.grid-item-name').html() );
oCrumb.addClass('grid-crumb');
oCrumb.attr('data-level-id', aCurrentLevelParts.join('::'));
oCrumb.insertAfter('#grid-breadcrumb > li:first-of-type');
var oCrumb = $('<li></li>');
var oCrumbLink = (bLeafLevel) ? $('<span></span>') : $('<a></a>');
oCrumbLink.html( oCurrentElem.find('.grid-item-name').html() );
oCrumbLink.attr('data-level-id', aCurrentLevelParts.join('::')).attr('href', '#');
oCrumb.append(oCrumbLink).insertAfter('#grid-breadcrumb > li:first-of-type');
if(bLeafLevel)
{
oCrumb.addClass('active');
}
// Adding listener
$('#grid-breadcrumb > li:not(:last-of-type)').off('click').on('click', function(oEvent){
$('#grid-breadcrumb > li:not(:last-of-type) > a').off('click').on('click', function(oEvent){
oEvent.preventDefault();
var levelId = $(this).attr('data-level-id');

View File

@@ -624,33 +624,13 @@ table .group-actions {
}
/* Breadcrumb */
#grid-breadcrumb {
margin-bottom: 5px;
padding-left: 0px;
font-size: 12px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
#grid-breadcrumb > li {
display: inline;
cursor: pointer;
color: #ea7d1e;
}
#grid-breadcrumb > li:hover {
color: #d56e14;
}
#grid-breadcrumb > li:last-of-type {
color: inherit;
cursor: inherit;
}
#grid-breadcrumb > li:after {
content: '/';
margin-left: 0.4em;
margin-right: 0.2em;
color: initial;
}
#grid-breadcrumb > li:last-of-type:after {
content: none;
}
.grid-group {
display: none;
}
@@ -674,7 +654,7 @@ table .group-actions {
height: 100%;
overflow: hidden;
background-color: #585653;
transition: background-color linear 0.3s;
transition: all linear 0.3s;
}
.grid-item, .grid-item:hover, .grid-item:active, .grid-item:focus, .grid-item:visited {
color: #fff;
@@ -753,6 +733,7 @@ table .group-actions {
}
.grid-item:hover, .grid-item:focus {
background-color: #ea7d1e;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
}
.grid-item-name {
font-weight: 600;

View File

@@ -671,33 +671,13 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
}
/* Breadcrumb */
#grid-breadcrumb{
margin-bottom: 5px;
padding-left: 0px;
font-size: 12px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
#grid-breadcrumb > li{
display: inline;
cursor: pointer;
color: $brand-primary;
}
#grid-breadcrumb > li:hover{
color: $brand-primary-dark;
}
#grid-breadcrumb > li:last-of-type{
color: inherit;
cursor: inherit;
}
#grid-breadcrumb > li:after{
content: '/';
margin-left: 0.4em;
margin-right: 0.2em;
color: initial;
}
#grid-breadcrumb > li:last-of-type:after{
content: none;
}
.grid-group{
display: none;
@@ -724,7 +704,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
height: 100%;
overflow: hidden;
background-color: $combodo-dark-gray;
transition: background-color linear 0.3s;
transition: all linear 0.3s;
}
.grid-item,
.grid-item:hover,
@@ -808,6 +788,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
.grid-item:hover,
.grid-item:focus{
background-color: $combodo-orange;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
}
/* All layout */