N°8274 - Fix portal additional user profile tabs display

This commit is contained in:
Stephen Abello
2025-04-03 15:51:36 +02:00
parent 8645b28baa
commit bf23e4d98d
5 changed files with 59 additions and 56 deletions

View File

@@ -1,3 +1,4 @@
@import "navigation-menu";
@import "page";
@import "home";
@import "home";
@import "tabs";

View File

@@ -0,0 +1,55 @@
$ipb-tabs--tab--border: solid 1px $common-color-grey-400 !default;
$ipb-tabs--tab--badge--border-radius: $common-border-radius-500 !default;
$ipb-tabs--tab--badge--padding-y: 3px !default;
$ipb-tabs--tab--badge--padding-x: 5px !default;
$ipb-tabs--tab--badge--margin-left: $common-spacing-200 !default;
$ipb-tabs--tab--background-color: $common-color-grey-100 !default;
$ipb-tabs--tab--color: $common-color-grey-900 !default;
$ipb-tabs--tab--active--background-color: $common-color-white-100 !default;
$ipb-tabs--tab--active--badge--background-color: $common-color-grey-200 !default;
$ipb-tabs--tab--active--indicator--background-color: $common-color-primary-600 !default;
$ipb-tabs--tab--active--indicator--width: $common-size-150 !default;
$ipb-tabs--tab--active--indicator--height: $ipb-tabs--tab--active--indicator--width !default;
$ipb-tabs--tab--active--indicator--margin-right: $common-spacing-300 !default;
$ipb-tabs--tab--active--indicator--border-radius: $common-border-radius-full !default;
.ipb-tabs.nav-pills > li{
> a {
display: flex;
align-items: center;
background-color: $ipb-tabs--tab--background-color;
color: $ipb-tabs--tab--color;
@extend %common-font-ral-med-150;
> .badge {
color: $common-color-grey-900;
background-color: transparent;
border-radius: $ipb-tabs--tab--badge--border-radius;
padding: $ipb-tabs--tab--badge--padding-y $ipb-tabs--tab--badge--padding-x;
margin-left: $ipb-tabs--tab--badge--margin-left;
}
border: $ipb-tabs--tab--border;
border-bottom: none;
}
&.active > a {
background-color: $ipb-tabs--tab--active--background-color;
&:before {
content: " ";
display: inline-block;
width: $ipb-tabs--tab--active--indicator--width;
height: $ipb-tabs--tab--active--indicator--height;
margin-right: $ipb-tabs--tab--active--indicator--margin-right;
border-radius: $ipb-tabs--tab--active--indicator--border-radius;
background-color: $ipb-tabs--tab--active--indicator--background-color;
}
> .badge {
background-color: $ipb-tabs--tab--active--badge--background-color;
}
}
}

View File

@@ -7,21 +7,6 @@ $ipb-manage-brick--panel--body--datatable--row--margin: $common-spacing-0 !defau
$ipb-manage-brick--panel--body--datatable--row--padding-y: $common-spacing-0 !default;
$ipb-manage-brick--panel--body--datatable--row--padding-x: $common-spacing-400 !default;
$ipb-manage-brick--tabs--tab--border: solid 1px $common-color-grey-400 !default;
$ipb-manage-brick--tabs--tab--badge--border-radius: $common-border-radius-500 !default;
$ipb-manage-brick--tabs--tab--badge--padding-y: 3px !default;
$ipb-manage-brick--tabs--tab--badge--padding-x: 5px !default;
$ipb-manage-brick--tabs--tab--badge--margin-left: $common-spacing-200 !default;
$ipb-manage-brick--tabs--tab--background-color: $common-color-grey-100 !default;
$ipb-manage-brick--tabs--tab--color: $common-color-grey-900 !default;
$ipb-manage-brick--tabs--tab--active--background-color: $common-color-white-100 !default;
$ipb-manage-brick--tabs--tab--active--badge--background-color: $common-color-grey-200 !default;
$ipb-manage-brick--tabs--tab--active--indicator--background-color: $common-color-primary-600 !default;
$ipb-manage-brick--tabs--tab--active--indicator--width: $common-size-150 !default;
$ipb-manage-brick--tabs--tab--active--indicator--height: $ipb-manage-brick--tabs--tab--active--indicator--width !default;
$ipb-manage-brick--tabs--tab--active--indicator--margin-right: $common-spacing-300 !default;
$ipb-manage-brick--tabs--tab--active--indicator--border-radius: $common-border-radius-full !default;
$ipb-manage-brick--panel--body--table--margin-top: $common-spacing-500 !default;
@@ -47,45 +32,7 @@ $ipb-manage-brick--no-result--text--color: $common-color-grey-800 !default;
}
.ipb-manage-brick--tabs.grouping_tabs.nav-pills > li{
> a {
display: flex;
align-items: center;
background-color: $ipb-manage-brick--tabs--tab--background-color;
color: $ipb-manage-brick--tabs--tab--color;
@extend %common-font-ral-med-150;
> .badge {
color: $common-color-grey-900;
background-color: transparent;
border-radius: $ipb-manage-brick--tabs--tab--badge--border-radius;
padding: $ipb-manage-brick--tabs--tab--badge--padding-y $ipb-manage-brick--tabs--tab--badge--padding-x;
margin-left: $ipb-manage-brick--tabs--tab--badge--margin-left;
}
border: $ipb-manage-brick--tabs--tab--border;
border-bottom: none;
}
&.active > a {
background-color: $ipb-manage-brick--tabs--tab--active--background-color;
&:before {
content: " ";
display: inline-block;
width: $ipb-manage-brick--tabs--tab--active--indicator--width;
height: $ipb-manage-brick--tabs--tab--active--indicator--height;
margin-right: $ipb-manage-brick--tabs--tab--active--indicator--margin-right;
border-radius: $ipb-manage-brick--tabs--tab--active--indicator--border-radius;
background-color: $ipb-manage-brick--tabs--tab--active--indicator--background-color;
}
> .badge {
background-color: $ipb-manage-brick--tabs--tab--active--badge--background-color;
}
}
}
.ipb-manage-brick--panel--body--table {
margin-top: $ipb-manage-brick--panel--body--table--margin-top !important;

View File

@@ -4,7 +4,7 @@
{% block pMainContentHolder %}
{% if aGroupingTabsValues|length > 1 %}
<ul class="ipb-manage-brick--tabs nav nav-pills grouping_tabs">
<ul class="ipb-manage-brick--tabs ipb-tabs nav nav-pills grouping_tabs">
{% for aGroupingTab in aGroupingTabsValues %}
<li{% if sGroupingTab is defined and sGroupingTab == aGroupingTab.value %} class="active"{% endif %} data-id="{{ aGroupingTab.value }}" data-label="{{ aGroupingTab.label }}" data-item-count="{{ aGroupingTab.count }}">
<a href="{{ app.url_generator.generate('p_manage_brick_display_as', {'sBrickId': sBrickId, 'sDisplayMode': sDisplayMode, 'sGroupingTab': aGroupingTab.value}) }}"

View File

@@ -32,7 +32,7 @@
{% endif %}
</div>
<ul class="nav nav-pills _tabs">
<ul class="ipb-tabs nav nav-pills _tabs">
{% if aTabsValues is defined and aTabsValues|length > 0 %}
<li{% if sTab == "user-info" %} class="active"{% endif %} data-id="user-info" data-label="{{ 'MyAccount:UserInfo:Tab:Title'|dict_s }}">
<a href="{{ app.url_generator.generate('p_user_profile_brick', {'sBrickId': oBrick.GetId(), 'sDisplayMode': '_self', 'sTab': "user-info"}) }}"