N°634.3 Portal: Argh!! Secondary actions menu in BrowseBrick was broken due to previous CSS "fixes"...

SVN:trunk[5119]

datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_mosaic.html.twig

@@ -186,6 +186,9 @@
 				var iItemFlags = 0;
                 // - Adding stub div
 				var textElem = $('<div></div>').addClass('mosaic-item-text');
+				// - Adding wrapper to textElem to easily control text's subnodes flow
+				var textWrapperElem = $('<div></div>').addClass('mosaic-item-text-wrapper');
+				textWrapperElem.appendTo(textElem);
                 // - Adding image
                 if( (item.image !== undefined) && (item.image !== '') && (item.image !== null) )
                 {
@@ -196,13 +199,13 @@
                 if( (item.name !== undefined) && (item.name !== '') )
                 {
                     iItemFlags += 1;
-                    textElem.append( $('<div></div>').addClass('mosaic-item-name').html(item.name) );
+					textWrapperElem.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('mosaic-item-description').html(item.description) );
+					textWrapperElem.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

datamodels/2.x/itop-portal-base/portal/web/css/portal.css

@@ -758,11 +758,8 @@ table .group-actions {
     display: inline-block;
     width: 32%;
     height: 120px;
-    max-height: 120px;
-    /* Must be same as height */
     margin-right: 1.95%;
     /* We don't put 2% to keep a margin in case of a bad browser rendering */
-    overflow: hidden;
     word-break: break-word;
   }
   .mosaic-item {
@@ -772,8 +769,12 @@ table .group-actions {
     background-color: #ea7d1e;
     box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
   }
-  .mosaic-item-name {
+  .mosaic-item-text .mosaic-item-text-wrapper {
     max-height: 100px;
+    /* Must be .mosaic-item absolute height (in px) */
+  }
+  .mosaic-item-name {
+    max-height: 100%;
     /* It's ok if description is pushed down and not visible; but we truncate before it flows out of the tile */
     overflow: hidden;
     font-weight: 600;
@@ -796,7 +797,6 @@ table .group-actions {
   }
 }
 @media (min-width: 992px) {
-  /* All layouts */
   /* Layout 5 & 7 */
   .mosaic-item {
     padding: 10px 15px;
@@ -804,10 +804,6 @@ table .group-actions {
   .mosaic-group-back {
     font-size: 40px;
   }
-  .mosaic-item-name {
-    max-height: 100px;
-    /* overflow hidden inherited */
-  }
   .mosaic-item-layout-5 .mosaic-item-image, .mosaic-item-layout-7 .mosaic-item-image {
     display: table-cell;
     width: 105px;
@@ -827,12 +823,11 @@ table .group-actions {
   .mosaic-group-item {
     width: 24%;
     height: 140px;
-    max-height: 140px;
-    /* Must be same as height */
     margin-right: 1.3%;
   }
-  .mosaic-item-name {
+  .mosaic-item-text .mosaic-item-text-wrapper {
     max-height: 120px;
+    /* Must be .mosaic-item absolute height (in px) */
     /* overflow hidden inherited */
   }
 }

datamodels/2.x/itop-portal-base/portal/web/css/portal.scss

@@ -811,9 +811,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 		display: inline-block;
 		width: 32%;
 		height:	120px;
-		max-height: 120px; /* Must be same as height */
 		margin-right: 1.95%; /* We don't put 2% to keep a margin in case of a bad browser rendering */
-		overflow: hidden;
 		word-break: break-word;
 	}
 	.mosaic-item{
@@ -829,8 +827,11 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	/* .mosaic-item-image{
 		vertical-align: inherit; Note: This was introduced to avoid image from going down the tile when .mosaic-item-name was way too long, but the .mosaic-item-image glitched by being a little too high. As a very long .mosaic-item-name is extremely rare, we decided that it was not worth it.
 	}*/
+	.mosaic-item-text .mosaic-item-text-wrapper{
+		max-height: 100px; /* Must be .mosaic-item absolute height (in px) */
+	}
 	.mosaic-item-name{
-		max-height: 100px; /* It's ok if description is pushed down and not visible; but we truncate before it flows out of the tile */
+		max-height: 100%; /* It's ok if description is pushed down and not visible; but we truncate before it flows out of the tile */
 		overflow: hidden;
 		font-weight: 600;
 		font-size: 12px;
@@ -862,10 +863,6 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 		font-size: 40px;
 	}
 
-	/* All layouts */
-	.mosaic-item-name{
-		max-height: 100px; /* overflow hidden inherited */
-	}
 	/* Layout 5 & 7 */
 	.mosaic-item-layout-5 .mosaic-item-image,
 	.mosaic-item-layout-7 .mosaic-item-image{
@@ -887,13 +884,13 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	.mosaic-group-item{
 		width: 24%;
 		height: 140px;
-		max-height: 140px; /* Must be same as height */
 		margin-right: 1.3%;
 	}
 
 	/* All layouts */
-	.mosaic-item-name{
+	.mosaic-item-text .mosaic-item-text-wrapper{
-		max-height: 120px; /* overflow hidden inherited */
+		max-height: 120px; /* Must be .mosaic-item absolute height (in px) */
+		/* overflow hidden inherited */
 	}
 }