#785 - Show graph in slider is now rightly extending + paddings

src/components/brew-information/brew-information.component.html

@@ -246,9 +246,10 @@
       </ion-card>
     </swiper-slide>
     <swiper-slide *ngIf='brew.flow_profile'>
-      <ion-card class='long-card brew-layout graph-card' style='z-index:-9999' [style.height.px]="getElementHeight()" [style.width.px]="getElementWidth()">
+      <!--Z-index -1 to let it scroll all good-->
+      <ion-card class='long-card brew-layout' style='z-index:-1'>
         <ion-card-content class='no-ion-col-vertical-padding ion-padding-top' >
-          <graph-display-card [chartWidth]='getElementOffsetWidth()' [chartHeight]='getElementOffsetHeight()' [flowProfilePath]='brew.flow_profile'></graph-display-card>
+          <graph-display-card *ngIf='informationContainerWidth' [chartWidth]='informationContainerWidth' [chartHeight]='informationContainerHeight' [flowProfilePath]='brew.flow_profile'></graph-display-card>
         </ion-card-content>
       </ion-card>
 

src/components/brew-information/brew-information.component.scss

@@ -151,13 +151,16 @@
     position: relative;
 
     width: 100%;
-    height: 100%;
+
+    height: auto;
   }
+
   .add-bottom-spacing{
     margin-bottom:20px;
   }
 
 
+
 }
 
 

src/components/brew-information/brew-information.component.ts

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { Brew } from '../../classes/brew/brew';
 import { UISettingsStorage } from '../../services/uiSettingsStorage';
-import { ModalController, Platform } from '@ionic/angular';
+import { MenuController, ModalController, Platform } from '@ionic/angular';
 import { BREW_ACTION } from '../../enums/brews/brewAction';
 import { BrewPopoverActionsComponent } from '../../app/brew/brew-popover-actions/brew-popover-actions.component';
 import { Bean } from '../../classes/bean/bean';
@@ -53,14 +53,16 @@ export class BrewInformationComponent implements OnInit {
   @ViewChild('card', { read: ElementRef })
   public cardEl: ElementRef;
 
+  public slideOpts = {
+    allowTouchMove: false,
+    speed: 400,
+    slide: 4,
+  };
+
   @ViewChild('swiper', { static: false }) public brewInformationSlider:
     | ElementRef
     | undefined;
 
-  @ViewChild('ionCardParent', { static: false }) public ionCardParent:
-    | ElementRef
-    | any;
-
   @ViewChild('brewInformationContainer', { read: ElementRef, static: false })
   public brewInformationContainer: ElementRef;
 
@@ -77,6 +79,9 @@ export class BrewInformationComponent implements OnInit {
 
   public settings: Settings = null;
 
+  public informationContainerHeight: number = undefined;
+  public informationContainerWidth: number = undefined;
+
   constructor(
     private readonly uiSettingsStorage: UISettingsStorage,
     public readonly uiBrewHelper: UIBrewHelper,
@@ -95,7 +100,8 @@ export class BrewInformationComponent implements OnInit {
     private readonly uiFileHelper: UIFileHelper,
     private readonly uiBeanHelper: UIBeanHelper,
     private readonly visualizerService: VisualizerService,
-    private readonly uiGraphHelper: UIGraphHelper
+    private readonly uiGraphHelper: UIGraphHelper,
+    private readonly menu: MenuController
   ) {}
 
   public ngOnInit() {
@@ -104,6 +110,25 @@ export class BrewInformationComponent implements OnInit {
       this.bean = this.brew.getBean();
       this.preparation = this.brew.getPreparation();
       this.mill = this.brew.getMill();
+
+      setTimeout(() => {
+        /**We calculcate the information here, to avoid expression-changed in angular, because it always triggered while scrolling cause of calucation functions**/
+        this.informationContainerHeight =
+          this.brewInformationContainer?.nativeElement?.offsetHeight - 50;
+        this.informationContainerWidth =
+          this.brewInformationContainer?.nativeElement?.offsetWidth - 50;
+
+        /**If we slide on a bigger tablet, somehow ionic triggering the menu when sliding from right to left, thats why we need to attach us to touchstart/end and to ignore the slide...**/
+        this.brewInformationSlider?.nativeElement.swiper.on(
+          'touchStart',
+          () => {
+            this.menu.swipeGesture(false);
+          }
+        );
+        this.brewInformationSlider?.nativeElement.swiper.on('touchEnd', () => {
+          this.menu.swipeGesture(true);
+        });
+      }, 150);
     }
   }
 
@@ -146,32 +171,6 @@ export class BrewInformationComponent implements OnInit {
     await this.uiGraphHelper.detailBrewGraph(this.brew);
   }
 
-  public getElementOffsetWidth() {
-    if (this.brewInformationContainer?.nativeElement?.offsetWidth) {
-      return this.brewInformationContainer?.nativeElement?.offsetWidth - 50;
-    }
-    return 0;
-  }
-  public getElementOffsetHeight() {
-    if (this.brewInformationContainer?.nativeElement?.offsetHeight) {
-      return this.brewInformationContainer?.nativeElement?.offsetHeight - 50;
-    }
-    return 0;
-  }
-
-  public getElementHeight() {
-    if (this.ionCardParent?.el.offsetHeight) {
-      return this.ionCardParent?.el.offsetHeight;
-    }
-    return 200;
-  }
-  public getElementWidth() {
-    if (this.ionCardParent?.el.offsetWidth) {
-      return this.ionCardParent?.el.offsetWidth;
-    }
-    return 200;
-  }
-
   public async showBrewActions(event): Promise<void> {
     event.stopPropagation();
     event.stopImmediatePropagation();

src/popover/welcome-popover/welcome-popover.component.ts

@@ -12,12 +12,6 @@ import { UIPreparationHelper } from '../../services/uiPreparationHelper';
   styleUrls: ['./welcome-popover.component.scss'],
 })
 export class WelcomePopoverComponent implements OnInit {
-  public slideOpts = {
-    allowTouchMove: false,
-    speed: 400,
-    slide: 4,
-  };
-
   public slide: number = 1;
   @ViewChild('slider', { static: false }) public welcomeSlider:
     | ElementRef