feedback fixes

web/projects/marketplace/src/components/menu/menu.component.scss

@@ -65,6 +65,7 @@ header {
     color: rgb(244 244 245);
     text-align: center;
     margin-bottom: 0.75rem;
+    pointer-events: none;
   }
 }
 

web/projects/marketplace/src/pages/list/item/item.component.html

@@ -12,7 +12,7 @@
     alt="{{ pkg.manifest.title }} Icon"
   />
   <div class="detail">
-    <span class="detail-title">
+    <span class="detail-title" ticker>
       {{ pkg.manifest.title }}
     </span>
     <span class="detail-description">

web/projects/marketplace/src/pages/list/item/item.component.scss

@@ -66,14 +66,11 @@
   mix-blend-mode: plus-lighter;
 
   &-title {
+    display: inline-block;
     font-size: 1.5rem;
     line-height: 2rem;
     margin-bottom: 0.25rem;
     font-weight: 400;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
   }
 
   &-description {
@@ -85,5 +82,6 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
+    pointer-events: none;
   }
 }

web/projects/marketplace/src/pages/list/item/item.module.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { RouterModule } from '@angular/router'
-import { SharedPipesModule } from '@start9labs/shared'
+import { SharedPipesModule, TickerModule } from '@start9labs/shared'
 import { ItemComponent } from './item.component'
 
 @NgModule({
   declarations: [ItemComponent],
   exports: [ItemComponent],
-  imports: [CommonModule, RouterModule, SharedPipesModule],
+  imports: [CommonModule, RouterModule, SharedPipesModule, TickerModule],
 })
 export class ItemModule {}

web/projects/marketplace/src/pages/release-notes/release-notes.component.scss

@@ -19,12 +19,14 @@
       h3 {
         font-size: 1.2rem;
         margin-bottom: 1.25rem;
+        pointer-events: none;
       }
     }
-
+    
     &-notes {
       flex-wrap: wrap;
       margin-top: 0.25rem;
+      pointer-events: none;
     }
 
     button {

web/projects/marketplace/src/pages/show/about/about.component.html

@@ -4,16 +4,6 @@
     <p>
       {{ pkg.manifest.description.long }}
     </p>
-    <ng-container *ngIf="pkg.manifest.replaces as replaces">
+    <ng-content></ng-content>
-      <div *ngIf="replaces.length">
-        <h2 class="replaces">Intended to replace:</h2>
-        <tui-tag
-          *ngFor="let app; index as i; of: replaces"
-          size="l"
-          [class]="i > 0 ? 'tag-margin-full' : 'tag-margin-empty'"
-          [value]="app"
-        ></tui-tag>
-      </div>
-    </ng-container>
   </div>
 </div>

web/projects/marketplace/src/pages/show/about/about.component.scss

@@ -14,23 +14,6 @@
     font-size: 1rem;
     line-height: 1.5rem;
     margin-bottom: 0.75rem;
+    pointer-events: none;
   }
-}
-
-.tag-margin-full {
-  margin-left: 0.375rem;
-  margin-top: 0.5rem;
-}
-
-.tag-margin-empty {
-  margin-top: 0.5rem;
-}
-
-.replaces {
-  margin: 1.5rem 0 1rem 0;
-  font-family: 'Montserrat';
-  font-size: 0.75rem;
-  font-weight: 300;
-  letter-spacing: .06rem;
-  text-transform: uppercase;
 }

