composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-24 11:08:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Portal: Improvements on ManageBrick badge tiles UI.

Browse Source 
SVN:trunk[5868]
This commit is contained in:
Guillaume Lajarige
2018-06-14 10:28:06 +00:00
parent 8fbd53d72d
commit 87e2f76793
3 changed files with 135 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
datamodels/2.x/itop-portal-base/portal/src/views/bricks/manage/tile-badge.html.twig
View File

@@ -1,12 +1,12 @@
{# itop-portal-dashlet-basic/tile.html.twig #} {# itop-portal-dashlet-basic/tile.html.twig #}
{# Image brick tile layout #} {# Image brick tile layout #}
<div class="col-xs-12 col-sm-{{ oBrick.GetWidth }} tile-badge"> <div class="col-xs-12 col-sm-{{ oBrick.GetWidth }}">
{% block pTileWrapper %} {% block pTileWrapper %}
<a href="{{ app.url_generator.generate('p_manage_brick_display_as', {'sBrickId': sBrickId, 'sDisplayMode': oBrick.GetDisplayMode}) }}{% if app['combodo.portal.instance.routes'][oBrick.GetRouteName]['hash'] is defined %}#{{ app['combodo.portal.instance.routes'][oBrick.GetRouteName]['hash'] }}{% endif %}" <a href="{{ app.url_generator.generate('p_manage_brick_display_as', {'sBrickId': sBrickId, 'sDisplayMode': oBrick.GetDisplayMode}) }}{% 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 %} {% 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 %}
{% if oBrick.GetModal %}data-toggle="modal" data-target="#modal-for-all"{% endif %} {% if oBrick.GetModal %}data-toggle="modal" data-target="#modal-for-all"{% endif %}
class="tile{# vertical-center#}" class="tile tile_badge{# vertical-center#}"
id="brick-{{ oBrick.GetId }}" id="brick-{{ oBrick.GetId }}"
data-brick-id="{{ oBrick.GetId }}" data-brick-id="{{ oBrick.GetId }}"
{% if oBrick.GetDescription is not empty %} data-toggle="tooltip" data-original-title="{{ oBrick.GetDescription|dict_s|raw }}"{% endif %} {% if oBrick.GetDescription is not empty %} data-toggle="tooltip" data-original-title="{{ oBrick.GetDescription|dict_s|raw }}"{% endif %}
@@ -20,8 +20,8 @@
</div> </div>
<div class="tile_body"> <div class="tile_body">
<div> <div>
<div class="tile_title">{{ iCount }}</div> <div class="tile_title">{{ oBrick.GetTitle()|dict_s }}</div>
<div class="tile_description">{{ oBrick.GetTitle()|dict_s }}</div> <div class="tile_count">{{ iCount }}</div>
</div> </div>
</div> </div>
</div> </div>

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

@@ -332,7 +332,7 @@ footer {
} }
.home .tile .tile_title { .home .tile .tile_title {
font-weight: bold; font-weight: bold;
color: #333; color: #777;
} }
.home .tile .tile_title > span.icon { .home .tile .tile_title > span.icon {
color: #ea7d1e; color: #ea7d1e;
@@ -344,86 +344,33 @@ footer {
/**********************************/ /**********************************/
/* ManageBrick badge tile display */ /* ManageBrick badge tile display */
/**********************************/ /**********************************/
.home div.tile-badge > a.tile { .home a.tile.tile_badge {
padding: 0; /*padding: 0;
margin: 0; margin: 0;
margin-bottom: 25px; margin-bottom: 25px;
height: 12em; height: 12em;
min-height: unset; min-height: unset;*/
} }
.home div.tile-badge > a.tile > div { .home a.tile.tile_badge > div {
display: table; display: table;
width: 100%; width: 100%;
padding: 12% 10% 0; /*padding: 12% 10% 0;*/
} }
.home div.tile-badge > a.tile > div > div { .home a.tile.tile_badge > div > div {
display: table-row; display: table-row;
} }
.home div.tile-badge > a.tile > div > div > div { .home a.tile.tile_badge > div > div > div {
display: table-cell; display: table-cell;
} }
.home div.tile-badge > a.tile > div > div > div.tile_decoration {
text-align: left;
vertical-align: top;
position: inherit;
float: inherit;
}
.home div.tile-badge > a.tile > div > div > div.tile_body {
text-align: right;
padding-left: 0;
}
.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child {
margin: 0 auto;
margin-left: 10%;
}
.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div.tile_description {
margin-bottom: 1.5em;
text-align: right;
}
.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div.tile_title {
font-size: 4.5em;
font-weight: normal;
margin-bottom: 0.5em;
}
.home div.tile-badge > a.tile > div.tile_description {
display: block;
padding: 0 5%;
font-size: 1em;
font-style: italic;
text-align: center;
line-height: normal;
height: 2em;
/* needed even if height is defined on a.tile :/ */
overflow: hidden;
}
.home div.tile-chart > a > div {
padding: 0.25em;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.home div.tile-badge > a.tile { .home a.tile.tile_badge > div > div > div.tile_body div.tile_count {
height: auto; position: absolute;
padding: inherit; top: 0em;
right: 2em;
text-align: right;
font-size: 1.2em;
} }
.home div.tile-badge > a.tile > div { .home a.tile.tile_badge > div.tile_description {
padding: 0;
}
.home div.tile-badge > a.tile > div > div > div.tile_decoration {
vertical-align: middle;
}
.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div {
display: inline-block;
}
.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div.tile_title {
margin: 0;
font-size: 2.5em;
font-weight: bold;
}
.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div.tile_description {
display: unset;
margin: 0;
margin-left: 3em;
}
.home div.tile-badge > a.tile > div.tile_description {
display: none; display: none;
} }
} }
@@ -461,8 +408,40 @@ footer {
display: block; display: block;
text-align: left; text-align: left;
} }
.home div.tile-badge > a.tile > div > div > div.tile_decoration > span.icon { .home a.tile.tile_badge {
font-size: 1.5em; height: 10em;
overflow-y: hidden;
}
.home a.tile.tile_badge > div > div > div.tile_decoration {
top: unset;
vertical-align: middle;
}
.home a.tile.tile_badge > div > div > div.tile_decoration > span.icon {
font-size: 4em;
}
.home a.tile.tile_badge > div > div > div.tile_body {
position: relative;
padding: 0;
margin: 0;
vertical-align: middle;
text-align: right;
}
.home a.tile.tile_badge > div > div > div.tile_body .tile_title {
margin-top: 1em;
margin-bottom: 0;
font-size: 1em;
font-weight: normal;
}
.home a.tile.tile_badge > div > div > div.tile_body .tile_count {
position: absolute;
top: 0;
right: 0;
font-size: 2em;
font-weight: bold;
color: #777;
}
.home a.tile.tile_badge .tile_description {
display: none;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
@@ -482,9 +461,20 @@ footer {
.home .tile .tile_description { .home .tile .tile_description {
font-size: 1.2em; font-size: 1.2em;
} }
.home div.tile-badge > a.tile > div > div > div.tile_decoration > span.icon { .home a.tile.tile_badge > div > div > div.tile_body .tile_title {
font-size: 1.2em;
}
.home a.tile.tile_badge > div > div > div.tile_body .tile_count {
font-size: 3em;
}
.home a.tile.tile_badge > div > div > div.tile_decoration > span.icon {
font-size: 4em; font-size: 4em;
} }
.home a.tile.tile_badge .tile_description {
display: block;
font-size: 1em;
text-align: center;
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.home .tile { .home .tile {
@@ -508,7 +498,7 @@ footer {
.home .tile .tile_description { .home .tile .tile_description {
font-size: 1.2em; font-size: 1.2em;
} }
.home div.tile-badge > a.tile > div > div > div.tile_decoration > span.icon { .home a.tile.tile_badge > div > div > div.tile_decoration > span.icon {
font-size: 6em; font-size: 6em;
} }
} }

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

@@ -352,7 +352,7 @@ footer{
} }
.home .tile .tile_title{ .home .tile .tile_title{
font-weight: bold; font-weight: bold;
color: #333; color: $gray;
} }
.home .tile .tile_title > span.icon { .home .tile .tile_title > span.icon {
@@ -368,97 +368,42 @@ footer{
/**********************************/ /**********************************/
/* ManageBrick badge tile display */ /* ManageBrick badge tile display */
/**********************************/ /**********************************/
.home div.tile-badge > a.tile { .home a.tile.tile_badge {
padding: 0; /*padding: 0;
margin: 0; margin: 0;
margin-bottom: 25px; margin-bottom: 25px;
height: 12em; height: 12em;
min-height: unset; min-height: unset;*/
} }
.home div.tile-badge > a.tile > div { .home a.tile.tile_badge > div {
display: table; display: table;
width: 100%; width: 100%;
padding: 12% 10% 0; /*padding: 12% 10% 0;*/
} }
.home div.tile-badge > a.tile > div > div { .home a.tile.tile_badge > div > div {
display: table-row; display: table-row;
} }
.home div.tile-badge > a.tile > div > div > div { .home a.tile.tile_badge > div > div > div {
display: table-cell; display: table-cell;
} }
.home div.tile-badge > a.tile > div > div > div.tile_decoration { //.home div.tile-chart > a > div {
text-align: left; // padding: 0.25em;
vertical-align: top; //}
position: inherit;
float: inherit;
}
.home div.tile-badge > a.tile > div > div > div.tile_body {
text-align: right;
padding-left: 0;
}
.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child {
margin: 0 auto;
margin-left: 10%;
}
.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div.tile_description {
margin-bottom: 1.5em;
text-align: right;
}
.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div.tile_title {
font-size: 4.5em;
font-weight: normal;
margin-bottom: 0.5em;
}
.home div.tile-badge > a.tile > div.tile_description {
display: block;
padding: 0 5%;
font-size: 1em;
font-style: italic;
text-align: center;
line-height: normal;
height: 2em; /* needed even if height is defined on a.tile :/ */
overflow: hidden;
}
.home div.tile-chart > a > div {
padding: 0.25em;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.home div.tile-badge > a.tile { .home a.tile.tile_badge > div > div > div.tile_body div.tile_count {
height: auto; position: absolute;
padding: inherit; top: 0em;
right: 2em;
text-align: right;
font-size: 1.2em;
} }
.home div.tile-badge > a.tile > div { .home a.tile.tile_badge > div.tile_description {
padding: 0;
}
.home div.tile-badge > a.tile > div > div > div.tile_decoration {
vertical-align: middle;
}
.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div {
display: inline-block;
}
.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div.tile_title {
margin: 0;
font-size: 2.5em;
font-weight: bold;
}
.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div.tile_description {
display: unset;
margin: 0;
margin-left: 3em;
}
.home div.tile-badge > a.tile > div.tile_description {
display: none; display: none;
} }
} }
@@ -497,8 +442,41 @@ footer{
display: block; display: block;
text-align: left; text-align: left;
} }
.home div.tile-badge > a.tile > div > div > div.tile_decoration > span.icon {
font-size: 1.5em; .home a.tile.tile_badge{
height: 10em;
overflow-y: hidden;
}
.home a.tile.tile_badge > div > div > div.tile_decoration{
top: unset;
vertical-align: middle;
}
.home a.tile.tile_badge > div > div > div.tile_decoration > span.icon {
font-size: 4em;
}
.home a.tile.tile_badge > div > div > div.tile_body{
position: relative;
padding: 0;
margin: 0;
vertical-align: middle;
text-align: right;
}
.home a.tile.tile_badge > div > div > div.tile_body .tile_title{
margin-top: 1em;
margin-bottom: 0;
font-size: 1em;
font-weight: normal;
}
.home a.tile.tile_badge > div > div > div.tile_body .tile_count{
position: absolute;
top: 0;
right: 0;
font-size: 2em;
font-weight: bold;
color: $gray;
}
.home a.tile.tile_badge .tile_description{
display: none;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
@@ -519,9 +497,20 @@ footer{
font-size: 1.2em; font-size: 1.2em;
} }
.home div.tile-badge > a.tile > div > div > div.tile_decoration > span.icon { .home a.tile.tile_badge > div > div > div.tile_body .tile_title{
font-size: 1.2em;
}
.home a.tile.tile_badge > div > div > div.tile_body .tile_count{
font-size: 3em;
}
.home a.tile.tile_badge > div > div > div.tile_decoration > span.icon {
font-size: 4em; font-size: 4em;
} }
.home a.tile.tile_badge .tile_description{
display: block;
font-size: 1em;
text-align: center;
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.home .tile{ .home .tile{
@@ -546,7 +535,7 @@ footer{
font-size: 1.2em; font-size: 1.2em;
} }
.home div.tile-badge > a.tile > div > div > div.tile_decoration > span.icon { .home a.tile.tile_badge > div > div > div.tile_decoration > span.icon {
font-size: 6em; font-size: 6em;
} }
} }