Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-30 20:14:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

marketplace release fixes and refactors

Browse Source
This commit is contained in:
Lucy Cifferello
2024-04-01 18:09:28 -04:00
parent 352b2fb4e7
commit 0d4ebffc0e
43 changed files with 748 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
web/projects/marketplace/src/components/menu/menu.component.html
View File

@@ -4,7 +4,7 @@
<store-icon
[class.tui-skeleton]="!store"
[class.tui-skeleton_rounded]="!store"
size="64px"
size="60px"
[url]="store?.url || ''"
[marketplace]="iconConfig"
></store-icon>
@@ -27,13 +27,14 @@
type="button"
appearance="flat"
[pseudoActive]="false"
[pseudoHover]="false"
(click)="toggleMenu(true)"
(tuiActiveZoneChange)="toggleMenu($event)"
[style.--tui-padding]="'1rem'"
[style.--tui-padding]="'1.2rem'"
>
<store-icon
size="48px"
[style.height]="'48px'"
size="42px"
[style.height]="'42px'"
[style.border-radius]="'100%'"
[url]="store?.url || ''"
[marketplace]="iconConfig"
@@ -66,17 +67,22 @@
[category]="query ? '' : category"
(categoryChange)="onCategoryChange($event); toggleMenu(false)"
></marketplace-categories>
<a
target="_blank"
href="https://github.com/Start9Labs/service-pipeline#readme"
>
<!-- @TODO need rocket icon -->
<tui-icon
tuiAppearance="icon"
icon="tuiIconExternalLinkLarge"
></tui-icon>
<span>Launch your project</span>
</a>
<div>
<!-- link to store for brochure -->
<ng-content select="[slot=store-mobile]"></ng-content>
<a
target="_blank"
rel="noreferrer"
href="https://docs.start9.com/0.3.5.x/developer-docs/"
>
<!-- @TODO need rocket icon -->
<span>Package a service</span>
<tui-icon
tuiAppearance="icon"
icon="tuiIconExternalLinkLarge"
></tui-icon>
</a>
</div>
</div>
</nav>
</button>
@@ -95,17 +101,22 @@
[category]="query ? '' : category"
(categoryChange)="onCategoryChange($event)"
></marketplace-categories>
<a
target="_blank"
href="https://github.com/Start9Labs/service-pipeline#readme"
>
<!-- @TODO need rocket icon -->
<tui-icon
tuiAppearance="icon"
icon="tuiIconExternalLinkLarge"
></tui-icon>
<span>Launch your project</span>
</a>
<div>
<!-- link to store for brochure -->
<ng-content select="[slot=store]"></ng-content>
<a
target="_blank"
rel="noreferrer"
href="https://docs.start9.com/0.3.5.x/developer-docs/"
>
<!-- @TODO need rocket icon -->
<span>Package a service</span>
<tui-icon
tuiAppearance="icon"
icon="tuiIconExternalLinkLarge"
></tui-icon>
</a>
</div>
</div>
</nav>
</ng-container>

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

@@ -14,12 +14,12 @@ header {
flex-direction: column;
z-index: 10;
@media screen and (min-width: 640px) {
width: 15rem;
@media screen and (min-width: 768px) {
width: 17rem;
background-color: rgb(var(--tw-color-zinc-700) / 0.9);
backdrop-filter: blur(40px);
min-height: calc(100vh - var(--portal-header-height));
padding: 1.5rem 0;
padding: 2rem 0 1.5rem 0;
&::after {
display: block;
@@ -36,12 +36,16 @@ header {
);
}
}
@media screen and (min-width: 1536px) {
width: 18rem;
}
}
.title {
display: none;
@media (min-width: 640px) {
@media (min-width: 768px) {
display: flex;
flex-direction: column;
align-items: center;
@@ -74,9 +78,10 @@ header {
marketplace-search {
place-self: center;
padding-bottom: 2rem;
width: 100%;
}
@media (min-width: 640px) {
@media (min-width: 768px) {
display: flex;
flex-grow: 1;
flex-direction: column;
@@ -88,27 +93,17 @@ header {
flex-direction: column;
justify-content: space-between;
a {
::ng-deep a {
display: flex;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem;
z-index: 50;
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 75ms;
transition-duration: 300ms;
&:hover {
text-decoration-line: none;
cursor: pointer;
}
img {
opacity: 0.7;
filter: invert(100%);
}
span {
font-size: 1rem;
line-height: 1.5rem;
@@ -117,31 +112,23 @@ header {
overflow: hidden;
white-space: nowrap;
}
@media (min-width: 640px) {
width: 120%;
&:hover {
background-color: rgb(34 36 40);
}
}
}
}
}
&-mobile {
@media (min-width: 640px) {
@media (min-width: 768px) {
display: none;
}
&-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
width: 100vw;
marketplace-search {
max-width: fit-content;
flex-grow: 1;
}
}
@@ -184,9 +171,8 @@ header {
padding: 1.25rem 1.25rem 0px 1.25rem;
}
a {
::ng-deep a {
display: flex;
position: relative;
gap: 0.5rem;
padding: 1.25rem;
@@ -194,11 +180,6 @@ header {
text-decoration-line: none;
}
img {
opacity: 0.7;
filter: invert(100%);
}
span {
font-size: 1rem;
line-height: 1.5rem;

3
web/projects/marketplace/src/components/store-icon/store-icon.component.module.ts
View File

@@ -1,11 +1,10 @@
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { TuiIconModule } from '@taiga-ui/experimental'
import { StoreIconComponent } from './store-icon.component'
@NgModule({
declarations: [StoreIconComponent],
imports: [CommonModule, TuiIconModule],
imports: [CommonModule],
exports: [StoreIconComponent],
})
export class StoreIconComponentModule {}

8
web/projects/marketplace/src/components/store-icon/store-icon.component.ts
View File

@@ -9,10 +9,14 @@ import { MarketplaceConfig, sameUrl } from '@start9labs/shared'
[style.border-radius.%]="100"
[style.max-width]="size || '100%'"
[src]="icon"
alt="Service Icon"
alt="Marketplace Icon"
/>
<ng-template #noIcon>
<tui-icon icon="tuiIconShoppingCart" [style.font-size]="size" />
<img
[style.max-width]="size || '100%'"
src="assets/img/storefront-outline.png"
alt="Marketplace Icon"
/>
</ng-template>
`,
changeDetection: ChangeDetectionStrategy.OnPush,