PreBarrage: improved calculator template

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

@@ -70,19 +70,53 @@
                   [fxFlex.lt-sm]="isWide ? '1 0 auto' : '1 0 300px'">
 
                     <div id="calc-card-field-sets-container" [fxLayout]="isPB ? 'row wrap' : 'column'">
-                        
-                        <ng-template ngFor let-fe [ngForOf]="formElements">
+
+                        <!-- PB specific template -->
+                        <div *ngIf="isPB" id="pb-schema-container"
+                            fxFlex.gt-sm="1 0 400px"
+                            fxFlex.lt-md="1 0 500px"
+                            fxFlex.lt-sm="1 0 300px">
+
+                            <pb-schema [pbSchema]="formElements[0]" (radio)=onRadioClick($event)
+                                (validChange)=onElementValid() (nodeSelected)="onPBNodeSelected($event)">
+                            </pb-schema>
+
+                            <div fxHide.sm fxFlex.gt-sm="0 0 16px"></div>
+                        </div>
+                        <!-- PB specific template (2) -->
+                        <div *ngIf="isPB" id="pb-form-container" [hidden]="! showPBInputData"
+                            fxFlex.gt-sm="1 0 400px"
+                            fxFlex.lt-md="1 0 500px"
+                            fxFlex.lt-sm="1 0 300px">
+
+                            <ng-template ngFor let-fe [ngForOf]="formElements">
+                                <field-set *ngIf="isFieldset(fe)"
+                                    [style.display]="getElementStyleDisplay(fe.id)" [fieldSet]=fe
+                                    (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event)
+                                    (tabPressed)="onTabPressed($event)">
+                                </field-set>
+
+                                <fieldset-container *ngIf="isFieldsetContainer(fe)"
+                                    [style.display]="getElementStyleDisplay(fe.id)" [_container]=fe
+                                    (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event)
+                                    (tabPressed)="onTabPressed($event)">
+                                </fieldset-container>
+                            </ng-template>
+                        </div>
+
+                        <!-- generic template -->
+                        <ng-template *ngIf="! isPB" ngFor let-fe [ngForOf]="formElements">
                             <field-set *ngIf="isFieldset(fe)"
-                                [hidden]="isPB && ! showPBInputData" [style.display]="getElementStyleDisplay(fe.id)" [fieldSet]=fe
+                                [style.display]="getElementStyleDisplay(fe.id)" [fieldSet]=fe
                                 (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event)
                                 (tabPressed)="onTabPressed($event)"
-                                [fxFlex.gt-sm]="isPB ? '1 0 400px' : '1 0 auto'"
-                                [fxFlex.lt-md]="isPB ? '1 0 500px' : '1 0 auto'"
-                                [fxFlex.lt-sm]="isPB ? '1 0 300px' : '1 0 auto'">
+                                fxFlex.gt-sm="1 0 auto"
+                                fxFlex.lt-md="1 0 auto"
+                                fxFlex.lt-sm="1 0 auto">
                             </field-set>
 
                             <fieldset-container *ngIf="isFieldsetContainer(fe)"
-                                [hidden]="isPB && ! showPBInputData" [style.display]="getElementStyleDisplay(fe.id)" [_container]=fe
+                                [style.display]="getElementStyleDisplay(fe.id)" [_container]=fe
                                 (radio)=onRadioClick($event) (validChange)=onElementValid() (inputChange)=onInputChange($event)
                                 (tabPressed)="onTabPressed($event)"
                                 fxFlex="1 0 auto">
@@ -92,19 +126,6 @@
                                 (validChange)=onElementValid() (inputChange)=onInputChange($event)
                                 fxFlex="1 0 auto">
                             </pab-table>
-
-                            <div *ngIf="isPbSchema(fe)" id="pb-schema-container"
-                                [fxFlex.gt-sm]="isPB ? '1 0 400px' : '1 0 auto'"
-                                [fxFlex.lt-md]="isPB ? '1 0 500px' : '1 0 auto'"
-                                [fxFlex.lt-sm]="isPB ? '1 0 300px' : '1 0 auto'">
-
-                                <pb-schema *ngIf="isPbSchema(fe)" [pbSchema]=fe (radio)=onRadioClick($event)
-                                    (validChange)=onElementValid() (nodeSelected)="onPBNodeSelected($event)">
-                                </pb-schema>
-
-                                <div fxHide.sm fxFlex.gt-sm="0 0 16px"></div>
-                            </div>
-
                         </ng-template>
                     </div>
 
@@ -127,7 +148,7 @@
 
                     <quicknav *ngIf="! isPB" [ngClass.lt-xs]="'extraSmall'" [fxHide.gt-sm]="! isWide" [items]="quicknavItems" [currentItem]="'results'" [align]="'left'"></quicknav>
 
-                    <mat-card-header *ngIf="! isWide" [fxHide.lt-md]="! isWide">
+                    <mat-card-header *ngIf="! isWide" [fxHide.lt-md]="! isPB && ! isWide">
                         <mat-card-title>
                             <h1 [innerHTML]="uitextResultsTitle"></h1>
                         </mat-card-title>

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

@@ -26,6 +26,10 @@
     display: block;
 }
 
+#pb-form-container {
+    display: block;
+}
+
 /** copy of quicknav style */
 #pb-data-results-selector {