diff --git a/datamodels/2.x/itop-portal-base/portal/public/css/pages/bricks/_browse-brick.scss b/datamodels/2.x/itop-portal-base/portal/public/css/pages/bricks/_browse-brick.scss index 9c9e281f4..df2e06fb8 100644 --- a/datamodels/2.x/itop-portal-base/portal/public/css/pages/bricks/_browse-brick.scss +++ b/datamodels/2.x/itop-portal-base/portal/public/css/pages/bricks/_browse-brick.scss @@ -103,6 +103,13 @@ $ipb-browse-brick--list-group-item--tree-item-wrapper--padding-bottom: $common-s $ipb-browse-brick--list-group--tree--margin: $common-spacing-0 !default; $ipb-browse-brick--list-group--tree--background-color: $common-color-white-100 !default; +$ipb-browse-brick--no-item--illustration--max-width: 100% !default; +$ipb-browse-brick--no-item--illustration--padding-y: $common-spacing-600 !default; +$ipb-browse-brick--no-item--illustration--padding-x: $common-spacing-500 !default; +$ipb-browse-brick--no-item--illustration--svg--max-width: $common-size-700 !default; + +$ipb-browse-brick--no-item--text--color: $ipb-color-grey-800 !default; + // Common .ipb-browse-brick-panel { .row { @@ -380,4 +387,21 @@ $ipb-browse-brick--list-group--tree--background-color: $common-color-white-100 ! .list-group.tree { margin: $ipb-browse-brick--list-group--tree--margin; background-color: $ipb-browse-brick--list-group--tree--background-color; +} + +.ipb-browse-brick--no-item--illustration { + width: $ipb-browse-brick--no-item--illustration--max-width; + display: flex; + flex-direction: column;; + padding: $ipb-browse-brick--no-item--illustration--padding-y $ipb-browse-brick--no-item--illustration--padding-x; + > svg { + max-width: $ipb-browse-brick--no-item--illustration--svg--max-width; + height: inherit; + align-self: center; + } +} + +.ipb-browse-brick--no-item--text { + color: $ipb-browse-brick--no-item--text--color; + @extend %common-font-ral-med-300; } \ No newline at end of file diff --git a/datamodels/2.x/itop-portal-base/portal/templates/bricks/browse/layout.html.twig b/datamodels/2.x/itop-portal-base/portal/templates/bricks/browse/layout.html.twig index 520f0b484..1b2fe9c5b 100644 --- a/datamodels/2.x/itop-portal-base/portal/templates/bricks/browse/layout.html.twig +++ b/datamodels/2.x/itop-portal-base/portal/templates/bricks/browse/layout.html.twig @@ -26,7 +26,7 @@ {% endblock %} {% block pMainContentHolder%} - {% if iItemsCount > 0 or sSearchValue is not null %} + {% if iItemsCount > 0 or sSearchValue is not empty %} {% block bBrowseHeaderContent %} {% endblock %}
@@ -36,7 +36,8 @@ {% else %}
-

{{ 'Brick:Portal:Browse:Filter:NoData'|dict_s }}

+
{{ source('illustrations/undraw_empty_alternative.svg') }}
+

{{ 'Brick:Portal:Browse:Filter:NoData'|dict_s }}

{% endif %} diff --git a/images/illustrations/undraw_empty_alternative.svg b/images/illustrations/undraw_empty_alternative.svg new file mode 100644 index 000000000..90fb7ef75 --- /dev/null +++ b/images/illustrations/undraw_empty_alternative.svg @@ -0,0 +1 @@ + \ No newline at end of file