dont down down arrow in logs prematurely

Start9Labs · Jun 21, 2022 · d0c23b6 · d0c23b6
1 parent 49a12ad
commit d0c23b6
Showing 1 changed file with 32 additions and 10 deletions.
diff --git a/frontend/projects/ui/src/app/components/logs/logs.page.html b/frontend/projects/ui/src/app/components/logs/logs.page.html
@@ -1,19 +1,30 @@
-<ion-content 
+<ion-content
   [scrollEvents]="true"
   (ionScroll)="scrollEvent()"
-  style="height: 100%;"
+  style="height: 100%"
   class="ion-padding"
 >
-  <ion-infinite-scroll id="scroller" *ngIf="!loading && needInfinite" position="top" threshold="0" (ionInfinite)="loadData($event)">
-    <ion-infinite-scroll-content loadingSpinner="lines"></ion-infinite-scroll-content>
+  <ion-infinite-scroll
+    id="scroller"
+    *ngIf="!loading && needInfinite"
+    position="top"
+    threshold="0"
+    (ionInfinite)="loadData($event)"
+  >
+    <ion-infinite-scroll-content
+      loadingSpinner="lines"
+    ></ion-infinite-scroll-content>
   </ion-infinite-scroll>
 
   <text-spinner *ngIf="loading" text="Loading Logs"></text-spinner>
 
   <div id="container">
-    <div id="template" style="white-space: pre-line; font-family: monospace;"></div>
+    <div
+      id="template"
+      style="white-space: pre-line; font-family: monospace"
+    ></div>
   </div>
-  <div id="button-div" *ngIf="!loading" style="width: 100%; text-align: center;">
+  <div id="button-div" *ngIf="!loading" style="width: 100%; text-align: center">
     <ion-button *ngIf="!loadingMore" (click)="loadMore()" strong color="dark">
       Load More
       <ion-icon slot="end" name="refresh"></ion-icon>
@@ -22,18 +33,29 @@
   </div>
 
   <div
+    *ngIf="!loading"
     [ngStyle]="{
       'position': 'fixed',
-      'bottom': '50px',
-      'right': isOnBottom ? '-52px' : '30px',
+      'bottom': '36px',
+      'right': isOnBottom ? '-52px' : '36px',
       'background-color': 'var(--ion-color-medium)',
       'border-radius': '100%',
       'transition': 'right 0.4s ease-out'
     }"
   >
-    <ion-button style="width: 50px; height: 50px; --padding-start: 0px; --padding-end: 0px; --border-radius: 100%;" color="dark" (click)="scrollToBottom()" strong>
+    <ion-button
+      style="
+        width: 50px;
+        height: 50px;
+        --padding-start: 0px;
+        --padding-end: 0px;
+        --border-radius: 100%;
+      "
+      color="dark"
+      (click)="scrollToBottom()"
+      strong
+    >
       <ion-icon name="chevron-down"></ion-icon>
     </ion-button>
   </div>
-
 </ion-content>