Scrollable Side-to-side button row presentation for mobile

CSCfi · Apr 18, 2024 · ed5c2f5 · ed5c2f5
1 parent 76ea19a
commit ed5c2f5
Show file tree

Hide file tree

Showing 6 changed files with 253 additions and 103 deletions.
diff --git a/src/app/portal/components/tab-navigation-button/tab-navigation-button.component.html b/src/app/portal/components/tab-navigation-button/tab-navigation-button.component.html
@@ -0,0 +1,15 @@
+<a [routerLink]='routerLink' [queryParams]='queryParams' [class.active-text]='active'>
+  <div>
+    {{label}}
+  </div>
+
+  <ng-container *ngIf='count !== -1'>
+    <div [countUp]="count" [options]="countOps" [reanimateOnClick]='false'>
+      {{count}}
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf='count === -1'>
+    <div></div>
+  </ng-container>
+</a>
diff --git a/src/app/portal/components/tab-navigation-button/tab-navigation-button.component.scss b/src/app/portal/components/tab-navigation-button/tab-navigation-button.component.scss
@@ -0,0 +1,45 @@
+:host {
+  display: inline-block;
+  padding: 10px 20px;
+
+  width: 180px;
+  flex: 0 0 180px;
+  height: 90px;
+
+  text-align: center;
+  cursor: pointer;
+  scroll-snap-align: start;
+
+  box-sizing: border-box;
+
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #4546B9;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+  user-select: none;
+}
+
+.active-text {
+  font-weight: 700;
+}
+
+.active {
+  border: #3366cc 1px solid;
+  border-bottom: initial;
+}
+
+.not-active {
+  background-color: #e8e8f5;
+  border-top: 15px solid white;
+  border-bottom: #3366cc 1px solid;
+}
+
+.disabled {
+  background-color: #f0f0f0;
+  color: #b3b3b3;
+  cursor: not-allowed;
+}
diff --git a/src/app/portal/components/tab-navigation-button/tab-navigation-button.component.ts b/src/app/portal/components/tab-navigation-button/tab-navigation-button.component.ts
@@ -0,0 +1,33 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink, RouterLinkWithHref } from '@angular/router';
+import { CountUpModule } from 'ngx-countup';
+
+@Component({
+  selector: 'app-tab-navigation-button',
+  standalone: true,
+  imports: [CommonModule, RouterLink, RouterLinkWithHref, CountUpModule],
+  templateUrl: './tab-navigation-button.component.html',
+  styleUrls: ['./tab-navigation-button.component.scss']
+})
+export class TabNavigationButtonComponent {
+  @Input() label: string;
+  @Input() count: number;
+
+  @Input() routerLink: string;
+  @Input() queryParams: any;
+
+  @Input() active = false;
+  @Input() disabled = false;
+
+  @HostBinding('class.active') get isActive() { return this.active; }
+  @HostBinding('class.not-active') get isNotActive() { return !this.active; }
+  @HostBinding('class.disabled') get isDisabled() { return this.disabled; }
+
+  countOps = {
+    duration: 0.5,
+    separator: ' ',
+  };
+}
+
+
diff --git a/src/app/portal/components/tab-navigation/tab-navigation.component.html b/src/app/portal/components/tab-navigation/tab-navigation.component.html
@@ -9,7 +9,7 @@
                       [active]='button.active'
                       [disabled]='button.disabled'
                       [routerLink]='button.route + "/" + ((input$ | async) ?? "")'
-                      [queryParams]='queryParams$ | async'>
+                      [queryParams]='pageSizeParams$ | async'>
       </app-tab-button>
 
     </ng-container>
@@ -24,7 +24,7 @@
                       [active]='button.active'
                       [disabled]='button.disabled'
                       [routerLink]='button.route + "/" + ((input$ | async) ?? "")'
-                      [queryParams]='queryParams$ | async'>
+                      [queryParams]='pageSizeParams$ | async'>
       </app-tab-button>
 
     </ng-container>
@@ -48,37 +48,49 @@
   </ng-container>
 </ng-container>
 
+<div> {{ scrollAtStart$ | async }} {{ scrollAtEnd$ | async }}</div>
 
-<div style='display: flex'>
-  <button (click)='scrollTo(0)'>0</button>
-  <button (click)='scrollTo(1)'>1</button>
-  <button (click)='scrollTo(2)'>2</button>
-  <button (click)='scrollTo(3)'>3</button>
-  <button (click)='scrollTo(4)'>4</button>
-  <button (click)='scrollTo(5)'>5</button>
-  <button (click)='scrollTo(6)'>6</button>
-  <button (click)='scrollTo(7)'>7</button>
-  <button (click)='scrollTo(8)'>8</button>
-</div>
+<div class='scroll-wrapper'>
 
