Merge pull request #323 from NREL/issue-314

Quick Fixes to UI on small screens in setup wizard

src/app/core-components/navbar/navbar.component.html

@@ -7,24 +7,24 @@
             <a [style]="{'color': 'white'}" class="navbar-brand ms-2" routerLink="/welcome">
                 <fa-icon [icon]="faHome" [style]="{'color': 'white'}"></fa-icon>
                 JUSTIFI</a>
-            <span class="badge bg-secondary">v{{version}}</span>
+            <span class="d-none d-sm-inline badge bg-secondary">v{{version}}</span>
         </div>
         <div>
             <button class="btn btn-dark btn-sm me-2" (click)="openFeedbackModal()">
                 <fa-icon [icon]="faInbox"></fa-icon>
-                <span class="d-sm-none d-md-none d-lg-inline">
+                <span class="d-none d-sm-none d-md-none d-lg-inline">
                     Provide Feedback
                 </span>
             </button>
             <button class="btn btn-dark btn-sm me-2" (click)="openImportDataModal()">
                 <fa-icon [icon]="faUpload"></fa-icon>
-                <span class="d-sm-none d-md-none d-lg-inline">
+                <span class="d-none d-sm-none d-md-none d-lg-inline">
                     Import Data
                 </span>
             </button>
             <button class="btn btn-dark btn-sm me-2" (click)="openBackupDataModal()">
                 <fa-icon [icon]="faDownload"></fa-icon>
-                <span class="d-sm-none d-md-none d-lg-inline">
+                <span class="d-none d-sm-none d-md-none d-lg-inline">
                     Download Data
                 </span>
             </button>

src/app/setup-wizard/data-collection/on-site-assessment/assessment-energy-opportunities-form/assessment-energy-opportunities-form.component.html

@@ -1,4 +1,4 @@
-<div class="d-flex w-100 justify-content-between pt-2 pb-2">
+<div class="d-flex w-100 justify-content-between pb-2">
     <h2 class="col-sm-5 col-form-label" for="assessmentName">Energy Efficiency Opportunities</h2>
     <button class="btn btn-outline-energy-opp btn-sm" (click)="addEnergyOpportunity()"><fa-icon [icon]="faPlus"
             class="me-1"></fa-icon>Add Opportunity</button>

src/app/setup-wizard/data-collection/on-site-assessment/assessment-nebs-form/assessment-nebs-form.component.html

@@ -1,4 +1,4 @@
-<h6 class="pt-2 pb-2">
+<h6 class="pb-2">
     <div class="d-flex w-100 justify-content-between">
         <div class="mt-auto bold">
             Assessment Non-Energy Benefits

src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment-results/on-site-assessment-results.component.html

@@ -1,4 +1,4 @@
-<div class="p-4">
+<div class="ps-2 pe-2 pb-2">
     <app-assessment-savings-chart [assessmentReport]="assessmentReport"></app-assessment-savings-chart>
     <app-assessment-savings-table [assessmentReport]="assessmentReport"></app-assessment-savings-table>
 </div>

src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment.component.css

