From 81d9071b018f757eee28a393ef9b8bbe8953a93f Mon Sep 17 00:00:00 2001 From: Guillaume Lajarige Date: Mon, 30 Oct 2017 16:03:58 +0000 Subject: [PATCH] =?UTF-8?q?N=C2=B0634.3=20Portal:=20Argh!!=20Secondary=20a?= =?UTF-8?q?ctions=20menu=20in=20BrowseBrick=20was=20broken=20due=20to=20pr?= =?UTF-8?q?evious=20CSS=20"fixes"...?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SVN:trunk[5119] --- .../views/bricks/browse/mode_mosaic.html.twig | 7 +++++-- .../portal/web/css/portal.css | 19 +++++++------------ .../portal/web/css/portal.scss | 17 +++++++---------- 3 files changed, 19 insertions(+), 24 deletions(-) diff --git a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_mosaic.html.twig b/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_mosaic.html.twig index 70e50a9090..bfff8e8bce 100644 --- a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_mosaic.html.twig +++ b/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 = $('
').addClass('mosaic-item-text'); + // - Adding wrapper to textElem to easily control text's subnodes flow + var textWrapperElem = $('
').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( $('
').addClass('mosaic-item-name').html(item.name) ); + textWrapperElem.append( $('
').addClass('mosaic-item-name').html(item.name) ); } // - Adding description if( (item.description !== undefined) && (item.description !== '') ) { iItemFlags += 2; - textElem.append( $('
').addClass('mosaic-item-description').html(item.description) ); + textWrapperElem.append( $('
').addClass('mosaic-item-description').html(item.description) ); } aElem.append( textElem ); // - Adding CSS class to adjust the layout regarding which properties are available 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 4180dcf794..f0c9556bd1 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 @@ -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 */ } } 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 b6c68babf3..f7d589b4a3 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 @@ -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{ - max-height: 120px; /* overflow hidden inherited */ + .mosaic-item-text .mosaic-item-text-wrapper{ + max-height: 120px; /* Must be .mosaic-item absolute height (in px) */ + /* overflow hidden inherited */ } }