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
This commit is contained in:
Sercan Yemen 2018-03-31 13:20:22 +03:00
parent bd67b660c8
commit 4e6207fef5
11 changed files with 29 additions and 20 deletions

View File

@ -9,10 +9,10 @@
</button> </button>
</mat-toolbar-row> </mat-toolbar-row>
<mat-toolbar-row class="toolbar-bottom py-8 py-sm-16" fxLayout="column" fxLayoutAlign="center center"> <mat-toolbar-row class="toolbar-bottom py-16" fxLayout="column" fxLayoutAlign="center center">
<img [src]="contact.avatar" class=" avatar contact-avatar huge" <img [src]="contact.avatar" class="avatar contact-avatar huge m-0"
[alt]="contact.name"/> [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-row>
</mat-toolbar> </mat-toolbar>

View File

@ -15,6 +15,7 @@
overflow: hidden; overflow: hidden;
.mat-toolbar { .mat-toolbar {
flex: 1 0 auto;
min-height: initial; min-height: initial;
} }

View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; 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 { AgmCoreModule } from '@agm/core';
import { ChartsModule } from 'ng2-charts'; import { ChartsModule } from 'ng2-charts';
@ -31,6 +31,7 @@ const routes: Routes = [
imports : [ imports : [
RouterModule.forChild(routes), RouterModule.forChild(routes),
MatButtonModule,
MatFormFieldModule, MatFormFieldModule,
MatIconModule, MatIconModule,
MatMenuModule, MatMenuModule,

View File

@ -26,8 +26,8 @@
<div class="content" fusePerfectScrollbar> <div class="content" fusePerfectScrollbar>
<div class="p-24"> <div class="p-24">
<button mat-raised-button fxFlex <button mat-raised-button
class="mat-accent compose-dialog-button" class="mat-accent compose-dialog-button w-100-p"
(click)="composeDialog()" (click)="composeDialog()"
aria-label="Compose"> aria-label="Compose">
{{ 'MAIL.COMPOSE' | translate }} {{ 'MAIL.COMPOSE' | translate }}

View File

@ -26,8 +26,8 @@
<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}"> <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
<div class="p-24"> <div class="p-24">
<button mat-raised-button fxFlex <button mat-raised-button
class="mat-accent compose-dialog-button" class="mat-accent compose-dialog-button w-100-p"
(click)="composeDialog()" (click)="composeDialog()"
aria-label="Compose"> aria-label="Compose">
{{ 'MAIL.COMPOSE' | translate }} {{ 'MAIL.COMPOSE' | translate }}

View File

@ -13,7 +13,7 @@
[ngClass]="'mat-'+board.settings.color+'-700-bg'" [ngClass]="'mat-'+board.settings.color+'-700-bg'"
routerLink="/apps/scrumboard/boards" routerLink="/apps/scrumboard/boards"
aria-label="boards button"> aria-label="boards button">
<mat-icon>assessment</mat-icon> <mat-icon class="mr-8">assessment</mat-icon>
<span>BOARDS</span> <span>BOARDS</span>
</button> </button>
</div> </div>

View File

@ -1,5 +1,6 @@
<div class="dialog-content-wrapper"> <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"> <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
@ -8,7 +9,7 @@
<!-- DUE DATE --> <!-- DUE DATE -->
<div class="due-date" fxFlex="0 1 auto"> <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> <mat-icon>today</mat-icon>
</button> </button>
@ -459,4 +460,5 @@
</div> </div>
<!-- / SECTIONS --> <!-- / SECTIONS -->
</div> </div>
</div> </div>

View File

@ -37,6 +37,11 @@
} }
} }
} }
.mat-form-field-prefix .mat-datepicker-toggle-default-icon,
.mat-form-field-suffix .mat-datepicker-toggle-default-icon {
width: 24px;
}
} }
} }

View File

@ -25,8 +25,8 @@
<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}"> <div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
<div class="p-24"> <div class="p-24">
<button mat-raised-button fxFlex <button mat-raised-button
class="mat-accent add-todo-button" class="mat-accent add-todo-button w-100-p"
(click)="newTodo()" (click)="newTodo()"
aria-label="ADD TASK"> aria-label="ADD TASK">
ADD TASK ADD TASK

View File

@ -7,7 +7,7 @@
min-height: 320px; min-height: 320px;
max-height: 320px; max-height: 320px;
background: url('/assets/images/backgrounds/dark-material-bg.jpg') no-repeat 0 45%; background: url('/assets/images/backgrounds/dark-material-bg.jpg') no-repeat 0 45%;
background-size: 100% auto; background-size: cover;
.profile-image { .profile-image {
margin-right: 24px; margin-right: 24px;

View File

@ -175,7 +175,7 @@
<ng-template matStepLabel>Fill out your name</ng-template> <ng-template matStepLabel>Fill out your name</ng-template>
<div> <div fxFlex="1 0 auto" fxLayout="row">
<mat-form-field fxFlex="50"> <mat-form-field fxFlex="50">
<input matInput placeholder="First name" formControlName="firstName" required> <input matInput placeholder="First name" formControlName="firstName" required>
@ -209,7 +209,7 @@
<ng-template matStepLabel>Fill out your address</ng-template> <ng-template matStepLabel>Fill out your address</ng-template>
<div> <div fxFlex="1 0 auto" fxLayout="row">
<mat-form-field fxFlex="100"> <mat-form-field fxFlex="100">
<textarea matInput placeholder="Address" formControlName="address" required> <textarea matInput placeholder="Address" formControlName="address" required>
@ -241,7 +241,7 @@
<ng-template matStepLabel>Fill out your address</ng-template> <ng-template matStepLabel>Fill out your address</ng-template>
<div> <div fxFlex="1 0 auto" fxLayout="row">
<mat-form-field fxFlex="33"> <mat-form-field fxFlex="33">
<input matInput placeholder="City" formControlName="city" required> <input matInput placeholder="City" formControlName="city" required>
@ -329,7 +329,7 @@
<ng-template matStepLabel>Fill out your name</ng-template> <ng-template matStepLabel>Fill out your name</ng-template>
<div> <div fxFlex="1 0 auto" fxLayout="row">
<mat-form-field fxFlex="50"> <mat-form-field fxFlex="50">
<input matInput placeholder="First name" formControlName="firstName" required> <input matInput placeholder="First name" formControlName="firstName" required>
@ -363,7 +363,7 @@
<ng-template matStepLabel>Fill out your address</ng-template> <ng-template matStepLabel>Fill out your address</ng-template>
<div> <div fxFlex="1 0 auto" fxLayout="row">
<mat-form-field fxFlex="100"> <mat-form-field fxFlex="100">
<textarea matInput placeholder="Address" formControlName="address" required> <textarea matInput placeholder="Address" formControlName="address" required>
@ -395,7 +395,7 @@
<ng-template matStepLabel>Fill out your address</ng-template> <ng-template matStepLabel>Fill out your address</ng-template>
<div> <div fxFlex="1 0 auto" fxLayout="row">
<mat-form-field fxFlex="33"> <mat-form-field fxFlex="33">
<input matInput placeholder="City" formControlName="city" required> <input matInput placeholder="City" formControlName="city" required>