Skip to content

Commit

Permalink
fix: remove active_catalog.png and budget-bar-indicator.png and repla…
Browse files Browse the repository at this point in the history
…ce with CSS styling (#1319)

- remove the image active catalog (header) and the budget bar indicator (my account) image and replace with CSS only styling
- add migration documentation

BREAKING CHANGES: The active_catalog.png and budget-bar-indicator.png are removed and replaced with CSS styling.
  • Loading branch information
andreassteinmann authored and shauke committed Nov 21, 2022
1 parent 7999f02 commit 9aeafaf
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 8 deletions.
2 changes: 2 additions & 0 deletions docs/guides/migrations.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ Formly has been upgraded from version 5 to 6.
Find more information in the [Formly Upgrade Guide](https://github.com/ngx-formly/ngx-formly/blob/main/UPGRADE-6.0.md).
We still use deprecated form properties like 'templateOptions' and 'expressionProperties' for compatibility reasons but we are going to replace them in the next major release.

The two small black triangle images `active_catalog.png` (header: when hovering a catalog) and `budget-bar-indicator.png` (my account: budget bar) are removed and replaced by CSS styling.

## 3.0 to 3.1

The SSR environment variable 'ICM_IDENTITY_PROVIDER' will be removed in a future release ( PWA 5.0 ).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,20 @@
position: absolute;
z-index: 2;
height: 30px;
margin-top: -9px;
background: transparent (url('/assets/img/budget-bar-indicator.png')) 100% -8px no-repeat;
margin-top: -7px;

&::before {
// small arrow budget bar indicator
position: absolute;
top: 0;
right: -3px;
width: 0;
height: 0;
content: '';
border-top: 6px solid #2f2f2f;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}

.overflow-display {
float: right;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
[routerLink]="category.url"
[attr.data-testing-id]="category.uniqueId + '-link'"
[ngStyle]="{ width: !(0 < mainNavigationMaxSubCategoriesDepth && category.hasChildren) ? '100%' : '' }"
class="main-navigation-link"
>
{{ category.name }}
</a>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,17 +46,35 @@ describe('Header Navigation Component', () => {
expect(element).toMatchInlineSnapshot(`
<ul class="navbar-nav main-navigation-list">
<li class="dropdown">
<a ng-reflect-router-link="/cat/A" data-testing-id="A-link" style="width: 100%" href="/cat/A">
<a
class="main-navigation-link"
ng-reflect-router-link="/cat/A"
data-testing-id="A-link"
style="width: 100%"
href="/cat/A"
>
CAT_A
</a>
</li>
<li class="dropdown">
<a ng-reflect-router-link="/cat/B" data-testing-id="B-link" style="width: 100%" href="/cat/B">
<a
class="main-navigation-link"
ng-reflect-router-link="/cat/B"
data-testing-id="B-link"
style="width: 100%"
href="/cat/B"
>
CAT_B
</a>
</li>
<li class="dropdown">
<a ng-reflect-router-link="/cat/C" data-testing-id="C-link" style="width: 100%" href="/cat/C">
<a
class="main-navigation-link"
ng-reflect-router-link="/cat/C"
data-testing-id="C-link"
style="width: 100%"
href="/cat/C"
>
CAT_C
</a>
</li>
Expand Down
Binary file removed src/assets/img/active_catalog.png
Binary file not shown.
Binary file removed src/assets/img/budget-bar-indicator.png
Binary file not shown.
34 changes: 31 additions & 3 deletions src/styles/components/header/main-navigation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -150,15 +150,43 @@
&.dropdown {
position: static;
padding: 0 10px;
background: url('/assets/img/active_catalog.png') -2000px bottom no-repeat;

&:first-child {
padding-left: 0;
}

@media (min-width: $screen-sm) {
> a:first-child {
position: relative;
display: block;

&::before {
// small centered arrow below the category name / link at hover
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -6px;
visibility: hidden;
content: '';
border-right: 6px solid transparent;
border-bottom: 6px solid #2f2f2f;
border-left: 6px solid transparent;
}
}
}

&.hover {
background-position: center bottom;
transition-delay: 0.5s;
@media (min-width: $screen-sm) {
> a:first-child {
&::before {
// set to visible with a delay the same way as the sub categories main layer
visibility: visible;
transition-delay: 0.5s;
}
}
}

ul {
visibility: visible;
Expand Down

0 comments on commit 9aeafaf

Please sign in to comment.