Fix #237

src/app/app.module.ts

@@ -83,6 +83,7 @@ import { SelectModelFieldLineComponent } from "./components/select-model-field-l
 import { PabProfileGraphComponent } from "./components/pab-profile-graph/pab-profile-graph.component";
 import { PabTableComponent } from "./components/pab-table/pab-table.component";
 import { PabVariableResultsSelectorComponent } from "./components/pab-results/pab-variable-results-selector.component";
+import { QuicknavComponent } from "./components/quicknav/quicknav.component";
 
 import { DialogConfirmEmptySessionComponent } from "./components/dialog-confirm-empty-session/dialog-confirm-empty-session.component";
 import { DialogConfirmCloseCalcComponent } from "./components/dialog-confirm-close-calc/dialog-confirm-close-calc.component";
@@ -195,6 +196,7 @@ const appRoutes: Routes = [
     ParamFieldLineComponent,
     ParamLinkComponent,
     ParamValuesComponent,
+    QuicknavComponent,
     RemousResultsComponent,
     ResultsGraphComponent,
     SectionCanvasComponent,

src/app/components/generic-calculator/calculator.component.html

@@ -29,6 +29,8 @@
 
     </mat-card-header>
 
+    <quicknav [fxHide.gt-sm]="! isPAB" [items]="quicknavItems" [currentItem]="'input'" [align]="'left'"></quicknav>
+
     <form>
 
         <mat-card-content>
@@ -43,7 +45,8 @@
                 <!-- chapitres -->
                 <mat-card id="calc-card-field-sets"
                   [class.pab-field-sets]="isPAB"
-                  [fxFlex.gt-xs]="isPAB ? '1 0 auto' : '1 0 400px'"
+                  [fxFlex.gt-sm]="isPAB ? '1 0 auto' : '1 0 400px'"
+                  [fxFlex.lt-md]="isPAB ? '1 0 auto' : '1 0 500px'"
                   [fxFlex.lt-sm]="isPAB ? '1 0 auto' : '1 0 300px'">
 
                     <ng-template ngFor let-fe [ngForOf]="formElements">
@@ -73,20 +76,25 @@
                 <!-- résultats -->
                 <mat-card id="calc-card-results"
                   [class.pab-results]="isPAB"
-                  [fxFlex.gt-xs]="isPAB ? '1 0 auto' : '1 0 400px'"
+                  [fxFlex.gt-sm]="isPAB ? '1 0 auto' : '1 0 400px'"
+                  [fxFlex.lt-md]="isPAB ? '1 0 auto' : '1 0 500px'"
                   [fxFlex.lt-sm]="isPAB ? '1 0 auto' : '1 0 300px'">
 
                     <div id="fake-results-anchor"></div>
-                    <mat-card-header>
+
+                    <quicknav [ngClass.lt-xs]="'extraSmall'" [fxHide.gt-sm]="! isPAB" [items]="quicknavItems" [currentItem]="'results'" [align]="'left'"></quicknav>
+
+                    <mat-card-header *ngIf="! isPAB" [fxHide.lt-md]="! isPAB">
                         <mat-card-title>
                             <h1 [innerHTML]="uitextResultsTitle"></h1>
                         </mat-card-title>
-                        <div fxFlex></div>
-                        <button mat-raised-button color="accent" id="generate-pab" *ngIf="isPABCloisons" (click)="generatePAB()"
-                            [disabled]="! generatePABEnabled" [title]="uitextGeneratePabTitle">
-                            {{ uitextGeneratePAB }}
-                        </button>
                     </mat-card-header>
+
+                    <button mat-raised-button color="accent" id="generate-pab" *ngIf="isPABCloisons" (click)="generatePAB()"
+                        [disabled]="! generatePABEnabled" [title]="uitextGeneratePabTitle">
+                        {{ uitextGeneratePAB }}
+                    </button>
+
                     <mat-card-content>
                         <calc-results id="resultsComp" (afterViewChecked)="onCalcResultsViewChecked()"></calc-results>
                     </mat-card-content>

src/app/components/generic-calculator/calculator.component.scss

@@ -81,4 +81,10 @@ mat-card {
             margin-bottom: 8px;
         }
     }
