N°1370 ManageBrick charts tile : integrate CSS in portal.scss

SVN:trunk[5693]

datamodels/2.x/itop-portal-base/portal/src/views/bricks/manage/tile-chart.html.twig

@@ -1,7 +1,7 @@
 {# itop-portal-dashlet-basic/tile.html.twig #}
 {# Image brick tile layout #}
 
-<div class="col-xs-12 col-sm-{{ oBrick.GetWidth }}">
+<div class="col-xs-12 col-sm-{{ oBrick.GetWidth }} tile-chart">
     {% block pTileWrapper %}
         <a href="{{ app.url_generator.generate('p_manage_brick', {'sBrickId': sBrickId, 'sDisplayType': oBrick.GetDisplayType}) }}{% if app['combodo.portal.instance.routes'][oBrick.GetRouteName]['hash'] is defined %}#{{ app['combodo.portal.instance.routes'][oBrick.GetRouteName]['hash'] }}{% endif %}"
         {% if app['combodo.portal.instance.routes'][oBrick.GetRouteName]['navigation_menu_attr'] is defined %}{% for key, value in app['combodo.portal.instance.routes'][oBrick.GetRouteName]['navigation_menu_attr'] %} {{ key }}="{{ value }}"{% endfor %}{% endif %}
@@ -9,9 +9,8 @@
         class="tile{# vertical-center#}"
         id="brick-{{ oBrick.GetId }}"
         data-brick-id="{{ oBrick.GetId }}">
-        <div style="background-color:#fff;padding:0.25em;">
+        <div>
-            <div class="tile_title"><span
+            <div class="tile_title"><span class="icon fa fa-{{ oBrick.GetDisplayType }}"></span> {{ oBrick.GetTitle()|dict_s }}
-                        class="icon fa fa-{{ oBrick.GetDisplayType }}"></span> {{ oBrick.GetTitle()|dict_s }}
                 ({{ iCount }})</span> </div>
             {% include 'itop-portal-base/portal/src/views/bricks/manage/mode-' ~ oBrick.GetDisplayType ~ '.html.twig' with {'oBrick': oBrick, 'aColumns': aColumns, 'aNames': aNames, 'aUrls': aUrls, 'aDisplayValues': aDisplayValues} %}
         </div>

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

@@ -381,6 +381,9 @@ footer {
 .home div.tile-badge > a.tile > div > div.tile_body > div.tile_description {
   text-align: right;
 }
+.home div.tile-chart > a > div {
+  padding: 0.25em;
+}
 @media (min-width: 768px) {
   .home .tile {
     display: block;
@@ -760,38 +763,30 @@ table .group-actions {
     top: 12px;
     right: 6px;
   }
-
   .mosaic-group-item > .mosaic-group-item-actions > .glyphicon {
     margin-top: 5px;
   }
-
   .mosaic-group-item-actions > a {
     font-size: 20px;
   }
-
   .mosaic-item-image {
     width: 55px;
     padding: 10px;
   }
-
   .mosaic-item-image > img {
     max-height: 30px;
   }
-
   .mosaic-item-name {
     font-size: 14px;
     max-height: 50px;
     overflow: hidden;
   }
-
   .mosaic-item-description {
     display: none;
   }
-
   .mosaic-item-layout-2 .mosaic-item-description {
     display: block;
   }
-
   .mosaic-item-layout-5 .mosaic-item-name, .mosaic-item-layout-7 .mosaic-item-name {
     padding-right: 40px;
   }
@@ -811,21 +806,17 @@ table .group-actions {
     /* We don't put 2% to keep a margin in case of a bad browser rendering */
     word-break: break-word;
   }
-
   .mosaic-item {
     padding: 10px;
   }
-
   .mosaic-item:hover, .mosaic-item:focus {
     background-color: #ea7d1e;
     box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.20);
   }
-
   .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 */
@@ -833,20 +824,16 @@ table .group-actions {
     font-weight: 600;
     font-size: 12px;
   }
-
   .mosaic-item-description {
     overflow: hidden;
   }
-
   .mosaic-item-layout-1 .mosaic-item-name {
     font-weight: inherit;
     font-size: 14px;
   }
-
   .mosaic-item-layout-7 .mosaic-item-image {
     display: none;
   }
-
   .mosaic-item-layout-3 .mosaic-item-description, .mosaic-item-layout-7 .mosaic-item-description {
     margin-top: 10px;
     max-height: 40px;
@@ -858,23 +845,19 @@ table .group-actions {
   .mosaic-item {
     padding: 10px 15px;
   }
-
   .mosaic-group-back {
     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 */
   }
-
   .mosaic-item-layout-5 .mosaic-item-name, .mosaic-item-layout-7 .mosaic-item-name {
     font-size: 12px;
   }
@@ -886,7 +869,6 @@ table .group-actions {
     height: 140px;
     margin-right: 1.3%;
   }
-
   .mosaic-item-text .mosaic-item-text-wrapper {
     max-height: 120px;
     /* Must be .mosaic-item absolute height (in px) */
@@ -1105,7 +1087,6 @@ table .group-actions {
     -moz-animation: hide-drop-zone 0.3s ease-out forwards;
     -ms-animation: hide-drop-zone 0.3s ease-out forwards;
   }
-
   @keyframes show-drop-zone {
     100% {
       height: 20%;
@@ -1188,20 +1169,16 @@ table .group-actions {
   .form_buttons .form_btn_misc {
     float: left !important;
   }
-
   .form_buttons .form_btn_transitions {
     float: right !important;
     margin-left: 3px;
   }
-
   .form_buttons .form_btn_regular {
     text-align: right;
   }
-
   .form_buttons .form_btn_regular btn {
     width: inherit;
   }
-
   .form_btn_regular.sticky {
     display: block;
     position: fixed;
@@ -1214,15 +1191,12 @@ table .group-actions {
     border-radius: 0px;
     transition: right 0.3s;
   }
-
   .form_btn_regular.sticky.closed {
     right: -75px;
   }
-
   .form_btn_regular.sticky button {
     display: block;
   }
-
   .form_btn_regular.sticky button:first-child {
     margin-bottom: 4px;
   }

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

@@ -413,6 +413,10 @@ footer{
 	text-align: right;
 }
 
+.home div.tile-chart > a > div {
+	padding: 0.25em;
+}
+
 
 @media (min-width: 768px) {
 	.home .tile{