fix: edit button load

Client/src/app/app.component.html

@@ -1,29 +1,24 @@
-
-<header class="content-container">
-  <mat-toolbar class="noselect main-toolbar" color="default">
-    <h1 class="no-wrap">
-      <a href="https://github.com/DaveSkender/Stock.Charts/">
-        stock chart
-      </a>
-    </h1>
-  </mat-toolbar>
-</header>
+<mat-toolbar class="noselect main-toolbar" color="default">
+  <h1 class="no-wrap">
+    <a href="https://github.com/DaveSkender/Stock.Charts/">
+      stock chart
+    </a>
+  </h1>
+</mat-toolbar>
 
 <main id="main-content" class="content-container">
 
   <div class="button-container">
-    <button mat-fab color="accent"
-      (click)="openSettingsDialog()"
-      matTooltip="change indicators and settings"
-      aria-label="change indicators and settings">
+    <button mat-fab color="accent" *ngIf="!cs.loading" (click)="openSettingsDialog()"
+      matTooltip="change indicators and settings" aria-label="change indicators and settings">
       <mat-icon color="primary">edit</mat-icon>
     </button>
   </div>
 
   <app-chart></app-chart>
 </main>
 
-<footer class="footer">
+<footer class="footer" *ngIf="!cs.loading">
   Demo of the
   <strong>
     <a href="https://dotnet.stockindicators.dev/" target="_blank" rel="noopener">

Client/src/app/app.component.scss

@@ -6,16 +6,18 @@
 
   width: 100%;
   max-width: 1024px;
-  margin-left: auto;
+  margin: 0;
   margin-right: auto;
-  padding: 0 8px;
+  margin-left: auto;
+  padding: 0;
 
   .button-container {
 
     position: absolute;
     top: -50px;
     right: 8px;
     height: 100%;
+    min-height: 100vh;
 
     button {
       opacity: 0.6;

Client/src/app/app.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { StyleService } from './services/style.service';
 import { SettingsComponent } from './picker/settings.component';
+import { ChartService } from './services/chart.service';
 
 @Component({
   selector: 'app-root',
@@ -11,6 +12,7 @@ import { SettingsComponent } from './picker/settings.component';
 export class AppComponent implements OnInit {
 
   constructor(
+    public readonly cs: ChartService,
     public readonly ts: StyleService,
     private readonly settingsDialog: MatDialog
   ) { }

Client/src/app/chart/chart.component.html

@@ -1,7 +1,7 @@
 <!-- loading -->
 <div *ngIf="cs.loading">
 
-  <div style="margin-top:175px;text-align:center;font-family:'Google Sans',Roboto,Arial,sans-serif;font-size:12px;">
+  <div style="margin-top:175px;text-align:center;font-family:'Google Sans',Roboto,Arial,sans-serif;font-size:12px;color:#666;">
     <p><img src="../assets/spinner.gif" alt="loading" height="25"><br>LOADING</p>
   </div>
 

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

@@ -5,7 +5,8 @@
 
 .chart-overlay-container {
 
-  padding: 0;
+  padding: 0 8px;
+  max-width: 1024px;
   margin: auto;
 
   height: 55vh;
@@ -22,7 +23,8 @@
 
 .chart-oscillator-container {
 
-  padding: 0;
+  padding: 0 8px;
+  max-width: 1024px;
   margin: auto;
   margin-top: 0.5rem;
 

Client/src/styles/_themed-parts.scss

@@ -28,7 +28,7 @@
     max-width: $maxwidth;
     margin-left: auto;
     margin-right: auto;
-    padding: 0 1px;
+    padding: 0 9px;
 
     a {
       font-family: "Google Sans", Roboto, Arial, Helvetica, sans-serif;
@@ -45,6 +45,7 @@
   // MAIN FOOTER
   .footer {
     padding: 1rem 9px;
+    margin-top: 3rem;
     text-align: center;
     color: mat.get-color-from-palette($accent, 600);