composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-19 15:22: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>

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

@@ -144,12 +144,12 @@ 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){
} }
/* Warning : Not a offical BS breakpoint */ /* Warning : Not a offical BS breakpoint */
@media (min-width: 1600px){ @media (min-width: 1600px){
@@ -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;
@@ -220,15 +220,15 @@ footer{
display: -moz-box; display: -moz-box;
display: -ms-flexbox; display: -ms-flexbox;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
/* Align the bootstrap's container vertically */ /* Align the bootstrap's container vertically */
-webkit-box-align : center; -webkit-box-align : center;
-webkit-align-items : center; -webkit-align-items : center;
-moz-box-align : center; -moz-box-align : center;
-ms-flex-align : center; -ms-flex-align : center;
align-items : center; align-items : center;
/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
hence the bootstrap's container won't be aligned to the center anymore. hence the bootstrap's container won't be aligned to the center anymore.
@@ -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,