Merged PR 1278: #3204 Platform Detection and Scrollbars

#3204 Platform Detection and Scrollbars

apps/isa-app/src/app/app.component.ts

@@ -8,6 +8,7 @@ import { NotificationsHub } from '@hub/notifications';
 import packageInfo from 'package';
 import { interval, Observable, Subscription } from 'rxjs';
 import { tap } from 'rxjs/operators';
+import { Platform } from '@angular/cdk/platform';
 
 @Component({
   selector: 'app-root',
@@ -36,7 +37,8 @@ export class AppComponent implements OnInit {
     @Inject(DOCUMENT) private readonly _document: Document,
     private readonly _renderer: Renderer2,
     private readonly _swUpdate: SwUpdate,
-    private readonly _notifications: NotificationsHub
+    private readonly _notifications: NotificationsHub,
+    private readonly _platform: Platform
   ) {
     this.updateClient();
   }
@@ -44,6 +46,7 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     this.setTitle();
     this.logVersion();
+    this.determinePlatform();
 
     this._appService.getSection$().subscribe(this.sectionChangeHandler.bind(this));
   }
@@ -56,6 +59,18 @@ export class AppComponent implements OnInit {
     console.log(`%c${this._config.get('title')}\r\nVersion: ${packageInfo.version}`, 'font-weight: bold; font-size: 20px;');
   }
 
+  determinePlatform() {
+    if (this._platform.IOS && !this._platform.SAFARI) {
+      this._renderer.addClass(this._document.body, 'tablet');
+      this._renderer.addClass(this._document.body, 'tablet-native');
+    } else if (this._platform.IOS && this._platform.SAFARI) {
+      this._renderer.addClass(this._document.body, 'tablet');
+      this._renderer.addClass(this._document.body, 'tablet-browser');
+    } else if (this._platform.isBrowser) {
+      this._renderer.addClass(this._document.body, 'desktop');
+    }
+  }
+
   sectionChangeHandler(section: string) {
     if (section === 'customer') {
       this._renderer.removeClass(this._document.body, 'branch');

apps/isa-app/src/app/app.module.ts

@@ -2,6 +2,7 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { APP_INITIALIZER, ErrorHandler, Injector, LOCALE_ID, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { PlatformModule } from '@angular/cdk/platform';
 
 import { Config, ConfigModule, JsonConfigLoader } from '@core/config';
 import { AuthModule, AuthService } from '@core/auth';
@@ -81,6 +82,7 @@ export function _notificationsHubOptionsFactory(config: Config, auth: AuthServic
       registrationStrategy: 'registerWhenStable:30000',
     }),
     ScanAdapterModule.forRoot(!environment.production),
+    PlatformModule,
   ],
   providers: [
     {

apps/isa-app/src/scss/_branch.scss

@@ -1,6 +1,9 @@
 body.branch {
   --bg-color: #edeff0;
 
+  // @isa-app/scrollbar
+  --scrollbar-color: #596470;
+
   // @shell/header
   --shell-header-button-color: #89949e;
   --shell-header-button-color-active: #586470;

apps/isa-app/src/scss/_customer.scss

@@ -1,6 +1,9 @@
 body.customer {
   --bg-color: #e6eff9;
 
+  // @isa-app/scrollbar
+  --scrollbar-color: #1f466c;
+
   // @shell/header
   --shell-header-button-color: #9db2c6;
   --shell-header-button-color-active: #557596;

apps/isa-app/src/styles.scss

@@ -21,3 +21,23 @@ body {
   width: 0; // remove scrollbar space
   background: transparent; // optional: just make scrollbar invisible */
 }
+
+.desktop .scroll-bar::-webkit-scrollbar,
+.desktop pdf-viewer ::-webkit-scrollbar {
+  width: 12px;
+  background-color: transparent;
+}
+
+.desktop .scroll-bar::-webkit-scrollbar-thumb,
+.desktop pdf-viewer ::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 10%);
+  background-color: var(--scrollbar-color);
+}
+
+.desktop .scroll-bar::-webkit-scrollbar-track,
+.desktop pdf-viewer ::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 4px rgb(0 0 0 / 10%);
+  border-radius: 10px;
+  background-color: white;
+}

apps/page/catalog/src/lib/article-search/search-results/search-results.component.html

@@ -5,7 +5,7 @@
 
 <cdk-virtual-scroll-viewport
   #scrollContainer
-  class="product-list scroll-bar"
+  class="product-list scroll-bar scroll-bar-margin"
   [itemSize]="187"
   minBufferPx="1200"
   maxBufferPx="1200"

apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss

@@ -44,3 +44,9 @@
     @apply bg-brand text-white;
   }
 }
+
+::ng-deep .desktop page-search-results {
+  .scroll-bar-margin::-webkit-scrollbar-track {
+    margin-bottom: 0.5rem;
+  }
+}

apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts

@@ -7,7 +7,7 @@ import { DomainCheckoutService } from '@domain/checkout';
 import { ItemDTO } from '@swagger/cat';
 import { AddToShoppingCartDTO } from '@swagger/checkout';
 import { UiFilter } from '@ui/filter';
-import { UiErrorModalComponent, UiModalRef, UiModalService } from '@ui/modal';
+import { UiErrorModalComponent, UiModalService } from '@ui/modal';
 import { CacheService } from 'apps/core/cache/src/public-api';
 import { isEqual } from 'lodash';
 import { BehaviorSubject, combineLatest, Subscription } from 'rxjs';

apps/page/customer/src/lib/customer-search/search-results/search-results.component.scss

@@ -18,3 +18,9 @@ a {
     @apply text-lg text-brand font-bold;
   }
 }
