diff --git a/src/@fuse/components/sidebar/sidebar.component.scss b/src/@fuse/components/sidebar/sidebar.component.scss index 63a7775a..7d46246e 100644 --- a/src/@fuse/components/sidebar/sidebar.component.scss +++ b/src/@fuse/components/sidebar/sidebar.component.scss @@ -1,3 +1,5 @@ +@import "src/@fuse/scss/fuse"; + fuse-sidebar { display: flex; flex-direction: column; @@ -14,6 +16,12 @@ fuse-sidebar { box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35); background: white; + @include media-breakpoint-down('xs') { + min-width: 0 !important; + max-width: 80vw !important; + width: 80vw !important; + } + &.left-positioned { left: 0; transform: translateX(-100%); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3ecf2134..bcfc2e09 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,6 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, Inject, OnDestroy, OnInit } from '@angular/core'; +import { DOCUMENT } from '@angular/common'; +import { Platform } from '@angular/cdk/platform'; import { TranslateService } from '@ngx-translate/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -29,20 +31,24 @@ export class AppComponent implements OnInit, OnDestroy /** * Constructor * + * @param {DOCUMENT} document * @param {FuseConfigService} _fuseConfigService * @param {FuseNavigationService} _fuseNavigationService * @param {FuseSidebarService} _fuseSidebarService * @param {FuseSplashScreenService} _fuseSplashScreenService * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService + * @param {Platform} _platform * @param {TranslateService} _translateService */ constructor( + @Inject(DOCUMENT) private document: any, private _fuseConfigService: FuseConfigService, private _fuseNavigationService: FuseNavigationService, private _fuseSidebarService: FuseSidebarService, private _fuseSplashScreenService: FuseSplashScreenService, private _fuseTranslationLoaderService: FuseTranslationLoaderService, - private _translateService: TranslateService + private _translateService: TranslateService, + private _platform: Platform ) { // Get default navigation @@ -66,6 +72,12 @@ export class AppComponent implements OnInit, OnDestroy // Use a language this._translateService.use('en'); + // 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'; + } + // Set the private defaults this._unsubscribeAll = new Subject(); } diff --git a/src/app/layout/components/chat-panel/chat-panel.component.html b/src/app/layout/components/chat-panel/chat-panel.component.html index 585f2a8c..07ebf17a 100644 --- a/src/app/layout/components/chat-panel/chat-panel.component.html +++ b/src/app/layout/components/chat-panel/chat-panel.component.html @@ -31,23 +31,23 @@
- +
- +
- +
{{contact.unread}}
- +
- +
diff --git a/src/app/layout/components/chat-panel/chat-panel.component.scss b/src/app/layout/components/chat-panel/chat-panel.component.scss index 93b0d321..ffb556f7 100644 --- a/src/app/layout/components/chat-panel/chat-panel.component.scss +++ b/src/app/layout/components/chat-panel/chat-panel.component.scss @@ -34,6 +34,7 @@ chat-panel { width: 72px; min-width: 72px; max-width: 72px; + -webkit-overflow-scrolling: touch; // Perfect scrollbar .ps__rail-y { @@ -44,9 +45,14 @@ chat-panel { } } - .mat-list-item { - cursor: pointer; + .contacts-list-item { position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 0 16px; + height: 56px; + cursor: pointer; &.active { background-color: mat-color(mat-palette($mat-grey, 300)); @@ -68,50 +74,51 @@ chat-panel { } } - .mat-list-item-content { + .avatar { + margin: 0; + } - .unread-count { - position: absolute; - min-width: 18px; - height: 18px; - top: 4px; - left: 10px; - border-radius: 9px; - padding: 0 5px; - font-size: 11px; - text-align: center; - display: flex; - align-items: center; - justify-content: center; - background-color: mat-color(mat-palette($mat-indigo)); - color: white; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35); + .unread-count { + position: absolute; + min-width: 18px; + height: 18px; + top: 4px; + left: 10px; + border-radius: 9px; + padding: 0 5px; + font-size: 11px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + background-color: mat-color(mat-palette($mat-indigo)); + color: white; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35); + } + + .status-icon { + position: absolute; + width: 12px; + height: 12px; + bottom: 3px; + left: 44px; + border: 2px solid white; + border-radius: 50%; + + &.online { + background-color: #4CAF50; } - .status-icon { - position: absolute; - width: 12px; - height: 12px; - bottom: 3px; - left: 44px; - border: 2px solid white; - border-radius: 50%; + &.do-not-disturb { + background-color: #F44336; + } - &.online { - background-color: #4CAF50; - } + &.away { + background-color: #FFC107; + } - &.do-not-disturb { - background-color: #F44336; - } - - &.away { - background-color: #FFC107; - } - - &.offline { - background-color: #646464; - } + &.offline { + background-color: #646464; } } } @@ -337,6 +344,12 @@ fuse-sidebar { min-width: 360px; max-width: 360px; + @include media-breakpoint-down('xs') { + min-width: 0 !important; + max-width: 100vw !important; + width: 100vw !important; + } + // Folded &.folded { diff --git a/src/app/layout/components/chat-panel/chat-panel.component.ts b/src/app/layout/components/chat-panel/chat-panel.component.ts index cf7c04f9..df12d123 100644 --- a/src/app/layout/components/chat-panel/chat-panel.component.ts +++ b/src/app/layout/components/chat-panel/chat-panel.component.ts @@ -124,7 +124,7 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy this._replyForm.reset(); // Focus to the reply input - this._replyInput.nativeElement.focus(); + // this._replyInput.nativeElement.focus(); // Scroll to the bottom of the messages list if ( this._chatViewScrollbar ) diff --git a/src/app/layout/components/chat-panel/chat-panel.module.ts b/src/app/layout/components/chat-panel/chat-panel.module.ts index 5d9eb29b..103a006e 100644 --- a/src/app/layout/components/chat-panel/chat-panel.module.ts +++ b/src/app/layout/components/chat-panel/chat-panel.module.ts @@ -1,5 +1,5 @@ import { NgModule } from '@angular/core'; -import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material'; +import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; @@ -18,7 +18,6 @@ import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.se MatFormFieldModule, MatIconModule, MatInputModule, - MatListModule, MatTabsModule, MatTooltipModule, MatRippleModule, diff --git a/src/app/layout/components/navbar/navbar.component.scss b/src/app/layout/components/navbar/navbar.component.scss index e7408888..44ede0d8 100644 --- a/src/app/layout/components/navbar/navbar.component.scss +++ b/src/app/layout/components/navbar/navbar.component.scss @@ -1,5 +1,6 @@ navbar { display: flex; flex-direction: column; + flex: 1 1 auto; width: 100%; } diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss index 4099e475..147859a9 100644 --- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss +++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss @@ -1,60 +1,63 @@ @import "src/@fuse/scss/fuse"; fuse-sidebar { - overflow: hidden; - &.folded:not(.unfolded) { + &.navbar-fuse-sidebar { + overflow: hidden; - navbar { + &.folded:not(.unfolded) { - navbar-vertical-style-1 { + navbar { - .navbar-top { - padding: 12px 0; - justify-content: center; + navbar-vertical-style-1 { - .buttons { - display: none; - } + .navbar-top { + padding: 12px 0; + justify-content: center; - .logo { - - .logo-icon { - width: 32px; - height: 32px; - } - - .logo-text { + .buttons { display: none; } + + .logo { + + .logo-icon { + width: 32px; + height: 32px; + } + + .logo-text { + display: none; + } + } } - } - .navbar-scroll-container { + .navbar-scroll-container { - .user { - padding: 12px 0; + .user { + padding: 12px 0; - .avatar-container { - position: relative; - top: auto; - padding: 0; + .avatar-container { + position: relative; + top: auto; + padding: 0; - .avatar { - width: 40px; - height: 40px; + .avatar { + width: 40px; + height: 40px; + } + } + + .username, + .email { + display: none; } } - .username, - .email { - display: none; + .navbar-content { + margin-top: 0; } } - - .navbar-content { - margin-top: 0; - } } } } diff --git a/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss b/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss index d150731e..37c14128 100644 --- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss +++ b/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss @@ -1,22 +1,25 @@ @import "src/@fuse/scss/fuse"; fuse-sidebar { - overflow: hidden; - &.folded:not(.unfolded) { + &.navbar-fuse-sidebar { + overflow: hidden; - navbar { + &.folded:not(.unfolded) { - navbar-vertical-style-2 { + navbar { - .navbar-header { - padding: 0 13px; + navbar-vertical-style-2 { - .logo { + .navbar-header { + padding: 0 13px; - .logo-text { - opacity: 0; - transition: opacity 200ms ease; + .logo { + + .logo-text { + opacity: 0; + transition: opacity 200ms ease; + } } } } diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.html b/src/app/layout/horizontal/layout-1/layout-1.component.html index 355985eb..504a8b19 100644 --- a/src/app/layout/horizontal/layout-1/layout-1.component.html +++ b/src/app/layout/horizontal/layout-1/layout-1.component.html @@ -99,7 +99,7 @@ - - @@ -113,7 +113,7 @@ - diff --git a/src/app/layout/vertical/layout-2/layout-2.component.html b/src/app/layout/vertical/layout-2/layout-2.component.html index 46ccb007..3b3714bf 100644 --- a/src/app/layout/vertical/layout-2/layout-2.component.html +++ b/src/app/layout/vertical/layout-2/layout-2.component.html @@ -101,7 +101,7 @@ - @@ -113,7 +113,7 @@ - diff --git a/src/app/layout/vertical/layout-3/layout-3.component.html b/src/app/layout/vertical/layout-3/layout-3.component.html index 2229d5dc..f133a812 100644 --- a/src/app/layout/vertical/layout-3/layout-3.component.html +++ b/src/app/layout/vertical/layout-3/layout-3.component.html @@ -87,7 +87,7 @@ - @@ -99,7 +99,7 @@ -