Removes the second row for the headbar
- Instead of the second row there is a toggle-button at the bottom of the side-nav
This commit is contained in:
GabrielMeyer
parent
3fd519e0d4
commit
457fc570a0
@ -1,9 +1,3 @@
|
||||
<mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" *ngIf="!vp.isMobile">
|
||||
<!-- Nav menu -->
|
||||
<button mat-icon-button *ngIf="!multiSelectMode" (click)="clickHamburgerMenu()">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" class="sticky-toolbar">
|
||||
<div class="toolbar-left">
|
||||
<!-- Nav menu -->
|
||||
@ -36,9 +30,7 @@
|
||||
|
||||
<div class="toolbar-right">
|
||||
<!-- Extra controls slot -->
|
||||
<div class="extra-controls-wrapper">
|
||||
<ng-content select=".extra-controls-slot"></ng-content>
|
||||
</div>
|
||||
<ng-content select=".extra-controls-slot"></ng-content>
|
||||
|
||||
<!-- Main action button - desktop -->
|
||||
<button
|
||||
|
||||
@ -6,17 +6,16 @@
|
||||
}
|
||||
|
||||
.sticky-toolbar {
|
||||
position: -webkit-sticky;
|
||||
position: -moz-sticky;
|
||||
position: -ms-sticky;
|
||||
position: -o-sticky;
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: contents;
|
||||
display: flex;
|
||||
button {
|
||||
margin: 12px 0;
|
||||
}
|
||||
.toolbar-left-text {
|
||||
margin-left: 10px;
|
||||
width: 100%;
|
||||
@ -24,6 +23,7 @@
|
||||
|
||||
::ng-deep .title-slot {
|
||||
h2 {
|
||||
margin: 16px 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -38,11 +38,7 @@
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.extra-controls-wrapper {
|
||||
display: contents;
|
||||
display: flex;
|
||||
::ng-deep .extra-controls-slot {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -133,9 +133,22 @@
|
||||
<div class="os-footer-logo-container">
|
||||
<os-logo [footer]="true"></os-logo>
|
||||
</div>
|
||||
|
||||
</mat-nav-list>
|
||||
<!-- Toggle-button -->
|
||||
<div class="nav-toggle-button-container" *ngIf="!vp.isMobile">
|
||||
<button *ngIf="sideNav.opened" mat-raised-button (click)="toggleSideNav()" class="nav-toggle-button left">
|
||||
<mat-icon>arrow_back_ios</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav-content>
|
||||
<!-- Toggle-button -->
|
||||
<div class="nav-toggle-button-container" *ngIf="!vp.isMobile">
|
||||
<button *ngIf="!sideNav.opened" mat-raised-button (click)="toggleSideNav()" class="nav-toggle-button right">
|
||||
<mat-icon>arrow_forward_ios</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')" class="content">
|
||||
<main [@pageTransition]="o.isActivated ? o.activatedRoute : ''">
|
||||
<router-outlet #o="outlet"></router-outlet>
|
||||
|
||||
@ -7,6 +7,7 @@ mat-sidenav-container {
|
||||
border: 0;
|
||||
box-shadow: 3px 0px 10px 0px rgba(0, 0, 0, 0.2);
|
||||
width: 260px;
|
||||
overflow-x: hidden;
|
||||
|
||||
mat-toolbar,
|
||||
mat-toolbar-row {
|
||||
@ -47,6 +48,48 @@ mat-sidenav-container {
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// CSS for the toggle button
|
||||
.nav-toggle-button-container {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
bottom: 24px;
|
||||
& > div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-toggle-button {
|
||||
bottom: 0;
|
||||
|
||||
position: absolute;
|
||||
visibility: visible;
|
||||
transform: none;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
height: 48px;
|
||||
padding: 0 0 2px;
|
||||
|
||||
&.left {
|
||||
left: 236px;
|
||||
padding-left: 8px;
|
||||
border-radius: 50px 0 0 50px;
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: 0;
|
||||
padding-right: 8px;
|
||||
border-radius: 0 50px 50px 0;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
$size: 18px;
|
||||
height: $size;
|
||||
width: $size;
|
||||
font-size: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* The top logo container can contain any logo with any size.
|
||||
It needs to always fit.*/
|
||||
.os-logo-container {
|
||||
|
||||
@ -17,6 +17,11 @@
|
||||
background-color: mat-color($background, card); //TODO
|
||||
}
|
||||
|
||||
.nav-toggle-button {
|
||||
background: mat-color($background, background);
|
||||
color: mat-color($foreground, icon);
|
||||
}
|
||||
|
||||
/* seperator */
|
||||
mat-nav-list.main-nav,
|
||||
mat-divider {
|
||||
|
||||
@ -630,7 +630,7 @@ button.mat-menu-item.selected {
|
||||
* from 100vh
|
||||
*/
|
||||
.virtual-scroll-full-page {
|
||||
height: calc(100vh - 128px);
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
/** css hacks https://codepen.io/edge0703/pen/iHJuA */
|
||||
@ -640,7 +640,7 @@ button.mat-menu-item.selected {
|
||||
}
|
||||
|
||||
.virtual-scroll-with-head-bar {
|
||||
height: calc(100vh - 189px);
|
||||
height: calc(100vh - 125px);
|
||||
|
||||
// For some reason, hiding the table header adds an empty meta bar.
|
||||
.pbl-ngrid-container {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user