Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-26 10:21:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feedback fixes

Browse Source
This commit is contained in:
Lucy Cifferello
2024-04-05 09:26:32 -04:00
parent 12a323f691
commit 0b93988450
16 changed files with 80 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/projects/marketplace/src/components/menu/menu.component.scss
View File

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

2
web/projects/marketplace/src/pages/list/item/item.component.html
View File

@@ -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">

6
web/projects/marketplace/src/pages/list/item/item.component.scss
View File

@@ -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;
}
}

4
web/projects/marketplace/src/pages/list/item/item.module.ts
View File

@@ -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 {}

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

@@ -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 {

12
web/projects/marketplace/src/pages/show/about/about.component.html
View File

@@ -4,16 +4,6 @@
<p>
{{ pkg.manifest.description.long }}
</p>
<ng-container *ngIf="pkg.manifest.replaces as replaces">
<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>
<ng-content></ng-content>
</div>
</div>

19
web/projects/marketplace/src/pages/show/about/about.component.scss
View File

@@ -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;
}

18
web/projects/marketplace/src/pages/show/hero/hero.component.ts
View File

@@ -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: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
display: inline-block;
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 })

1
web/projects/shared/src/components/ticker/ticker.component.scss
View File

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

1
web/projects/shared/src/components/ticker/ticker.component.ts
View File

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

12
web/projects/shared/styles/shared.scss
View File

@@ -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;
}
}

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

@@ -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

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

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

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

@@ -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 {

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

@@ -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;

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

@@ -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 {
margin-top: 1.5rem;
.listing {
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 {