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;
}
}