purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Contacts) sidenav toggler fixed and sidenav style refined for mobile.

Browse Source
This commit is contained in:
mustafahlvc 2017-08-15 13:29:07 +03:00
parent 9a420c9599
commit 117f5a85b2
3 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/main/content/apps/contacts/contacts.component.html
View File

@ -6,8 +6,8 @@
<!-- APP TITLE --> <!-- APP TITLE -->
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<button md-button class="mat-icon-button sidenav-toggle" <button md-button class="mat-icon-button sidenav-toggle mr-12"
fuseMdSidenavToggler="simple-left-sidenav" fuseMdSidenavToggler="contacts-main-sidenav"
fxHide.gt-md> fxHide.gt-md>
<md-icon>menu</md-icon> <md-icon>menu</md-icon>
</button> </button>

4
src/app/main/content/apps/contacts/sidenavs/main/main.component.html
View File

@ -1,6 +1,6 @@
<div class="sidenav-content p-24 pr-4"> <div class="sidenav-content">
<div class="card md-white-bg mat-elevation-z4"> <div class="card md-white-bg">
<!-- SIDENAV HEADER --> <!-- SIDENAV HEADER -->
<div class="header p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header p-24" fxLayout="row" fxLayoutAlign="start center">

13
src/app/main/content/apps/contacts/sidenavs/main/main.component.scss
View File

@ -1,3 +1,5 @@
@import "src/app/core/scss/fuse";
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -7,11 +9,21 @@
.sidenav-content { .sidenav-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0;
@include media-breakpoint(gt-md) {
padding: 24px 4px 24px 24px;
}
.card { .card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 0 1 auto; flex: 0 1 auto;
padding: 0;
@include media-breakpoint(gt-md) {
@include mat-elevation(4);
}
> .header { > .header {
flex: 0 1 auto; flex: 0 1 auto;
@ -22,5 +34,6 @@
flex: 0 1 auto; flex: 0 1 auto;
} }
} }
} }
} }