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

N°1370 Portal badge : change some aligns + handle description correctly

Browse Source 
SVN:trunk[5742]
This commit is contained in:
Pierre Goiffon
2018-04-26 12:56:54 +00:00
parent 71d07be646
commit 22b181a8f7
2 changed files with 98 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,23 +6,25 @@
<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 %}" <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 %} {% 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{# vertical-center#}"
id="brick-{{ oBrick.GetId }}" id="brick-{{ oBrick.GetId }}"
data-brick-id="{{ oBrick.GetId }}"> data-brick-id="{{ oBrick.GetId }}">
<div> <div>
<div class="tile_decoration">{% if oBrick.GetDecorationClassHome %}<span
class="icon {{ oBrick.GetDecorationClassHome }}"></span>{% else %}<img src="{{ sIconURL }}"
style="vertical-align:middle;"
alt="Class Icon">{% endif %}
</div>
<div class="tile_body">
<div> <div>
<div class="tile_title">{{ iCount }}</div> <div class="tile_decoration">{% if oBrick.GetDecorationClassHome %}<span
<div class="tile_description">{{ oBrick.GetTitle()|dict_s }}</div> class="icon {{ oBrick.GetDecorationClassHome }}"></span>{% else %}<img src="{{ sIconURL }}"
style="vertical-align:middle;"
alt="Class Icon">{% endif %}
</div>
<div class="tile_body">
<div>
<div class="tile_title">{{ iCount }}</div>
<div class="tile_description">{{ oBrick.GetTitle()|dict_s }}</div>
</div>
</div>
</div> </div>
<div class="tile_description"><p>{{ oBrick.GetDescription|dict_s|raw }}</p></div>
</div> </div>
</div> <div class="tile_description">{{ oBrick.GetDescription|dict_s|raw }}</div>
</a> </a>
{% endblock %} {% endblock %}
</div> </div>

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

