Internal: Portal: Grid display optimization on BrowseBrick

git-svn-id: http://svn.code.sf.net/p/itop/code/trunk@4569 a333f486-631f-4898-b8df-5754b55c2be0

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( $('<div></div>').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 = $('<div></div>').addClass('grid-group-back');
+                    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>');
 
-                    iItemIndex++;
-
                     backElem.append(aElem);
                     $('div[data-level-id="' + nodeId + '"]').append(backElem);
                 }
@@ -204,7 +193,6 @@
                 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 iItemFlags = 0;
-                iItemIndex++;
                 // - Adding stub div
 				var textElem = $('<div></div>').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);

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

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