+
+    mat-card-content {
+        > calc-name {
+            margin-top: 1.5em;
+        }
+    }
 }

src/app/components/generic-calculator/calculator.component.ts

@@ -194,6 +194,14 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
         return this.intlService.localizeText("INFO_CALCULATOR_CLOSE");
     }
 
+    public get quicknavItems() {
+        const elts = [ "input", "results" ];
+        if (this.isPAB) {
+            elts.push("charts");
+        }
+        return elts;
+    }
+
     /**
      * Triggered at calculator instanciation
      */
@@ -279,7 +287,7 @@ export class GenericCalculatorComponent extends BaseComponent implements OnInit,
     }
 
     private scrollToResults() {
-        const element = document.getElementById("fake-results-anchor");
+        const element = document.getElementById ("fake-results-anchor");
         if (element) {
             element.scrollIntoView();
         }

src/app/components/pab-results/pab-results-table.component.scss

 :host {
     display: block;
+    margin-bottom: 1.5em;
 }
 
 .pab-results-table-container {

src/app/components/pab-results/pab-results.component.html

@@ -12,6 +12,9 @@
         <pab-results-table *ngIf="hasDisplayableResults" [results]="pabResults"></pab-results-table>
     </div>
 
+    <quicknav *ngIf="hasDisplayableResults" [items]="[ 'input', 'results', 'charts' ]"
+        [currentItem]="'charts'" [align]="'left'"></quicknav>
+
     <div id="pab-graphs-container" class="container" fxLayout="row wrap" fxLayoutAlign="space-around start">
         <pab-profile-graph *ngIf="hasDisplayableResults" fxFlex.gt-xs="1 0 400px" fxFlex.lt-sm="1 0 300px">
         </pab-profile-graph>

src/app/components/quicknav/quicknav.component.html

+<div class="quicknav-row" [ngStyle]="alignStyle" *ngIf="hasItems" [id]="id"
+    [class.autoPadLeft]="align === 'left'" [class.autoPadRight]="align === 'right'">
+
+    <div class="quicknav-item" *ngFor="let i of items" [class.current]="isCurrent(i)" [ngStyle]="paddingStyle">
+        <a (click)="scrollTo(i)">{{ label(i) }}</a>
+    </div>
+</div>

src/app/components/quicknav/quicknav.component.scss

+:host {
+    display: block;
+    margin-bottom: .5em;
+    width: 100%;
+
+    &.extraSmall {
+
+        .quicknav-item {
+            font-size: 12px;
+
+            &.current {
+                font-size: 18px;
+            }
+        }
+    }
+}
+
+@import "../../../theme.scss";
+
+.quicknav-row {
+    width: 100%;
+    padding-bottom: 3px;
+    border-bottom: solid #dddddd 1px;
+}
+
+.quicknav-item {
+    display: inline;
+    padding: 0 .5em 3px .5em;
+    text-transform: uppercase;
+    font-size: 18px;
+    font-weight: normal;
+
+    &.current {
+        @extend .border-accent;
+        border-bottom-width: 2px;
+        border-bottom-style: solid;
+        font-size: 24px;
+
+        a {
+            // font-weight: bold;
+            @extend .color-accent;
+        }
+    }
+
+    a {
+        cursor: pointer;
+        color: #cbcbcb;
+        &:focus {
+            outline: none;
+        }
+        &:hover {
+            color: #707070;
+        }
+    }
+}
+
+.autoPadLeft {
+    .quicknav-item:first-of-type {
+        padding-left: 0;
+    }
+}
+
+.autoPadRight {
+    .quicknav-item:last-of-type {
+        padding-right: 0;
+    }
+}

src/app/components/quicknav/quicknav.component.ts

+import { Component, Input } from "@angular/core";
+
+import { I18nService } from "../../services/internationalisation/internationalisation.service";
+
+@Component({
+    selector: "quicknav",
+    templateUrl: "./quicknav.component.html",
+    styleUrls: [
+        "./quicknav.component.scss"
+    ]
+})
+export class QuicknavComponent {
+
+    @Input()
+    public items: string[];
+
+    @Input()
+    public currentItem: string;
+
+    @Input()
+    public align: string;
+
+    private prefix = "qn_";
+
+    public constructor(
+        private i18nService: I18nService
+    ) {
+        this.items = [];
+        this.currentItem = "";
+        this.align = "center";
+    }
+
+    public get id() {
+        return this.prefix + this.currentItem;
+    }
+
+    public get hasItems() {
+        return this.items.length > 0;
+    }
+
+    public get alignStyle() {
+        return {
+            "text-align": this.align
+        };
+    }
+
+    public label(item: string = "") {
+        return this.i18nService.localizeText("INFO_QUICKNAV_" + item.toUpperCase());
+    }
+
+    public isCurrent(item: string) {
+        return item === this.currentItem;
+    }
+
+    public scrollTo(item: string) {
+        // https://stackoverflow.com/a/56391657/5986614
+        const element = document.getElementById(this.prefix + item);
+        if (element) {
+            const yCoordinate = element.getBoundingClientRect().top + window.pageYOffset;
+            // element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
+            window.scrollTo({
+                top: yCoordinate - 60, // substract a little more than navbar height
+                behavior: "smooth"
+            });
+        }
+    }
+}

src/locale/messages.en.json

@@ -317,6 +317,9 @@
     "INFO_PARAMFIELD_VARIATED": "Variated",
     "INFO_PARAMMODE_LIST": "Values list",
     "INFO_PARAMMODE_MINMAX": "Min/max",
+    "INFO_QUICKNAV_CHARTS": "charts",
+    "INFO_QUICKNAV_INPUT": "input",
+    "INFO_QUICKNAV_RESULTS": "results",
     "WARNING_PROBLEMS_ENCOUNTERED": "Problems occurred during calculation (info: %info%, warning: %warning%, error: %error%)",
     "INFO_REGIMEUNIFORME_TITRE_COURT": "Uniform flow",
     "INFO_REGIMEUNIFORME_TITRE": "Uniform flow calculation",

src/locale/messages.fr.json

@@ -317,6 +317,9 @@
     "INFO_PARAMFIELD_VARIATED": "Varié",
     "INFO_PARAMMODE_LIST": "Liste de valeurs",
     "INFO_PARAMMODE_MINMAX": "Min/max",
+    "INFO_QUICKNAV_CHARTS": "graphiques",
+    "INFO_QUICKNAV_INPUT": "données",
+    "INFO_QUICKNAV_RESULTS": "résultats",
     "WARNING_PROBLEMS_ENCOUNTERED": "Des problèmes sont survenus durant le calcul (info: %info%, avertissement: %warning%, erreur: %error%)",
     "INFO_REGIMEUNIFORME_TITRE_COURT": "R. uniforme",
     "INFO_REGIMEUNIFORME_TITRE": "Régime uniforme",

src/theme.scss

@@ -204,6 +204,9 @@ $warn: map-get($nghyd-theme, warn);
 .bg-primary-extralight {
     background-color: mat-color($primary, 50);
 }
+.border-primary {
+    border-color: mat-color($primary);
+}
 
 .color-accent {
     color: mat-color($accent);
@@ -223,6 +226,9 @@ $warn: map-get($nghyd-theme, warn);
 .bg-accent-extralight {
     background-color: mat-color($accent, 50);
 }
+.border-accent {
+    border-color: mat-color($accent);
+}
 
 .color-warn {
     color: mat-color($warn);
@@ -242,6 +248,9 @@ $warn: map-get($nghyd-theme, warn);
 .bg-warn-extralight {
     background-color: mat-color($warn, 50);
 }
+.border-warn {
+    border-color: mat-color($warn);
+}
 
 .color-error {
     color: mat-color($nghyd-error);
@@ -249,6 +258,9 @@ $warn: map-get($nghyd-theme, warn);
 .bg-error {
     background-color: mat-color($nghyd-error);
 }
+.border-error {
+    border-color: mat-color($nghyd-error);
+}
 
 .mat-button-toggle-checked {
     background-color: mat-color($accent);