mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-09 20:15:07 +00:00
(Navbar) Moved navbar style into the variants
(AppComponent) Moved boxed class to the body Fixed: Horizontal layout navbar covers entire screen
This commit is contained in:
Sercan Yemen
parent
8dfc3e854b
commit
19c960cc4c
|
|
@ -10,4 +10,15 @@ body {
|
|||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
// Boxed
|
||||
&.boxed {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
@include mat-elevation(8);
|
||||
}
|
||||
}
|
||||
|
|
@ -75,7 +75,7 @@ export class AppComponent implements OnInit, OnDestroy
|
|||
// Add is-mobile class to the body if the platform is mobile
|
||||
if ( this._platform.ANDROID || this._platform.IOS )
|
||||
{
|
||||
this.document.body.className += ' is-mobile';
|
||||
this.document.body.classList.add('is-mobile');
|
||||
}
|
||||
|
||||
// Set the private defaults
|
||||
|
|
@ -96,6 +96,15 @@ export class AppComponent implements OnInit, OnDestroy
|
|||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((config) => {
|
||||
this.fuseConfig = config;
|
||||
|
||||
if ( this.fuseConfig.layout.width === 'boxed' )
|
||||
{
|
||||
this.document.body.classList.add('boxed');
|
||||
}
|
||||
else
|
||||
{
|
||||
this.document.body.classList.remove('boxed');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,16 @@
|
|||
navbar-horizontal-style-1 {
|
||||
|
||||
}
|
||||
|
||||
navbar {
|
||||
|
||||
&.horizontal-style-1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
max-height: 56px;
|
||||
min-height: 56px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
navbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
||||
import { Component, ElementRef, Input, Renderer2, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'navbar',
|
||||
|
|
@ -8,16 +8,46 @@ import { Component, Input, ViewEncapsulation } from '@angular/core';
|
|||
})
|
||||
export class NavbarComponent
|
||||
{
|
||||
// Variant
|
||||
@Input()
|
||||
variant;
|
||||
// Private
|
||||
_variant: string;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {ElementRef} _elementRef
|
||||
* @param {Renderer2} _renderer
|
||||
*/
|
||||
constructor()
|
||||
constructor(
|
||||
private _elementRef: ElementRef,
|
||||
private _renderer: Renderer2
|
||||
)
|
||||
{
|
||||
// Set the defaults
|
||||
this.variant = 'vertical-style-1';
|
||||
// Set the private defaults
|
||||
this._variant = 'vertical-style-1';
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Variant
|
||||
*/
|
||||
get variant(): string
|
||||
{
|
||||
return this._variant;
|
||||
}
|
||||
|
||||
@Input()
|
||||
set variant(value: string)
|
||||
{
|
||||
// Remove the old class name
|
||||
this._renderer.removeClass(this._elementRef.nativeElement, this.variant);
|
||||
|
||||
// Store the variant value
|
||||
this._variant = value;
|
||||
|
||||
// Add the new class name
|
||||
this._renderer.addClass(this._elementRef.nativeElement, value);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,6 +68,24 @@ fuse-sidebar {
|
|||
|
||||
navbar {
|
||||
|
||||
&.vertical-style-1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&.right-navbar {
|
||||
|
||||
.toggle-sidebar-opened {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
navbar-vertical-style-1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -156,14 +174,4 @@ navbar {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
|
||||
.toggle-sidebar-opened {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -30,6 +30,24 @@ fuse-sidebar {
|
|||
|
||||
navbar {
|
||||
|
||||
&.vertical-style-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&.right-navbar {
|
||||
|
||||
.toggle-sidebar-opened {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
navbar-vertical-style-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -72,14 +90,4 @@ navbar {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
|
||||
.toggle-sidebar-opened {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
|
||||
<div id="main">
|
||||
|
||||
<!-- TOOLBAR: Above -->
|
||||
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
|
||||
|
|
|
|||
|
|
@ -16,13 +16,6 @@ horizontal-layout-1 {
|
|||
z-index: 1;
|
||||
min-width: 0;
|
||||
|
||||
// Boxed
|
||||
&.boxed {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
@include mat-elevation(8);
|
||||
}
|
||||
|
||||
// Container 1
|
||||
> .container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
|
||||
<div id="main">
|
||||
|
||||
<!-- TOOLBAR: Above -->
|
||||
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above'">
|
||||
|
|
|
|||
|
|
@ -16,13 +16,6 @@ vertical-layout-1 {
|
|||
z-index: 1;
|
||||
min-width: 0;
|
||||
|
||||
// Boxed
|
||||
&.boxed {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
@include mat-elevation(8);
|
||||
}
|
||||
|
||||
// Container 1
|
||||
> .container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
|
||||
<div id="main">
|
||||
|
||||
<!-- TOOLBAR: Above fixed -->
|
||||
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">
|
||||
|
|
|
|||
|
|
@ -16,13 +16,6 @@ vertical-layout-2 {
|
|||
z-index: 1;
|
||||
min-width: 0;
|
||||
|
||||
// Boxed
|
||||
&.boxed {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
@include mat-elevation(8);
|
||||
}
|
||||
|
||||
// Container 1 (Scrollable)
|
||||
> .container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
|
||||
<div id="main">
|
||||
|
||||
<!-- TOOLBAR: Above fixed -->
|
||||
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">
|
||||
|
|
|
|||
|
|
@ -16,13 +16,6 @@ vertical-layout-3 {
|
|||
z-index: 1;
|
||||
min-width: 0;
|
||||
|
||||
// Boxed
|
||||
&.boxed {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
@include mat-elevation(8);
|
||||
}
|
||||
|
||||
// Container 1 (Scrollable)
|
||||
> .container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@
|
|||
<span class="title">Fixed</span>
|
||||
<ul>
|
||||
<li>Scrolling is not smooth on iOS devices</li>
|
||||
<li>(Horizontal Layout) Navbar covers the entire screen</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user