Skip to content
Snippets Groups Projects
Commit 3ef743c3 authored by Chris Hines's avatar Chris Hines
Browse files

use mat-typography and some new classes in styles.scss to get visual consistency

parent 0cf5017b
No related branches found
No related tags found
4 merge requests!106if stat fails, display the error instead of immediately refreshing...,!99Dev,!42Dev,!38use mat-typography and some new classes in styles.scss to get visual consistency
Pipeline #8997 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
Showing
with 41 additions and 144 deletions
src/app/aboutus/aboutus.component.css
+ 0
− 21
View file @ 3ef743c3
.heading {
font-size: 34px;
font-style: normal;
color: var(--panel-border-color);
margin: 30px 0px;
display: inline-block;
}
p {
font-size: 18px;
color: var(--header-text-color);
}
.mat-divider {
border-top-color: var(--panel-border-color);
}
.content {
max-width: 700px;
}
src/app/aboutus/aboutus.component.html
+ 3
− 3
View file @ 3ef743c3
<div fxLayout="row" fxLayoutAlign="space-around">
<div class="other-component" fxLayout="row" fxLayoutAlign="space-around">
<div fxLayout="column" class="content">
<div><span class="heading">ABOUT US</span></div>
<div class="heading"><h1>ABOUT US</h1></div>
<mat-divider></mat-divider>
<div>&nbsp;</div>
<p>Strudel is a cross-platform application that is used to access interactive desktop sessions on the high performance computing systems and cloud environments used by MASSIVE (M3) and the CVL.</p>
<div fxLayoutAlign="end none">
<button mat-flat-button color=primary style="width: 25%" onClick="window.open('https://www.cvl.org.au/cvl-desktop/getting-started-with-the-cvl')">READ MORE</button>
<button mat-flat-button color=primary class="big-button" onClick="window.open('https://www.cvl.org.au/cvl-desktop/getting-started-with-the-cvl')">READ MORE</button>
</div>
</div>
</div>
src/app/accountinfo/accountinfo.component.css
+ 1
− 7
View file @ 3ef743c3
......@@ -8,8 +8,8 @@
.table-header span {
margin-left: 10px;
margin-bottom: 0px;
color: var(--panel-header-color);
font-size: var(--panel-header-font-size);
}
.mat-table {
......@@ -23,10 +23,4 @@
.mat-header-cell {
color: var(--header-text-color);
font-size: var(--table-item-font-size);
}
.mat-cell {
font-size: var(--table-item-font-size);
}
src/app/accountinfo/accountinfo.component.html
+ 2
− 2
View file @ 3ef743c3
<div fxLayout="column" fxLayoutAlign="start none" style="width: 100%">
<div fxLayout="column" fxLayoutAlign="start none" style="width: 100%" class="strudel-accountinfo-typography">
<div *ngIf="identity$.value !== null && identity$.value !== undefined">
<!--<div *ngIf="identity$.value.systemalerts.value !== null">-->
<div *ngFor="let h of (identity$.value.systemalerts | async)">
......@@ -21,7 +21,7 @@
</mat-list-item>
</div>
<div *ngIf="h.type == 'table'">
<mat-panel-title class="table-header"><span>{{ h.title.toUpperCase() }}</span></mat-panel-title>
<mat-panel-title class="table-header"><span class="mat-subheading-1">{{ h.title.toUpperCase() }}</span></mat-panel-title>
<table mat-table [dataSource]="h.data.rows" style="width: 100%">
<ng-container *ngFor="let c of h.data.cols" matColumnDef="{{c.key}}">
<div *ngIf="c.key == 'name'">
......
src/app/app.component.css
+ 3
− 6
View file @ 3ef743c3
......@@ -15,12 +15,6 @@
margin: 10px;
}
.banner {
letter-spacing: 15px;
font-size: 22px;
}
.footer {
background-color: var(--footer-background-color);
color: var(--footer-text-color);
......@@ -34,3 +28,6 @@
padding: 0 30px;
}
.mat-typography .mat-display-4 {
margin: 0px;
}
src/app/app.component.html
+ 3
− 3
View file @ 3ef743c3
......@@ -7,12 +7,12 @@
</div> -->
<!--<app-launcher></app-launcher>-->
<div style="height: 100%" fxLayout="column">
<mat-toolbar color="primary">
<div style="height: 100%" fxLayout="column" class="mat-typography">
<mat-toolbar class=mat-header color="primary">
<mat-toolbar-row style="height: 80px">
<button mat-icon-button *ngIf="settingsService.useMenu$ | async" aria-label="toggle menu" (click)=toggleMenu()><mat-icon>menu</mat-icon></button>
<span class="empty-spacer"></span>
<span class="banner">STRUDEL</span>
<span class="mat-display-4">STRUDEL</span>
<span fxFlex></span>
<span class="fill-horizontal-space"></span>
<button mat-button [matMenuTriggerFor]="actionmenu" disableRipple="true" class="profile-button">
......
src/app/contactus/contactus.component.css
+ 0
− 45
View file @ 3ef743c3
.heading {
font-size: 49px;
letter-spacing: 15px;
font-style: normal;
color: var(--panel-header-color);
margin: 30px 0px;
display: inline-block;
}
.contact-info {
font-size: 16px;
color: var(--footer-background-color);
text-align: center;
}
.content {
max-width: 700px;
}
.mat-divider {
border-top-color: var(--panel-header-color);
}
.mat-flat-button {
width: 180px;
height: 60px;
font-size: 14px;
}
.mat-form-field-flex {
background-color: var(--form-backgroun-color) !important;
}
.mat-form-field-flex label {
color: var(--footer-background-color) !important;
font-size: 16px !important;
}
.mat-form-field-appearance-legacy .mat-form-field-underline {
height: 0 !important;
}
.mat-form-field-ripple {
height: 0 !important;
}
src/app/contactus/contactus.component.html
+ 5
− 4
View file @ 3ef743c3
<div fxLayout="row" fxLayoutAlign="space-around">
<div class="other-component" fxLayout="row" fxLayoutAlign="space-around">
<div fxLayout="column" class="content">
<div><span class="heading">CONTACT US</span></div>
<div class=heading><h1>CONTACT US</h1></div>
<mat-divider></mat-divider>
<p class="contact-info">info@strudel.com | Tel: 123-456-7890</p>
<mat-form-field>
<input type="text" matInput placeholder="Name">
......@@ -14,8 +15,8 @@
<mat-form-field >
<textarea matInput matTextareaAutosize matAutosizeMinRows=10 matAutosizeMaxRows=10 placeholder="Type your message here..."></textarea>
</mat-form-field>
<div fxLayoutAlign="center center">
<button mat-flat-button color=primary type="Submit">Submit</button>
<div fxLayoutAlign="end none">
<button mat-flat-button color=primary class="big-button" type="Submit">Submit</button>
</div>
</div>
</div>
src/app/contactus/contactus.component.ts
+ 0
− 1
View file @ 3ef743c3
......@@ -11,7 +11,6 @@ import { MatButtonToggleGroup } from '@angular/material';
selector: 'app-contactus',
templateUrl: './contactus.component.html',
styleUrls: ['./contactus.component.css'],
encapsulation: ViewEncapsulation.None
})
export class ContactUsComponent implements OnInit {
......
src/app/job/job.component.css
+ 2
− 2
View file @ 3ef743c3
.list-item,
/*.list-item,
.mat-button,
.mat-list-item {
font-size: var(--table-item-font-size);
}
}*/
.mat-button:hover {
background-color: var(--button-hover-color);
......
src/app/job/job.component.html
+ 2
− 2
View file @ 3ef743c3
<mat-list-item style="height: auto; width: auto">
<mat-list-item style="height: auto; width: auto" class="strudel-job-typography">
<div fxLayout="column" style="width: 100%" class="list-item">
<div style="text-align: left"> {{ jobdata.name }} </div>
<div *ngIf="jobdata.connectionState == 0" fxLayout="row" fxLayoutAlign="space-between">
......@@ -16,7 +16,7 @@
</div>
<div fxFlex></div>
<div fxFlex fxLayout="row">
<div fxFlex *ngIf="!nocancel"> <button mat-button (click)="onCancel()" > Cancel </button> </div>
<div fxFlex *ngIf="!nocancel"> <button mat-button (click)="onCancel()" > Cancel </button> </div>
<div *ngFor="let action of jobdata.app.instactions">
<div fxFlex *ngIf="action.states === undefined || action.states === null || action.states.indexOf(jobdata.state) != -1">
<button mat-button (click)="onConnect(action)">{{ action.name }}</button>
......
src/app/joblist/joblist.component.css
+ 8
− 2
View file @ 3ef743c3
......@@ -27,6 +27,13 @@ html, body {
background-color: var(--header-background-color) !important;
}
.mat-expansion-panel-header-title {
/* margin-left: 10px; */
color: var(--panel-header-color);
margin: 0px;
}
.mat-expansion-panel-header.mat-expanded:hover {
background-color: var(--button-hover-color) !important;
}
......@@ -38,7 +45,7 @@ html, body {
.mat-expansion-panel-header span {
/* margin-left: 10px; */
color: var(--panel-header-color);
font-size: var(--panel-header-font-size);
/*font-size: var(--panel-header-font-size);*/
}
.mat-expansion-indicator {
......@@ -47,7 +54,6 @@ html, body {
.mat-list-item div{
color: var(--header-text-color);
font-size: var(--table-item-font-size);
overflow: auto;
}
src/app/joblist/joblist.component.html
+ 1
− 1
View file @ 3ef743c3
......@@ -7,7 +7,7 @@
<mat-expansion-panel style="width: 100%" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<span>RUNNING {{ getAppName() }}</span>
RUNNING {{ getAppName() }}
</mat-panel-title>
</mat-expansion-panel-header>
<mat-list>
......
src/app/launch-dialog/launch-dialog.component.css
+ 2
− 2
View file @ 3ef743c3
......@@ -22,10 +22,10 @@
color: var(--header-background-color) !important;
}
.mat-expansion-panel-header span {
.mat-expansion-panel-header-title {
/* margin-left: 10px; */
color: var(--panel-header-color);
font-size: var(--panel-header-font-size);
margin: 0px;
}
.mat-list-item {
......
src/app/launch-dialog/launch-dialog.component.html
+ 1
− 1
View file @ 3ef743c3
......@@ -5,7 +5,7 @@
<mat-expansion-panel style="width: 100%" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<span>LAUNCH {{ getAppName() }}</span>
LAUNCH {{ getAppName() }}
</mat-panel-title>
</mat-expansion-panel-header>
......
src/app/launcher/launcher.component.css
+ 0
− 4
View file @ 3ef743c3
......@@ -23,7 +23,6 @@
.sidenav-header {
color: var(--panel-header-color);
font-size: 18px;
padding-left: 20px;
}
......@@ -42,9 +41,6 @@
font-weight: normal;
}
element.style {
height: 20px !important;
}
.mat-button:hover {
background-color: var(--button-hover-color);
......
src/app/launcher/launcher.component.html
+ 5
− 5
View file @ 3ef743c3
<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)">
<mat-sidenav #idSideNav mode="side" [opened]="(settingsService.menuToggle$ | async) && (settingsService.useMenu$ | async)" class="strudel-service-typography">
<div fxLayout="column" fxLayout="stretch" style="height: 100%">
<nav class="sidenav-box">
<mat-list class="sidenav-box" style="border-style: none">
<mat-list-item>
<span class="sidenav-header">Select a site</span>
<span class="sidenav-header"><h2 style="margin: 0px; text-align: left">Select a site</h2></span>
</mat-list-item>
</mat-list>
<div style="border-style: solid none none none ; border-width: 1px; border-color: var(--panel-border-color); box-sizing: border-box">
......@@ -13,15 +13,15 @@
<div *ngFor="let id of (computeSitesService.appidentities | async)" style="border-style: none none solid none; border-width: 1px; border-color: var(--panel-border-color) ">
<!--<mat-expansion-panel (afterExpand)="selectId(id)" (closed)="selectId(id)" style="width: 100%">-->
<mat-expansion-panel style="width: 100%" [expanded]="(identity$ | async) === id" class="mat-elevation-z0">
<mat-expansion-panel-header>
<mat-panel-title>
<mat-expansion-panel-header class="small-headers">
<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"
class="sidenav-site-header">
class="sidenav-site-header small-headers">
{{ id.displayName() }}
</span>
</mat-panel-title>
......
src/app/ourservices/ourservices.component.css
+ 0
− 22
View file @ 3ef743c3
.heading {
font-size: 34px;
font-style: normal;
color: var(--panel-header-color);
margin: 30px 0px;
display: inline-block;
}
p {
font-size: 18px;
color: var(--header-text-color);
}
.mat-divider {
border-top-color: var(--panel-header-color);
}
.vertical-line {
border-left: 1px solid var(--panel-header-color);
......@@ -24,9 +8,3 @@ p {
display: inline-block;
}
.content {
max-width: 800px;
}
.mat-flat-button {
}
src/app/ourservices/ourservices.component.html
+ 3
− 3
View file @ 3ef743c3
<div fxLayout="row" fxLayoutAlign="space-around">
<div class="other-component" fxLayout="row" fxLayoutAlign="space-around">
<div fxLayout="column" class="content">
<div><span class="heading">OUR SERVICES</span></div>
<div class="heading"><h1>OUR SERVICES</h1></div>
<mat-divider></mat-divider>
<div>&nbsp;</div>
<div fxLayout="row" fxLayoutAlign="start none">
......@@ -30,7 +30,7 @@
<div fxFlex="70%">
<p>Jupyter Lab is a browser-based tool for interactive authoring of documents which combine explanatory text, mathematics, computations and their rich media output.</p>
<div fxLayoutAlign="end none">
<button mat-flat-button color=primary style="width: 180px" onClick="window.open('')">Launch Jupyter Lab</button>
<button mat-flat-button color=primary class="big-button" onClick="window.open('')">Launch Jupyter Lab</button>
</div>
</div>
</div>
......
src/app/settings/settings.component.css
+ 0
− 8
View file @ 3ef743c3
h2 {
color: var(--panel-header-color);
}
h3 {
color: var(--header-text-color);
}
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