@@ -1,18 +1,12 @@
-.add-neb-btn{
-    background-color: #186A3B;
-}
-.add-opportunity-btn{
-    background-color: #D35400;
+.badge.small{
+    font-size: small;
 }
 
-.top-nav{
-    border-bottom: solid;
-    margin-bottom: .25rem
-}
-.nav-underline .nav-item .nav-link.active{
-    font-weight: normal;
+.nav-link{
+    padding: .25rem;
 }
 
-.badge.small{
-    font-size: small;
+.navbar{
+    padding-bottom: 0px;
+    border-bottom: 1px #0079c2 solid;
 }

src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment.component.html

@@ -2,33 +2,37 @@
     <div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
         <div class="col-10 pt-4 pb-4">
             <div class="form-paper shadow">
-                <nav class="navbar top-nav">
+                <div class="d-flex w-100 justify-content-between">
                     <div>
                         <h5>
-                            <fa-icon [icon]="faScrewdriverWrench"></fa-icon> {{assessment.name}} <span
-                                class="badge bg-dark small ps-1"
-                                *ngIf="assessment.assessmentType">{{assessment.assessmentType}}</span>
+                            <fa-icon [icon]="faScrewdriverWrench"></fa-icon> {{assessment.name}}
                         </h5>
                     </div>
-                    <ul class="nav nav-underline">
+                    <div>
+                        <span class="badge bg-dark small"
+                            *ngIf="assessment.assessmentType">{{assessment.assessmentType}}</span>
+                    </div>
+                </div>
+                <nav class="navbar">
+                    <ul class="nav nav-tabs">
                         <li class="nav-item">
-                            <a class="nav-link pt-0" [routerLink]="'details'"
-                                [routerLinkActive]="['active']">Details</a>
+                            <a class="nav-link" [routerLink]="'details'" [routerLinkActive]="['active']">Details</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link pt-0" [routerLink]="'energy-opportunities'"
+                            <a class="nav-link" [routerLink]="'energy-opportunities'"
                                 [routerLinkActive]="['active']">Energy Efficiency Opportunities</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link pt-0" [routerLink]="'nebs'" [routerLinkActive]="['active']">NEBs</a>
+                            <a class="nav-link" [routerLink]="'nebs'" [routerLinkActive]="['active']">NEBs</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link pt-0" [routerLink]="'results'"
-                                [routerLinkActive]="['active']">Results</a>
+                            <a class="nav-link" [routerLink]="'results'" [routerLinkActive]="['active']">Results</a>
                         </li>
                     </ul>
                 </nav>
-                <router-outlet></router-outlet>
+                <div class="pt-2">
+                    <router-outlet></router-outlet>
+                </div>
             </div>
         </div>
     </div>

src/app/setup-wizard/setup-wizard-help-panel/setup-wizard-help-panel.component.css

@@ -1,65 +1,39 @@
-.navbar{
-    width: 20rem;
-    background-color: #ffffff;
-    overflow-y: auto;
-    /* height: 100%; */
-    /* max-height: 100%; */
-    flex-wrap: nowrap;
-}
-
 .navbar.collapsed{
     width: auto;
 }
 
-.nav-item{
-    width: 100%;
-    font-size: large;
-}
-
-.nav-item.section-header{
+.toggle-collapse{
     font-size: x-large;
 }
 
-.nav-link{
-    padding-left: .5rem;
-}
-
-.nav-link.secondary-nav{
-    padding-left: 1.5rem;
-}
-
-.nav-link.third-nav{
-    padding-left: 3rem;
+.toggle-collapse:hover{
+    cursor: pointer;
+    border: so;
 }
 
-.nav-link.active{
-    background-color: #0079c2;
-    color: white;
+.help-container {
+    container-type: inline-size;
+    background-color: white;
+    overflow-y: auto;
 }
 
-.nav-link:hover{
-    background-color: #8DABBE;
-    color: black;
+.help-content {
+    display: block;
 }
 
-
-/* .text-start{
-    text-align: right;
-} */
-
-.toggle-collapse{
-    font-size: x-large;
+@container (max-width: 45px) {
+    .help-content, .panel-label {
+        display: none;
+    }
 }
 
-.toggle-collapse:hover{
-    cursor: pointer;
-    border: so;
-}
 
-.btn.text-left{
-    text-align: left;
+.panel-label{
+    display: inline-block;
+    line-height: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+    font-size: large;
 }
-
-.nav-link:hover{
-    cursor: pointer;
-}

src/app/setup-wizard/setup-wizard-help-panel/setup-wizard-help-panel.component.html

@@ -1,19 +1,19 @@
-<div class="h-100 navbar d-flex flex-column align-items-start justify-content-start shadow help-text"
-    [ngClass]="{'collapsed': collapseHelpPanel}">
+<div class="h-100 d-flex flex-column align-items-start justify-content-start shadow help-text help-container"
+    [ngClass]="{'collapsed': !helpPanelOpen}">
     <div class="w-100 pb-1 d-flex">
         <div class="toggle-collapse d-flex">
             <a class="click-link" (click)="toggleCollapseHelpPanel()">
                 <fa-icon [icon]="faCircleQuestion"></fa-icon>
             </a>
-            <div class="d-flex mt-2 ps-1 panel-label" *ngIf="!collapseHelpPanel">
-                <h5 class="mb-0">{{helpLabel}}</h5>
+            <div class="d-flex mt-2 ps-1 panel-label" *ngIf="helpPanelOpen">
+                {{helpLabel}}
             </div>
         </div>
     </div>
-    <div class="w-100">
+    <div class="w-100 help-content">
         <hr class="mt-0">
     </div>
-    <div class="w-100" *ngIf="!collapseHelpPanel">
+    <div class="w-100 help-content">
         <app-company-setup-help *ngIf="helpContext == 'company-setup'"></app-company-setup-help>
         <app-company-contacts-help *ngIf="helpContext == 'company-contacts'"></app-company-contacts-help>
         <app-company-kpi-select-help *ngIf="helpContext == 'company-kpi-select'"></app-company-kpi-select-help>

src/app/setup-wizard/setup-wizard-help-panel/setup-wizard-help-panel.component.spec.ts

@@ -2,23 +2,17 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { SetupWizardHelpPanelComponent } from './setup-wizard-help-panel.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { LocalStorageService } from 'ngx-webstorage';
+import { stubServiceProviders } from 'src/app/spec-helpers/spec-test-service-stub';
 
 describe('SetupWizardHelpPanelComponent', () => {
   let component: SetupWizardHelpPanelComponent;
   let fixture: ComponentFixture<SetupWizardHelpPanelComponent>;
-  let localStorageService: Partial<LocalStorageService> = {
-    retrieve: () => { return undefined },
-    store: () => { return undefined },
-  };
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [FontAwesomeModule],
       declarations: [SetupWizardHelpPanelComponent],
-      providers: [
-        { provide: LocalStorageService, useValue: localStorageService }
-      ]
+      providers: stubServiceProviders
     })
     .compileComponents();
 

src/app/setup-wizard/setup-wizard-help-panel/setup-wizard-help-panel.component.ts

@@ -1,25 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { faCircleQuestion, IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { HelpContext } from './HelpContext';
-import { LocalStorageDataService } from 'src/app/shared/shared-services/local-storage-data.service';
 import { Subscription } from 'rxjs';
+import { SetupWizardService } from '../setup-wizard.service';
 
 @Component({
   selector: 'app-setup-wizard-help-panel',
   templateUrl: './setup-wizard-help-panel.component.html',
   styleUrl: './setup-wizard-help-panel.component.css'
 })
 export class SetupWizardHelpPanelComponent {
+  @Output('emitToggleCollapse')
+  emitToggleCollapse: EventEmitter<boolean> = new EventEmitter<boolean>(false);
 
-
-  collapseHelpPanel: boolean = false;
   faCircleQuestion: IconDefinition = faCircleQuestion;
 
   helpContext: HelpContext;
   helpLabel: string;
   routerSub: Subscription;
-  constructor(private router: Router, private localStorageDataService: LocalStorageDataService) {
+  helpPanelOpenSub: Subscription;
+  helpPanelOpen: boolean;
+
+  constructor(private router: Router,
+    private setupWizardService: SetupWizardService
+  ) {
 
   }
 
@@ -29,21 +34,23 @@ export class SetupWizardHelpPanelComponent {
         this.setHelpContext(event.urlAfterRedirects);
       }
     });
-    this.collapseHelpPanel = this.localStorageDataService.setupHelpPanelCollapsed;
+    this.helpPanelOpenSub = this.setupWizardService.helpPanelOpen.subscribe(val => {
+      this.helpPanelOpen = val;
+      //needed to resize charts
+      setTimeout(() => {
+        window.dispatchEvent(new Event("resize"));
+      }, 100)
+    });
     this.setHelpContext(this.router.url);
   }
 
   ngOnDestroy(){
     this.routerSub.unsubscribe();
+    this.helpPanelOpenSub.unsubscribe();
   }
 
   toggleCollapseHelpPanel() {
-    this.collapseHelpPanel = !this.collapseHelpPanel;
-    this.localStorageDataService.setSetupPanelCollapsed(this.collapseHelpPanel);
-    //needed to resize charts
-    setTimeout(() => {
-      window.dispatchEvent(new Event("resize"));
-    }, 100)
+    this.emitToggleCollapse.emit(!this.helpPanelOpen);
   }
 
   setHelpContext(url: string) {