From 4e6207fef5a34f90029e8a3c04363916a181a798 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Sat, 31 Mar 2018 13:20:22 +0300
Subject: [PATCH] Fixed: Small issues caused by Flex Layout update Fixed:
 Profile page header bg image doesn't correctly cover the header on mobile
 devices Fixed: Contacts app form dialog header irregularities Fixed:
 Analytics module doesn't import MatButtons Fixed: Scrumboard card dialog
 toolbar issues

---
 .../contact-form/contact-form.component.html         |  6 +++---
 .../contact-form/contact-form.component.scss         |  1 +
 .../apps/dashboards/analytics/analytics.module.ts    |  3 ++-
 .../sidenavs/main/main-sidenav.component.html        |  4 ++--
 .../mail/sidenavs/main/main-sidenav.component.html   |  4 ++--
 .../apps/scrumboard/board/board.component.html       |  2 +-
 .../board/dialogs/card/card.component.html           |  6 ++++--
 .../board/dialogs/card/card.component.scss           |  5 +++++
 .../todo/sidenavs/main/main-sidenav.component.html   |  4 ++--
 .../content/pages/profile/profile.component.scss     |  2 +-
 src/app/main/content/ui/forms/forms.component.html   | 12 ++++++------
 11 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/app/main/content/apps/contacts/contact-form/contact-form.component.html b/src/app/main/content/apps/contacts/contact-form/contact-form.component.html
index ada9a9ff..a07ad9df 100644
--- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.html
+++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.html
@@ -9,10 +9,10 @@
             </button>
         </mat-toolbar-row>
 
-        <mat-toolbar-row class="toolbar-bottom py-8 py-sm-16" fxLayout="column" fxLayoutAlign="center center">
-            <img [src]="contact.avatar" class=" avatar contact-avatar huge"
+        <mat-toolbar-row class="toolbar-bottom py-16" fxLayout="column" fxLayoutAlign="center center">
+            <img [src]="contact.avatar" class="avatar contact-avatar huge m-0"
                  [alt]="contact.name"/>
-            <div class="contact-name">{{contact.name}}</div>
+            <div class="contact-name mt-8">{{contact.name}} {{contact.lastName}}</div>
         </mat-toolbar-row>
     </mat-toolbar>
 
diff --git a/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss b/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
index 2acde7e5..1778b560 100644
--- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
+++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
@@ -15,6 +15,7 @@
         overflow: hidden;
 
         .mat-toolbar {
+            flex: 1 0 auto;
             min-height: initial;
         }
 
diff --git a/src/app/main/content/apps/dashboards/analytics/analytics.module.ts b/src/app/main/content/apps/dashboards/analytics/analytics.module.ts
index 819966d1..710521ca 100644
--- a/src/app/main/content/apps/dashboards/analytics/analytics.module.ts
+++ b/src/app/main/content/apps/dashboards/analytics/analytics.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTabsModule } from '@angular/material';
+import { MatButtonModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTabsModule } from '@angular/material';
 
 import { AgmCoreModule } from '@agm/core';
 import { ChartsModule } from 'ng2-charts';
@@ -31,6 +31,7 @@ const routes: Routes = [
     imports     : [
         RouterModule.forChild(routes),
 
+        MatButtonModule,
         MatFormFieldModule,
         MatIconModule,
         MatMenuModule,
diff --git a/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html b/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html
index 826f5e7d..98d24858 100644
--- a/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html
+++ b/src/app/main/content/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html
@@ -26,8 +26,8 @@
 <div class="content" fusePerfectScrollbar>
 
     <div class="p-24">
-        <button mat-raised-button fxFlex
-                class="mat-accent compose-dialog-button"
+        <button mat-raised-button
+                class="mat-accent compose-dialog-button w-100-p"
                 (click)="composeDialog()"
                 aria-label="Compose">
             {{ 'MAIL.COMPOSE' | translate }}
diff --git a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
index c8d7df5b..1db87362 100644
--- a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
+++ b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html
@@ -26,8 +26,8 @@
 <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
 
     <div class="p-24">
-        <button mat-raised-button fxFlex
-                class="mat-accent compose-dialog-button"
+        <button mat-raised-button
+                class="mat-accent compose-dialog-button w-100-p"
                 (click)="composeDialog()"
                 aria-label="Compose">
             {{ 'MAIL.COMPOSE' | translate }}
diff --git a/src/app/main/content/apps/scrumboard/board/board.component.html b/src/app/main/content/apps/scrumboard/board/board.component.html
index 0a96df8a..937ce6e2 100644
--- a/src/app/main/content/apps/scrumboard/board/board.component.html
+++ b/src/app/main/content/apps/scrumboard/board/board.component.html
@@ -13,7 +13,7 @@
                             [ngClass]="'mat-'+board.settings.color+'-700-bg'"
                             routerLink="/apps/scrumboard/boards"
                             aria-label="boards button">
-                        <mat-icon>assessment</mat-icon>
+                        <mat-icon class="mr-8">assessment</mat-icon>
                         <span>BOARDS</span>
                     </button>
                 </div>
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
index f058844e..5bac8aa4 100644
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
@@ -1,5 +1,6 @@
 <div class="dialog-content-wrapper">
-    <mat-toolbar *ngIf="card" matDialogTitle class="mat-accent-bg m-0">
+
+    <mat-toolbar *ngIf="card" matDialogTitle class="mat-accent-bg m-0" fxFlex="1 0 auto" fxLayout="row">
 
         <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
 
@@ -8,7 +9,7 @@
                 <!-- DUE DATE -->
                 <div class="due-date" fxFlex="0 1 auto">
 
-                    <button *ngIf="card.due" mat-icon-button class="" [matMenuTriggerFor]="dueDateMenu">
+                    <button *ngIf="card.due" mat-icon-button [matMenuTriggerFor]="dueDateMenu">
                         <mat-icon>today</mat-icon>
                     </button>
 
@@ -459,4 +460,5 @@
         </div>
         <!-- / SECTIONS -->
     </div>
+
 </div>
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
index 7d11812e..184a5479 100644
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
@@ -37,6 +37,11 @@
                         }
                     }
                 }