+
+::ng-deep .desktop page-customer-search-result ui-scroll-container {
+  .scrollbar-gap::-webkit-scrollbar-track {
+    margin-bottom: 250px;
+  }
+}

apps/page/goods-in/src/lib/goods-in-cleanup-list/goods-in-cleanup-list.component.scss

@@ -60,3 +60,9 @@
 shared-goods-in-out-order-group-item {
   @apply cursor-pointer;
 }
+
+::ng-deep .desktop page-goods-in-cleanup-list ui-scroll-container {
+  .scrollbar-gap::-webkit-scrollbar-track {
+    margin-bottom: 7.25rem;
+  }
+}

apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.scss

@@ -77,3 +77,9 @@ hr {
     @apply bg-white text-brand;
   }
 }
+
+::ng-deep .desktop page-goods-in-list ui-scroll-container {
+  .scrollbar-gap::-webkit-scrollbar-track {
+    margin-bottom: 7.25rem;
+  }
+}

apps/page/goods-in/src/lib/goods-in-remission-preview/goods-in-remission-preview.component.scss

@@ -60,3 +60,9 @@ shared-goods-in-out-order-group-item {
 ::ng-deep page-goods-in-remission-preview ui-scroll-container .cta-scroll {
   bottom: 35px !important;
 }
+
+::ng-deep .desktop page-goods-in-remission-preview ui-scroll-container {
+  .scrollbar-gap::-webkit-scrollbar-track {
+    margin-bottom: 7.25rem;
+  }
+}

apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.scss

@@ -60,3 +60,9 @@ shared-goods-in-out-order-group-item {
 ::ng-deep page-goods-in-reservation ui-scroll-container .cta-scroll {
   bottom: 35px !important;
 }
+
+::ng-deep .desktop page-goods-in-reservation ui-scroll-container {
+  .scrollbar-gap::-webkit-scrollbar-track {
+    margin-bottom: 7.25rem;
+  }
+}

apps/page/goods-in/src/lib/goods-in-search/search-results/goods-in-search-results.component.scss

@@ -34,3 +34,9 @@ shared-goods-in-out-order-group-item {
 ::ng-deep page-goods-in-search-results ui-scroll-container .cta-scroll {
   bottom: 35px !important;
 }
+
+::ng-deep .desktop page-goods-in-search-results ui-scroll-container {
+  .scrollbar-gap::-webkit-scrollbar-track {
+    margin-bottom: 7.25rem;
+  }
+}

apps/page/goods-out/src/lib/goods-out-search/search-results/goods-out-search-results.component.scss

@@ -39,3 +39,9 @@ shared-goods-in-out-order-group-item {
     @apply bg-white text-brand;
   }
 }
+
+::ng-deep .desktop page-goods-out-search-results ui-scroll-container {
+  .scrollbar-gap::-webkit-scrollbar-track {
+    margin-bottom: 7.25rem;
+  }
+}

apps/page/remission/src/lib/remission-list/remission-list.component.html

@@ -9,7 +9,7 @@
 
 <cdk-virtual-scroll-viewport
   #scrollContainer
-  class="remission-list scroll-bar"
+  class="remission-list"
   [itemSize]="368"
   minBufferPx="1200"
   maxBufferPx="1200"

apps/ui/scroll-container/src/lib/scroll-container.component.scss

@@ -2,14 +2,6 @@
   @apply relative grid grid-flow-row gap-3;
 }
 
-::ng-deep ui-scroll-container .scroll-bar::-webkit-scrollbar {
-  background-color: transparent !important;
-}
-
-::ng-deep ui-scroll-container .scroll-bar::-webkit-scrollbar-track {
-  background-color: white !important;
-}
-
 .spacer {
   @apply h-px-100;
 }
@@ -25,20 +17,12 @@
 }
 
 ::ng-deep .customer ui-scroll-container {
-  .scrollbar-gap::-webkit-scrollbar-track {
-    margin-bottom: 10rem;
-  }
-
   .cta-scroll {
     @apply text-active-customer;
   }
 }
 
 ::ng-deep .branch ui-scroll-container {
-  .scrollbar-gap::-webkit-scrollbar-track {
-    margin-bottom: 15.5rem;
-  }
-
   .cta-scroll {
     @apply text-cool-grey;
   }