-<div style='display: flex'>
-  <button (click)='scrollLeft()'>LEFT</button>
-  <button (click)='scrollRight()'>RIGHT</button>
-</div>
+  <div class='left-btn left-gradient-container' [style.visibility]='(scrollAtStart$ | async) === false ? "visible" : "hidden"' (click)='scrollLeft()'>
+    <div class='nav-arrow'>
+      <fa-icon [icon]="faArrowLeft"></fa-icon>
+    </div>
+  </div>
 
-<div class='scrollmenu' #scroll>
+  <div class='right-btn right-gradient-container' [style.visibility]='(scrollAtEnd$ | async) === false ? "visible" : "hidden"' (click)='scrollRight()'>
+    <div class='nav-arrow'>
+      <fa-icon [icon]="faArrowRight"></fa-icon>
+    </div>
+  </div>
 
-  <ng-container *ngIf='defaultOrderButtons$ | async as buttons'>
-    <ng-container *ngFor='let button of buttons; trackBy: trackByLabel'>
-      <div class='nav-btn' [class.active]='button.active' [class.not-active]='!button.active' [class.disabled]='button.disabled'>
-        {{ button.label }} <br> {{ button.count }}
-      </div>
+  <div class='scroll-menu' #scroll>
+
+    <ng-container *ngIf='defaultOrderButtons$ | async as buttons'>
+      <ng-container *ngFor='let button of buttons; trackBy: trackByLabel'>
+
+        <!--<div class='nav-btn222' [class.active]='button.active' [class.not-active]='!button.active' [class.disabled]='button.disabled'>
+          {{ button.label }} <br> {{ button.count }}
+        </div>-->
+
+        <app-tab-navigation-button [label]='button.label'
+                                   [count]='button.count'
+                                   [active]='button.active'
+                                   [disabled]='button.disabled'
+                                   [routerLink]='button.route + "/" + ((input$ | async) ?? "")'
+                                   [queryParams]='pageSizeParams$ | async'>
+        </app-tab-navigation-button>
+      </ng-container>
     </ng-container>
-  </ng-container>
+
+  </div>
 
 </div>
 
 
 
 
 
+
+
+
diff --git a/src/app/portal/components/tab-navigation/tab-navigation.component.scss b/src/app/portal/components/tab-navigation/tab-navigation.component.scss
@@ -47,8 +47,15 @@
 
 /********************************/
 
-/* scrollable-navigation.component.css */
-.scrollmenu {
+.scroll-wrapper {
+  position: relative; /* Contains the absolute positioning of the buttons */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 100%;
+}
+
+.scroll-menu {
   overflow-x: auto;
   white-space: nowrap;
   scroll-snap-type: x mandatory;  /* Setting up horizontal snapping */
@@ -67,9 +74,11 @@
   }*/
 
   scrollbar-width: none;
+
+  // position: relative;
 }
 
-.nav-btn {
+.nav-btn222 {
   display: inline-block;
   padding: 10px 20px;
   // margin-right: 10px;
@@ -111,27 +120,63 @@
   cursor: not-allowed;
 }
 
-/*.button-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}*/
+.left-btn, .right-btn {
+  position: absolute;
+  bottom: 0;
+  z-index: 9;
+}
 
-/* Optional: Styling the scrollbar for aesthetics */
-/*.scrollmenu::-webkit-scrollbar {
-  height: 8px;
+.left-btn {
+  left: 8px;
+  bottom: 8px;
 }
 
-.scrollmenu::-webkit-scrollbar-track {
-  background-color: #f0f0f0;
+.right-btn {
+  right: 8px;
+  bottom: 8px;
+}
+
+.left-gradient-container {
+  position: absolute;
+  z-index: 10;
+  width: 75px;
+  height: 95px;
+  left: 0;
+  background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
 }
 
-.scrollmenu::-webkit-scrollbar-thumb {
-  background-color: #888;
+.right-gradient-container {
+  position: absolute;
+  z-index: 10;
+  width: 50px;
+  height: 95px;
+  right: 0;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
 }
 
-.scrollmenu::-webkit-scrollbar-thumb:hover {
-  background-color: #555;
-}*/
+.nav-arrow {
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  flex: 0 0 50px;
+
+  margin-top: 40px;
+
+  border-radius: 50%;
+  box-shadow: 1px 3px 3px;
+
+  background-color: #4546b9;
+  color: white;
+
+  font-size: 2em;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  fa-icon {
+    display: block;
+    margin-top: 2px;
+    margin-left: 1px;
+  }
+}