Skip to content

Issue 114: UI/UX Updates for small screens #157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rmroot merged 4 commits into from
Dec 2, 2025
Merged

Issue 114: UI/UX Updates for small screens #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c907baf
feat: update setup wizard for usability on small/mobile devices
rmroot Dec 2, 2025
916ae0c
feat: update usability of portfolio screens for small/mobile usage
rmroot Dec 2, 2025
9283889
feat: final updates for small/mobile screens
rmroot Dec 2, 2025
02b15ad
chore: all unit tests passing
rmroot Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 22 additions & 8 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@
},
"dependencies": {
"@angular/animations": "20.3.15",
"@angular/cdk": "20.2.14",
"@angular/common": "20.3.15",
"@angular/compiler": "20.3.15",
"@angular/core": "20.3.15",
Expand All @@ -78,7 +79,7 @@
"@fortawesome/fontawesome-svg-core": "6.6.0",
"@fortawesome/free-solid-svg-icons": "6.6.0",
"angular-plotly.js": "6.0.0",
"bootstrap": "5.3.2",
"bootstrap": "5.3.8",
"electron-log": "5.4.0",
"electron-updater": "6.6.2",
"exceljs": "4.4.0",
Expand Down Expand Up @@ -112,4 +113,4 @@
"pptxgenjs": "3.12.0",
"typescript": "~5.9.3"
}
}
}
5 changes: 3 additions & 2 deletions src/app/core-components/welcome/welcome.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="container-fluid dashboard">
<div class="row pt-3 pb-3">
<div class="col-8">
<div class="col-sm-12 col-md-8">
<div class="card">
<div class="card-body">
<div class="card-title large">
Expand Down Expand Up @@ -124,7 +124,8 @@
</div>
</div>

<div class="col-4">
<div class="col-sm-12 col-md-4">
<hr class="d-md-none d-sm-block">
<div class="card">
<div class="card-body">
<div class="card-title secondary">
Expand Down
12 changes: 6 additions & 6 deletions src/app/nebs-database/nebs-database-table/nebs-database-table.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="row pb-2">
<label class="col-sm-5" for="kpiValue">Search NEBs</label>
<div class="col-7">
<label class="col-12 col-md-5" for="kpiValue">Search NEBs</label>
<div class="col-12 col-md-7">
<div class="input-group" role="search">
<span class="input-group-text">
<fa-icon [icon]="faMagnifyingGlass"></fa-icon>
Expand All @@ -25,8 +25,8 @@
</div>