@@ -144,9 +144,9 @@ footer{
text-align: center; text-align: center;
} }
#sidebar .logo img{ #sidebar .logo img{
width: 40%; width: 40%;
max-width: 100%; max-width: 100%;
} }
} }
@media (min-width: 992px){ @media (min-width: 992px){
@@ -172,14 +172,14 @@ footer{
/* Overlays*/ /* Overlays*/
.global_overlay{ .global_overlay{
z-index: 9999; z-index: 9999;
display: none; display: none;
position: fixed; position: fixed;
top: 0px; top: 0px;
left: 0px; left: 0px;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: black; background-color: black;
opacity: 0.5; opacity: 0.5;
} }
#page_overlay .overlay_content{ #page_overlay .overlay_content{
margin-top: 20em; margin-top: 20em;
@@ -337,10 +337,10 @@ footer{
padding: 0em 1em; padding: 0em 1em;
min-height: 4em; min-height: 4em;
background-color: $white; background-color: $white;
background-image: none; background-image: none;
border: none; border: none;
border-radius: 0px; border-radius: 0px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
white-space: normal; white-space: normal;
line-height: 4em; line-height: 4em;
@@ -365,54 +365,70 @@ footer{
color: #555555; color: #555555;
} }
.home div.tile-badge > a.tile { .home div.tile-badge > a.tile {
display: table; padding: 0;
width: 100%; margin: 0;
padding: 12% 15% 5%; margin-bottom: 25px;
height: 12em;
min-height: unset;
} }
.home div.tile-badge > a.tile > div { .home div.tile-badge > a.tile > div {
display: table-row; padding: 12% 10% 0;
}
.home div.tile-badge > a.tile > div {
display: table;
width: 100%;
} }
.home div.tile-badge > a.tile > div > div { .home div.tile-badge > a.tile > div > div {
display: table-row;
}
.home div.tile-badge > a.tile > div > div > div {
display: table-cell; display: table-cell;
} }
.home div.tile-badge > a.tile > div > div.tile_decoration { .home div.tile-badge > a.tile > div > div > div.tile_decoration {
text-align: center; text-align: left;
vertical-align: top; vertical-align: top;
position: inherit; position: inherit;
float: inherit; float: inherit;
} }
.home div.tile-badge > a.tile > div > div.tile_body { .home div.tile-badge > a.tile > div > div > div.tile_body {
text-align: right; text-align: right;
padding-left: 0; padding-left: 0;
} }
.home div.tile-badge > a.tile > div > div.tile_body > div:first-child { .home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child {
text-align: center;
margin: 0 auto; margin: 0 auto;
margin-left: 10%; margin-left: 10%;
} }
.home div.tile-badge > a.tile > div > div.tile_body > div:first-child > div { .home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div.tile_description {
text-align: center;
}
.home div.tile-badge > a.tile > div > div.tile_body > div:first-child > div.tile_description {
margin-bottom: 1.5em; margin-bottom: 1.5em;
text-align: right;
} }
.home div.tile-badge > a.tile > div > div.tile_body > div:first-child > div.tile_title { .home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div.tile_title {
font-size: 4.5em; font-size: 4.5em;
font-weight: normal; font-weight: normal;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.home div.tile-badge > a.tile > div > div.tile_body > div.tile_description { .home div.tile-badge > a.tile > div.tile_description {
text-align: right; 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 { .home div.tile-chart > a > div {
@@ -561,7 +577,7 @@ footer{
/***********************/ /***********************/
/* Home tile */ /* Home tile */
.home .tile.tile_communication{ .home .tile.tile_communication{
padding: 20px; padding: 20px;
background-color: #EDEDED; background-color: #EDEDED;
border: none; border: none;
font-weight: initial; font-weight: initial;
@@ -578,15 +594,15 @@ footer{
#user-profile-wrapper .user_profile_picture .content_loader{ #user-profile-wrapper .user_profile_picture .content_loader{
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 0; top: 0;
left: 0; left: 0;
padding-top: 4em; padding-top: 4em;
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
color: white; color: white;
background-color: black; background-color: black;
opacity: 0.5; opacity: 0.5;
} }
#user-profile-wrapper .user_profile_picture .preview{ #user-profile-wrapper .user_profile_picture .preview{
display: inline-block; display: inline-block;
@@ -724,9 +740,9 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
#brick_content_empty{ #brick_content_empty{
display: none; display: none;
padding: 40px; padding: 40px;
font-size: 1.3em; font-size: 1.3em;
font-style: italic; font-style: italic;
} }
/* Loader */ /* Loader */
@@ -752,7 +768,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
/* eg. .mosaic-item-layout-5 when just name and image */ /* eg. .mosaic-item-layout-5 when just name and image */
/****************************************************************/ /****************************************************************/
#brick_content_mosaic{ #brick_content_mosaic{
position: relative; position: relative;
padding: 10px 10px 1px 10px; padding: 10px 10px 1px 10px;
} }
/* Breadcrumb */ /* Breadcrumb */
@@ -822,12 +838,12 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
right: 5px; right: 5px;
} }
.mosaic-group-item-actions > a{ .mosaic-group-item-actions > a{
color: $white; color: $white;
text-decoration: none; text-decoration: none;
} }
.mosaic-group-item-actions > a:hover, .mosaic-group-item-actions > a:hover,
.mosaic-group-item-actions > a:focus{ .mosaic-group-item-actions > a:focus{
color: #EEEEEE; color: #EEEEEE;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -899,6 +915,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
} }
.mosaic-item-description{ .mosaic-item-description{
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
} }
/* Layout 1 */ /* Layout 1 */
.mosaic-item-layout-1 .mosaic-item-name{ .mosaic-item-layout-1 .mosaic-item-name{
@@ -1046,12 +1063,12 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
.caselog_field_entry_button{ .caselog_field_entry_button{
display: block; display: block;
width: 15px; width: 15px;
height: 15px; height: 15px;
text-align: center; text-align: center;
line-height: 15px; line-height: 15px;
font-size: 16px; font-size: 16px;
border: 1px solid #a6a6a6; border: 1px solid #a6a6a6;
border-bottom-color: #979797; border-bottom-color: #979797;
cursor: pointer; cursor: pointer;
} }
.caselog_field_entry_button:hover{ .caselog_field_entry_button:hover{
@@ -1155,8 +1172,8 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
} }
#drag_overlay .overlay_content{ #drag_overlay .overlay_content{
margin-top: 5em; margin-top: 5em;
width: 100%; width: 100%;
color: white; color: white;
} }
#drag_overlay .overlay_content .icon{ #drag_overlay .overlay_content .icon{
font-size: 3em; font-size: 3em;
@@ -1296,7 +1313,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
/* CKEditor : Adding BS error feedback */ /* CKEditor : Adding BS error feedback */
.form_field div.cke{ .form_field div.cke{
border: 1px solid $gray-lighter; border: 1px solid $gray-lighter;
} }
.form_field.has-error div.cke{ .form_field.has-error div.cke{
border: 1px solid $state-danger-text; border: 1px solid $state-danger-text;
@@ -1305,11 +1322,11 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
} }
/* CKEditor : Styling notifications based on BS alerts */ /* CKEditor : Styling notifications based on BS alerts */
.cke_notification{ .cke_notification{
position: relative; position: relative;
padding: 15px; padding: 15px;
margin-bottom: 18px; margin-bottom: 18px;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
background-color: $white background-color: $white
} }
.cke_notification_close{ .cke_notification_close{
@@ -1325,13 +1342,13 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
.cke_notification_success{ .cke_notification_success{
display: none; display: none;
background-color: $alert-success-bg; background-color: $alert-success-bg;
border-color: $alert-success-border; border-color: $alert-success-border;
color: $alert-success-text; color: $alert-success-text;
} }
.cke_notification_warning{ .cke_notification_warning{
background-color: $alert-warning-bg; background-color: $alert-warning-bg;
border-color: $alert-warning-border; border-color: $alert-warning-border;
color: $alert-warning-text; color: $alert-warning-text;
} }
/* CKEditor : Misc */ /* CKEditor : Misc */
.cke_toolbox_collapser, .cke_toolbox_collapser,