web/projects/marketplace/src/pages/show/hero/hero.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { SharedPipesModule } from '@start9labs/shared'
+import { SharedPipesModule, TickerModule } from '@start9labs/shared'
 import { MarketplacePkg } from '../../../types'
 
 @Component({
@@ -24,7 +24,7 @@ import { MarketplacePkg } from '../../../types'
         <!-- background darkening overlay -->
         <div class="dark-overlay"></div>
         <div class="inner-container-title">
-          <h2>
+          <h2 ticker>
             {{ pkg.manifest.title }}
           </h2>
           <h3>
@@ -63,6 +63,7 @@ import { MarketplacePkg } from '../../../types'
         @media (min-width: 376px) {
           min-height: 26vh;
         }
+
         @media (min-width: 768px) {
           min-height: 14rem;
         }
@@ -87,14 +88,15 @@ import { MarketplacePkg } from '../../../types'
           mix-blend-mode: plus-lighter;
           z-index: 1;
 
+          @media (min-width: 768px) {
+            max-width: 22rem;
+          }
+
           h2 {
             font-size: 2rem;
             line-height: 3rem;
             font-weight: 400;
-            overflow: hidden;
+            display: inline-block;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 1;
             margin-left: -1px;
           }
 
@@ -102,12 +104,14 @@ import { MarketplacePkg } from '../../../types'
             font-size: 1.1rem;
             font-weight: 400;
             margin-bottom: 1rem;
+            pointer-events: none;
           }
 
           p {
             font-size: 1rem;
             line-height: 1.5rem;
             font-weight: 300;
+            pointer-events: none;
             overflow: hidden;
             display: -webkit-box;
             -webkit-box-orient: vertical;
@@ -153,7 +157,7 @@ import { MarketplacePkg } from '../../../types'
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, SharedPipesModule],
+  imports: [CommonModule, SharedPipesModule, TickerModule],
 })
 export class MarketplacePackageHeroComponent {
   @Input({ required: true })

web/projects/shared/src/components/ticker/ticker.component.scss

@@ -8,5 +8,6 @@
   &:hover {
     text-indent: var(--indent, 0);
     text-overflow: clip;
+    cursor: all-scroll;
   }
 }

web/projects/shared/src/components/ticker/ticker.component.ts

@@ -21,7 +21,6 @@ export class TickerComponent {
   @HostListener('mouseenter')
   onMouseEnter() {
     const { scrollWidth, clientWidth } = this.elementRef.nativeElement
-
     this.indent = Math.ceil(clientWidth - scrollWidth)
   }
 }

web/projects/shared/styles/shared.scss

