mirror of
https://github.com/Combodo/iTop.git
synced 2026-03-06 09:34:13 +01:00
Portal: Improvements on ManageBrick badge tiles UI.
SVN:trunk[5868]
This commit is contained in:
Guillaume Lajarige
@@ -1,12 +1,12 @@
|
||||
{# itop-portal-dashlet-basic/tile.html.twig #}
|
||||
{# 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 %}
|
||||
<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 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 }}"
|
||||
data-brick-id="{{ oBrick.GetId }}"
|
||||
{% if oBrick.GetDescription is not empty %} data-toggle="tooltip" data-original-title="{{ oBrick.GetDescription|dict_s|raw }}"{% endif %}
|
||||
@@ -20,8 +20,8 @@
|
||||
</div>
|
||||
<div class="tile_body">
|
||||
<div>
|
||||
<div class="tile_title">{{ iCount }}</div>
|
||||
<div class="tile_description">{{ oBrick.GetTitle()|dict_s }}</div>
|
||||
<div class="tile_title">{{ oBrick.GetTitle()|dict_s }}</div>
|
||||
<div class="tile_count">{{ iCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -332,7 +332,7 @@ footer {
|
||||
}
|
||||
.home .tile .tile_title {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
color: #777;
|
||||
}
|
||||
.home .tile .tile_title > span.icon {
|
||||
color: #ea7d1e;
|
||||
@@ -344,86 +344,33 @@ footer {
|
||||
/**********************************/
|
||||
/* ManageBrick badge tile display */
|
||||
/**********************************/
|
||||
.home div.tile-badge > a.tile {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 25px;
|
||||
height: 12em;
|
||||
min-height: unset;
|
||||
.home a.tile.tile_badge {
|
||||
/*padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 25px;
|
||||
height: 12em;
|
||||
min-height: unset;*/
|
||||
}
|
||||
.home div.tile-badge > a.tile > div {
|
||||
.home a.tile.tile_badge > div {
|
||||
display: table;
|
||||
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;
|
||||
}
|
||||
.home div.tile-badge > a.tile > div > div > div {
|
||||
.home a.tile.tile_badge > div > div > div {
|
||||
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) {
|
||||
.home div.tile-badge > a.tile {
|
||||
height: auto;
|
||||
padding: inherit;
|
||||
.home a.tile.tile_badge > div > div > div.tile_body div.tile_count {
|
||||
position: absolute;
|
||||
top: 0em;
|
||||
right: 2em;
|
||||
text-align: right;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.home div.tile-badge > a.tile > div {
|
||||
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 {
|
||||
.home a.tile.tile_badge > div.tile_description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -461,8 +408,40 @@ footer {
|
||||
display: block;
|
||||
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: #777;
|
||||
}
|
||||
.home a.tile.tile_badge .tile_description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
@@ -482,9 +461,20 @@ footer {
|
||||
.home .tile .tile_description {
|
||||
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;
|
||||
}
|
||||
.home a.tile.tile_badge .tile_description {
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.home .tile {
|
||||
@@ -508,7 +498,7 @@ footer {
|
||||
.home .tile .tile_description {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -352,7 +352,7 @@ footer{
|
||||
}
|
||||
.home .tile .tile_title{
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.home .tile .tile_title > span.icon {
|
||||
@@ -368,97 +368,42 @@ footer{
|
||||
/**********************************/
|
||||
/* ManageBrick badge tile display */
|
||||
/**********************************/
|
||||
.home div.tile-badge > a.tile {
|
||||
padding: 0;
|
||||
.home a.tile.tile_badge {
|
||||
/*padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 25px;
|
||||
height: 12em;
|
||||
min-height: unset;
|
||||
min-height: unset;*/
|
||||
}
|
||||
|
||||
.home div.tile-badge > a.tile > div {
|
||||
.home a.tile.tile_badge > div {
|
||||
display: table;
|
||||
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;
|
||||
}
|
||||
|
||||
.home div.tile-badge > a.tile > div > div > div {
|
||||
.home a.tile.tile_badge > div > div > div {
|
||||
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;
|
||||
}
|
||||
//.home div.tile-chart > a > div {
|
||||
// padding: 0.25em;
|
||||
//}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.home div.tile-badge > a.tile {
|
||||
height: auto;
|
||||
padding: inherit;
|
||||
.home a.tile.tile_badge > div > div > div.tile_body div.tile_count {
|
||||
position: absolute;
|
||||
top: 0em;
|
||||
right: 2em;
|
||||
text-align: right;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.home div.tile-badge > a.tile > div {
|
||||
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 {
|
||||
.home a.tile.tile_badge > div.tile_description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -497,8 +442,41 @@ footer{
|
||||
display: block;
|
||||
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) {
|
||||
@@ -519,9 +497,20 @@ footer{
|
||||
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;
|
||||
}
|
||||
.home a.tile.tile_badge .tile_description{
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.home .tile{
|
||||
@@ -546,7 +535,7 @@ footer{
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user