mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-23 02:28:44 +02:00
Portal: Renamed Grid browse mode to Mosaic
SVN:trunk[4728]
This commit is contained in:
Guillaume Lajarige
@@ -90,7 +90,7 @@ Dict::Add('CS CZ', 'Czech', 'Čeština', array(
|
||||
'Brick:Portal:Browse:Name' => 'Procházet položky',
|
||||
'Brick:Portal:Browse:Mode:List' => 'Seznam',
|
||||
'Brick:Portal:Browse:Mode:Tree' => 'Strom',
|
||||
'Brick:Portal:Browse:Mode:Grid' => 'Tiles~~',
|
||||
'Brick:Portal:Browse:Mode:Mosaic' => 'Mosaic~~',
|
||||
'Brick:Portal:Browse:Action:Drilldown' => 'Rozpad',
|
||||
'Brick:Portal:Browse:Action:View' => 'Podrobnosti',
|
||||
'Brick:Portal:Browse:Action:Edit' => 'Upravit',
|
||||
|
||||
@@ -86,7 +86,7 @@ Dict::Add('DE DE', 'German', 'Deutsch', array(
|
||||
'Brick:Portal:Browse:Name' => 'List durchgehen',
|
||||
'Brick:Portal:Browse:Mode:List' => 'Liste',
|
||||
'Brick:Portal:Browse:Mode:Tree' => 'Baum',
|
||||
'Brick:Portal:Browse:Mode:Grid' => 'Tiles~~',
|
||||
'Brick:Portal:Browse:Mode:Mosaic' => 'Mosaic~~',
|
||||
'Brick:Portal:Browse:Action:Drilldown' => 'Drilldown',
|
||||
'Brick:Portal:Browse:Action:View' => 'Details',
|
||||
'Brick:Portal:Browse:Action:Edit' => 'Editieren',
|
||||
|
||||
@@ -86,7 +86,7 @@ Dict::Add('EN US', 'English', 'English', array(
|
||||
'Brick:Portal:Browse:Name' => 'Browse throught items',
|
||||
'Brick:Portal:Browse:Mode:List' => 'List',
|
||||
'Brick:Portal:Browse:Mode:Tree' => 'Tree',
|
||||
'Brick:Portal:Browse:Mode:Grid' => 'Tiles',
|
||||
'Brick:Portal:Browse:Mode:Mosaic' => 'Mosaic',
|
||||
'Brick:Portal:Browse:Action:Drilldown' => 'Drilldown',
|
||||
'Brick:Portal:Browse:Action:View' => 'Details',
|
||||
'Brick:Portal:Browse:Action:Edit' => 'Edit',
|
||||
|
||||
@@ -86,7 +86,7 @@ Dict::Add('ES CR', 'Spanish', 'Español, Castellano', array(
|
||||
'Brick:Portal:Browse:Name' => 'Buscar en todos los elementos',
|
||||
'Brick:Portal:Browse:Mode:List' => 'Lista',
|
||||
'Brick:Portal:Browse:Mode:Tree' => 'Árbol',
|
||||
'Brick:Portal:Browse:Mode:Grid' => 'Tiles~~',
|
||||
'Brick:Portal:Browse:Mode:Mosaic' => 'Mosaic~~',
|
||||
'Brick:Portal:Browse:Action:Drilldown' => 'Desglose',
|
||||
'Brick:Portal:Browse:Action:View' => 'Detalles',
|
||||
'Brick:Portal:Browse:Action:Edit' => 'Editar',
|
||||
|
||||
@@ -86,7 +86,7 @@ Dict::Add('FR FR', 'French', 'Français', array(
|
||||
'Brick:Portal:Browse:Name' => 'Navigation dans les éléments',
|
||||
'Brick:Portal:Browse:Mode:List' => 'Liste',
|
||||
'Brick:Portal:Browse:Mode:Tree' => 'Hiérarchie',
|
||||
'Brick:Portal:Browse:Mode:Grid' => 'Tuiles',
|
||||
'Brick:Portal:Browse:Mode:Mosaic' => 'Mosaïque',
|
||||
'Brick:Portal:Browse:Action:Drilldown' => 'Parcourir',
|
||||
'Brick:Portal:Browse:Action:View' => 'Détails',
|
||||
'Brick:Portal:Browse:Action:Edit' => 'Modifier',
|
||||
|
||||
@@ -80,7 +80,7 @@ class BrowseBrickController extends BrickController
|
||||
// Building DBobjectSearch
|
||||
$oQuery = null;
|
||||
// ... In this case only we have to build a specific query for the current level only
|
||||
if (in_array($sBrowseMode, array(BrowseBrick::ENUM_BROWSE_MODE_TREE, BrowseBrick::ENUM_BROWSE_MODE_GRID)) && ($sDataLoading === AbstractBrick::ENUM_DATA_LOADING_LAZY))
|
||||
if (in_array($sBrowseMode, array(BrowseBrick::ENUM_BROWSE_MODE_TREE, BrowseBrick::ENUM_BROWSE_MODE_MOSAIC)) && ($sDataLoading === AbstractBrick::ENUM_DATA_LOADING_LAZY))
|
||||
{
|
||||
// Will be handled later in the pagination part
|
||||
}
|
||||
@@ -233,7 +233,7 @@ class BrowseBrickController extends BrickController
|
||||
|
||||
break;
|
||||
case BrowseBrick::ENUM_BROWSE_MODE_TREE:
|
||||
case BrowseBrick::ENUM_BROWSE_MODE_GRID:
|
||||
case BrowseBrick::ENUM_BROWSE_MODE_MOSAIC:
|
||||
// Retrieving parameters
|
||||
$sLevelAlias = $oRequest->get('sLevelAlias');
|
||||
$sNodeId = $oRequest->get('sNodeId');
|
||||
@@ -333,7 +333,7 @@ class BrowseBrickController extends BrickController
|
||||
switch ($sBrowseMode)
|
||||
{
|
||||
case BrowseBrick::ENUM_BROWSE_MODE_TREE:
|
||||
case BrowseBrick::ENUM_BROWSE_MODE_GRID:
|
||||
case BrowseBrick::ENUM_BROWSE_MODE_MOSAIC:
|
||||
static::AddToTreeItems($aItems, $aCurrentRow, $aLevelsProperties);
|
||||
break;
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@ class BrowseBrick extends PortalBrick
|
||||
const DEFAULT_NAVIGATION_MENU_ICON_CLASS = 'fa fa-map fa-2x';
|
||||
const ENUM_BROWSE_MODE_LIST = 'list';
|
||||
const ENUM_BROWSE_MODE_TREE = 'tree';
|
||||
const ENUM_BROWSE_MODE_GRID = 'grid';
|
||||
const ENUM_BROWSE_MODE_MOSAIC = 'mosaic';
|
||||
const ENUM_ACTION_VIEW = 'view';
|
||||
const ENUM_ACTION_EDIT = 'edit';
|
||||
const ENUM_ACTION_DRILLDOWN = 'drilldown';
|
||||
@@ -52,7 +52,7 @@ class BrowseBrick extends PortalBrick
|
||||
const DEFAULT_ACTION_OPENING_TARGET = self::ENUM_OPENING_TARGET_MODAL;
|
||||
const DEFAULT_COUNT_PER_PAGE_LIST = 20;
|
||||
|
||||
static $aBrowseModes = array(self::ENUM_BROWSE_MODE_LIST, self::ENUM_BROWSE_MODE_TREE, self::ENUM_BROWSE_MODE_GRID);
|
||||
static $aBrowseModes = array(self::ENUM_BROWSE_MODE_LIST, self::ENUM_BROWSE_MODE_TREE, self::ENUM_BROWSE_MODE_MOSAIC);
|
||||
|
||||
static $sRouteName = 'p_browse_brick';
|
||||
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
{# itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig #}
|
||||
{# Browse brick grid mode layout #}
|
||||
{# itop-portal-base/portal/src/views/bricks/browse/mode_mosaic.html.twig #}
|
||||
{# Browse brick mosaic mode layout #}
|
||||
{% extends 'itop-portal-base/portal/src/views/bricks/browse/layout.html.twig' %}
|
||||
|
||||
{% block bBrowseMainContent %}
|
||||
<div id="brick_content_grid">
|
||||
{% block bBrowseGridContent %}
|
||||
<ol id="grid-breadcrumb" class="breadcrumb">
|
||||
<div id="brick_content_mosaic">
|
||||
{% block bBrowseMosaicContent %}
|
||||
<ol id="mosaic-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 class="mosaic-group" data-level-id="L">
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
<div id="brick_content_empty" class="text-center">
|
||||
{% block bBrowseGridEmpty %}
|
||||
{% block bBrowseMosaicEmpty %}
|
||||
{{ 'Brick:Portal:Browse:Filter:NoData'|dict_s }}
|
||||
{% endblock %}
|
||||
</div>
|
||||
<div id="brick_grid_overlay">
|
||||
{% block bBrowseGridOverlay %}
|
||||
<div id="brick_mosaic_overlay">
|
||||
{% block bBrowseMosaicOverlay %}
|
||||
<div class="overlay_content">
|
||||
{% include 'itop-portal-base/portal/src/views/helpers/loader.html.twig' %}
|
||||
</div>
|
||||
@@ -34,45 +34,45 @@
|
||||
var sBrowseMode = '{{ sBrowseMode }}';
|
||||
var oLevelsProperties = {{ aLevelsProperties|raw }};
|
||||
var oRawDatas = {{ aItems|raw }};
|
||||
var sGridEffectName = 'fade';
|
||||
var oGridEffectOptions = {};
|
||||
var iGridEffectDuration = 200;
|
||||
var sMosaicEffectName = 'fade';
|
||||
var oMosaicEffectOptions = {};
|
||||
var iMosaicEffectDuration = 200;
|
||||
|
||||
// Show a loader over the grid
|
||||
var showGridLoader = function()
|
||||
// Show a loader over the mosaic
|
||||
var showMosaicLoader = function()
|
||||
{
|
||||
$("#brick_content_grid").hide();
|
||||
$('#brick_grid_overlay').show();
|
||||
$("#brick_content_mosaic").hide();
|
||||
$('#brick_mosaic_overlay').show();
|
||||
};
|
||||
// Hide the loader over the tree
|
||||
var hideGridLoader = function()
|
||||
var hideMosaicLoader = function()
|
||||
{
|
||||
$('#brick_grid_overlay').hide();
|
||||
$("#brick_content_grid").show();
|
||||
$('#brick_mosaic_overlay').hide();
|
||||
$("#brick_content_mosaic").show();
|
||||
}
|
||||
// Show the requested level
|
||||
var showLevel = function(sLevelAlias, sItemId)
|
||||
{
|
||||
// Retrieving level to show
|
||||
var sLevelId = sLevelAlias + ((sItemId !== undefined) ? '::'+sItemId : '' );
|
||||
var oLevelElem = $('#brick_content_grid .grid-group[data-level-id="' + sLevelId + '"]');
|
||||
var oLevelElem = $('#brick_content_mosaic .mosaic-group[data-level-id="' + sLevelId + '"]');
|
||||
var bLevelLoaded = (oLevelElem.length > 0);
|
||||
|
||||
// Hiding current level
|
||||
$('#brick_content_grid .grid-group:visible').hide(
|
||||
sGridEffectName,
|
||||
oGridEffectOptions,
|
||||
iGridEffectDuration,
|
||||
$('#brick_content_mosaic .mosaic-group:visible').hide(
|
||||
sMosaicEffectName,
|
||||
oMosaicEffectOptions,
|
||||
iMosaicEffectDuration,
|
||||
function(){
|
||||
// Showing level
|
||||
if(!bLevelLoaded)
|
||||
{
|
||||
showGridLoader();
|
||||
showMosaicLoader();
|
||||
loadChildNodes(sLevelAlias, sItemId);
|
||||
}
|
||||
else
|
||||
{
|
||||
oLevelElem.show(sGridEffectName, oGridEffectOptions, iGridEffectDuration, function(){ buildBreadcrumb(); });
|
||||
oLevelElem.show(sMosaicEffectName, oMosaicEffectOptions, iMosaicEffectDuration, function(){ buildBreadcrumb(); });
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -80,13 +80,13 @@
|
||||
// Registers the toggle listeners on the tree nodes. Used after every AJAX calls.
|
||||
var registerToggleListeners = function()
|
||||
{
|
||||
$('#brick_content_grid .grid-drilldown').off('click').on('click', function (oEvent) {
|
||||
$('#brick_content_mosaic .mosaic-drilldown').off('click').on('click', function (oEvent) {
|
||||
oEvent.preventDefault();
|
||||
|
||||
showLevel($(this).attr('data-level-alias'), $(this).attr('data-item-id'));
|
||||
});
|
||||
|
||||
$('#brick_content_grid .grid-rollup').off('click').on('click', function (oEvent) {
|
||||
$('#brick_content_mosaic .mosaic-rollup').off('click').on('click', function (oEvent) {
|
||||
oEvent.preventDefault();
|
||||
|
||||
var upperlevelId = $(this).attr('data-level-id');
|
||||
@@ -96,14 +96,14 @@
|
||||
});
|
||||
|
||||
// Allows link in item's description to work. Otherwise, the predentDefault of the item takes over.
|
||||
$('#brick_content_grid .grid-item-description a').off('click').on('click', function(oEvent){
|
||||
$('#brick_content_mosaic .mosaic-item-description a').off('click').on('click', function(oEvent){
|
||||
oEvent.stopPropagation();
|
||||
});
|
||||
};
|
||||
// Registers the filter listeners on the tree.
|
||||
var registerFilterListeners = function()
|
||||
{
|
||||
/*$('#brick_search_field').treeListFilter('#brick_content_grid', iSearchDelay, filterResultsHandler);*/
|
||||
/*$('#brick_search_field').treeListFilter('#brick_content_mosaic', iSearchDelay, filterResultsHandler);*/
|
||||
};
|
||||
// Load current node childnodes throught AJAX
|
||||
var loadChildNodes = function(sLevelAlias, sNodeId)
|
||||
@@ -119,10 +119,10 @@
|
||||
var sublevel = data.data[index];
|
||||
var sublevelData = {};
|
||||
sublevelData[sublevel.level_alias+"::"+sublevel.id] = sublevel;
|
||||
buildGrid(sublevelData, sLevelAlias+"::"+sNodeId, false);
|
||||
buildMosaic(sublevelData, sLevelAlias+"::"+sNodeId, false);
|
||||
}
|
||||
// Showing sublevel
|
||||
$('#brick_content_grid .grid-group[data-level-id="'+sLevelAlias+"::"+sNodeId+'"]').show(sGridEffectName, oGridEffectOptions, iGridEffectDuration, function(){ buildBreadcrumb(); });
|
||||
$('#brick_content_mosaic .mosaic-group[data-level-id="'+sLevelAlias+"::"+sNodeId+'"]').show(sMosaicEffectName, oMosaicEffectOptions, iMosaicEffectDuration, function(){ buildBreadcrumb(); });
|
||||
|
||||
registerToggleListeners();
|
||||
})
|
||||
@@ -130,11 +130,11 @@
|
||||
alert('{{ 'Error:XHR:Fail'|dict_s }}');
|
||||
})
|
||||
.always(function(){
|
||||
hideGridLoader();
|
||||
hideMosaicLoader();
|
||||
});
|
||||
};
|
||||
// Build grid nodes from data under the nodeId
|
||||
var buildGrid = function(data, nodeId, isRootLevel)
|
||||
// Build mosaic nodes from data under the nodeId
|
||||
var buildMosaic = function(data, nodeId, isRootLevel)
|
||||
{
|
||||
if(nodeId === undefined)
|
||||
{
|
||||
@@ -149,19 +149,19 @@
|
||||
// Building node if necessary
|
||||
if($('div[data-level-id="'+nodeId+'"]').length === 0)
|
||||
{
|
||||
$('#brick_content_grid').append( $('<div></div>').addClass('grid-group').attr('data-level-id', nodeId) );
|
||||
$('#brick_content_mosaic').append( $('<div></div>').addClass('mosaic-group').attr('data-level-id', nodeId) );
|
||||
}
|
||||
|
||||
if(!isRootLevel)
|
||||
{
|
||||
// Retrieving upper level id
|
||||
var levelIdParts = nodeId.split('::');
|
||||
var upperlevelId = $('.grid-item[data-level-alias="'+levelIdParts[0]+'"][data-item-id="'+levelIdParts[1]+'"]').closest('.grid-group').attr('data-level-id');
|
||||
var upperlevelId = $('.mosaic-item[data-level-alias="'+levelIdParts[0]+'"][data-item-id="'+levelIdParts[1]+'"]').closest('.mosaic-group').attr('data-level-id');
|
||||
|
||||
// Building back button
|
||||
if( $('div[data-level-id="'+nodeId+'"] .grid-group-back').length === 0 ) {
|
||||
var backElem = $('<div></div>').addClass('grid-group-item').addClass('grid-group-back');
|
||||
var aElem = $('<a></a>').addClass('grid-item').addClass('grid-rollup').attr('href', '#').attr('data-level-id', upperlevelId).html('<div class="grid-item-text"><span class="glyphicon glyphicon-arrow-left"></span></div>');
|
||||
if( $('div[data-level-id="'+nodeId+'"] .mosaic-group-back').length === 0 ) {
|
||||
var backElem = $('<div></div>').addClass('mosaic-group-item').addClass('mosaic-group-back');
|
||||
var aElem = $('<a></a>').addClass('mosaic-item').addClass('mosaic-rollup').attr('href', '#').attr('data-level-id', upperlevelId).html('<div class="mosaic-item-text"><span class="glyphicon glyphicon-arrow-left"></span></div>');
|
||||
|
||||
backElem.append(aElem);
|
||||
$('div[data-level-id="' + nodeId + '"]').append(backElem);
|
||||
@@ -181,32 +181,32 @@
|
||||
var url = '';
|
||||
|
||||
// Building node
|
||||
var itemElem = $('<div></div>').addClass('grid-group-item');
|
||||
var aElem = $('<a></a>').addClass('grid-item').attr('data-item-id', item.id).attr('href', '#').attr('data-level-alias', item.level_alias);
|
||||
var itemElem = $('<div></div>').addClass('mosaic-group-item');
|
||||
var aElem = $('<a></a>').addClass('mosaic-item').attr('data-item-id', item.id).attr('href', '#').attr('data-level-alias', item.level_alias);
|
||||
var iItemFlags = 0;
|
||||
// - Adding stub div
|
||||
var textElem = $('<div></div>').addClass('grid-item-text');
|
||||
var textElem = $('<div></div>').addClass('mosaic-item-text');
|
||||
// - Adding image
|
||||
if( (item.image !== undefined) && (item.image !== '') )
|
||||
{
|
||||
iItemFlags += 4;
|
||||
aElem.append( $('<div></div>').addClass('grid-item-image').append( $('<img />').attr('src', item.image) ) );
|
||||
aElem.append( $('<div></div>').addClass('mosaic-item-image').append( $('<img />').attr('src', item.image) ) );
|
||||
}
|
||||
// - Adding name
|
||||
if( (item.name !== undefined) && (item.name !== '') )
|
||||
{
|
||||
iItemFlags += 1;
|
||||
textElem.append( $('<div></div>').addClass('grid-item-name').html(item.name) );
|
||||
textElem.append( $('<div></div>').addClass('mosaic-item-name').html(item.name) );
|
||||
}
|
||||
// - Adding description
|
||||
if( (item.description !== undefined) && (item.description !== '') )
|
||||
{
|
||||
iItemFlags += 2;
|
||||
textElem.append( $('<div></div>').addClass('grid-item-description').html(item.description) );
|
||||
textElem.append( $('<div></div>').addClass('mosaic-item-description').html(item.description) );
|
||||
}
|
||||
aElem.append( textElem );
|
||||
// - Adding CSS class to adjust the layout regarding which properties are available
|
||||
aElem.addClass('grid-item-layout-'+iItemFlags);
|
||||
aElem.addClass('mosaic-item-layout-'+iItemFlags);
|
||||
// - Appending element
|
||||
$('div[data-level-id="'+nodeId+'"]').append(itemElem);
|
||||
itemElem.append(aElem);
|
||||
@@ -221,7 +221,7 @@
|
||||
switch(levelPrimaryAction.type)
|
||||
{
|
||||
case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_DRILLDOWN') }}':
|
||||
aElem.addClass('grid-drilldown');
|
||||
aElem.addClass('mosaic-drilldown');
|
||||
break;
|
||||
case '{{ constant('Combodo\\iTop\\Portal\\Brick\\BrowseBrick::ENUM_ACTION_VIEW') }}':
|
||||
url = '{{ app.url_generator.generate('p_object_view', {'sObjectClass': '-objectClass-', 'sObjectId': '-objectId-'})|raw }}'.replace(/-objectClass-/, item.class).replace(/-objectId-/, item.id);
|
||||
@@ -254,7 +254,7 @@
|
||||
}
|
||||
|
||||
// Preparing secondary actions container
|
||||
var actionsElem = $('<div></div>').addClass('grid-group-item-actions');
|
||||
var actionsElem = $('<div></div>').addClass('mosaic-group-item-actions');
|
||||
itemElem.append(actionsElem);
|
||||
// Preparing secondary actions menu
|
||||
var actionsSSTogglerElem = $('<a class="glyphicon glyphicon-menu-hamburger" data-toggle="collapse" data-target="#item-actions-menu-'+levelAltId+'"></a>');
|
||||
@@ -317,10 +317,10 @@
|
||||
}
|
||||
else
|
||||
{
|
||||
subitemsElem = $('<div></div>').addClass('grid-group').attr('data-level-id', levelId);
|
||||
subitemsElem = $('<div></div>').addClass('mosaic-group').attr('data-level-id', levelId);
|
||||
$('div[data-level-id="'+nodeId+'"]').after(subitemsElem);
|
||||
}
|
||||
buildGrid(item.subitems, levelId, false);
|
||||
buildMosaic(item.subitems, levelId, false);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -342,14 +342,14 @@
|
||||
bLeafLevel = true;
|
||||
|
||||
// Retrieving current level id
|
||||
var sCurrentLevelId = $('#brick_content_grid > .grid-group:visible').attr('data-level-id');
|
||||
var sCurrentLevelId = $('#brick_content_mosaic > .mosaic-group:visible').attr('data-level-id');
|
||||
aCurrentLevelParts = sCurrentLevelId.split('::');
|
||||
|
||||
// Emptying breadcrumb
|
||||
$('#grid-breadcrumb > li:not(:first-of-type)').remove();
|
||||
$('#mosaic-breadcrumb > li:not(:first-of-type)').remove();
|
||||
|
||||
// Finding current item
|
||||
oCurrentElem = $('#brick_content_grid .grid-item[data-level-alias="'+aCurrentLevelParts[0]+'"][data-item-id="'+aCurrentLevelParts[1]+'"]');
|
||||
oCurrentElem = $('#brick_content_mosaic .mosaic-item[data-level-alias="'+aCurrentLevelParts[0]+'"][data-item-id="'+aCurrentLevelParts[1]+'"]');
|
||||
if(oCurrentElem.length === 0)
|
||||
{
|
||||
return false;
|
||||
@@ -363,15 +363,15 @@
|
||||
// Adding level as crumb
|
||||
var oCrumb = $('<li></li>');
|
||||
var oCrumbLink = (bLeafLevel) ? $('<span></span>') : $('<a></a>');
|
||||
oCrumbLink.html( oCurrentElem.find('.grid-item-name').html() );
|
||||
oCrumbLink.html( oCurrentElem.find('.mosaic-item-name').html() );
|
||||
oCrumbLink.attr('data-level-id', aCurrentLevelParts.join('::')).attr('href', '#');
|
||||
oCrumb.append(oCrumbLink).insertAfter('#grid-breadcrumb > li:first-of-type');
|
||||
oCrumb.append(oCrumbLink).insertAfter('#mosaic-breadcrumb > li:first-of-type');
|
||||
if(bLeafLevel)
|
||||
{
|
||||
oCrumb.addClass('active');
|
||||
}
|
||||
// Adding listener
|
||||
$('#grid-breadcrumb > li:not(:last-of-type) > a').off('click').on('click', function(oEvent){
|
||||
$('#mosaic-breadcrumb > li:not(:last-of-type) > a').off('click').on('click', function(oEvent){
|
||||
oEvent.preventDefault();
|
||||
|
||||
var levelId = $(this).attr('data-level-id');
|
||||
@@ -381,12 +381,12 @@
|
||||
});
|
||||
|
||||
// Finding parent level
|
||||
var oParentLevelElem = oCurrentElem.closest('.grid-group');
|
||||
var oParentLevelElem = oCurrentElem.closest('.mosaic-group');
|
||||
if(oParentLevelElem.length > 0)
|
||||
{
|
||||
var sParentLevelId = oParentLevelElem.attr('data-level-id');
|
||||
var aParentLevelParts = sParentLevelId.split('::');
|
||||
var oParentElem = $('#brick_content_grid .grid-item[data-level-alias="'+aParentLevelParts[0]+'"][data-item-id="'+aParentLevelParts[1]+'"]');
|
||||
var oParentElem = $('#brick_content_mosaic .mosaic-item[data-level-alias="'+aParentLevelParts[0]+'"][data-item-id="'+aParentLevelParts[1]+'"]');
|
||||
|
||||
if(oParentElem.length === 1)
|
||||
{
|
||||
@@ -398,13 +398,13 @@
|
||||
$(document).ready(function(){
|
||||
// Auto collapse item actions popup
|
||||
$('body').click(function(){
|
||||
$('#brick_content_grid .item-action-wrapper.collapse.in').collapse('hide');
|
||||
$('#brick_content_mosaic .item-action-wrapper.collapse.in').collapse('hide');
|
||||
});
|
||||
|
||||
// Build the tree (collapsed)
|
||||
showGridLoader();
|
||||
buildGrid(oRawDatas);
|
||||
hideGridLoader();
|
||||
showMosaicLoader();
|
||||
buildMosaic(oRawDatas);
|
||||
hideMosaicLoader();
|
||||
registerFilterListeners();
|
||||
});
|
||||
</script>
|
||||
@@ -564,10 +564,10 @@ footer {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
.list-group-item:hover > .list-group-item-actions, .grid-group-item:hover > .grid-group-item-actions {
|
||||
.list-group-item:hover > .list-group-item-actions, .mosaic-group-item:hover > .mosaic-group-item-actions {
|
||||
display: block;
|
||||
}
|
||||
.list-group-item .list-group-item-actions a:not(:first-child), .grid-group-item .grid-group-item-actions a:not(:first-child) {
|
||||
.list-group-item .list-group-item-actions a:not(:first-child), .mosaic-group-item .mosaic-group-item-actions a:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.list-group-item .keep-spinning {
|
||||
@@ -585,11 +585,11 @@ footer {
|
||||
table .group-actions {
|
||||
position: relative;
|
||||
}
|
||||
.list-group-item-actions a.glyphicon-menu-hamburger, .grid-group-item-actions a.glyphicon-menu-hamburger, table .group-actions a.glyphicon-menu-hamburger {
|
||||
.list-group-item-actions a.glyphicon-menu-hamburger, .mosaic-group-item-actions a.glyphicon-menu-hamburger, table .group-actions a.glyphicon-menu-hamburger {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.list-group-item-actions .item-action-wrapper, .grid-group-item-actions .item-action-wrapper, table .group-actions .item-action-wrapper {
|
||||
.list-group-item-actions .item-action-wrapper, .mosaic-group-item-actions .item-action-wrapper, table .group-actions .item-action-wrapper {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
@@ -599,17 +599,17 @@ table .group-actions {
|
||||
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.list-group-item-actions .item-action-wrapper .glyphicon, .grid-group-item-actions .item-action-wrapper .glyphicon, table .group-actions .item-action-wrapper .glyphicon {
|
||||
.list-group-item-actions .item-action-wrapper .glyphicon, .mosaic-group-item-actions .item-action-wrapper .glyphicon, table .group-actions .item-action-wrapper .glyphicon {
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
.list-group-item-actions .item-action-wrapper.collapse.in, .grid-group-item-actions .item-action-wrapper.collapse.in, table .group-actions .item-action-wrapper.collapse.in {
|
||||
.list-group-item-actions .item-action-wrapper.collapse.in, .mosaic-group-item-actions .item-action-wrapper.collapse.in, table .group-actions .item-action-wrapper.collapse.in {
|
||||
display: block;
|
||||
}
|
||||
.list-group-item-actions .item-action-wrapper .panel-body > p, .grid-group-item-actions .item-action-wrapper .panel-body > p, table .group-actions .item-action-wrapper .panel-body > p {
|
||||
.list-group-item-actions .item-action-wrapper .panel-body > p, .mosaic-group-item-actions .item-action-wrapper .panel-body > p, table .group-actions .item-action-wrapper .panel-body > p {
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.list-group-item-actions .item-action-wrapper .panel-body > p:last-child, .grid-group-item-actions .item-action-wrapper .panel-body > p:last-child, table .group-actions .item-action-wrapper .panel-body > p:last-child {
|
||||
.list-group-item-actions .item-action-wrapper .panel-body > p:last-child, .mosaic-group-item-actions .item-action-wrapper .panel-body > p:last-child, table .group-actions .item-action-wrapper .panel-body > p:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
#brick_content_empty {
|
||||
@@ -619,22 +619,22 @@ table .group-actions {
|
||||
font-style: italic;
|
||||
}
|
||||
/* Loader */
|
||||
#brick_tree_overlay, #brick_grid_overlay {
|
||||
#brick_tree_overlay, #brick_mosaic_overlay {
|
||||
display: none;
|
||||
padding: 8% 0px;
|
||||
border-radius: 0px 0px 4px 4px;
|
||||
font-size: 1em;
|
||||
}
|
||||
/****************/
|
||||
/* - Grid mode */
|
||||
/* - Mosaic mode */
|
||||
/* Note: Some of the CSS is factorised in the "Tree mode" part */
|
||||
/****************/
|
||||
#brick_content_grid {
|
||||
#brick_content_mosaic {
|
||||
position: relative;
|
||||
padding: 10px 10px 1px 10px;
|
||||
}
|
||||
/* Breadcrumb */
|
||||
#grid-breadcrumb {
|
||||
#mosaic-breadcrumb {
|
||||
margin-bottom: 5px;
|
||||
padding-left: 0px;
|
||||
font-size: 12px;
|
||||
@@ -642,24 +642,24 @@ table .group-actions {
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.grid-group {
|
||||
.mosaic-group {
|
||||
display: none;
|
||||
}
|
||||
/* Only the first level is showed by default */
|
||||
.grid-group:first-of-type {
|
||||
.mosaic-group:first-of-type {
|
||||
display: block;
|
||||
}
|
||||
.grid-group-back, .grid-group-item {
|
||||
.mosaic-group-back, .mosaic-group-item {
|
||||
position: relative;
|
||||
height: 55px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.grid-group-back {
|
||||
.mosaic-group-back {
|
||||
font-size: 25px;
|
||||
}
|
||||
.grid-item {
|
||||
.mosaic-item {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -667,64 +667,64 @@ table .group-actions {
|
||||
background-color: #585653;
|
||||
transition: all linear 0.3s;
|
||||
}
|
||||
.grid-item, .grid-item:hover, .grid-item:active, .grid-item:focus, .grid-item:visited {
|
||||
.mosaic-item, .mosaic-item:hover, .mosaic-item:active, .mosaic-item:focus, .mosaic-item:visited {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.grid-item:active {
|
||||
.mosaic-item:active {
|
||||
background-color: #9e510f;
|
||||
}
|
||||
.grid-item-image, .grid-item-text {
|
||||
.mosaic-item-image, .mosaic-item-text {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.grid-item-image > img {
|
||||
.mosaic-item-image > img {
|
||||
max-width: 85%;
|
||||
}
|
||||
.grid-group-item > .grid-group-item-actions {
|
||||
.mosaic-group-item > .mosaic-group-item-actions {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
.grid-group-item-actions > a {
|
||||
.mosaic-group-item-actions > a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.grid-group-item-actions > a:hover, .grid-group-item-actions > a:focus {
|
||||
.mosaic-group-item-actions > a:hover, .mosaic-group-item-actions > a:focus {
|
||||
color: #eee;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
/* All layout */
|
||||
/* Layout 2 */
|
||||
/* Layout 5/7 */
|
||||
.grid-group-item > .grid-group-item-actions {
|
||||
.mosaic-group-item > .mosaic-group-item-actions {
|
||||
top: 12px;
|
||||
right: 6px;
|
||||
}
|
||||
.grid-group-item > .grid-group-item-actions > .glyphicon {
|
||||
.mosaic-group-item > .mosaic-group-item-actions > .glyphicon {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.grid-group-item-actions > a {
|
||||
.mosaic-group-item-actions > a {
|
||||
font-size: 20px;
|
||||
}
|
||||
.grid-item-image {
|
||||
.mosaic-item-image {
|
||||
width: 55px;
|
||||
padding: 10px;
|
||||
}
|
||||
.grid-item-image > img {
|
||||
.mosaic-item-image > img {
|
||||
max-height: 30px;
|
||||
}
|
||||
.grid-item-name {
|
||||
.mosaic-item-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
.grid-item-description {
|
||||
.mosaic-item-description {
|
||||
display: none;
|
||||
}
|
||||
.grid-item-layout-2 .grid-item-description {
|
||||
.mosaic-item-layout-2 .mosaic-item-description {
|
||||
display: block;
|
||||
}
|
||||
.grid-item-layout-5 .grid-item-name, .grid-item-layout-7 .grid-item-name {
|
||||
.mosaic-item-layout-5 .mosaic-item-name, .mosaic-item-layout-7 .mosaic-item-name {
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
@@ -732,35 +732,35 @@ table .group-actions {
|
||||
/* All layout */
|
||||
/* Layout 1 */
|
||||
/* Layout 7 */
|
||||
.grid-group-item {
|
||||
.mosaic-group-item {
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
height: 120px;
|
||||
margin-right: 1.95%;
|
||||
/* We don't put 2% to keep a margin in case of a bad browser rendering */
|
||||
}
|
||||
.grid-item {
|
||||
.mosaic-item {
|
||||
padding: 10px;
|
||||
}
|
||||
.grid-item:hover, .grid-item:focus {
|
||||
.mosaic-item:hover, .mosaic-item:focus {
|
||||
background-color: #ea7d1e;
|
||||
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
|
||||
}
|
||||
.grid-item-name {
|
||||
.mosaic-item-name {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
.grid-item-description {
|
||||
.mosaic-item-description {
|
||||
overflow: hidden;
|
||||
}
|
||||
.grid-item-layout-1 .grid-item-name {
|
||||
.mosaic-item-layout-1 .mosaic-item-name {
|
||||
font-weight: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
.grid-item-layout-7 .grid-item-image {
|
||||
.mosaic-item-layout-7 .mosaic-item-image {
|
||||
display: none;
|
||||
}
|
||||
.grid-item-layout-3 .grid-item-description, .grid-item-layout-7 .grid-item-description {
|
||||
.mosaic-item-layout-3 .mosaic-item-description, .mosaic-item-layout-7 .mosaic-item-description {
|
||||
margin-top: 10px;
|
||||
max-height: 40px;
|
||||
font-size: 10px;
|
||||
@@ -768,27 +768,27 @@ table .group-actions {
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
/* Layout 7 */
|
||||
.grid-item {
|
||||
.mosaic-item {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.grid-group-back {
|
||||
.mosaic-group-back {
|
||||
font-size: 40px;
|
||||
}
|
||||
.grid-item-layout-7 .grid-item-image {
|
||||
.mosaic-item-layout-7 .mosaic-item-image {
|
||||
display: table-cell;
|
||||
width: 105px;
|
||||
padding-left: 5px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
.grid-item-layout-7 .grid-item-image > img {
|
||||
.mosaic-item-layout-7 .mosaic-item-image > img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.grid-item-layout-7 .grid-item-name {
|
||||
.mosaic-item-layout-7 .mosaic-item-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.grid-group-item {
|
||||
.mosaic-group-item {
|
||||
width: 24%;
|
||||
height: 140px;
|
||||
margin-right: 1.3%;
|
||||
@@ -796,17 +796,17 @@ table .group-actions {
|
||||
}
|
||||
/* Helper classes to remove margin depending on the screen size */
|
||||
@media (min-width: 768px) and (max-width: 992px) {
|
||||
.grid-group-item:nth-child(3n) {
|
||||
.mosaic-group-item:nth-child(3n) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1200px) {
|
||||
.grid-group-item:nth-child(3n) {
|
||||
.mosaic-group-item:nth-child(3n) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.grid-group-item:nth-child(4n) {
|
||||
.mosaic-group-item:nth-child(4n) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -593,11 +593,11 @@ footer{
|
||||
right: 10px;
|
||||
}
|
||||
.list-group-item:hover > .list-group-item-actions,
|
||||
.grid-group-item:hover > .grid-group-item-actions{
|
||||
.mosaic-group-item:hover > .mosaic-group-item-actions{
|
||||
display: block;
|
||||
}
|
||||
.list-group-item .list-group-item-actions a:not(:first-child),
|
||||
.grid-group-item .grid-group-item-actions a:not(:first-child){
|
||||
.mosaic-group-item .mosaic-group-item-actions a:not(:first-child){
|
||||
margin-left: 10px;
|
||||
}
|
||||
.list-group-item .keep-spinning{
|
||||
@@ -617,13 +617,13 @@ table .group-actions{
|
||||
position: relative;
|
||||
}
|
||||
.list-group-item-actions a.glyphicon-menu-hamburger,
|
||||
.grid-group-item-actions a.glyphicon-menu-hamburger,
|
||||
.mosaic-group-item-actions a.glyphicon-menu-hamburger,
|
||||
table .group-actions a.glyphicon-menu-hamburger{
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.list-group-item-actions .item-action-wrapper,
|
||||
.grid-group-item-actions .item-action-wrapper,
|
||||
.mosaic-group-item-actions .item-action-wrapper,
|
||||
table .group-actions .item-action-wrapper
|
||||
{
|
||||
display: none;
|
||||
@@ -636,23 +636,23 @@ table .group-actions .item-action-wrapper
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
|
||||
}
|
||||
.list-group-item-actions .item-action-wrapper .glyphicon,
|
||||
.grid-group-item-actions .item-action-wrapper .glyphicon,
|
||||
.mosaic-group-item-actions .item-action-wrapper .glyphicon,
|
||||
table .group-actions .item-action-wrapper .glyphicon{
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
.list-group-item-actions .item-action-wrapper.collapse.in,
|
||||
.grid-group-item-actions .item-action-wrapper.collapse.in,
|
||||
.mosaic-group-item-actions .item-action-wrapper.collapse.in,
|
||||
table .group-actions .item-action-wrapper.collapse.in{
|
||||
display: block;
|
||||
}
|
||||
.list-group-item-actions .item-action-wrapper .panel-body > p,
|
||||
.grid-group-item-actions .item-action-wrapper .panel-body > p,
|
||||
.mosaic-group-item-actions .item-action-wrapper .panel-body > p,
|
||||
table .group-actions .item-action-wrapper .panel-body > p{
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.list-group-item-actions .item-action-wrapper .panel-body > p:last-child,
|
||||
.grid-group-item-actions .item-action-wrapper .panel-body > p:last-child,
|
||||
.mosaic-group-item-actions .item-action-wrapper .panel-body > p:last-child,
|
||||
table .group-actions .item-action-wrapper .panel-body > p:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
@@ -666,7 +666,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
|
||||
|
||||
/* Loader */
|
||||
#brick_tree_overlay,
|
||||
#brick_grid_overlay{
|
||||
#brick_mosaic_overlay{
|
||||
display: none;
|
||||
padding: 8% 0px;
|
||||
border-radius: 0px 0px 4px 4px;
|
||||
@@ -674,15 +674,15 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
|
||||
}
|
||||
|
||||
/****************/
|
||||
/* - Grid mode */
|
||||
/* - Mosaic mode */
|
||||
/* Note: Some of the CSS is factorised in the "Tree mode" part */
|
||||
/****************/
|
||||
#brick_content_grid{
|
||||
#brick_content_mosaic{
|
||||
position: relative;
|
||||
padding: 10px 10px 1px 10px;
|
||||
}
|
||||
/* Breadcrumb */
|
||||
#grid-breadcrumb{
|
||||
#mosaic-breadcrumb{
|
||||
margin-bottom: 5px;
|
||||
padding-left: 0px;
|
||||
font-size: 12px;
|
||||
@@ -691,26 +691,26 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.grid-group{
|
||||
.mosaic-group{
|
||||
display: none;
|
||||
}
|
||||
/* Only the first level is showed by default */
|
||||
.grid-group:first-of-type{
|
||||
.mosaic-group:first-of-type{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.grid-group-back,
|
||||
.grid-group-item{
|
||||
.mosaic-group-back,
|
||||
.mosaic-group-item{
|
||||
position: relative;
|
||||
height: 55px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
}
|
||||
.grid-group-back{
|
||||
.mosaic-group-back{
|
||||
font-size: 25px;
|
||||
}
|
||||
.grid-item{
|
||||
.mosaic-item{
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -718,139 +718,139 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
|
||||
background-color: $combodo-dark-gray;
|
||||
transition: all linear 0.3s;
|
||||
}
|
||||
.grid-item,
|
||||
.grid-item:hover,
|
||||
.grid-item:active,
|
||||
.grid-item:focus,
|
||||
.grid-item:visited{
|
||||
.mosaic-item,
|
||||
.mosaic-item:hover,
|
||||
.mosaic-item:active,
|
||||
.mosaic-item:focus,
|
||||
.mosaic-item:visited{
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
.grid-item:active{
|
||||
.mosaic-item:active{
|
||||
background-color: $combodo-orange-darker;
|
||||
}
|
||||
.grid-item-image,
|
||||
.grid-item-text{
|
||||
.mosaic-item-image,
|
||||
.mosaic-item-text{
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.grid-item-image > img{
|
||||
.mosaic-item-image > img{
|
||||
max-width: 85%;
|
||||
}
|
||||
.grid-group-item > .grid-group-item-actions{
|
||||
.mosaic-group-item > .mosaic-group-item-actions{
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
.grid-group-item-actions > a{
|
||||
.mosaic-group-item-actions > a{
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
.grid-group-item-actions > a:hover,
|
||||
.grid-group-item-actions > a:focus{
|
||||
.mosaic-group-item-actions > a:hover,
|
||||
.mosaic-group-item-actions > a:focus{
|
||||
color: #EEEEEE;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-group-item > .grid-group-item-actions{
|
||||
.mosaic-group-item > .mosaic-group-item-actions{
|
||||
top: 12px;
|
||||
right: 6px;
|
||||
}
|
||||
.grid-group-item > .grid-group-item-actions > .glyphicon{
|
||||
.mosaic-group-item > .mosaic-group-item-actions > .glyphicon{
|
||||
margin-top: 5px;
|
||||
}
|
||||
.grid-group-item-actions > a{
|
||||
.mosaic-group-item-actions > a{
|
||||
font-size: 20px;
|
||||
}
|
||||
/* All layout */
|
||||
.grid-item-image{
|
||||
.mosaic-item-image{
|
||||
width: 55px;
|
||||
padding: 10px;
|
||||
}
|
||||
.grid-item-image > img{
|
||||
.mosaic-item-image > img{
|
||||
max-height: 30px;
|
||||
}
|
||||
.grid-item-name{
|
||||
.mosaic-item-name{
|
||||
font-size: 14px;
|
||||
}
|
||||
.grid-item-description{
|
||||
.mosaic-item-description{
|
||||
display: none;
|
||||
}
|
||||
/* Layout 2 */
|
||||
.grid-item-layout-2 .grid-item-description{
|
||||
.mosaic-item-layout-2 .mosaic-item-description{
|
||||
display: block;
|
||||
}
|
||||
/* Layout 5/7 */
|
||||
.grid-item-layout-5 .grid-item-name,
|
||||
.grid-item-layout-7 .grid-item-name{
|
||||
.mosaic-item-layout-5 .mosaic-item-name,
|
||||
.mosaic-item-layout-7 .mosaic-item-name{
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.grid-group-item{
|
||||
.mosaic-group-item{
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
height: 120px;
|
||||
margin-right: 1.95%; /* We don't put 2% to keep a margin in case of a bad browser rendering */
|
||||
}
|
||||
.grid-item{
|
||||
.mosaic-item{
|
||||
padding: 10px;
|
||||
}
|
||||
.grid-item:hover,
|
||||
.grid-item:focus{
|
||||
.mosaic-item:hover,
|
||||
.mosaic-item:focus{
|
||||
background-color: $combodo-orange;
|
||||
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
|
||||
}
|
||||
|
||||
/* All layout */
|
||||
.grid-item-name{
|
||||
.mosaic-item-name{
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
}
|
||||
.grid-item-description{
|
||||
.mosaic-item-description{
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Layout 1 */
|
||||
.grid-item-layout-1 .grid-item-name{
|
||||
.mosaic-item-layout-1 .mosaic-item-name{
|
||||
font-weight: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
/* Layout 7 */
|
||||
.grid-item-layout-7 .grid-item-image{
|
||||
.mosaic-item-layout-7 .mosaic-item-image{
|
||||
display: none;
|
||||
}
|
||||
.grid-item-layout-3 .grid-item-description,
|
||||
.grid-item-layout-7 .grid-item-description{
|
||||
.mosaic-item-layout-3 .mosaic-item-description,
|
||||
.mosaic-item-layout-7 .mosaic-item-description{
|
||||
margin-top: 10px;
|
||||
max-height: 40px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.grid-item{
|
||||
.mosaic-item{
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.grid-group-back{
|
||||
.mosaic-group-back{
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
/* Layout 7 */
|
||||
.grid-item-layout-7 .grid-item-image{
|
||||
.mosaic-item-layout-7 .mosaic-item-image{
|
||||
display: table-cell;
|
||||
width: 105px;
|
||||
padding-left: 5px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
.grid-item-layout-7 .grid-item-image > img{
|
||||
.mosaic-item-layout-7 .mosaic-item-image > img{
|
||||
max-width: 100%;
|
||||
}
|
||||
.grid-item-layout-7 .grid-item-name{
|
||||
.mosaic-item-layout-7 .mosaic-item-name{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.grid-group-item{
|
||||
.mosaic-group-item{
|
||||
width: 24%;
|
||||
height: 140px;
|
||||
margin-right: 1.3%;
|
||||
@@ -859,17 +859,17 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
|
||||
|
||||
/* Helper classes to remove margin depending on the screen size */
|
||||
@media (min-width: 768px) and (max-width: 992px) {
|
||||
.grid-group-item:nth-child(3n){
|
||||
.mosaic-group-item:nth-child(3n){
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) and (max-width: 1200px) {
|
||||
.grid-group-item:nth-child(3n){
|
||||
.mosaic-group-item:nth-child(3n){
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.grid-group-item:nth-child(4n){
|
||||
.mosaic-group-item:nth-child(4n){
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -356,7 +356,7 @@ $screen-md-max: ($screen-lg-min - 1) !default;
|
||||
|
||||
//== Grid system
|
||||
//
|
||||
//## Define your custom responsive grid.
|
||||
//## Define your custom responsive mosaic.
|
||||
|
||||
//** Number of columns in the grid.
|
||||
$grid-columns: 12 !default;
|
||||
|
||||
@@ -68,7 +68,7 @@ Dict::Add('RU RU', 'Russian', 'Русский', array(
|
||||
'Brick:Portal:Browse:Name' => 'Просмотр элементов',
|
||||
'Brick:Portal:Browse:Mode:List' => 'Список',
|
||||
'Brick:Portal:Browse:Mode:Tree' => 'Дерево',
|
||||
'Brick:Portal:Browse:Mode:Grid' => 'Tiles~~',
|
||||
'Brick:Portal:Browse:Mode:Mosaic' => 'Mosaic~~',
|
||||
'Brick:Portal:Browse:Action:Drilldown' => 'Детализация',
|
||||
'Brick:Portal:Browse:Action:View' => 'Подробно',
|
||||
'Brick:Portal:Browse:Action:Edit' => 'Изменить',
|
||||
|
||||
@@ -1119,7 +1119,7 @@
|
||||
<availables>
|
||||
<mode id="list"/>
|
||||
<mode id="tree"/>
|
||||
<mode id="grid"/>
|
||||
<mode id="mosaic"/>
|
||||
</availables>
|
||||
<default>list</default>
|
||||
</browse_modes>
|
||||
|
||||
Reference in New Issue
Block a user