mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-30 20:14:49 +00:00
Update/marketplace (#2575)
* make category link generic * fix ai category display and svg icons * fix markdown display and ansi module; cleanup * convert tailwindcss to scss in marketplace menu component * convert tailwindcss to scss in marketplace categories component * convert tailwindcss to scss in marketplace item component * update launch icon to taiga icon * convert tailwindcss to scss in marketplace search component + cleanup * convert tailwindcss to scss in marketplace release notes component + cleanup * convert tailwindcss to scss in marketplace about component + cleanup * convert tailwindcss to scss in marketplace additional component * convert tailwindcss to scss in marketplace dependencies component + misc style fixes * convert tailwindcss to scss in marketplace hero component + misc style fixes * convert tailwindcss to scss in marketplace screenshots component * convert tailwindcss to scss in portal marketplace components * remove the rest of tailwindscss and fix reset styles * bump shared and marketplace package versions * misc style + build fixes * sync package lock * fix markdown + cleanup * fix markdown margins and git hash size * fix mobile zindex for hero and mobile changing categories routing link
This commit is contained in:
Lucy
@@ -1,34 +1,24 @@
|
||||
<header
|
||||
class="header overflow-hidden w-full fixed sm:w-[34vw] md:w-[28vw] lg:w-[22vw] 2xl:w-[280px] sm:bg-zinc-700/90 sm:backdrop-blur-2xl sm:min-h-screen overflow-y-auto flex flex-col sm:py-6 sm:after:block sm:after:absolute sm:after:top-0 sm:after:bottom-0 sm:after:right-0 sm:after:w-0.5 after:h-[calc(100vh - 20px)] sm:after:bg-gradient-to-b from-zinc-700 to-zinc-400"
|
||||
>
|
||||
<header>
|
||||
<ng-container *tuiLet="store$ | async as store">
|
||||
<div class="hidden sm:flex flex-col mx-6 pb-3 items-center">
|
||||
<div
|
||||
class="mb-3 rounded-full"
|
||||
<div class="title">
|
||||
<store-icon
|
||||
[class.tui-skeleton]="!store"
|
||||
[class.tui-skeleton_rounded]="!store"
|
||||
>
|
||||
<store-icon
|
||||
size="64px"
|
||||
[url]="store?.url || ''"
|
||||
[marketplace]="iconConfig"
|
||||
></store-icon>
|
||||
</div>
|
||||
<h1
|
||||
class="font-semibold text-2xl text-zinc-100 text-center mb-3"
|
||||
[class.tui-skeleton]="!store"
|
||||
>
|
||||
size="64px"
|
||||
[url]="store?.url || ''"
|
||||
[marketplace]="iconConfig"
|
||||
></store-icon>
|
||||
<h1 [class.tui-skeleton]="!store">
|
||||
{{ store?.info?.name || 'Loading store' }}
|
||||
</h1>
|
||||
<!-- change registry modal -->
|
||||
<ng-content select="[slot=desktop]"></ng-content>
|
||||
</div>
|
||||
<!-- mobile nav -->
|
||||
<div class="sm:hidden bg-zinc-700/90 backdrop-blur-3xl">
|
||||
<div class="flex justify-between items-center py-4 px-4 w-[100vw]">
|
||||
<div class="nav-mobile">
|
||||
<div class="nav-mobile-bar">
|
||||
<!-- mobile search -->
|
||||
<marketplace-search
|
||||
class="max-w-fit"
|
||||
[(query)]="query"
|
||||
(queryChange)="onQueryChange($event)"
|
||||
></marketplace-search>
|
||||
@@ -43,101 +33,78 @@
|
||||
>
|
||||
<store-icon
|
||||
size="48px"
|
||||
[style.height]="'48px'"
|
||||
[style.border-radius]="'100%'"
|
||||
[url]="store?.url || ''"
|
||||
[marketplace]="iconConfig"
|
||||
class="rounded-full"
|
||||
[class.tui-skeleton]="!store"
|
||||
[class.tui-skeleton_rounded]="!store"
|
||||
></store-icon>
|
||||
<nav
|
||||
*tuiSidebar="open; direction: 'right'; autoWidth: true"
|
||||
class="bg-zinc-700/90 h-screen w-[70vw]"
|
||||
class="nav-mobile-sidebar divide-bar"
|
||||
>
|
||||
<div class="flex flex-col divide-y divide-zinc-500 h-full">
|
||||
<div class="flex items-center p-4">
|
||||
<h1
|
||||
class="font-semibold text-xl text-zinc-200 flex-grow"
|
||||
[class.tui-skeleton]="!store"
|
||||
>
|
||||
{{ store?.info?.name }}
|
||||
</h1>
|
||||
<button
|
||||
[style.--tui-padding]="0"
|
||||
class="place-self-end"
|
||||
tuiButton
|
||||
type="button"
|
||||
appearance="icon"
|
||||
icon="tuiIconClose"
|
||||
(tuiActiveZoneChange)="toggleMenu($event)"
|
||||
(click)="toggleMenu(false)"
|
||||
></button>
|
||||
</div>
|
||||
<!-- change registry modal -->
|
||||
<ng-content select="[slot=mobile]"></ng-content>
|
||||
<div
|
||||
class="flex flex-col justify-between divide-y divide-zinc-500 h-full"
|
||||
<div class="nav-mobile-sidebar-top">
|
||||
<h1 [class.tui-skeleton]="!store">
|
||||
{{ store?.info?.name }}
|
||||
</h1>
|
||||
<button
|
||||
[style.--tui-padding]="0"
|
||||
tuiButton
|
||||
type="button"
|
||||
appearance="icon"
|
||||
icon="tuiIconClose"
|
||||
(tuiActiveZoneChange)="toggleMenu($event)"
|
||||
(click)="toggleMenu(false)"
|
||||
></button>
|
||||
</div>
|
||||
<!-- change registry modal -->
|
||||
<ng-content select="[slot=mobile]"></ng-content>
|
||||
<div class="nav-mobile-sidebar-bottom divide-bar">
|
||||
<marketplace-categories
|
||||
[categories]="store?.info?.categories"
|
||||
[category]="query ? '' : category"
|
||||
(categoryChange)="onCategoryChange($event); toggleMenu(false)"
|
||||
></marketplace-categories>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/Start9Labs/service-pipeline#readme"
|
||||
>
|
||||
<marketplace-categories
|
||||
[categories]="store?.info?.categories"
|
||||
[category]="query ? '' : category"
|
||||
(categoryChange)="onCategoryChange($event); toggleMenu(false)"
|
||||
class="grow pt-5 pl-5 pr-5"
|
||||
></marketplace-categories>
|
||||
<a
|
||||
class="flex relative gap-2 hover:no-underline p-5"
|
||||
target="_blank"
|
||||
href="https://github.com/Start9Labs/service-pipeline#readme"
|
||||
>
|
||||
<img
|
||||
alt="Launch icon"
|
||||
width="24"
|
||||
height="24"
|
||||
class="opacity-70 invert"
|
||||
src="svg/rocket-outline.svg"
|
||||
/>
|
||||
<span
|
||||
class="text-base text-zinc-50 text-ellipsis overflow-hidden whitespace-nowrap"
|
||||
>
|
||||
Launch your project
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- @TODO need rocket icon -->
|
||||
<tui-icon
|
||||
tuiAppearance="icon"
|
||||
icon="tuiIconExternalLinkLarge"
|
||||
></tui-icon>
|
||||
<span>Launch your project</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- desktop nav -->
|
||||
<nav class="hidden sm:flex grow flex-col py-3 px-4">
|
||||
<nav class="nav-desktop">
|
||||
<!-- desktop search -->
|
||||
<marketplace-search
|
||||
class="place-self-center md:pb-8"
|
||||
[query]="query"
|
||||
(queryChange)="onQueryChange($event)"
|
||||
></marketplace-search>
|
||||
<div class="flex grow flex-col justify-between">
|
||||
<div class="nav-desktop-container">
|
||||
<marketplace-categories
|
||||
[categories]="store?.info?.categories"
|
||||
[category]="query ? '' : category"
|
||||
(categoryChange)="onCategoryChange($event)"
|
||||
></marketplace-categories>
|
||||
<a
|
||||
class="flex gap-2 p-2 hover:no-underline sm:hover:bg-[#222428] hover:cursor-pointer sm:w-[120%] z-50 rounded-l-lg ease-in-out delay-75 duration-300"
|
||||
target="_blank"
|
||||
href="https://github.com/Start9Labs/service-pipeline#readme"
|
||||
>
|
||||
<img
|
||||
alt="Rocket Icon"
|
||||
width="24"
|
||||
height="24"
|
||||
class="opacity-70 invert"
|
||||
src="svg/rocket-outline.svg"
|
||||
/>
|
||||
<span
|
||||
class="text-base text-zinc-50 text-ellipsis overflow-hidden whitespace-nowrap"
|
||||
>
|
||||
Launch your project
|
||||
</span>
|
||||
<!-- @TODO need rocket icon -->
|
||||
<tui-icon
|
||||
tuiAppearance="icon"
|
||||
icon="tuiIconExternalLinkLarge"
|
||||
></tui-icon>
|
||||
<span>Launch your project</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -9,6 +9,7 @@ import { TuiSidebarModule } from '@taiga-ui/addon-mobile'
|
||||
import { SearchModule } from '../../pages/list/search/search.module'
|
||||
import { CategoriesModule } from '../../pages/list/categories/categories.module'
|
||||
import { StoreIconComponentModule } from '../store-icon/store-icon.component.module'
|
||||
import { TuiAppearanceModule, TuiIconModule } from '@taiga-ui/experimental'
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
@@ -23,6 +24,8 @@ import { StoreIconComponentModule } from '../store-icon/store-icon.component.mod
|
||||
CategoriesModule,
|
||||
StoreIconComponentModule,
|
||||
TuiLetModule,
|
||||
TuiAppearanceModule,
|
||||
TuiIconModule,
|
||||
],
|
||||
declarations: [MenuComponent],
|
||||
exports: [MenuComponent],
|
||||
|
||||
@@ -1,13 +1,229 @@
|
||||
@import '@taiga-ui/core/styles/taiga-ui-local';
|
||||
|
||||
.header {
|
||||
header {
|
||||
@include scrollbar-hidden();
|
||||
|
||||
max-height: 100%;
|
||||
// TODO: Theme
|
||||
background: #373a3f;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 10;
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
width: 15rem;
|
||||
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;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 0.125rem;
|
||||
content: '';
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgb(var(--tw-color-zinc-700)),
|
||||
rgb(var(--tw-color-zinc-400))
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: none;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: 1.5rem;
|
||||
margin-right: 1.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
store-icon {
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 100%;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
color: rgb(244 244 245);
|
||||
text-align: center;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
&-desktop {
|
||||
display: none;
|
||||
padding: 0.75rem 1rem;
|
||||
|
||||
marketplace-search {
|
||||
place-self: center;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
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;
|
||||
color: rgb(250 250 250);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
width: 120%;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(34 36 40);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-mobile {
|
||||
@media (min-width: 640px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
width: 100vw;
|
||||
|
||||
marketplace-search {
|
||||
max-width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
&-sidebar {
|
||||
background-color: rgb(var(--tw-color-zinc-700) / 0.9);
|
||||
height: calc(100vh - var(--portal-header-height));
|
||||
width: 70vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
&-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid rgb(113 113 122);
|
||||
|
||||
h1 {
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
color: rgb(228 228 231);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
place-self: end;
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid rgb(113 113 122);
|
||||
height: 100%;
|
||||
|
||||
marketplace-categories {
|
||||
flex-grow: 1;
|
||||
padding: 1.25rem 1.25rem 0px 1.25rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
position: relative;
|
||||
gap: 0.5rem;
|
||||
padding: 1.25rem;
|
||||
|
||||
&:hover {
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
img {
|
||||
opacity: 0.7;
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
color: rgb(250 250 250);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divide-bar > * + * {
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 0px;
|
||||
border-color: rgb(113 113 122);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: rgb(var(--tw-color-gray-200) / 1);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user