View example-input-change.js
import { Component } from '@angular/core';
import { ContentHeaderService } from '../../../../../SafetySync.Portal.Core/Service/ContentHeader/content-header.service';
@Component({
selector: 'ss-orientation-list',
templateUrl: './orientation-list.component.html',
styleUrls: ['./orientation-list.component.scss']
})
export class OrientationListComponent implements OnInit, DoCheck {
View content-header-row-example.html
<mat-card id="content-header" class="m-1d p-1d bl-3-green shadow">
<!-- Row 1 -->
<div class="content-header-row my-auto d-inline-flex flex-wrap">
<span class="d-flex m-1d">
<span class="font-medium-14 mr-3 h-20">Title:</span>
<span class="font-regular-14 ss-green h-20">An Interesting Title About DNA</span>
</span>
</div>
View content-header-row.html
<div id="content-header-row" class="my-auto d-inline-flex flex-wrap"
[ngClass]="{'flex-row-reverse': alignRight}">
<ng-content></ng-content>
</div>
View content-header-example-logic.js
@Component({
selector: 'ss-content-header',
templateUrl: './content-header.component.html'
})
export class ContentHeaderComponent implements OnInit {
@Input() editing: boolean;
@Input() status: string;
matInputs: HTMLCollectionOf<Element>;
View content-header.html
<mat-card id="content-header" class="p-1d d-inline-flex flex-wrap shadow"
[ngClass]="{'bl-3-red': status === 'red',
'bl-3-yellow': status === 'yellow',
'bl-3-green': status === 'green'}">
<div id="content-header-row" class="my-auto d-inline-flex flex-wrap"
[ngClass]="{'flex-row-reverse': alignRight}">
<ng-content></ng-content>
</div>
</mat-card>
View content-header.css
/* CONTENT HEADERS */
.content-header-row {
width: 100%;
}
#content-header .mat-form-field {
max-width: 250px;
min-width: 50px;
margin-top: 5px;
View content-header-example.html
<ss-content-header [status]="statusColor" [editing]="isEditing" [alignRight]="false">
<span class="d-flex m-1d" [ngClass]="{'my-0': editing}">
<span class="font-medium-14 mr-2" [ngClass]="{'mt-0 b-auto': !editing}">From:</span>
<mat-form-field floatLabel="never" *ngIf="editing">
<input matInput [value]="fromName" [(ngModel)]="fromName" placeholder="Name" (change)="onInputChange($event, $event.target.value)">
</mat-form-field>
<span class="font-regular-14" *ngIf="!editing">{{fromName}}</span>
</span>
View text-header-field.html
<div style="display: flex">
<p class="header-field-label">Date:</p>
<mat-form-field>
<input matInput placeholder="Choose a Date">
<mat-icon matSuffix svgIcon="time"></mat-icon>
</mat-form-field>
</div>
View layer-header2.css
// 2nd Level
.header.header-short {
height: 75px;
}
/* Set header height tall only when mobile to fit
buttons below title */
@media (max-width: 768px) {
.header.header-short:not(.header-just-title) {
View layer-header1.css
/* LAYER HEADER */
// 1st Level
.header {
background-color: $ss-white;
/* height should be about 126px at mobile and 156 on desktop */
height: calc(120px + 1vw);
transition: margin-top .4s ease-in-out;
}