Skip to content
This repository has been archived by the owner on Dec 17, 2024. It is now read-only.

Commit

Permalink
Add WebGen Routing and add moved /c/music to pages
Browse files Browse the repository at this point in the history
  • Loading branch information
lucsoft committed Nov 24, 2024
1 parent f5dd945 commit f8b5e6c
Show file tree
Hide file tree
Showing 10 changed files with 273 additions and 189 deletions.
134 changes: 0 additions & 134 deletions assets/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,138 +15,4 @@
body {
background-color: #f3f5fa !important;
}
}

.link {
padding: 0 .3rem;
height: 20px;
}

.limited-width {
max-width: 80rem;
width: calc(100% - 2rem);
margin: 0 auto 0;
}

.wtags .wbutton {
--background-color-h: 31 !important;
--background-color-s: 100% !important;
--background-color-l: 66% !important;
}

.image-preview .wimage {
aspect-ratio: 1 / 1;
border-radius: 10px;
height: 100%;
}

.subtitle {
opacity: 69%;
}

.wbutton ul {
max-height: 14rem;
overflow: auto;
}

.upload-image {
position: relative;
}

.upload-image .wimage {
height: 12rem;
aspect-ratio: 1/1;
}

.upload-image .wiconbutton {
position: absolute;
top: .4rem;
right: .4rem;
transform: translate(50%, -50%) scale(0.8);
border-radius: 100%;
padding: 1px 0 2px 1px;
}

.error-message {
padding: 0.5rem 0.8rem;
font-size: 0.8rem;
}

.error-message.hidden-message {
display: none;
}

.same-height {
line-height: 1;
}

/**
* Safari Hack: Custom Style for sliders.
* Why? Chromes Firefox and Edge have now usable sliders! Except Safari. so yeah fuck it.
*/
@supports (-webkit-appearance: -apple-pay-button) {
.wslider {
-webkit-appearance: none;
background: transparent;
height: 16px;
}

.wslider::-webkit-slider-runnable-track {
position: relative;
width: 100%;
background: rgb(190, 190, 190);
height: 8px;
border-radius: 10px;
}

.wslider::-webkit-slider-thumb {
margin-top: -5px;
color: blue;
}
}

.wtable .wbutton.low-level:has(ul.open) {
z-index: 10;
}

.list-title {
width: 100%;
margin: 0 auto;
padding-top: 22px;
font-weight: 700;
font-size: 23.17px;
}

.image-square {
height: 5rem;
aspect-ratio: 1 / 1;
border-radius: 15px;
}

.small .image-square {
height: 44px;
}

.image-square .wimage {
height: 100%;
width: 100%;
}

.mobile-navigation {
margin: 1rem auto 1rem;
}

.navigation {
margin: 5rem auto 1rem;
}

.profile-picture {
aspect-ratio: 1/1;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
border-radius: 9px;
font-weight: 800;
overflow: hidden;
}
34 changes: 4 additions & 30 deletions assets/css/music.css
Original file line number Diff line number Diff line change
@@ -1,41 +1,15 @@
.entry-subtitle {
color: rgb(255 255 255 / 80%);
}

.under-review {
background-color: #BCBCBC;
color: rgba(0, 0, 0, 0.8);
border-radius: 10rem;
font-weight: 700;
font-size: 15px;
padding: 0.2rem 0.8rem;
margin: 0 2rem;
}

.small-preview.image-preview .wimage {
height: 2.2rem;
border-radius: 3px;
margin: 0 0.4rem 0 0;
}

