fix: misaligned title (#283)

Client/package.json

@@ -11,16 +11,16 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^16.2.8",
-    "@angular/cdk": "^16.2.7",
-    "@angular/common": "^16.2.8",
-    "@angular/compiler": "^16.2.8",
-    "@angular/core": "^16.2.8",
-    "@angular/forms": "^16.2.8",
-    "@angular/material": "^16.2.7",
-    "@angular/platform-browser": "^16.2.8",
-    "@angular/platform-browser-dynamic": "^16.2.8",
-    "@angular/router": "^16.2.8",
+    "@angular/animations": "^16.2.9",
+    "@angular/cdk": "^16.2.8",
+    "@angular/common": "^16.2.9",
+    "@angular/compiler": "^16.2.9",
+    "@angular/core": "^16.2.9",
+    "@angular/forms": "^16.2.9",
+    "@angular/material": "^16.2.8",
+    "@angular/platform-browser": "^16.2.9",
+    "@angular/platform-browser-dynamic": "^16.2.9",
+    "@angular/router": "^16.2.9",
     "@ctrl/tinycolor": "^3.6.0",
     "@ng-matero/extensions": "^16.1.1",
     "chart.js": "^4.4.0",
@@ -34,20 +34,20 @@
     "zone.js": "~0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.5",
+    "@angular-devkit/build-angular": "^16.2.6",
     "@angular-eslint/builder": "~16.2.0",
     "@angular-eslint/eslint-plugin": "~16.2.0",
     "@angular-eslint/eslint-plugin-template": "~16.2.0",
     "@angular-eslint/schematics": "~16.2.0",
     "@angular-eslint/template-parser": "~16.2.0",
-    "@angular/cli": "^16.2.5",
-    "@angular/compiler-cli": "^16.2.8",
-    "@angular/language-service": "^16.2.8",
+    "@angular/cli": "^16.2.6",
+    "@angular/compiler-cli": "^16.2.9",
+    "@angular/language-service": "^16.2.9",
     "@types/node": "^20.3.1",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
     "eslint": "^8.51.0",
     "ts-node": "~10.9.1",
-    "typescript": "~5.1.3"
+    "typescript": "~5.1.6"
   }
 }

Client/src/app/app.component.scss

