Fix mobile view.

Crystal-Nest · May 19, 2024 · e8f29eb · e8f29eb
1 parent d6ca741
commit e8f29eb
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 24 deletions.
diff --git a/docs/chunk-V3ZU3IA3.js → docs/chunk-23XMVVC5.js b/docs/chunk-V3ZU3IA3.js → docs/chunk-23XMVVC5.js
diff --git a/docs/chunk-QYAZOMJI.js → docs/chunk-NIA7OBHP.js b/docs/chunk-QYAZOMJI.js → docs/chunk-NIA7OBHP.js
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/main-GJXMX3SI.js → docs/main-2OWYKZ2U.js b/docs/main-GJXMX3SI.js → docs/main-2OWYKZ2U.js
diff --git a/src/app/shared/component/button/link-button/link-button.component.scss b/src/app/shared/component/button/link-button/link-button.component.scss
@@ -6,7 +6,6 @@
   a:hover,
   a:active {
     height: 100%;
-    width: fit-content;
     text-decoration: none;
     font-size: inherit;
     color: inherit;

diff --git a/src/app/shared/component/card/card.component.html b/src/app/shared/component/card/card.component.html
@@ -6,7 +6,7 @@
   </mat-card-header>
   <img mat-card-image [src]="preview" />
   <mat-card-content>
-    <markdown #description class="description" [class.scrollable]="scrollable" [class.scrollable-top]="!scrollable" [data]="mod.description" (scroll)="checkScrolledToBottom($event)" />
+    <markdown #description class="description" [class.scrollable-bottom]="scrollableBottom" [class.scrollable-top]="scrollableTop" [data]="mod.description" (scroll)="checkScrolledToBottom($event)" />
     <div class="cn-grid-tiny details">
       <cn-label class="cn-cell-12" label="Minecraft" [value]="mod.versions" />
       <cn-label class="cn-cell-12" label="Loader" [icons]="mod.loaders" [value]="formatLoaders(mod.loaders)" />

diff --git a/src/app/shared/component/card/card.component.scss b/src/app/shared/component/card/card.component.scss
@@ -9,12 +9,16 @@
         max-height: 20rem;
         overflow-y: auto;
 
-        &.scrollable {
-          mask-image: linear-gradient(180deg, #000 80%, transparent);
+        &.scrollable-bottom {
+          mask-image: linear-gradient(0deg, transparent, #202020 20%);
         }
 
         &.scrollable-top {
-          mask-image: linear-gradient(0deg, #000 80%, transparent);
+          mask-image: linear-gradient(180deg, transparent, #202020 20%);
+        }
+
+        &.scrollable-bottom.scrollable-top {
+          mask-image: linear-gradient(0deg, transparent, #202020 20%, #202020 80%, transparent 100%);
         }
       }
 

diff --git a/src/app/shared/component/card/card.component.ts b/src/app/shared/component/card/card.component.ts
@@ -128,12 +128,20 @@ export class CardComponent implements OnChanges, AfterContentChecked {
   public template = '';
 
   /**
-   * Whether the description block is scrollable.
+   * Whether the description block is scrollable above.
    *
    * @public
    * @type {boolean}
    */
-  public scrollable = false;
+  public scrollableTop = false;
+
+  /**
+   * Whether the description block is scrollable below.
+   *
+   * @public
+   * @type {boolean}
+   */
+  public scrollableBottom = false;
 
   /**
    * @inheritdoc
@@ -162,9 +170,10 @@ export class CardComponent implements OnChanges, AfterContentChecked {
    * @public
    */
   public ngAfterContentChecked() {
-    if (!this.scrollable) {
+    if (!this.scrollableTop || !this.scrollableBottom) {
       const {offsetHeight, scrollHeight, scrollTop} = this.markdownComponent.element.nativeElement;
-      this.scrollable = offsetHeight < scrollHeight && scrollTop !== (scrollHeight - offsetHeight);
+      this.scrollableTop = scrollTop > 0;
+      this.scrollableBottom = offsetHeight < scrollHeight && scrollTop !== (scrollHeight - offsetHeight);
     }
   }
 
@@ -175,8 +184,12 @@ export class CardComponent implements OnChanges, AfterContentChecked {
    * @param {Event} event
    */
   public checkScrolledToBottom(event: Event) {
-    if (event.type === 'scroll' && event.target instanceof HTMLElement && event.target.scrollTop === (event.target.scrollHeight - event.target.offsetHeight)) {
-      this.scrollable = false;
+    if (event.type === 'scroll' && event.target instanceof HTMLElement) {
+      if (event.target.scrollTop === 0) {
+        this.scrollableTop = false;
+      } else if (event.target.scrollTop === (event.target.scrollHeight - event.target.offsetHeight)) {
+        this.scrollableBottom = false;
+      }
     }
   }