composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-20 17:18:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°634.2 Portal: CSS fixes on mosaic mode of BroweseBrick

Browse Source 
SVN:trunk[5070]
This commit is contained in:
Guillaume Lajarige
2017-10-23 15:43:18 +00:00
parent ad3ce7c536
commit 5424682fdb
2 changed files with 48 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
datamodels/2.x/itop-portal-base/portal/web/css/portal.css
View File

@@ -712,7 +712,7 @@ table .group-actions {
color: #eee;
}
@media (max-width: 768px) {
/* All layout */
/* All layouts */
/* Layout 2 */
/* Layout 5/7 */
.mosaic-group-item > .mosaic-group-item-actions {
@@ -734,6 +734,8 @@ table .group-actions {
}
.mosaic-item-name {
font-size: 14px;
max-height: 50px;
overflow: hidden;
}
.mosaic-item-description {
display: none;
@@ -746,15 +748,22 @@ table .group-actions {
}
}
@media (min-width: 768px) {
/* All layout */
/* All layouts */
/* .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.
}*/
/* Layout 1 */
/* Layout 7 */
.mosaic-group-item {
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 {
padding: 10px;
@@ -764,6 +773,9 @@ table .group-actions {
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
}
.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 */
overflow: hidden;
font-weight: 600;
font-size: 12px;
}
@@ -784,6 +796,7 @@ table .group-actions {
}
}
@media (min-width: 992px) {
/* All layouts */
/* Layout 5 & 7 */
.mosaic-item {
padding: 10px 15px;
@@ -791,6 +804,10 @@ 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;
@@ -806,11 +823,18 @@ table .group-actions {
}
}
@media (min-width: 1200px) {
/* All layouts */
.mosaic-group-item {
width: 24%;
height: 140px;
max-height: 140px;
/* Must be same as height */
margin-right: 1.3%;
}
.mosaic-item-name {
max-height: 120px;
/* overflow hidden inherited */
}
}
/* Helper classes to remove margin depending on the screen size */
@media (min-width: 768px) and (max-width: 992px) {

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

@@ -780,7 +780,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
.mosaic-group-item-actions > a{
font-size: 20px;
}
/* All layout */
/* All layouts */
.mosaic-item-image{
width: 55px;
padding: 10px;
@@ -790,6 +790,8 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
}
.mosaic-item-name{
font-size: 14px;
max-height: 50px;
overflow: hidden;
}
.mosaic-item-description{
display: none;
@@ -809,7 +811,10 @@ 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{
padding: 10px;
@@ -820,8 +825,13 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
}
/* All layout */
/* All layouts */
/* .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-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 */
overflow: hidden;
font-weight: 600;
font-size: 12px;
}
@@ -852,6 +862,10 @@ 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{
@@ -873,8 +887,14 @@ 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 */
}
}
/* Helper classes to remove margin depending on the screen size */