fix: adapt static content navigation styling to meet new IAD/VD requi…

…rements (#682) Co-authored-by: Silke <s.grueber@intershop.de>
intershop · May 29, 2021 · 2fd56b1 · 2fd56b1
1 parent 06f466c
commit 2fd56b1
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 73 deletions.
diff --git a/src/app/pages/content/content-page.component.html b/src/app/pages/content/content-page.component.html
@@ -1,5 +1,4 @@
 <ng-container *ngIf="contentPage$ | async as contentPage">
-  <ish-breadcrumb></ish-breadcrumb>
   <ish-content-pagelet
     *ngIf="contentPage.pageletIDs.length"
     [pageletId]="contentPage.pageletIDs[0]"

diff --git a/src/app/pages/content/content-page.component.spec.ts b/src/app/pages/content/content-page.component.spec.ts
@@ -8,7 +8,6 @@ import { CMSFacade } from 'ish-core/facades/cms.facade';
 import { createContentPageletEntryPointView } from 'ish-core/models/content-view/content-view.model';
 import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
 import { ContentPageletComponent } from 'ish-shared/cms/components/content-pagelet/content-pagelet.component';
-import { BreadcrumbComponent } from 'ish-shared/components/common/breadcrumb/breadcrumb.component';
 import { LoadingComponent } from 'ish-shared/components/common/loading/loading.component';
 
 import { ContentPageComponent } from './content-page.component';
@@ -34,12 +33,7 @@ describe('Content Page Component', () => {
     when(cmsFacade.contentPageLoading$).thenReturn(EMPTY);
 
     await TestBed.configureTestingModule({
-      declarations: [
-        ContentPageComponent,
-        MockComponent(BreadcrumbComponent),
-        MockComponent(ContentPageletComponent),
-        MockComponent(LoadingComponent),
-      ],
+      declarations: [ContentPageComponent, MockComponent(ContentPageletComponent), MockComponent(LoadingComponent)],
       providers: [{ provide: CMSFacade, useFactory: () => instance(cmsFacade) }],
     }).compileComponents();
   });
@@ -73,7 +67,6 @@ describe('Content Page Component', () => {
 
     expect(findAllCustomElements(element)).toMatchInlineSnapshot(`
       Array [
-        "ish-breadcrumb",
         "ish-content-pagelet",
       ]
     `);

diff --git a/src/app/shared/cms/components/cms-static-page/cms-static-page.component.html b/src/app/shared/cms/components/cms-static-page/cms-static-page.component.html
@@ -1,35 +1,47 @@
-<div class="marketing-area">
-  <ish-content-slot [slot]="'app_sf_base_cm:slot.marketing.base.pagelet2-Slot'" [pagelet]="pagelet"></ish-content-slot>
-</div>
-
-<div class="row">
-  <ng-container
-    *ngIf="pagelet.booleanParam('ShowSidePanel') || pagelet.booleanParam('ShowNavigation'); else noSidePanel"
-  >
-    <div class="page-navigation col-md-3">
-      <div *ngIf="pagelet.booleanParam('ShowNavigation')" class="page-navigation-contents">
-        <ish-content-navigation
-          [root]="pagelet.stringParam('NavigationRoot')"
-          [depth]="pagelet.numberParam('NavigationDepth')"
-        ></ish-content-navigation>
+<div class="content-page">
+  <div class="row">
+    <ng-container
+      *ngIf="pagelet.booleanParam('ShowSidePanel') || pagelet.booleanParam('ShowNavigation'); else noSidePanel"
+    >
+      <div class="page-navigation col-md-3">
+        <div *ngIf="pagelet.booleanParam('ShowNavigation')" class="page-navigation-contents">
+          <ish-content-navigation
+            [root]="pagelet.stringParam('NavigationRoot')"
+            [depth]="pagelet.numberParam('NavigationDepth')"
+          ></ish-content-navigation>
+        </div>
+        <div class="marketing-area">
+          <ish-content-slot
+            [slot]="'app_sf_base_cm:slot.marketing.sidePanel.pagelet2-Slot'"
+            [pagelet]="pagelet"
+          ></ish-content-slot>
+        </div>
       </div>
-      <div class="marketing-area">
-        <ish-content-slot
-          [slot]="'app_sf_base_cm:slot.marketing.sidePanel.pagelet2-Slot'"
-          [pagelet]="pagelet"
-        ></ish-content-slot>
+      <div class="col-md-9">
+        <ish-breadcrumb></ish-breadcrumb>
+        <div class="marketing-area">
+          <ish-content-slot
+            [slot]="'app_sf_base_cm:slot.marketing.base.pagelet2-Slot'"
+            [pagelet]="pagelet"
+          ></ish-content-slot>
+        </div>
+        <ish-content-slot [slot]="'app_sf_base_cm:slot.staticPage.content.pagelet2-Slot'" [pagelet]="pagelet">
+        </ish-content-slot>
       </div>
-    </div>
-    <div class="col-md-9">
-      <ish-content-slot [slot]="'app_sf_base_cm:slot.staticPage.content.pagelet2-Slot'" [pagelet]="pagelet">
-      </ish-content-slot>
-    </div>
-  </ng-container>
+    </ng-container>
 
-  <ng-template #noSidePanel>
-    <div class="col-md-12">
-      <ish-content-slot [slot]="'app_sf_base_cm:slot.staticPage.content.pagelet2-Slot'" [pagelet]="pagelet">
-      </ish-content-slot>
-    </div>
-  </ng-template>
+    <ng-template #noSidePanel>
+      <div class="col-md-12">
+        <ish-breadcrumb></ish-breadcrumb>
+        <div class="marketing-area">
+          <ish-content-slot
+            [slot]="'app_sf_base_cm:slot.marketing.base.pagelet2-Slot'"
+            [pagelet]="pagelet"
+          ></ish-content-slot>
+        </div>
+        <ish-content-slot [slot]="'app_sf_base_cm:slot.staticPage.content.pagelet2-Slot'" [pagelet]="pagelet">
+        </ish-content-slot>
+      </div>
+    </ng-template>
+  </div>
 </div>
diff --git a/src/app/shared/cms/components/cms-static-page/cms-static-page.component.spec.ts b/src/app/shared/cms/components/cms-static-page/cms-static-page.component.spec.ts
@@ -7,6 +7,7 @@ import { ContentPageletView, createContentPageletView } from 'ish-core/models/co
 import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
 import { ContentNavigationComponent } from 'ish-shared/cms/components/content-navigation/content-navigation.component';
 import { ContentSlotComponent } from 'ish-shared/cms/components/content-slot/content-slot.component';
+import { BreadcrumbComponent } from 'ish-shared/components/common/breadcrumb/breadcrumb.component';
 
 import { CMSStaticPageComponent } from './cms-static-page.component';
 
@@ -21,6 +22,7 @@ describe('Cms Static Page Component', () => {
     await TestBed.configureTestingModule({
       declarations: [
         CMSStaticPageComponent,
+        MockComponent(BreadcrumbComponent),
         MockComponent(ContentNavigationComponent),
         MockComponent(ContentSlotComponent),
       ],

diff --git a/src/app/shared/cms/components/content-navigation/content-navigation.component.html b/src/app/shared/cms/components/content-navigation/content-navigation.component.html
@@ -1,30 +1,26 @@
 <ng-container *ngIf="contentPageTree$ | async as contentPageTree">
   <ng-container *ngIf="currentContentPage$ | async as currentContentPage">
-    <a [routerLink]="['/page', contentPageTree.contentPageId]" [title]="contentPageTree.name">
-      <h3>{{ contentPageTree.name }}</h3>
-    </a>
-
-    <ul class="page-navigation-0">
+    <ul>
       <ng-container
         [ngTemplateOutlet]="pageTreeNode"
-        [ngTemplateOutletContext]="{ tree: contentPageTree.children, counter: 1 }"
+        [ngTemplateOutletContext]="{ treeNodes: [contentPageTree], counter: 0 }"
       ></ng-container>
     </ul>
 
     <!-- the recursivly used template to render the tree nodes -->
-    <ng-template #pageTreeNode let-tree="tree" let-counter="counter">
+    <ng-template #pageTreeNode let-treeNodes="treeNodes" let-counter="counter">
       <li
-        *ngFor="let item of tree"
-        [ngClass]="{ 'page-navigation-active': item.contentPageId === currentContentPage.id }"
+        *ngFor="let treeNode of treeNodes"
+        [ngClass]="{ 'page-navigation-active': treeNode.contentPageId === currentContentPage.id }"
       >
-        <a [routerLink]="['/page', item.contentPageId]" [title]="item.name">{{ item.name }}</a>
+        <a [routerLink]="['/page', treeNode.contentPageId]" [title]="treeNode.name">{{ treeNode.name }}</a>
         <ul
-          *ngIf="item.children.length > 0 && ((!depth && depth !== 0) || depth >= counter)"
+          *ngIf="treeNode.children.length > 0 && ((!depth && depth !== 0) || depth >= counter)"
           [ngClass]="'page-navigation-' + counter"
         >
           <ng-container
             [ngTemplateOutlet]="pageTreeNode"
-            [ngTemplateOutletContext]="{ tree: item.children, counter: counter + 1 }"
+            [ngTemplateOutletContext]="{ treeNodes: treeNode.children, counter: counter + 1 }"
           ></ng-container>
         </ul>
       </li>

diff --git a/src/app/shared/cms/components/content-navigation/content-navigation.component.spec.ts b/src/app/shared/cms/components/content-navigation/content-navigation.component.spec.ts
@@ -88,7 +88,7 @@ describe('Content Navigation Component', () => {
 
       expect(element.querySelectorAll('a')).toMatchInlineSnapshot(`
         NodeList [
-          <a ng-reflect-router-link="/page,1" title="Page 1" href="/page/1"><h3>Page 1</h3></a>,
+          <a ng-reflect-router-link="/page,1" title="Page 1" href="/page/1">Page 1</a>,
           <a ng-reflect-router-link="/page,1.A" title="Page 1.A" href="/page/1.A">Page 1.A</a>,
           <a ng-reflect-router-link="/page,1.A.a" title="Page 1.A.a" href="/page/1.A.a">Page 1.A.a</a>,
           <a ng-reflect-router-link="/page,1.A.b" title="Page 1.A.b" href="/page/1.A.b">Page 1.A.b</a>,
@@ -105,7 +105,7 @@ describe('Content Navigation Component', () => {
 
       expect(element.querySelectorAll('a')).toMatchInlineSnapshot(`
         NodeList [
-          <a ng-reflect-router-link="/page,1" title="Page 1" href="/page/1"><h3>Page 1</h3></a>,
+          <a ng-reflect-router-link="/page,1" title="Page 1" href="/page/1">Page 1</a>,
           <a ng-reflect-router-link="/page,1.A" title="Page 1.A" href="/page/1.A">Page 1.A</a>,
           <a ng-reflect-router-link="/page,1.B" title="Page 1.B" href="/page/1.B">Page 1.B</a>,
         ]
@@ -114,7 +114,7 @@ describe('Content Navigation Component', () => {
 
     describe('filter-selected', () => {
       it('should set no filter-selected class if no contentPageId equals the currentContentPageId', () => {
-        when(cmsFacade.contentPage$).thenReturn(of({ id: '1' } as ContentPageletEntryPointView));
+        when(cmsFacade.contentPage$).thenReturn(of({ id: 'xxx' } as ContentPageletEntryPointView));
 
         component.ngOnChanges();
         fixture.detectChanges();
@@ -155,7 +155,7 @@ describe('Content Navigation Component', () => {
       it('should set page-navigation-0 class to first layer', () => {
         expect(element.querySelectorAll('.page-navigation-0')).toMatchInlineSnapshot(`
           NodeList [
-            <ul class="page-navigation-0">
+            <ul class="page-navigation-0" ng-reflect-ng-class="page-navigation-0">
             <li>
               <a ng-reflect-router-link="/page,1.A" title="Page 1.A" href="/page/1.A">Page 1.A</a>
               <ul class="page-navigation-1" ng-reflect-ng-class="page-navigation-1">
@@ -188,17 +188,5 @@ describe('Content Navigation Component', () => {
         `);
       });
     });
-
-    describe('Navigation header', () => {
-      it('should set display name of navigation root as header', () => {
-        component.ngOnChanges();
-        fixture.detectChanges();
-        expect(element.querySelectorAll('h3')).toMatchInlineSnapshot(`
-          NodeList [
-            <h3>Page 1</h3>,
-          ]
-        `);
-      });
-    });
   });
 });
diff --git a/src/styles/pages/content-pages/page-content.scss b/src/styles/pages/content-pages/page-content.scss
@@ -1,5 +1,9 @@
 //
 
+.content-page {
+  padding: $space-default 0 $space-default 0;
+}
+
 ul {
   &.collection {
     padding-left: 0;
@@ -20,6 +24,7 @@ ol {
 .helpdesk-info-box {
   width: 100%;
   padding: $space-default/2;
+  margin-bottom: $space-default;
   color: $text-color-inverse;
   background: $color-corporate;
 

diff --git a/src/styles/pages/content-pages/page-navigation.scss b/src/styles/pages/content-pages/page-navigation.scss
@@ -7,14 +7,12 @@
       padding-left: 0;
       list-style: none outside none;
 
-      &.page-navigation-0 {
-        ul {
-          padding-left: $space-default;
-        }
+      ul {
+        padding-left: $space-default;
       }
 
       li {
-        line-height: 24px;
+        line-height: 27px;
 
         &.page-navigation-active {
           > a {