From 542ad5b79c6a9eecc3908deb30b3ee8b34b59095 Mon Sep 17 00:00:00 2001
From: Chris <chris.m.clarke@live.co.uk>
Date: Thu, 17 Oct 2024 14:45:23 +0100
Subject: [PATCH 1/5] feat: add climate map view from options

---
 .../climate-chart-options/climate-chart-options.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/picsa-tools/climate-tool/src/app/components/climate-chart-options/climate-chart-options.component.html b/apps/picsa-tools/climate-tool/src/app/components/climate-chart-options/climate-chart-options.component.html
index 095b65c89..cdddac0e8 100644
--- a/apps/picsa-tools/climate-tool/src/app/components/climate-chart-options/climate-chart-options.component.html
+++ b/apps/picsa-tools/climate-tool/src/app/components/climate-chart-options/climate-chart-options.component.html
@@ -1,4 +1,4 @@
-<h3 style="margin-top: 0">{{ 'Station' | translate }}</h3>
+<button mat-button routerLink="../../"><mat-icon>map</mat-icon>View Map</button>
 <mat-divider></mat-divider>
 <h3>{{ 'Chart' | translate }}</h3>
 <climate-view-select></climate-view-select>

From d326cfb8087e784d7bf9bb0013cefce2dd01a865 Mon Sep 17 00:00:00 2001
From: Chris <chris.m.clarke@live.co.uk>
Date: Thu, 17 Oct 2024 14:45:41 +0100
Subject: [PATCH 2/5] style: climate header text overflow

---
 .../climate-tool/src/app/pages/site-view/site-view.page.html    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/picsa-tools/climate-tool/src/app/pages/site-view/site-view.page.html b/apps/picsa-tools/climate-tool/src/app/pages/site-view/site-view.page.html
index d278bd2f4..965191650 100644
--- a/apps/picsa-tools/climate-tool/src/app/pages/site-view/site-view.page.html
+++ b/apps/picsa-tools/climate-tool/src/app/pages/site-view/site-view.page.html
@@ -2,7 +2,7 @@
 
 <!-- Header to inject into global header component -->
 <ng-template #headerPortal>
-  <div style="position: relative; display: flex; align-items: center">
+  <div style="position: relative; display: flex; align-items: center; width: 100%">
     <button mat-button color="primary" (click)="select.open()" style="font-size: 32px; height: 40px">
       @if(chartService.station){ {{chartService.station.name}} }
       <mat-icon iconPositionEnd>expand_more</mat-icon>

From b4da9e15574395d05915b2932dd871118edc58d2 Mon Sep 17 00:00:00 2001
From: Chris <chris.m.clarke@live.co.uk>
Date: Thu, 17 Oct 2024 14:46:12 +0100
Subject: [PATCH 3/5] fix: farmer tool budget back button

---
 .../pages/module-home/module-home.component.ts | 18 +++++++++++++++++-
 libs/theme/src/_overrides.scss                 |  5 +++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/apps/picsa-tools/farmer-content/src/app/pages/module-home/module-home.component.ts b/apps/picsa-tools/farmer-content/src/app/pages/module-home/module-home.component.ts
index 9e9e088f0..c41ee9e1b 100644
--- a/apps/picsa-tools/farmer-content/src/app/pages/module-home/module-home.component.ts
+++ b/apps/picsa-tools/farmer-content/src/app/pages/module-home/module-home.component.ts
@@ -109,7 +109,12 @@ export class FarmerContentModuleHomeComponent implements OnInit, OnDestroy {
     // toogle app header if required by tool
     const hideHeader = toolBlock?.tool?.showHeader ? false : true;
     if (this.componentService.headerOptions().hideHeader !== hideHeader) {
-      this.componentService.patchHeader({ hideHeader });
+      this.componentService.patchHeader({ hideHeader, hideBackButton: hideHeader ? true : false });
+    }
+    // show back button in tools that have nested route
+    const hideBackButton = this.shouldHideBackButton(toolBlock?.tool);
+    if (this.componentService.headerOptions().hideBackButton !== hideBackButton) {
+      this.componentService.patchHeader({ hideBackButton });
     }
   }
 
@@ -131,4 +136,15 @@ export class FarmerContentModuleHomeComponent implements OnInit, OnDestroy {
       this.router.navigate([tool.href], { relativeTo: this.route, replaceUrl: true });
     }
   }
+
+  private shouldHideBackButton(tool?: IToolData) {
+    if (tool) {
+      // HACK - budget tool doesn't show back to site select as can be done from dropdownj
+      if (location.pathname.includes(`/climate`)) return true;
+      // default hide back button on tool home page, e.g. `/farmer/module/budget`
+      // but include on nested pages, e.g. `/farmer/module/budget`
+      return location.pathname.endsWith(`/${tool.href}`);
+    }
+    return true;
+  }
 }
diff --git a/libs/theme/src/_overrides.scss b/libs/theme/src/_overrides.scss
index 9f474b4db..9f990b262 100644
--- a/libs/theme/src/_overrides.scss
+++ b/libs/theme/src/_overrides.scss
@@ -18,6 +18,11 @@ button.mat-mdc-button > .mat-icon {
   min-width: 24px; // climate share icon not showing without
   height: 24px;
 }
