From a19f4641f4b1bd90cc2f549e3d9bd22c20993a50 Mon Sep 17 00:00:00 2001 From: Joseph Milazzo Date: Thu, 2 Jun 2022 09:22:21 -0500 Subject: [PATCH] Jumpbar Tweaks (#1305) * Adjusted the detail drawer to be slightly larger. * Attempted to shorten the jump bar on smaller screens. Robbie needs to take a look at this. * Adding plex-like styling to jumpbar * style fixes * style fixes * More fixes *sigh* * fix height issue * Fixing jumpbar on mobile * viewport height fix * added --primary-color-scrollbar for overflow across the app Co-authored-by: Robbie Davis --- UI/Web/src/app/app.component.html | 2 +- .../card-detail-drawer.component.scss | 2 +- .../card-detail-layout.component.html | 83 +++++-------------- .../card-detail-layout.component.scss | 55 +++++++++++- .../card-detail-layout.component.ts | 20 ++++- UI/Web/src/styles.scss | 12 +++ UI/Web/src/theme/themes/dark.scss | 1 + 7 files changed, 106 insertions(+), 69 deletions(-) diff --git a/UI/Web/src/app/app.component.html b/UI/Web/src/app/app.component.html index ffa817a4b..6a5d29b76 100644 --- a/UI/Web/src/app/app.component.html +++ b/UI/Web/src/app/app.component.html @@ -3,7 +3,7 @@
-
+
diff --git a/UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.scss b/UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.scss index 1dcb9aeac..2db0d16b3 100644 --- a/UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.scss +++ b/UI/Web/src/app/cards/card-detail-drawer/card-detail-drawer.component.scss @@ -12,5 +12,5 @@ .tab-content { overflow: auto; - height: calc(40vh - 62px); // drawer height - offcanvas heading height + height: calc(45vh - 63px); // drawer height - offcanvas heading height } diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html index a3f1f36e7..a06f80af6 100644 --- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html +++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html @@ -14,18 +14,16 @@
- - - -
- +
+
+ +
+ +
- - - -
+
@@ -36,64 +34,21 @@ - -
- -
- -
- - - -
  • -
    - - - - of {{pagination.totalPages}} -
    -
    • -     - -     -
    - -
    - -
    -     +
    -
    \ No newline at end of file +
    + + +
    + + + +
    +     \ No newline at end of file diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss index 0ddbed57f..50c6e4e18 100644 --- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss +++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss @@ -1,6 +1,59 @@ +.content-container { + display: inline-flex; + width: 100%; + height: calc((var(--vh) *100) - 152px); +} + .card-container { + display: inline-block; + width: 100%; +} + +.grid { display: grid; grid-template-columns: repeat(auto-fill, 158px); grid-gap: 0.5rem; justify-content: space-around; -} \ No newline at end of file + width: 100%; + max-height: calc((var(--vh) *100) - 152px); + overflow-y: auto; + overflow-x: hidden; + align-items: start; +} + +.jump-bar { + display: flex; + flex-flow: column; + flex-shrink: 0; + font-size: 13px; + overflow: hidden; + padding: 0 10px; + align-items: center; + justify-content: space-around; + + .btn { + text-decoration: none; + color: hsla(0,0%,100%,.7); + height: 25px; + text-align: center; + -webkit-tap-highlight-color: transparent; + background: none; + border: 0; + border-radius: 0; + cursor: pointer; + line-height: inherit; + margin: 0; + outline: none; + padding: 0; + text-align: inherit; + text-decoration: none; + touch-action: manipulation; + transition: color .2s; + -webkit-user-select: none; + user-select: none; + + &:hover { + color: var(--primary-color); + } + } +} diff --git a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts index d681dea81..53b5c2649 100644 --- a/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts +++ b/UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts @@ -1,5 +1,5 @@ import { DOCUMENT } from '@angular/common'; -import { AfterViewInit, Component, ContentChild, EventEmitter, Inject, Input, OnDestroy, OnInit, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core'; +import { AfterViewInit, Component, ContentChild, EventEmitter, HostListener, Inject, Input, OnDestroy, OnInit, Output, Renderer2, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core'; import { from, Subject } from 'rxjs'; import { FilterSettings } from 'src/app/metadata-filter/filter-settings'; import { Breakpoint, UtilityService } from 'src/app/shared/_services/utility.service'; @@ -38,7 +38,8 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, AfterViewIn @Input() trackByIdentity!: (index: number, item: any) => string; @Input() filterSettings!: FilterSettings; - @Input() jumpBarKeys: Array = []; + + @Input() jumpBarKeys: Array = []; // This is aprox 784 pixels wide @Output() itemClicked: EventEmitter = new EventEmitter(); @Output() pageChange: EventEmitter = new EventEmitter(); @@ -67,6 +68,21 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, AfterViewIn this.filter = this.seriesService.createSeriesFilter(); } + @HostListener('window:resize', ['$event']) + @HostListener('window:orientationchange', ['$event']) + resizeJumpBar() { + console.log('resizing jump bar'); + //const breakpoint = this.utilityService.getActiveBreakpoint(); + // if (window.innerWidth < 784) { + // // We need to remove a few sections of keys + // const len = this.jumpBarKeys.length; + // if (this.jumpBarKeys.length <= 8) return; + // this.jumpBarKeys = this.jumpBarKeys.filter((item, index) => { + // return index % 2 === 0; + // }); + // } + } + ngOnInit(): void { this.trackByIdentity = (index: number, item: any) => `${this.header}_${this.pagination?.currentPage}_${this.updateApplied}_${item?.libraryId}`; diff --git a/UI/Web/src/styles.scss b/UI/Web/src/styles.scss index 3b6b99179..65794a6a8 100644 --- a/UI/Web/src/styles.scss +++ b/UI/Web/src/styles.scss @@ -67,3 +67,15 @@ label, select, .clickable { app-root { background-color: inherit; } + +::-webkit-scrollbar { + width: 14px; +} + +::-webkit-scrollbar-thumb { + background-clip: padding-box; + background-color: var(--primary-color-scrollbar); + border: 3px solid transparent; + border-radius: 8px; + min-height: 50px; +} diff --git a/UI/Web/src/theme/themes/dark.scss b/UI/Web/src/theme/themes/dark.scss index 91219d354..e2ed25ef4 100644 --- a/UI/Web/src/theme/themes/dark.scss +++ b/UI/Web/src/theme/themes/dark.scss @@ -8,6 +8,7 @@ --bs-body-bg: #343a40; --body-text-color: #efefef; --btn-icon-filter: invert(1) grayscale(100%) brightness(200%); + --primary-color-scrollbar: rgba(74,198,148,0.75); /* Navbar */ --navbar-bg-color: black;