N°1494 Portal: Fix images size on mosaic view. They could be too height sometimes.

SVN:trunk[5835]
This commit is contained in:
Guillaume Lajarige
2018-06-08 08:42:38 +00:00
parent 483d80b576
commit fe24eda4b4
2 changed files with 39 additions and 5 deletions

View File

@@ -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) {

View File

@@ -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 */