<div class="row pb-2">
<label class="col-sm-5" for="kpiValue">Key Performance Indicator (KPI)</label>
<div class="col-7">
<label class="col-12 col-md-5" for="kpiValue">Key Performance Indicator (KPI)</label>
<div class="col-12 col-md-7">
<select id="kpiValue" name="kpiValue" class="form-select" [(ngModel)]="kpiValue" (change)="setKpmOptions()">
<option [ngValue]="undefined">All KPI</option>
<option *ngFor="let kpi of keyPerformanceIndicatorOptions" [ngValue]="kpi.optionValue">
Expand All @@ -45,8 +45,8 @@
</div>
</div>
<div class="row">
<label class="col-sm-5" for="kpmValue">Key Performance Metric (KPM)</label>
<div class="col-7">
<label class="col-12 col-md-5" for="kpmValue">Key Performance Metric (KPM)</label>
<div class="col-12 col-md-7">
<select id="kpmValue" name="kpmValue" class="form-select" [(ngModel)]="kpmCompositeValue"
(change)="setKpmValue()">
<option [ngValue]="undefined">All KPM</option>
Expand Down
5 changes: 0 additions & 5 deletions src/app/routing/portfolio.routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { CompanyDashboardHomeComponent } from "../user-portfolio/company-dashboa
import { FacilityDashboardComponent } from "../user-portfolio/facility-dashboard/facility-dashboard.component";
import { AssessmentDashboardComponent } from "../user-portfolio/assessment-dashboard/assessment-dashboard.component";
import { CompanyStakeholdersComponent } from "../user-portfolio/company-dashboard/company-stakeholders/company-stakeholders.component";
import { CompanyReportsComponent } from "../user-portfolio/company-dashboard/company-reports/company-reports.component";
import { CompanySettingsComponent } from "../user-portfolio/company-dashboard/company-settings/company-settings.component";
import { FacilityDashboardHomeComponent } from "../user-portfolio/facility-dashboard/facility-dashboard-home/facility-dashboard-home.component";
import { IndustrialSystemInventoryComponent } from "../user-portfolio/facility-dashboard/industrial-system-inventory/industrial-system-inventory.component";
Expand Down Expand Up @@ -71,10 +70,6 @@ export const PortfolioRoutes: Route = {
}
]
},
{
path: 'reports',
component: CompanyReportsComponent
},
{
path: 'manage',
component: CompanySettingsComponent,
Expand Down
2 changes: 1 addition & 1 deletion .../assessment-energy-opportunities-form/assessment-energy-opportunities-form.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<h6 class="pb-2">
<div class="d-flex w-100 justify-content-between">
<div class="d-flex w-100 justify-content-between flex-column flex-md-row">
<div class="mt-auto bold">
Energy Efficiency Measures
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...ta-collection/on-site-assessment/assessment-nebs-form/assessment-nebs-form.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<h6 class="pb-2">
<div class="d-flex w-100 justify-content-between">
<div class="d-flex w-100 justify-content-between flex-column flex-md-row">
<div class="mt-auto bold">
Non-Energy Benefits &plus; Incentives
</div>
Expand Down
39 changes: 11 additions & 28 deletions src/app/setup-wizard/data-collection/on-site-assessment/on-site-assessment.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="setup-wizard-content" *ngIf="assessment">
<div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
<div class="col-10 pt-4 pb-4">
<div class="col-11 col-md-10 pt-4 pb-4">
<div class="form-paper shadow">
<div class="d-flex w-100 justify-content-between">
<div>
Expand All @@ -20,11 +20,12 @@ <h5>
<a class="nav-link" [routerLink]="'details'" [routerLinkActive]="['active']">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="'energy-opportunities'"
[routerLinkActive]="['active']" title="Energy Efficiency Measures">EEMs</a>
<a class="nav-link" [routerLink]="'energy-opportunities'" [routerLinkActive]="['active']"
title="Energy Efficiency Measures">EEMs</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="'nebs'" [routerLinkActive]="['active']" title="Non-energy benefits">NEBs &plus; Incentives</a>
<a class="nav-link" [routerLink]="'nebs'" [routerLinkActive]="['active']"
title="Non-energy benefits">NEBs &plus; Incentives</a>
</li>
</ul>
</nav>
Expand All @@ -40,35 +41,17 @@ <h5>
<div class="col-3">
<button #prevBtn class="btn nav-btn btn-sm" (click)="goBack(prevBtn)">
<fa-icon [icon]="faChevronLeft"></fa-icon>
{{ backLabel }}
<span class="d-none d-md-inline">
{{ backLabel }}
</span>
</button>
</div>
<!-- <div class="col-6">
<div class="d-flex justify-content-center">
<div class="pe-1">
<button class="btn btn-dark add-opportunity-btn btn-sm" [disabled]="true">
<fa-icon [icon]="faPlus"></fa-icon>
Add Opportunity
</button>
</div>
<div class="pe-1">
<button class="btn btn-dark add-neb-btn btn-sm" (click)="showSuggestedNebModal()">
<fa-icon [icon]="faPlus"></fa-icon>
Add NEB
</button>
</div>
<div class="pe-1">
<button class="btn btn-secondary btn-sm" [disabled]="true">
<fa-icon [icon]="faPlus"></fa-icon>
Add Contact
</button>
</div>
</div>
</div> -->
<div class="col-3">
<div class="d-flex justify-content-end">
<button #nxtBtn class="btn nav-btn btn-sm" (click)="goToNext(nxtBtn)">
{{ nextLabel }}
<span class="d-none d-md-inline">
{{ nextLabel }}
</span>
<fa-icon [icon]="faChevronRight"></fa-icon>
</button>
</div>
Expand Down
8 changes: 5 additions & 3 deletions src/app/setup-wizard/data-collection/review-on-site/review-on-site.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="setup-wizard-content">
<div class="row g-0 justify-content-center h-100 w-100 overflow-scroll">
<div class="col-10 pt-4 pb-4">
<div class="col-11 col-md-10 pt-4 pb-4">
<div class="form-paper shadow">
<h5>
Review Data Collection
Expand All @@ -22,15 +22,17 @@ <h5>
<div class="col-3">
<button class="btn nav-btn btn-sm" (click)="goBack()">
<fa-icon [icon]="faChevronLeft"></fa-icon>
<span class="d-md-none">
<span class="d-none d-md-inline">
Back
</span>
</button>
</div>
<div class="col-3">
<div class="d-flex justify-content-end">
<button class="btn nav-btn btn-sm" (click)="continue()">
Data Evaluation
<span class="d-none d-md-inline">
Data Evaluation
</span>
<fa-icon [icon]="faChevronRight"></fa-icon>
</button>
</div>
Expand Down
16 changes: 8 additions & 8 deletions ...p/setup-wizard/data-evaluation/assessment-evaluation/assessment-evaluation.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div [ngClass]="{'setup-wizard-content': !print}" *ngIf="assessment">
<div [ngClass]="{'row g-0 justify-content-center h-100 w-100 overflow-scroll': !print}">
<div [ngClass]="{'col-10 pt-4 pb-4': !print}">
<div [ngClass]="{'col-11 col-md-10 pt-4 pb-4': !print}">
<div [ngClass]="{'form-paper shadow': !print}">
<h5>
<fa-icon [icon]="faChartPie"></fa-icon> {{assessment.name}} Report
Expand All @@ -14,26 +14,26 @@ <h5>
<div class="container-fluid justify-content-between">
<button class="btn nav-btn btn-sm" (click)="goBack()">
<fa-icon [icon]="faChevronLeft"></fa-icon>
<span *ngIf="isFirstAssessment">Executive Summary</span>
<span *ngIf="!isFirstAssessment"> Assessment Report&nbsp;</span>
<span class="d-none d-md-inline" *ngIf="isFirstAssessment">Executive Summary</span>
<span class="d-none d-md-inline" *ngIf="!isFirstAssessment"> Assessment Report&nbsp;</span>
</button>
<div>
<button class="btn btn-success btn-sm" (click)="togglePrint()">
<fa-icon [icon]="faFilePdf"></fa-icon>
Generate PDF
<span class="d-none d-md-inline">Generate PDF</span>
</button>
<button class="btn btn-success btn-sm ms-2" (click)="generatePowerPoint()">
<fa-icon [icon]="faFilePowerpoint"></fa-icon>
Generate PowerPoint
<span class="d-none d-md-inline">Generate PowerPoint</span>
</button>
<button class="btn btn-success btn-sm ms-2" (click)="exportToExcel()">
<fa-icon [icon]="faFileExcel"></fa-icon>
Export to Excel
<span class="d-none d-md-inline">Export to Excel</span>
</button>
</div>
<button class="btn nav-btn btn-sm" (click)="goToNext()">
<span *ngIf="isLastAssessment">Rollup Report&nbsp;</span>
<span *ngIf="!isLastAssessment">Next Assessment Report&nbsp;</span>
<span class="d-none d-md-inline" *ngIf="isLastAssessment">Rollup Report&nbsp;</span>
<span class="d-none d-md-inline" *ngIf="!isLastAssessment">Next Assessment Report&nbsp;</span>
<fa-icon [icon]="faChevronRight"></fa-icon>
</button>
</div>
Expand Down
22 changes: 15 additions & 7 deletions ...ata-evaluation/data-evaluation-custom-report/data-evaluation-custom-report.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div [ngClass]="{'setup-wizard-content': !print}" *ngIf="report">
<div [ngClass]="{'row g-0 justify-content-center h-100 w-100 overflow-scroll': !print}">
<div [ngClass]="{'col-10 pt-4 pb-4': !print}">
<div [ngClass]="{'col-11 col-md-10 pt-4 pb-4': !print}">
<div [ngClass]="{'form-paper shadow': !print}">
<ng-container *ngIf="!print">
<div class="d-flex w-100 justify-content-between">
Expand Down Expand Up @@ -33,29 +33,37 @@ <h5>
<div class="container-fluid justify-content-between">
<button class="btn nav-btn btn-sm" (click)="goBack()">
<fa-icon [icon]="faChevronLeft"></fa-icon>
<span *ngIf="isFirstReport"> Manage Custom Reports</span>
<span *ngIf="!isFirstReport"> Previous Report</span>
<span class="d-none d-md-inline" *ngIf="isFirstReport"> Manage Custom Reports</span>
<span class="d-none d-md-inline" *ngIf="!isFirstReport"> Previous Report</span>
</button>
<div>
<button class="btn btn-success btn-sm me-2" (click)="togglePrint()">
<fa-icon [icon]="faFilePdf"></fa-icon>
Generate PDF
<span class="d-none d-md-inline">
Generate PDF
</span>
</button>
<button class="btn btn-success btn-sm" (click)="exportToExcel()">
<fa-icon [icon]="faFileExcel"></fa-icon>
Export to Excel
<span class="d-none d-md-inline">
Export to Excel
</span>
</button>
</div>
<ng-template [ngIf]="!isLastReport" [ngIfElse]="goToPortfolioBlock">
<button class="btn nav-btn btn-sm" (click)="goToNext()">
Next Report
<span class="d-none d-md-inline">
Next Report
</span>
<fa-icon [icon]="faChevronRight"></fa-icon>
</button>
</ng-template>
<ng-template #goToPortfolioBlock>
<button class="btn nav-btn btn-sm" (click)="goToPortfolio()">
<fa-icon [icon]="faFolderOpen"></fa-icon>
Go To Portfolio
<span class="d-none d-md-inline">
Go To Portfolio
</span>
</button>
</ng-template>
</div>
Expand Down
Loading