+// Don't allow button labels to extend beyond their container
+.mdc-button__label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 
 mat-card.link {
   cursor: pointer;

From b2b44e220264cd6b3f9636ed7d898580818e26e4 Mon Sep 17 00:00:00 2001
From: Chris <chris.m.clarke@live.co.uk>
Date: Thu, 17 Oct 2024 15:17:54 +0100
Subject: [PATCH 4/5] fix: budget tool horizonal mobile display

---
 .../src/app/pages/view/budget-view.page.html  | 51 +++++++------------
 .../src/app/pages/view/budget-view.page.scss  | 23 +++++++++
 .../src/app/pages/view/budget-view.page.ts    |  4 +-
 3 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
index 48be7c42e..6532b9b28 100644
--- a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
+++ b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html
@@ -1,43 +1,28 @@
-<div class="page-content" *mobxAutorun>
-  <picsa-sidenav-layout #picsaSidenav>
-    <!-- Header -->
-    <button
-      desktopHeader
-      mat-button
-      color="primary"
-      *ngIf="!isEditorOpen"
-      aria-label="Share"
-      (click)="showShareDialog()"
-    >
-      <mat-icon>share</mat-icon>{{'Share' | translate }}
-    </button>
-    <button
-      mobileHeader
-      mat-button
-      color="primary"
-      *ngIf="!isEditorOpen"
-      aria-label="Share"
-      (click)="showShareDialog()"
-    >
-      <mat-icon>share</mat-icon>{{'Share' | translate }}
-    </button>
+<picsa-sidenav-layout #picsaSidenav *mobxAutorun>
+  <!-- Header -->
+  <button desktopHeader mat-button color="primary" *ngIf="!isEditorOpen" aria-label="Share" (click)="showShareDialog()">
+    <mat-icon>share</mat-icon>{{'Share' | translate }}
+  </button>
+  <button mobileHeader mat-button color="primary" *ngIf="!isEditorOpen" aria-label="Share" (click)="showShareDialog()">
+    <mat-icon>share</mat-icon>{{'Share' | translate }}
+  </button>
 
-    <!-- Sidenav -->
-    <budget-editor-sidebar sidenav (emitClose)="picsaSidenav.close()"></budget-editor-sidebar>
+  <!-- Sidenav -->
+  <budget-editor-sidebar sidenav (emitClose)="picsaSidenav.close()"></budget-editor-sidebar>
 
-    <!-- Main content -->
-    <div content class="page-content" style="overflow-y: hidden; overflow-x: auto; padding: 0">
-      <!-- hide overflow so that editor can be stored outside bottom of page -->
-      <budget-table *ngIf="store.activeBudget" [budget]="store.activeBudget" @fadeInOut></budget-table>
+  <!-- Main content -->
+  <ng-container content>
+    <!-- hide overflow so that editor can be stored outside bottom of page -->
+    <budget-table *ngIf="store.activeBudget" [budget]="store.activeBudget" @fadeInOut></budget-table>
 
-      <!-- Updated Editor -->
+    <!-- Updated Editor -->
+    <div class="editor-popup slide-in" [class.active]="isEditorOpen">
       <budget-editor
         *ngIf="store.activeType && store.activeBudget && store.activeBudget.data"
         [activePeriod]="store.activePeriod"
         [activeType]="store.activeType"
-        [@flyInOut]="isEditorOpen ? 'in' : 'out'"
         (handleNextClick)="handleEditorNext()"
       ></budget-editor>
     </div>
-  </picsa-sidenav-layout>
-</div>
+  </ng-container>
+</picsa-sidenav-layout>
diff --git a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.scss b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.scss
index e69de29bb..b52c8a106 100644
--- a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.scss
+++ b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.scss
@@ -0,0 +1,23 @@
+// HACK - copied from options tool, should generalise
+.editor-popup {
+  position: fixed;
+  z-index: 2;
+
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+
+  // Include margin for top/bottom banners (inherit from farmer content
+  margin-top: 56px;
+  margin-bottom: var(--footer-height);
+  height: calc(100% - 56px - var(--footer-height));
+}
+
+.slide-in {
+  transition: transform 0.3s ease-in-out;
+  transform: translateY(100vh);
+}
+.slide-in.active {
+  transform: translateY(0);
+}
diff --git a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
index ec46232be..e1bda0ae4 100644
--- a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
+++ b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts
@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { PicsaCommonComponentsService } from '@picsa/components/src';
-import { ANIMATION_DEFAULTS_Y, FadeInOut, FlyInOut, OpenClosed } from '@picsa/shared/animations';
+import { FadeInOut, OpenClosed } from '@picsa/shared/animations';
 import { PicsaTranslateService } from '@picsa/shared/modules';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -13,7 +13,7 @@ import { BudgetStore } from '../../store/budget.store';
   selector: 'budget-view',
   templateUrl: './budget-view.page.html',
   styleUrls: ['./budget-view.page.scss'],
-  animations: [FadeInOut({ inDelay: 200 }), OpenClosed, FlyInOut(ANIMATION_DEFAULTS_Y)],
+  animations: [FadeInOut({ inDelay: 200 }), OpenClosed],
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class BudgetViewPage implements OnInit, OnDestroy {

From cc1e358041aff1bc5c8fc7641502647dceaed2df Mon Sep 17 00:00:00 2001
From: Chris <chris.m.clarke@live.co.uk>
Date: Fri, 18 Oct 2024 10:42:16 +0100
Subject: [PATCH 5/5] fix: extension budget editor popup

---
 .../budget-tool/src/app/pages/view/budget-view.page.scss   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.scss b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.scss
index b52c8a106..bfdc69c28 100644
--- a/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.scss
+++ b/apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.scss
@@ -8,10 +8,11 @@
   left: 0;
   display: flex;
 
-  // Include margin for top/bottom banners (inherit from farmer content
+  // Include margin for top/bottom banners
+  // Inherit footer-height from farmer content or use fallback value if not defined
   margin-top: 56px;
-  margin-bottom: var(--footer-height);
-  height: calc(100% - 56px - var(--footer-height));
+  margin-bottom: var(--footer-height, 0px);
+  height: calc(100% - 56px - var(--footer-height, 0px));
 }
 
 .slide-in {