Commit cf18bbbe authored by Chris Hines's avatar Chris Hines
Browse files

corrections to the layout

parent 4595a001
Pipeline #7911 passed with stages
in 4 minutes and 33 seconds
......@@ -7,15 +7,9 @@
</div> -->
<!--<app-launcher></app-launcher>-->
<mat-sidenav-container style="height: 100vh; width: 100%">
<!--<mat-sidenav-container>-->
<mat-sidenav closed>
</mat-sidenav>
<mat-sidenav-content>
<div fxLayout="column" fxLayoutAlign="none" style="height: 100%; width: 100%">
<mat-toolbar color="primary">
<div fxLayout="row" style="width: 100%">
<mat-toolbar-row style="width: 100%">
<div style="height: 100%" fxLayout="column">
<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button *ngIf="settingsService.useMenu$ | async" aria-label="toggle menu" (click)=toggleMenu()><mat-icon>menu</mat-icon></button>
<img src="assets/MASSIVElogoTransparent128x128.png" style="width: auto; height: 90%">
<span>Strudel2</span>
......@@ -47,7 +41,6 @@
matBadgeColor="warn"
matBadgeOverlap="false" matBadgeSize="small"
style="text-align: left; margin-left: 15px; margin-top: 10px">
<!--<span>-->
{{ id.displayName() }}
</span>
</button>
......@@ -57,11 +50,14 @@
</mat-menu>
</mat-toolbar-row>
</div>
</mat-toolbar>
<div>
</mat-toolbar>
<mat-sidenav-container fxFlex style="margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;">
<mat-sidenav closed>
</mat-sidenav>
<mat-sidenav-content>
<div fxLayout="column" fxLayoutAlign="start none" style="height: 100%; width: 100%;">
<router-outlet></router-outlet>
</div>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
......@@ -4,9 +4,9 @@ import { AuthorisationService} from './authorisation.service';
import { ComputesitesService} from './computesites.service';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import { MatSnackBar } from '@angular/material';
import {OverlayContainer} from '@angular/cdk/overlay';
import { Computesite, Health } from './computesite';
import {SettingsService } from './settings.service';
import {OverlayContainer} from '@angular/cdk/overlay';
......@@ -29,7 +29,8 @@ export class AppComponent {
private authService: AuthorisationService,
private computeSitesService: ComputesitesService,
private settingsService: SettingsService,
public snackBar: MatSnackBar) {
public snackBar: MatSnackBar,
private overlayContainer: OverlayContainer) {
};
......@@ -67,7 +68,9 @@ export class AppComponent {
if (theme == null) {
theme = 'strudel-theme-light';
}
let classList = document.querySelector('app-root').classList
let container = document.querySelector('app-root');
//let container = this.overlayContainer.getContainerElement();
let classList = container.classList;
var c;
for (c of classList.value.split(' ')) {
if (c.indexOf('strudel-') == 0) {
......
<!--<div fxFlex style="flex: 1 1 0%; box-sizing: border-box">-->
<div fxLayout="column" fxLayoutAlign="none" style="height: 100%">
<div *ngIf="!(settingsService.useMenu$ | async)">
<mat-divider></mat-divider>
<div *ngIf="(identity$ | async) !== null" style="width: 100%">
<nav mat-tab-nav-bar color=accent backgroundColor=primary>
<a mat-tab-link
[routerLink]="['/launch',identity$.value.displayName(),'accountinfo']"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
Account Info
</a>
<a mat-tab-link
*ngFor="let app of (identity$.value.site.appCatalog | async)"
[routerLink]="['/launch',identity$.value.displayName(),app.name]"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{ app.name }}
</a>
</nav>
</div>
<div fxFlex style="flex: 1 1 0%; box-sizing: border-box">
<mat-sidenav-container fxFlexFill autosize>
<mat-sidenav #idSideNav mode="side" [opened]="(settingsService.menuToggle$ | async) && (settingsService.useMenu$ | async)">
<div fxLayout="column" fxLayout="stretch" style="height: 100%">
<nav>
<mat-accordion style="width: 100%" [displayMode]="flat">
<div *ngFor="let id of (computeSitesService.appidentities | async)">
<!--<mat-expansion-panel (afterExpand)="selectId(id)" (closed)="selectId(id)" style="width: 100%">-->
<mat-expansion-panel style="width: 100%" [expanded]="(identity$ | async) === id">
<mat-expansion-panel-header>
<mat-panel-title>
<span fxFlex matBadge="{{ countErrors((id.systemalerts | async), (id.accountalerts | async)) }}"
[matBadgeHidden]= "countErrors((id.systemalerts | async), (id.accountalerts | async)) == 0"
matBadgePosition="above before"
matBadgeColor="warn"
matBadgeOverlap="false" matBadgeSize="small"
style="text-align: left; margin-left: 20px; margin-top: 10px" >
{{ id.displayName() }}
</span>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-list style="width: 100%">
<mat-list-item>
<button mat-button style="width: 100%; text-align: left"
[routerLink]="['/launch',id.displayName(),'accountinfo']"
routerLinkActive #rla="routerLinkActive">
Account Info
</button>
</mat-list-item>
<app-strudelapplist [applist]=id.site.appCatalog [identity]="id" (appChange)="selectApp($event)" style="width: 100%"></app-strudelapplist>
</mat-list>
</mat-expansion-panel>
</div>
</mat-accordion>
</nav>
</div>
<div fxFlex></div>
</mat-sidenav>
<mat-sidenav-content>
<div fxLayout="column" fxLayoutAlign="start none" style="height: 100%">
<div *ngIf="!(settingsService.useMenu$ | async)">
<mat-divider inset=true></mat-divider>
<div *ngIf="(identity$ | async) !== null" style="width: 100%">
<nav mat-tab-nav-bar color=accent backgroundColor=primary>
<a mat-tab-link
[routerLink]="['/launch',identity$.value.displayName(),'accountinfo']"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
Account Info
</a>
<a mat-tab-link
*ngFor="let app of (identity$.value.site.appCatalog | async)"
[routerLink]="['/launch',identity$.value.displayName(),app.name]"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{ app.name }}
</a>
</nav>
</div>
</div>
<!--<div *ngIf="identitySubject.value !== undefined && identitySubject.value !== null && appSubject.value === null" style="padding-left: 5%; padding-right: 5%; padding-top: 5%;">-->
<div *ngIf="(app$ | async) == null" style="padding-left: 5%; padding-right: 5%; padding-top: 5%; overflow-y: scroll">
<div *ngIf="(app$ | async) == null" style="padding-left: 5%; padding-right: 5%; padding-top: 5%;">
<app-accountinfo [identity$]="identity$" [app$]="app$"></app-accountinfo>
</div>
<div *ngIf="identity$.value !== undefined && identity$.value !== null && app$.value !== undefined && app$.value !== null" style="padding-left: 5%; padding-right: 5%; padding-top: 5%;">
<app-launch-dialog [identity]="identity$ | async" [appSubject]="app$"></app-launch-dialog>
<div style="height: 5%"></div>
<mat-divider ></mat-divider>
<div style="overflow-y: scroll">
<app-joblist [identitySubject]="identity$" [appSubject]="app$"></app-joblist>
</div>
<app-joblist [identitySubject]="identity$" [appSubject]="app$"></app-joblist>
</div>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment