From fe24eda4b40ee3503f13e75041092d0b43e150bb Mon Sep 17 00:00:00 2001
From: Guillaume Lajarige <guillaume.lajarige@combodo.com>
Date: Fri, 8 Jun 2018 08:42:38 +0000
Subject: [PATCH] =?UTF-8?q?N=C2=B01494=20Portal:=20Fix=20images=20size=20o?=
 =?UTF-8?q?n=20mosaic=20view.=20They=20could=20be=20too=20height=20sometim?=
 =?UTF-8?q?es.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SVN:trunk[5835]
---
 .../portal/web/css/portal.css                 | 21 +++++++++++++++--
 .../portal/web/css/portal.scss                | 23 ++++++++++++++++---
 2 files changed, 39 insertions(+), 5 deletions(-)

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 0599c81e6..cdce9d11b 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
@@ -850,6 +850,7 @@ table .group-actions {
    }*/
   /* Layout 1 */
   /* Layout 7 */
+  /* Layout 5 & 7 */
   .mosaic-group-item {
     display: inline-block;
     width: 32%;
@@ -892,6 +893,18 @@ table .group-actions {
     max-height: 40px;
     font-size: 10px;
   }
+  .mosaic-item-layout-5 .mosaic-item-image, .mosaic-item-layout-7 .mosaic-item-image {
+    display: table-cell;
+    width: 65px;
+    padding-left: 5px;
+    padding-right: 10px;
+  }
+  .mosaic-item-layout-5 .mosaic-item-image > img, .mosaic-item-layout-7 .mosaic-item-image > img {
+    max-width: 65px;
+    /* Equals parent element width */
+    max-height: 100px;
+    /* Equals parent element height */
+  }
 }
 @media (min-width: 992px) {
   /* Layout 5 & 7 */
@@ -902,14 +915,14 @@ table .group-actions {
     font-size: 40px;
   }
   .mosaic-item-layout-5 .mosaic-item-image, .mosaic-item-layout-7 .mosaic-item-image {
-    display: table-cell;
     width: 105px;
-    padding-left: 5px;
     padding-right: 18px;
   }
   .mosaic-item-layout-5 .mosaic-item-image > img, .mosaic-item-layout-7 .mosaic-item-image > img {
     max-width: 105px;
     /* Equals parent element width */
+    max-height: 100px;
+    /* Equals parent element height */
   }
   .mosaic-item-layout-5 .mosaic-item-name, .mosaic-item-layout-7 .mosaic-item-name {
     font-size: 12px;
@@ -927,6 +940,10 @@ table .group-actions {
     /* Must be .mosaic-item absolute height (in px) */
     /* overflow hidden inherited */
   }
+  .mosaic-item-layout-5 .mosaic-item-image > img, .mosaic-item-layout-7 .mosaic-item-image > img {
+    max-height: 120px;
+    /* Equals parent element height */
+  }
 }
 /* Helper classes to remove margin depending on the screen size */
 @media (min-width: 768px) and (max-width: 992px) {
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 6eee5f572..7d2260ab3 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
@@ -934,7 +934,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	}
 	.mosaic-item:hover,
 	.mosaic-item:focus{
-		background-color: $combodo-orange;
+		background-color: $brand-primary;
 		box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
 	}
 
@@ -970,6 +970,19 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 		max-height: 40px;
 		font-size: 10px;
 	}
+	/* Layout 5 & 7 */
+	.mosaic-item-layout-5 .mosaic-item-image,
+	.mosaic-item-layout-7 .mosaic-item-image{
+		display: table-cell;
+		width: 65px;
+		padding-left: 5px;
+		padding-right: 10px;
+	}
+	.mosaic-item-layout-5 .mosaic-item-image > img,
+	.mosaic-item-layout-7 .mosaic-item-image > img{
+		max-width: 65px; /* Equals parent element width */
+		max-height: 100px; /* Equals parent element height */
+	}
 }
 @media (min-width: 992px) {
 	.mosaic-item{
@@ -982,14 +995,13 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	/* Layout 5 & 7 */
 	.mosaic-item-layout-5 .mosaic-item-image,
 	.mosaic-item-layout-7 .mosaic-item-image{
-		display: table-cell;
 		width: 105px;
-		padding-left: 5px;
 		padding-right: 18px;
 	}
 	.mosaic-item-layout-5 .mosaic-item-image > img,
 	.mosaic-item-layout-7 .mosaic-item-image > img{
 		max-width: 105px; /* Equals parent element width */
+		max-height: 100px; /* Equals parent element height */
 	}
 	.mosaic-item-layout-5 .mosaic-item-name,
 	.mosaic-item-layout-7 .mosaic-item-name{
@@ -1008,6 +1020,11 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 		max-height: 120px; /* Must be .mosaic-item absolute height (in px) */
 		/* overflow hidden inherited */
 	}
+
+	.mosaic-item-layout-5 .mosaic-item-image > img,
+	.mosaic-item-layout-7 .mosaic-item-image > img{
+		max-height: 120px; /* Equals parent element height */
+	}
 }
 
 /* Helper classes to remove margin depending on the screen size */