@@ -14,7 +14,7 @@
   .button-container {
 
     position: absolute;
-    top: -50px;
+    top: -56px;
     right: 8px;
     height: 100%;
     min-height: 100vh;

Client/src/app/app.component.ts

@@ -24,8 +24,6 @@ export class AppComponent implements OnInit {
   // SETTINGS DIALOG
   openSettingsDialog(): void {
     this.settingsDialog.open(SettingsComponent, {
-      minWidth: "300px",
-      maxHeight: "80vh",
       autoFocus: "dialog"
     });
   }

Client/src/app/chart/chart.component.scss

@@ -9,15 +9,22 @@
   max-width: 1024px;
   margin: auto;
 
-  height: 55vh;
-  // height: 300px;     // for doc site only
+  aspect-ratio: 2.5;
 
-  @media (max-height: 700px){
-    height: 40vh;
+  // tablet-lg
+  @media (max-width: 880px) {
+    aspect-ratio: 2;
   }
 
-  @media (max-height: 400px){
-    height: calc(100vh - 64px); // full-screen (with toolbar)
+  // mobile
+  @media (max-width: 600px) {
+    aspect-ratio: 5/4;
+  }
+
+  // landscape, full screen
+  @media (max-height: 400px) and (orientation: landscape) {
+    aspect-ratio: unset;
+    height: calc(100vh);
   }
 }
 
@@ -26,15 +33,29 @@
   padding: 0 8px;
   max-width: 1024px;
   margin: auto;
-  margin-top: 0.5rem;
+  margin-top: 0;
+
+  aspect-ratio: 10;
+
+  // tablet-lg
+  @media (max-width: 880px) {
+    aspect-ratio: 8;
+  }
 
-  height: 15vh;
+  // tablet-lg, landscape
+  @media (max-width: 880px)  and (orientation: landscape){
+    aspect-ratio: unset;
+    height: 25vh;  }
 
-  @media (max-height: 800px){
-    height: 20vh;
+  // mobile, landscape
+  @media (max-height: 600px) and (orientation: landscape) {
+    aspect-ratio: unset;
+    height: 33.33vh;
   }
 
-  @media (max-height: 400px){
-    height: 30vh;
+  // mobile
+  @media (max-height: 400px) {
+    aspect-ratio: unset;
+    height: 50vh;
   }
 }

Client/src/app/picker/pick-config.component.html

@@ -1,4 +1,4 @@
-<h2 mat-dialog-title>{{listing.name}}</h2>
+<h2 mat-dialog-title matTooltip="{{listing.name}}" class="noselect">{{listing.name}}</h2>
 
 <!-- form content -->
 <form #paramForm="ngForm" name="paramForm">

Client/src/app/picker/pick-config.component.scss

@@ -1,9 +1,13 @@
-// @import "src/app/styles-theme";
-
 .mat-mdc-dialog-title {
   text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
+mat-dialog-content {
+  max-height: calc(100vh - 132.8px) !important;
+}
 
 h2 {
   font-size: 1.3em;

Client/src/app/picker/settings.component.ts

@@ -53,7 +53,6 @@ export class SettingsComponent {
 
     // open settings for indicator to add
     this.picker.open(PickConfigComponent, {
-      minWidth: '300px',
       autoFocus: "dialog",
       data: listing
     });

Client/src/app/services/chart.service.ts

@@ -514,7 +514,7 @@ export class ChartService {
 
     const labelColor = this.ts.isDarkTheme ? '#757575' : '#212121';
     const annotation: AnnotationOptions =
-      this.commonAnnotation(selection.label, labelColor, xPos, yPos, -2, 1);
+      this.commonAnnotation(selection.label, labelColor, xPos, yPos, 0, 1);
     selection.chart.options.plugins.annotation.annotations = { annotation };
     selection.chart.update();
 
@@ -526,14 +526,14 @@ export class ChartService {
 
     const xPos: ScaleValue = this.chartOverlay.scales["xAxis"].min;
     const yPos: ScaleValue = this.chartOverlay.scales["yAxis"].max;
-    let adjY: number = 0;
+    let adjY: number = 10;
 
     this.chartOverlay.options.plugins.annotation.annotations =
       this.selections
         .filter(x => x.chartType == 'overlay')
         .map((selection: IndicatorSelection, index: number) => {
           const annotation: AnnotationOptions =
-            this.commonAnnotation(selection.label, selection.results[0].color, xPos, yPos, -2, adjY);
+            this.commonAnnotation(selection.label, selection.results[0].color, xPos, yPos, 0, adjY);
           annotation.id = "legend" + (index + 1).toString();
           adjY += 15;
           return annotation;

Client/src/styles/_themed-parts.scss

@@ -16,7 +16,8 @@
   // ANGULAR MATERIAL OVERRIDES
 
   // TOOLBAR
-  .main-toolbar {
+  .main-toolbar,
+  .mat-toolbar-single-row {
 
     background-color: transparent;
 
@@ -28,10 +29,9 @@
     max-width: $maxwidth;
     margin-left: auto;
     margin-right: auto;
-    padding: 0 9px;
+    padding: 0 8px;
 
     a {
-      font-family: "Google Sans", Roboto, Arial, Helvetica, sans-serif;
       text-decoration: none;
       color: inherit;
 
@@ -44,8 +44,10 @@
 
   // MAIN FOOTER
   .footer {
-    padding: 1rem 9px;
+    padding: 1rem 8px;
     margin-top: 3rem;
+    margin-bottom: 3rem;
+
     text-align: center;
     color: mat.get-color-from-palette($accent, 600);
 

README.md

@@ -18,7 +18,7 @@ If you want to host on your local computer and review the source code, follow th
 
 ### Prerequisites
 
-- [Git](https://git-scm.com/) and [Node.js](https://nodejs.org/) v14.x or later
+- [Git](https://git-scm.com/) and [Node.js](https://nodejs.org/) v18.x or later
 - [Visual Studio](http://visualstudio.com)
 
 ### Steps