#785 - Make it possible to slide cards to show graph

src/app/app.scss

@@ -944,24 +944,27 @@ swiper-container {
   --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
 }
 
-swiper-slide {
-  display: flex;
-  position: relative;
+swiper-container.swiper {
+  swiper-slide {
+    display: flex;
+    position: relative;
 
-  flex-direction: column;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
+    flex-direction: column;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
 
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 
-  font-size: 18px;
+    font-size: 18px;
 
-  text-align: center;
-  box-sizing: border-box;
+    text-align: center;
+    box-sizing: border-box;
+  }
 }
 
+
 swiper-slide img {
   width: auto;
   max-width: 100%;

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

@@ -143,6 +143,16 @@
     max-height: 60px;
     object-fit:cover;
   }
+
+  swiper-slide {
+    display: flex;
+    position: relative;
+
+    width: 100%;
+    height: 100%;
+  }
+
+
 }
 
 

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

@@ -51,6 +51,18 @@ export class BrewInformationComponent implements OnInit {
   @Input() public layout: string = 'brew';
   @ViewChild('card', { read: ElementRef })
   public cardEl: ElementRef;
+
+  @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;
+
   @ViewChild('brewStars', { read: NgxStarsComponent, static: false })
   public brewStars: NgxStarsComponent;
 
@@ -128,6 +140,32 @@ export class BrewInformationComponent implements OnInit {
     this.brewAction.emit([BREW_ACTION.DETAIL, 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/components/graph-display-card/graph-display-card.component.ts

@@ -31,6 +31,7 @@ export class GraphDisplayCardComponent implements OnInit {
   @Input() public meticulousHistoryData: HistoryListingEntry;
 
   @Input() public chartWidth: number;
+  @Input() public chartHeight: number;
 
   public flow_profile_raw: BrewFlow = new BrewFlow();
 
@@ -97,7 +98,10 @@ export class GraphDisplayCardComponent implements OnInit {
       chartWidth = this.chartWidth;
     }
 
-    const chartHeight: number = 150;
+    let chartHeight: number = 150;
+    if (this.chartHeight) {
+      chartHeight = this.chartHeight;
+    }
 
     let tickFormat = '%S';
 

src/components/photo-add/photo-add.component.html

@@ -2,7 +2,7 @@
   <ion-icon class="icon-16" name="beanconqueror-add"></ion-icon>&nbsp;{{"ADD_PHOTO" | translate}}
 </ion-item>
 <div *ngIf="data?.attachments && data.attachments.length > 0">
-  <swiper-container  [pagination]="{ clickable: true, dragable:true }"  #photoSlides pager="true">
+  <swiper-container class='swiper'  [pagination]="{ clickable: true, dragable:true }"  #photoSlides pager="true">
     <swiper-slide *ngFor="let attachment of data.attachments;let i = index">
       <ion-button [disabled]='i===0' (click)="sortLeft(i)" class="position-absolute-button-sort-left" tappable color="accent" fill="clear">
         <ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>

src/components/photo-view/photo-view.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="data?.attachments && data.attachments.length > 0">
-  <swiper-container [pagination]="{ clickable: true, dragable:true }" #photoSlides pager="true">
+  <swiper-container  class='swiper' [pagination]="{ clickable: true, dragable:true }" #photoSlides pager="true">
     <swiper-slide *ngFor="let attachment of data.attachments;let i = index">
       <async-image class="brew-image" filePath="{{attachment}}"></async-image>
     </swiper-slide>

src/popover/photo-popover/photo-popover.component.html

@@ -10,7 +10,7 @@
 </ion-header>
 <ion-content>
   <div *ngIf="data?.attachments && data.attachments.length > 0">
-    <swiper-container  [pagination]="{ clickable: true, dragable:true }"   #photoSlides pager="true">
+    <swiper-container  class='swiper'  [pagination]="{ clickable: true, dragable:true }"   #photoSlides pager="true">
       <swiper-slide *ngFor="let attachment of data.attachments;let i = index">
         <async-image class="brew-image" filePath="{{attachment}}"></async-image>
       </swiper-slide>

src/popover/update-popover/update-popover.component.html

@@ -1,6 +1,6 @@
 <ion-content #updateContent class="ion-padding-top">
 
-  <swiper-container #slider allow-touch-move='false'  [pagination]="{ draggable: false, clickable: false }" pager="true">
+  <swiper-container  class='swiper' #slider allow-touch-move='false'  [pagination]="{ draggable: false, clickable: false }" pager="true">
     <swiper-slide *ngFor="let version of versions;let last = last;let i=index;" >
       <div [style.display]="i+1===this.slide?'block':'none'" class="ion-padding-horizontal" style='text-align:center;'>
         <div>

src/popover/welcome-popover/welcome-popover.component.html

@@ -30,7 +30,7 @@
 </ion-content>
 <!--We just add 50% height for first slide of analytics, else the image wouldn't be displayed -->
 <ion-footer  class="ion-no-border" [style.maxHeight]="slide===1 ? '50%' : 'inherit'" style="overflow:auto;">
-  <swiper-container #slider allow-touch-move='false' [pagination]="{ draggable: false, clickable: false }"  pager="true">
+  <swiper-container  class='swiper' #slider allow-touch-move='false' [pagination]="{ draggable: false, clickable: false }"  pager="true">
     <swiper-slide>
       <!--Hide the long text, because else the slide would have a scrollable context -->
       <div [hidden]="slide!=1"  class="ion-padding-top ion-margin-horizontal">