@@ -319,7 +319,7 @@ ion-modal {
 
 a {
   cursor: pointer;
-  color: aqua;
+  color: inherit;
   text-decoration: none;
 }
 
@@ -334,7 +334,7 @@ a {
 .background-border {
   border-radius: 0.75rem;
   background-image: linear-gradient(
-    to bottom left,
+    to top left,
     rgb(161 161 170 / 0.75),
     #52525b
   );
@@ -366,6 +366,7 @@ a {
   text-transform: uppercase;
   letter-spacing: .06rem;
   margin-bottom: 1rem;
+  pointer-events: none;
 }
 
 .buttons {
@@ -376,11 +377,6 @@ a {
   }
 }
 
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
 h1,
 h2,
 h3,
@@ -389,4 +385,4 @@ h5,
 h6,
 hr {
   margin: 0;
-}
+}

web/projects/ui/src/app/apps/portal/routes/system/marketplace/components/controls.component.ts

@@ -37,14 +37,6 @@ import { ToManifestPipe } from 'src/app/apps/portal/pipes/to-manifest'
   selector: 'marketplace-controls',
   template: `
     @if (localPkg) {
-      <button
-        tuiButton
-        type="button"
-        appearance="primary"
-        (click)="showService()"
-      >
-        View Installed
-      </button>
       @if (
         localPkg.stateInfo.state === 'installed' && (localPkg | toManifest);
         as localManifest
@@ -54,7 +46,7 @@ import { ToManifestPipe } from 'src/app/apps/portal/pipes/to-manifest'
             <button
               tuiButton
               type="button"
-              appearance="secondary-solid"
+              appearance="warning-solid"
               (click)="tryInstall()"
             >
               Downgrade
@@ -64,7 +56,7 @@ import { ToManifestPipe } from 'src/app/apps/portal/pipes/to-manifest'
             <button
               tuiButton
               type="button"
-              appearance="warning-solid"
+              appearance="primary"
               (click)="tryInstall()"
             >
               Update
@@ -84,6 +76,14 @@ import { ToManifestPipe } from 'src/app/apps/portal/pipes/to-manifest'
           }
         }
       }
+      <button
+        tuiButton
+        type="button"
+        appearance="outline"
+        (click)="showService()"
+      >
+        View Installed
+      </button>
     } @else {
       <button
         tuiButton

web/projects/ui/src/app/apps/portal/routes/system/marketplace/components/notification.component.ts

@@ -55,6 +55,7 @@ import { ConfigService } from 'src/app/services/config.service'
     `
       .notification-wrapper {
         margin: 1rem;
+        pointer-events: none;
       }
     `,
   ],

web/projects/ui/src/app/apps/portal/routes/system/marketplace/components/tile.component.ts

@@ -81,6 +81,11 @@ import { MarketplaceSidebarService } from '../services/sidebar.service'
 
       .close-button {
         place-self: end;
+        margin-bottom: 0;
+
+        @media (min-width: 768px) {
+          margin-bottom: 2rem;
+        }
       }
 
       .controls-wrapper {

web/projects/ui/src/app/apps/portal/routes/system/marketplace/marketplace.component.ts

@@ -74,10 +74,6 @@ import { TuiScrollbarModule } from '@taiga-ui/core'
         &-inner {
           padding-top: 6rem;
 
-          // @media (min-width: 640px) {
-          //   padding-top: 0.75rem;
-          // }
-
           @media (min-width: 768px) {
             padding: 0 2rem 2.5rem 2rem;
           }
@@ -91,6 +87,7 @@ import { TuiScrollbarModule } from '@taiga-ui/core'
               line-height: 2.5rem;
               font-weight: 700;
               color: rgb(250 250 250 / 0.8);
+              pointer-events: none;
 
               @media (min-width: 640px) {
                 font-size: 3rem;

web/projects/ui/src/app/apps/portal/routes/system/marketplace/modals/preview.component.ts

@@ -18,7 +18,7 @@ import {
   StoreIdentity,
 } from '@start9labs/marketplace'
 import { displayEmver, Emver, SharedPipesModule } from '@start9labs/shared'
-import { TuiButtonModule } from '@taiga-ui/experimental'
+import { TuiButtonModule, TuiIconModule } from '@taiga-ui/experimental'
 import { BehaviorSubject, filter, switchMap, tap } from 'rxjs'
 import {
   TuiDialogContext,
@@ -44,19 +44,20 @@ import { Router } from '@angular/router'
           <marketplace-package-hero [pkg]="pkg">
             <ng-content select="[slot=controls]" />
           </marketplace-package-hero>
-          @if (hostInfo$ | async; as info) {
-            <a
-              [href]="constructDetailLink(info, pkg.manifest.id)"
-              tuiButton
-              appearance="tertiary-solid"
-              iconRight="tuiIconExternalLink"
-              target="_blank"
-            >
-              View more details
-            </a>
-          }
           <div class="inner-container">
-            <marketplace-about [pkg]="pkg" />
+            <marketplace-about [pkg]="pkg">
+              @if (hostInfo$ | async; as info) {
+                <a
+                  [href]="constructDetailLink(info, pkg.manifest.id)"
+                  rel="noreferrer"
+                  target="_blank"
+                  class="listing"
+                >
+                  View complete listing
+                  <tui-icon icon="tuiIconExternalLink" />
+                </a>
+              }
+            </marketplace-about>
             @if (!(pkg.manifest.dependencies | empty)) {
               <marketplace-dependencies
                 [pkg]="pkg"
@@ -64,7 +65,7 @@ import { Router } from '@angular/router'
               ></marketplace-dependencies>
             }
             <release-notes [pkg]="pkg" />
-            <marketplace-additional class="additional-wrapper" [pkg]="pkg">
+            <marketplace-additional [pkg]="pkg">
               <marketplace-additional-item
                 (click)="presentAlertVersions(pkg, version)"
                 data="Click to view all versions"
@@ -114,9 +115,14 @@ import { Router } from '@angular/router'
 
       .outer-container {
         display: grid;
-        gap: 2rem;
         padding: 1.75rem;
-        min-width: 30rem;
+        min-width: 100%;
+        margin-top: 5rem;
+
+        @media (min-width: 768px) {
+          min-width: 30rem;
+          margin-top: 0;
+        }
       }
 
       .inner-container {
@@ -125,8 +131,19 @@ import { Router } from '@angular/router'
         column-gap: 2rem;
       }
 
-      .additional-wrapper {
+      .listing {
-        margin-top: 1.5rem;
+        font-size: 0.9rem;
+        // @TODO theme
+        color: #8059e5;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 0.3rem;
+
+        tui-icon {
+          width: 0.8em;
+          height: 0.8em;
+        }
       }
 
       .versions {
@@ -158,6 +175,7 @@ import { Router } from '@angular/router'
     MarketplaceAdditionalItemComponent,
     TuiRadioListModule,
     TuiLoaderModule,
+    TuiIconModule,
   ],
 })
 export class MarketplacePreviewComponent {