@media (prefers-color-scheme: dark) {
body {
background-color: black !important;
background-image: linear-gradient(360deg, #00000000, #f19d2d2b);
background-size: 100vw 100vh;
background-repeat: no-repeat;
}
}

nav.music {
background: linear-gradient(166deg, #F19D2D 6.59%, #DB5721 101.73%);
}

@media (max-width: 800px) {
nav.music {
background: linear-gradient(166deg, #F19D2D 6.59%, #db7621 101.73%);
@media (prefers-color-scheme: dark) {
body {
--wg-reverse-neutral: rgba(255, 255, 255, 2%);
}
}

div.navigation>div.vertical-stack {
gap: unset !important;
}
12 changes: 8 additions & 4 deletions components/nav.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ const navMenuPopover = Popover(
)
.setTemplateColumns("12rem max-content")
.addClass("small-entry")
.onClick(() => location.pathname = route)
.onClick(() => {
location.href = route;
})
: Empty()
),
perm.length
Expand Down Expand Up @@ -101,7 +103,6 @@ function NavigationBar(type: NavigationType) {
showProfilePicture(IsLoggedIn()!).setWidth("29px").setHeight("29px"),
Label(activeUser.username.value)
.setFontWeight("bold"),
Empty(),
)
.setGap(".7rem")
.setTemplateColumns("max-content max-content")
Expand All @@ -110,7 +111,8 @@ function NavigationBar(type: NavigationType) {
.onClick(() => location.href = "/settings")
.addClass("profile-button");
}),
),
)
.setCssStyle("display", "contents"),
)
.setTemplateColumns("max-content max-content")
.setJustifyContent("space-between")
Expand Down Expand Up @@ -178,7 +180,6 @@ export function DynaNavigation(type: NavigationType) {
top: anchor(bottom);
left: anchor(left);
border: none;
background: ${Color.reverseNeutral.toString()};
overflow: hidden;
padding: 5px 10px;
border-radius: var(--wg-radius-large);
Expand All @@ -197,5 +198,8 @@ export function DynaNavigation(type: NavigationType) {
:host([type="Music-Landing"]) {
backdrop-filter: blur(10px);
}
:host([type="Music"]) {
background: linear-gradient(166deg, #F19D2D 6.59%, #DB5721 101.73%);
}
`);
}
99 changes: 79 additions & 20 deletions pages/music/main.ts
Original file line number Diff line number Diff line change
@@ -1,35 +1,94 @@
import { RegisterAuthRefresh, renewAccessTokenIfNeeded, sheetStack } from "shared/helper.ts";
import "./pages/artists.ts";
import "./pages/draftDrops.ts";
import "./pages/payouts.ts";
import "./pages/publishedDrops.ts";
import "./pages/unpublishedDrops.ts";

/// <reference types="npm:@types/dom-navigation/index.d.ts" />

import { activeUser, RegisterAuthRefresh, renewAccessTokenIfNeeded, sheetStack } from "shared/helper.ts";
import { API, stupidErrorAlert } from "shared/restSpec.ts";
import { appendBody, Content, DialogContainer, WebGenTheme } from "webgen/mod.ts";
import { activeRoute, appendBody, Box, Content, createRoute, css, DialogContainer, FullWidthSection, Grid, Label, menuList, PageRouter, PrimaryButton, ref, SecondaryButton, StartRouting, WebGenTheme } from "webgen/mod.ts";
import "../../assets/css/main.css";
import "../../assets/css/music.css";
import { DynaNavigation } from "../../components/nav.ts";
import { DropType } from "../../spec/music.ts";
import { menuState, musicMenu } from "./views/menu.ts";
import { draftsDropsPage } from "./pages/draftDrops.ts";
import { publishedDrops } from "./pages/publishedDrops.ts";

await RegisterAuthRefresh();

createRoute({
path: "/c/music",
events: {
onActive: async () => {
const list = await API.music.drops.list().then(stupidErrorAlert);
const published = list.filter((x) => x.type === DropType.Published);

if (published.length >= 1) {
publishedDrops.route.navigate({});
} else {
draftsDropsPage.route.navigate({});
}
},
},
});

export function Navigation() {
return Box(
Content(
Grid(
Label(ref`Hi ${activeUser.username} 👋`)
.setFontWeight("bold")
.setTextSize("4xl"),
Grid(
menuList
.map((item) =>
item
.filter((item) => item.route.entry.patternUrl.startsWith("/c/music?list="))
.map((item) =>
Box(activeRoute.map((activeRoute) =>
(activeRoute == item.route.entry ? PrimaryButton(item.label) : SecondaryButton(item.label))
.onPromiseClick(async () => {
await window.navigation.navigate(item.route.entry.patternUrl).finished;
})
))
)
),
)
.setGap(".8rem")
.setAutoFlow("column")
.setAutoColumn("max-content"),
)
.setGap("1rem")
.setMargin("4rem 0 1rem"),
)
.addStyle(css`
:host {
--wg-button-border-radius: var(--wg-radius-large);
}
`),
PageRouter,
);
}

appendBody(
WebGenTheme(
DialogContainer(sheetStack.visible(), sheetStack),
Content(
DynaNavigation("Music"),
musicMenu,
FullWidthSection(
DynaNavigation("Music"),
),
),
),
Navigation(),
)
.addStyle(css`
:host {
--wg-primary: rgb(255, 171, 82);
--content-max-width: 1200px;
}
`),
);

renewAccessTokenIfNeeded()
.then(async () => {
const list = await API.music.drops.list().then(stupidErrorAlert);

menuState.published = list.filter((x) => x.type === DropType.Published);
menuState.drafts = list.filter((x) => x.type === DropType.Unsubmitted);
menuState.unpublished = list.filter((x) =>
x.type === DropType.UnderReview ||
x.type === DropType.Private ||
x.type === DropType.ReviewDeclined
);
menuState.payouts = await API.payment.payouts.get().then(stupidErrorAlert);
menuState.artists = await API.music.artists.list().then(stupidErrorAlert);
});
StartRouting();
renewAccessTokenIfNeeded();
35 changes: 35 additions & 0 deletions pages/music/pages/artists.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { API, stupidErrorAlert } from "shared/restSpec.ts";
import { asRef, Box, Content, createPage, createRoute, Entry, Grid, Label, Spinner } from "webgen/mod.ts";
import { Artist } from "../../../spec/music.ts";

const data = asRef<"loading" | Artist[]>("loading");

const source = data.map((data) => data === "loading" ? [] : data);

export const artistsPage = createPage(
{
label: "Artists",
weight: 5,
route: createRoute({
path: "/c/music?list=artists",
events: {
onLazyInit: async () => {
const list = await API.music.artists.list().then(stupidErrorAlert);
data.value = list;
},
},
}),
},
Content(
Box(data.map((data) => data === "loading" ? Spinner() : [])),
Grid(
source.map((items) =>
items.map((item) =>
Entry(
Label(item.name),
)
)
),
),
),
);
Loading

0 comments on commit f8b5e6c

Please sign in to comment.