A little css cleanup.

This commit is contained in:
Dan 2021-08-10 14:58:11 -04:00
parent 983b1abf0a
commit 8a3fb4dc4a
4 changed files with 40 additions and 13 deletions

View File

@ -11,6 +11,7 @@
"schematics": {},
"architect": {
"build": {
"defaultConfiguration": "dev",
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
@ -35,7 +36,14 @@
},
"configurations": {
"production": {
"optimization": true,
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
},
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
@ -53,7 +61,14 @@
]
},
"staging": {
"optimization": true,
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
},
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
@ -71,7 +86,14 @@
]
},
"test": {
"optimization": true,
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
},
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,

View File

@ -15,7 +15,7 @@
</mat-card-title>
</mat-card-header>
<mat-card-content>
<dl gdAreas="field value" gdColumns="8ch auto">
<dl gdAreas="field value" gdColumns="10ch auto">
<dt>ID</dt><dd>{{workflowSpec.id}}</dd>
<dt>Name</dt><dd>{{workflowSpec.name}}</dd>
<dt>Description</dt><dd>{{workflowSpec.description}}</dd>

View File

@ -1,11 +1,11 @@
<div class="container mat-typography" fxLayout="column" fxLayoutGap="10px">
<div class="workflow-specs" fxLayout="column" fxLayoutGap="10px">
<h1>Workflow Specifications</h1>
<div fxLayout="row" fxLayoutGap="10px">
<button id="add_spec" mat-flat-button color="primary" (click)="editWorkflowSpec()">
<div class="buttons" fxLayout="row" fxLayoutGap="10px">
<button id="add_spec" mat-flat-button color="primary" (click)="editWorkflowSpec()" fxLayoutAlign="stretch">
<mat-icon>library_add</mat-icon>
Add new workflow specification
</button>
<button id="add_category" mat-flat-button color="accent" (click)="editWorkflowSpecCategory()">
<button id="add_category" mat-flat-button color="accent" (click)="editWorkflowSpecCategory()" fxLayoutAlign="stretch">
<mat-icon>post_add</mat-icon>
Add category
</button>
@ -20,7 +20,7 @@
<h4>Master Specification</h4>
<mat-list>
<mat-list-item class="workflow-spec" fxLayout="row">
<a class="spec_menu_item" (click)="selectSpec(masterStatusSpec)">{{masterStatusSpec.display_name}}</a>
<span class="spec_menu_item" (click)="selectSpec(masterStatusSpec)">{{masterStatusSpec.display_name}}</span>
</mat-list-item>
</mat-list>
</div>
@ -31,7 +31,7 @@
<h4>Libraries</h4>
<mat-list>
<mat-list-item *ngFor="let wfs of workflowLibraries" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
<a [ngClass]="{'spec_menu_item':true, 'spec-selected': selectedSpec && wfs.id === selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</a>
<span [ngClass]="{'spec_menu_item':true, 'spec-selected': selectedSpec && wfs.id === selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</span>
<span class="spec-actions" fxLayout="row" fxLayoutGap="10px">
<button
mat-icon-button
@ -85,7 +85,7 @@
</mat-expansion-panel-header>
<mat-list>
<mat-list-item *ngFor="let wfs of cat.workflow_specs" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
<a [ngClass]="{'spec_menu_item':true, 'spec-selected': selectedSpec && wfs.id === selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</a>
<span [ngClass]="{'spec_menu_item':true, 'spec-selected': selectedSpec && wfs.id === selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</span>
<span class="spec-actions" fxLayout="row" fxLayoutGap="10px" *ngIf="cat && cat.id !== null">
<button
*ngIf="cat && cat.workflow_specs.length > 0 && wfs.display_order !== 0"

View File

@ -4,10 +4,14 @@
margin: 0;
max-height: 40px;
}
.container {
.workflow-specs {
padding: 3rem;
}
.buttons {
height: 60px;
}
.content {
min-height: 600px;
}
@ -42,13 +46,14 @@
.workflow-spec {
border-left: 4px solid $brand-gray-light;
font-size: 1em;
cursor: pointer;
&:hover {
border-left: 4px solid $brand-primary;
background-color: $brand-primary-tint-4;
cursor: pointer;
}
cursor: pointer;
.spec_menu_item {
flex-flow: row;
display: inline-block;