diff --git a/src/components/brew-information/brew-information.component.html b/src/components/brew-information/brew-information.component.html index 5d02bbf9..85e0b065 100644 --- a/src/components/brew-information/brew-information.component.html +++ b/src/components/brew-information/brew-information.component.html @@ -246,9 +246,10 @@ - + + - + diff --git a/src/components/brew-information/brew-information.component.scss b/src/components/brew-information/brew-information.component.scss index 03b0008a..6ec6155b 100644 --- a/src/components/brew-information/brew-information.component.scss +++ b/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; } + } diff --git a/src/components/brew-information/brew-information.component.ts b/src/components/brew-information/brew-information.component.ts index abe007b8..3537da56 100644 --- a/src/components/brew-information/brew-information.component.ts +++ b/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 { event.stopPropagation(); event.stopImmediatePropagation(); diff --git a/src/popover/welcome-popover/welcome-popover.component.ts b/src/popover/welcome-popover/welcome-popover.component.ts index 38c67d8a..25145648 100644 --- a/src/popover/welcome-popover/welcome-popover.component.ts +++ b/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