+
+                .mat-form-field-prefix .mat-datepicker-toggle-default-icon,
+                .mat-form-field-suffix .mat-datepicker-toggle-default-icon {
+                    width: 24px;
+                }
             }
         }
 
diff --git a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html b/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
index 2e221151..05a6269f 100644
--- a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
+++ b/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html
@@ -25,8 +25,8 @@
 <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
 
     <div class="p-24">
-        <button mat-raised-button fxFlex
-                class="mat-accent add-todo-button"
+        <button mat-raised-button
+                class="mat-accent add-todo-button w-100-p"
                 (click)="newTodo()"
                 aria-label="ADD TASK">
             ADD TASK
diff --git a/src/app/main/content/pages/profile/profile.component.scss b/src/app/main/content/pages/profile/profile.component.scss
index 8044a3cc..34949c31 100644
--- a/src/app/main/content/pages/profile/profile.component.scss
+++ b/src/app/main/content/pages/profile/profile.component.scss
@@ -7,7 +7,7 @@
         min-height: 320px;
         max-height: 320px;
         background: url('/assets/images/backgrounds/dark-material-bg.jpg') no-repeat 0 45%;
-        background-size: 100% auto;
+        background-size: cover;
 
         .profile-image {
             margin-right: 24px;
diff --git a/src/app/main/content/ui/forms/forms.component.html b/src/app/main/content/ui/forms/forms.component.html
index 1cdde49d..4a342bfe 100644
--- a/src/app/main/content/ui/forms/forms.component.html
+++ b/src/app/main/content/ui/forms/forms.component.html
@@ -175,7 +175,7 @@
 
                         <ng-template matStepLabel>Fill out your name</ng-template>
 
-                        <div>
+                        <div fxFlex="1 0 auto" fxLayout="row">
 
                             <mat-form-field fxFlex="50">
                                 <input matInput placeholder="First name" formControlName="firstName" required>
@@ -209,7 +209,7 @@
 
                         <ng-template matStepLabel>Fill out your address</ng-template>
 
-                        <div>
+                        <div fxFlex="1 0 auto" fxLayout="row">
 
                             <mat-form-field fxFlex="100">
                                 <textarea matInput placeholder="Address" formControlName="address" required>
@@ -241,7 +241,7 @@
 
                         <ng-template matStepLabel>Fill out your address</ng-template>
 
-                        <div>
+                        <div fxFlex="1 0 auto" fxLayout="row">
 
                             <mat-form-field fxFlex="33">
                                 <input matInput placeholder="City" formControlName="city" required>
@@ -329,7 +329,7 @@
 
                         <ng-template matStepLabel>Fill out your name</ng-template>
 
-                        <div>
+                        <div fxFlex="1 0 auto" fxLayout="row">
 
                             <mat-form-field fxFlex="50">
                                 <input matInput placeholder="First name" formControlName="firstName" required>
@@ -363,7 +363,7 @@
 
                         <ng-template matStepLabel>Fill out your address</ng-template>
 
-                        <div>
+                        <div fxFlex="1 0 auto" fxLayout="row">
 
                             <mat-form-field fxFlex="100">
                                 <textarea matInput placeholder="Address" formControlName="address" required>
@@ -395,7 +395,7 @@
 
                         <ng-template matStepLabel>Fill out your address</ng-template>
 
-                        <div>
+                        <div fxFlex="1 0 auto" fxLayout="row">
 
                             <mat-form-field fxFlex="33">
                                 <input matInput placeholder="City" formControlName="city" required>