Skip to content

Commit

Permalink
fix(stark-ui): fix side navigation rendering behind header
Browse files Browse the repository at this point in the history 
Because of a bug previously introduced in a previous commit the side navigations (left / right) were rendering behind the header, causing issues on mobile or whenever the side navigation has full page height.

This commit fixes the initial Safari bug (#1338) without breaking the side navigation.
  • Loading branch information
@carlo-nomes
carlo-nomes committed Aug 14, 2019
1 parent 532259a commit ed580f1
Show file tree
Hide file tree
Showing 3 changed files with 225 additions and 198 deletions.
27 changes: 20 additions & 7 deletions packages/stark-ui/assets/styles/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,28 @@ body {
margin-bottom: 64px;
}

main.stark-main-container {
flex: 1 0 auto;
align-self: center;
.mat-drawer {
z-index: 120; /* z-index of header is 110. z-index of mat-drawer should be bigger */
}

.mat-drawer-content {
z-index: initial; // fix safari not showing fixed header

display: flex;
flex-direction: column;

overflow: auto;

width: 100%;
max-width: $stark-max-content-width;
main.stark-main-container {
flex: 1 0 auto;
align-self: center;

box-sizing: border-box;
padding: 64px 15px;
width: 100%;
max-width: $stark-max-content-width;

box-sizing: border-box;
padding: 64px 15px;
}
}
}

Expand Down
284 changes: 148 additions & 136 deletions showcase/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,140 +1,4 @@
<stark-app-container>
<header class="stark-app-header">
<div class="stark-header-container">
<div class="stark-app-bar">
<div class="stark-app-bar-content-left">
<div class="stark-actions">
<button class="stark-home-button" (click)="goHome()" color="white" mat-icon-button>
<mat-icon svgIcon="home"></mat-icon>
</button>

<button color="white" mat-icon-button (click)="toggleMenu()">
<mat-icon svgIcon="menu"></mat-icon>
</button>
</div>
</div>

<div class="stark-app-bar-content-center">
<div class="app-logo">
<stark-app-logo></stark-app-logo>
</div>
</div>

<div class="stark-app-bar-content-right">
<div>
<div *ngIf="!isMenuModeActive">
<stark-app-data mode="dropdown">
<div class="summary-slot">
<span *ngIf="user" class="label">{{ "SHOWCASE.DEMO.APP_DATA.USER" | translate }}:&nbsp;</span>
<span *ngIf="user" class="value">{{ user.username }} ({{ user.roles[0] }})</span>
<br />
<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.LAST_ACCESS" | translate }}
:&nbsp;</span>
<span class="value">{{ time }}</span>
</div>

<div class="detail-slot">
<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.VERSION" | translate }}:&nbsp;</span>
<span class="value">{{ appMetadata.version }}</span>
<br />
<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.ENVIRONMENT" | translate }}
:&nbsp;</span>
<span class="value">{{ appMetadata.environment }}</span>
</div>
</stark-app-data>
</div>

<stark-app-logout></stark-app-logout>
</div>

<div class="stark-app-bar-content-right-center">
<div *ngIf="isMenuModeActive">
<stark-app-data mode="menu">
<div class="detail-slot">
<span *ngIf="user" class="label">{{ "SHOWCASE.DEMO.APP_DATA.USER" | translate }}:&nbsp;</span>
<span *ngIf="user" class="value">{{ user.username }} ({{ user.roles[0] }})</span>
<br />
<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.LAST_ACCESS" | translate }}
:&nbsp;</span>
<span class="value">{{ time }}</span>
<br />
<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.VERSION" | translate }}:&nbsp;</span>
<span class="value">{{ appMetadata.version }}</span>
<br />
<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.ENVIRONMENT" | translate }}
:&nbsp;</span>
<span class="value">{{ appMetadata.environment }}</span>
</div>
</stark-app-data>
</div>

<stark-language-selector color="white"
class="stark-full-width"
mode="dropdown"></stark-language-selector>

<button color="white" (click)="openLeftSidebar()" mat-icon-button>
<mat-icon svgIcon="skip-next"></mat-icon>
</button>

<button color="white" (click)="openRightSidebar()" mat-icon-button>
<mat-icon svgIcon="skip-previous"></mat-icon>
</button>
</div>

<div class="stark-app-bar-content-right-actions-alt">
<stark-route-search direction="left" [menuConfig]="mainMenu"></stark-route-search>

<a href="https://stark.nbb.be/api-docs/stark-ui/latest/"
target="_blank"
rel="noopener noreferrer">
<button mat-mini-fab
mat-icon-button
color="success"
[matTooltip]="'SHOWCASE.ICONS.STARK_UI' | translate">
<mat-icon class="header-icon" svgIcon="television-guide"></mat-icon>
</button>
</a>

<a href="https://stark.nbb.be/api-docs/stark-core/latest/"
target="_blank"
rel="noopener noreferrer">
<button mat-mini-fab
mat-icon-button
color="primary"
[matTooltip]="'SHOWCASE.ICONS.STARK_CORE' | translate">
<mat-icon class="header-icon" svgIcon="atom"></mat-icon>
</button>
</a>

<a href="https://stark.nbb.be/api-docs/stark-rbac/latest/"
target="_blank"
rel="noopener noreferrer">
<button mat-mini-fab
mat-icon-button
color="alert"
[matTooltip]="'SHOWCASE.ICONS.STARK_RBAC' | translate">
<mat-icon class="header-icon" svgIcon="shield-lock-outline"></mat-icon>
</button>
</a>

<a href="https://github.com/NationalBankBelgium" target="_blank" rel="noopener noreferrer">
<button mat-mini-fab
mat-icon-button
class="github-icon"
[matTooltip]="'SHOWCASE.ICONS.GITHUB' | translate">
<mat-icon class="custom-icon" svgIcon="github-circle"></mat-icon>
</button>
</a>
</div>
</div>

<div class="stark-app-bar-page-title"></div>

<stark-message-pane [clearOnNavigation]="true"></stark-message-pane>
</div>
</div>
</header>

<stark-app-sidebar>
<ng-container stark-app-sidenav-menu>
<stark-app-logo></stark-app-logo>
Expand All @@ -159,6 +23,154 @@
</ng-container>

<ng-container stark-app-sidenav-content>
<header class="stark-app-header">
<div class="stark-header-container">
<div class="stark-app-bar">
<div class="stark-app-bar-content-left">
<div class="stark-actions">
<button class="stark-home-button" (click)="goHome()" color="white" mat-icon-button>
<mat-icon svgIcon="home"></mat-icon>
</button>

<button color="white" mat-icon-button (click)="toggleMenu()">
<mat-icon svgIcon="menu"></mat-icon>
</button>
</div>
</div>

<div class="stark-app-bar-content-center">
<div class="app-logo">
<stark-app-logo></stark-app-logo>
</div>
</div>

<div class="stark-app-bar-content-right">
<div>
<div *ngIf="!isMenuModeActive">
<stark-app-data mode="dropdown">
<div class="summary-slot">
<span *ngIf="user"
class="label">{{ "SHOWCASE.DEMO.APP_DATA.USER" | translate }}
:&nbsp;</span>
<span *ngIf="user" class="value">{{ user.username }} ({{ user.roles[0] }}
)</span>
<br />
<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.LAST_ACCESS" | translate }} :&nbsp;</span>
<span class="value">{{ time }}</span>
</div>

<div class="detail-slot">
<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.VERSION" | translate }}:&nbsp;</span>
<span class="value">{{ appMetadata.version }}</span>
<br />
<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.ENVIRONMENT" | translate }} :&nbsp;</span>
<span class="value">{{ appMetadata.environment }}</span>
</div>
</stark-app-data>
</div>

<stark-app-logout></stark-app-logout>
</div>

<div class="stark-app-bar-content-right-center">
<div *ngIf="isMenuModeActive">
<stark-app-data mode="menu">
<div class="detail-slot">
<span *ngIf="user"
class="label">{{ "SHOWCASE.DEMO.APP_DATA.USER" | translate }}
:&nbsp;</span>
<span *ngIf="user" class="value">{{ user.username }} ({{ user.roles[0] }}
)</span>
<br />
<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.LAST_ACCESS" | translate }} :&nbsp;</span>
<span class="value">{{ time }}</span>
<br />
<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.VERSION" | translate }}:&nbsp;</span>
<span class="value">{{ appMetadata.version }}</span>
<br />
<span class="label">{{ "SHOWCASE.DEMO.APP_DATA.ENVIRONMENT" | translate }} :&nbsp;</span>
<span class="value">{{ appMetadata.environment }}</span>
</div>
</stark-app-data>
</div>

<stark-language-selector color="white"
class="stark-full-width"
mode="dropdown"></stark-language-selector>

<button color="white" (click)="openLeftSidebar()" mat-icon-button>
<mat-icon svgIcon="skip-next"></mat-icon>
</button>

<button color="white" (click)="openRightSidebar()" mat-icon-button>
<mat-icon svgIcon="skip-previous"></mat-icon>
</button>
</div>

<div class="stark-app-bar-content-right-actions-alt">
<stark-route-search direction="left" [menuConfig]="mainMenu"></stark-route-search>

<a href="https://stark.nbb.be/api-docs/stark-ui/latest/"
target="_blank"
rel="noopener noreferrer">
<button
mat-mini-fab
mat-icon-button
color="success"
[matTooltip]="'SHOWCASE.ICONS.STARK_UI' | translate"
>
<mat-icon class="header-icon" svgIcon="television-guide"></mat-icon>
</button>
</a>

<a href="https://stark.nbb.be/api-docs/stark-core/latest/"
target="_blank"
rel="noopener noreferrer">
<button
mat-mini-fab
mat-icon-button
color="primary"
[matTooltip]="'SHOWCASE.ICONS.STARK_CORE' | translate"
>
<mat-icon class="header-icon" svgIcon="atom"></mat-icon>
</button>
</a>

<a href="https://stark.nbb.be/api-docs/stark-rbac/latest/"
target="_blank"
rel="noopener noreferrer">
<button
mat-mini-fab
mat-icon-button
color="alert"
[matTooltip]="'SHOWCASE.ICONS.STARK_RBAC' | translate"
>
<mat-icon class="header-icon" svgIcon="shield-lock-outline"></mat-icon>
</button>
</a>

<a href="https://github.com/NationalBankBelgium"
target="_blank"
rel="noopener noreferrer">
<button
mat-mini-fab
mat-icon-button
class="github-icon"
[matTooltip]="'SHOWCASE.ICONS.GITHUB' | translate"
>
<mat-icon class="custom-icon" svgIcon="github-circle"></mat-icon>
</button>
</a>
</div>
</div>

<div class="stark-app-bar-page-title"></div>

<stark-message-pane [clearOnNavigation]="true"></stark-message-pane>
</div>
</div>
</header>

<main class="stark-main-container">
<ui-view></ui-view>
</main>
Expand Down

0 comments on commit ed580f1

Please sign in to comment.