diff --git a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig b/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig index 98f5440ca..9c291ff2e 100644 --- a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig +++ b/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig @@ -145,14 +145,7 @@ // Build tree nodes from data under the nodeId var buildGrid = function(data, nodeId, isRootLevel) { - var iItemIndex; - var oItemFlowLastOfLineIndex = { - sm: 3, - md: 3, - lg: 4, - }; - - if(nodeId === undefined) + if(nodeId === undefined) { // We are on the root node nodeId = 'L'; @@ -167,8 +160,6 @@ { $('#brick_content_grid').append( $('
').addClass('grid-group').attr('data-level-id', nodeId) ); } - // - Initializing item index - iItemIndex = $('div[data-level-id="'+nodeId+'"] .grid-item').length; if(!isRootLevel) { @@ -178,11 +169,9 @@ // Building back button if( $('div[data-level-id="'+nodeId+'"] .grid-group-back').length === 0 ) { - var backElem = $('
').addClass('grid-group-back'); + var backElem = $('
').addClass('grid-group-item').addClass('grid-group-back'); var aElem = $('').addClass('grid-item').addClass('grid-rollup').attr('href', '#').attr('data-level-id', upperlevelId).html('
'); - iItemIndex++; - backElem.append(aElem); $('div[data-level-id="' + nodeId + '"]').append(backElem); } @@ -204,7 +193,6 @@ var itemElem = $('
').addClass('grid-group-item'); var aElem = $('').addClass('grid-item').attr('data-item-id', item.id).attr('href', '#').attr('data-level-alias', item.level_alias); var iItemFlags = 0; - iItemIndex++; // - Adding stub div var textElem = $('
').addClass('grid-item-text'); // - Adding image @@ -228,14 +216,6 @@ aElem.append( textElem ); // - Adding CSS class to adjust the layout regarding which properties are available aElem.addClass('grid-item-layout-'+iItemFlags); - // - Adding CSS class to adjust items flow regarding the screen size - for(var i in oItemFlowLastOfLineIndex) - { - if(iItemIndex % oItemFlowLastOfLineIndex[i] === 0) - { - itemElem.addClass('ggi-last-'+i); - } - } // - Appending element $('div[data-level-id="'+nodeId+'"]').append(itemElem); itemElem.append(aElem); diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/portal.css b/datamodels/2.x/itop-portal-base/portal/web/css/portal.css index 1dc0bddf9..abe04eee6 100644 --- a/datamodels/2.x/itop-portal-base/portal/web/css/portal.css +++ b/datamodels/2.x/itop-portal-base/portal/web/css/portal.css @@ -673,9 +673,6 @@ table .group-actions { .grid-group-item-actions > a:hover, .grid-group-item-actions > a:focus { color: #eee; } -.ggi-last-xs, .ggi-last-sm, .ggi-last-md, .ggi-last-lg { - margin-right: 0px; -} @media (max-width: 768px) { /* All layout */ /* Layout 2 */ @@ -714,7 +711,7 @@ table .group-actions { /* All layout */ /* Layout 1 */ /* Layout 7 */ - .grid-group-back, .grid-group-item { + .grid-group-item { display: inline-block; width: 32%; height: 120px; @@ -769,31 +766,25 @@ table .group-actions { } } @media (min-width: 1200px) { - /* Layout 7 */ - .grid-group-back, .grid-group-item { + .grid-group-item { width: 24%; height: 140px; margin-right: 1.3%; } } /* Helper classes to remove margin depending on the screen size */ -@media (max-width: 992px) { - .ggi-last-xs { - margin-right: 0px; - } -} @media (min-width: 768px) and (max-width: 992px) { - .ggi-last-sm { + .grid-group-item:nth-child(3n) { margin-right: 0px; } } @media (min-width: 992px) and (max-width: 1200px) { - .ggi-last-md { + .grid-group-item:nth-child(3n) { margin-right: 0px; } } @media (min-width: 1200px) { - .ggi-last-lg { + .grid-group-item:nth-child(4n) { margin-right: 0px; } } diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss b/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss index a7dd2b544..f46cbeb41 100644 --- a/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss +++ b/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss @@ -729,10 +729,6 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{ color: #EEEEEE; } -.ggi-last-xs, .ggi-last-sm, .ggi-last-md, .ggi-last-lg{ - margin-right: 0px; -} - @media (max-width: 768px) { .grid-group-item > .grid-group-item-actions{ top: 12px; @@ -769,7 +765,6 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{ } } @media (min-width: 768px) { - .grid-group-back, .grid-group-item{ display: inline-block; width: 32%; @@ -831,37 +826,26 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{ } } @media (min-width: 1200px) { - .grid-group-back, .grid-group-item{ width: 24%; height: 140px; margin-right: 1.3%; } - /* Layout 7 */ - //.grid-item-layout-7 .grid-item-image{ - // width: 100px; - // padding: 60px 15px; - //} } /* Helper classes to remove margin depending on the screen size */ -@media (max-width: 992px) { - .ggi-last-xs{ - margin-right: 0px; - } -} @media (min-width: 768px) and (max-width: 992px) { - .ggi-last-sm{ + .grid-group-item:nth-child(3n){ margin-right: 0px; } } @media (min-width: 992px) and (max-width: 1200px) { - .ggi-last-md{ + .grid-group-item:nth-child(3n){ margin-right: 0px; } } @media (min-width: 1200px) { - .ggi-last-lg{ + .grid-group-item:nth-child(4n){ margin-right: 0px; } }