fixes

BBN-Holding · Aug 12, 2024 · b310f26 · b310f26
1 parent d0cd4fb
commit b310f26
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 18 deletions.
diff --git a/pages/admin/views/list.ts b/pages/admin/views/list.ts
@@ -1,5 +1,5 @@
 import { API, External, fileCache, RenderItem, stupidErrorAlert } from "shared/mod.ts";
-import { Box, Button, Cache, Color, Entry, Grid, Horizontal, IconButton, Image, MIcon, ref, SheetDialog, Spacer, TextInput, Vertical } from "webgen/mod.ts";
+import { asRef, Box, Button, Cache, Color, Entry, Grid, Horizontal, IconButton, Image, MIcon, ref, SheetDialog, Spacer, TextInput, Vertical } from "webgen/mod.ts";
 import { templateArtwork } from "../../../assets/imports.ts";
 import { File, OAuthApp, Transcript, Wallet } from "../../../spec/music.ts";
 import { saveBlob, sheetStack } from "../../shared/helper.ts";
@@ -73,10 +73,10 @@ const oAuthViewDialog = (oauth: OAuthApp) =>
         "OAuth App Details",
         Vertical(
             Grid(
-                TextInput("text", "Name").setValue(oauth.name).setColor(Color.Disabled),
-                TextInput("text", "Client ID").setValue(oauth._id).setColor(Color.Disabled),
-                TextInput("text", "Client Secret").setValue(oauth.secret).setColor(Color.Disabled),
-                TextInput("text", "Redirect URI").setValue(oauth.redirect.join(",")).setColor(Color.Disabled),
+                TextInput("text", "Name").ref(asRef(oauth.name)).setColor(Color.Disabled),
+                TextInput("text", "Client ID").ref(asRef(oauth._id)).setColor(Color.Disabled),
+                TextInput("text", "Client Secret").ref(asRef(oauth.secret)).setColor(Color.Disabled),
+                TextInput("text", "Redirect URI").ref(asRef(oauth.redirect.join(","))).setColor(Color.Disabled),
             ),
             Horizontal(
                 Spacer(),

diff --git a/pages/admin/views/menu.ts b/pages/admin/views/menu.ts
@@ -2,7 +2,7 @@ import { debounce } from "@std/async";
 import { sumOf } from "@std/collections";
 import loader from "https://esm.sh/@monaco-editor/[email protected]";
 import { API, HeavyList, loadMore, Navigation, placeholder, stupidErrorAlert } from "shared/mod.ts";
-import { asState, Box, Button, Color, Custom, Entry, Grid, Horizontal, isMobile, Items, Label, lazy, ref, SheetDialog, Spacer, Table, TextInput, Vertical } from "webgen/mod.ts";
+import { asRef, asState, Box, Button, Color, Custom, Entry, Grid, Horizontal, isMobile, Items, Label, lazy, ref, SheetDialog, Spacer, Table, TextInput, Vertical } from "webgen/mod.ts";
 import { Drop, DropType, Server, Transcript } from "../../../spec/music.ts";
 import { activeUser, ProfileData, sheetStack, showProfilePicture } from "../../shared/helper.ts";
 import { upload } from "../loading.ts";
@@ -223,7 +223,7 @@ const addOAuthDialog = SheetDialog(
                 Table([
                     ["URI", "auto", (_, index) =>
                         TextInput("text", "URI", "blur")
-                            .setValue(x[index])
+                            .ref(asRef(x[index]))
                             .onChange((data) => {
                                 x[index] = data ?? "";
                             })],

diff --git a/pages/music/views/list.ts b/pages/music/views/list.ts
@@ -1,14 +1,14 @@
 import { placeholder } from "shared/mod.ts";
-import { CenterV, Component, Empty, Entry, Label, MediaQuery, Vertical } from "webgen/mod.ts";
+import { CenterV, Component, Empty, Entry, isMobile, Label, Vertical } from "webgen/mod.ts";
 import { Drop, DropType } from "../../../spec/music.ts";
 import { showPreviewImage } from "../../shared/helper.ts";
 
-function DropEntry(x: Drop, small: boolean) {
+function DropEntry(x: Drop) {
     return Entry({
         title: x.title ?? "(no drop name)",
         subtitle: `${x.release ?? "(no release date)"} - ${x.gtin ?? "(no GTIN)"}`,
     })
-        .addClass(small ? "small" : "normal")
+        .addClass(isMobile.map((mobile) => mobile ? "small" : "normal"))
         .addPrefix(showPreviewImage(x).addClass("image-square"))
         .addSuffix((() => {
             if (x.type == DropType.UnderReview) {
@@ -51,7 +51,7 @@ export function CategoryRender(dropList: Drop[], title: string): Component[] | n
     return [
         Label(title)
             .addClass("list-title"),
-        MediaQuery("(max-width: 700px)", (matches) => Vertical(...dropList.map((x) => DropEntry(x, matches))).setGap("1rem")),
+        Vertical(...dropList.map((x) => DropEntry(x))).setGap("1rem"),
     ];
 }
 

diff --git a/pages/music/views/menu.ts b/pages/music/views/menu.ts
@@ -1,5 +1,5 @@
 import { API, Chart, count, HeavyList, LoadingSpinner, Navigation, placeholder, stupidErrorAlert } from "shared/mod.ts";
-import { asRef, asState, Button, Component, Entry, Grid, Horizontal, Image, isMobile, LinkButton, MediaQuery, ref } from "webgen/mod.ts";
+import { asRef, asState, Button, Component, Entry, Grid, Horizontal, Image, isMobile, LinkButton, ref } from "webgen/mod.ts";
 import { templateArtwork } from "../../../assets/imports.ts";
 import { Artist, Drop, DropType, Payout } from "../../../spec/music.ts";
 import { activeUser } from "../../shared/helper.ts";
@@ -66,6 +66,7 @@ export const musicMenu = Navigation({
                             ).setGap(),
                         )
                         .addPrefix(Image(templateArtwork, "").addClass("image-square")))
+                    .addClass(isMobile.map((mobile) => mobile ? "small" : "normal"))
                     .setPlaceholder(placeholder("No Artists", "Create a new Artist to release music")),
             ],
         },
@@ -74,7 +75,7 @@ export const musicMenu = Navigation({
             title: ref`Payouts ${count(menuState.$payouts)}`,
             children: menuState.$payouts.map((payouts) =>
                 payouts == "loading" ? [LoadingSpinner()] : [
-                    MediaQuery("(max-width: 700px)", (small) =>
+                    isMobile.map((mobile) =>
                         Grid(
                             Chart({
                                 type: "bar",
@@ -142,7 +143,8 @@ export const musicMenu = Navigation({
                                     },
                                 },
                             }),
-                        ).setEvenColumns(small ? 1 : 2)),
+                        ).setEvenColumns(mobile ? 1 : 2)
+                    ).asRefComponent(),
                     HeavyList(menuState.$payouts, (x) =>
                         Entry({
                             title: x.period,

diff --git a/pages/wallet/wallet.ts b/pages/wallet/wallet.ts
@@ -1,5 +1,5 @@
 import { API, LoadingSpinner, Navigation, stupidErrorAlert } from "shared/mod.ts";
-import { asState, Body, Button, Color, Grid, isMobile, Label, LinkButton, MediaQuery, SheetDialog, Table, TextInput, Vertical, WebGen } from "webgen/mod.ts";
+import { asState, Body, Button, Color, Grid, isMobile, Label, LinkButton, SheetDialog, Table, TextInput, Vertical, WebGen } from "webgen/mod.ts";
 import { DynaNavigation } from "../../components/nav.ts";
 import { Wallet } from "../../spec/music.ts";
 import { changeThemeColor, RegisterAuthRefresh, renewAccessTokenIfNeeded, sheetStack } from "../shared/helper.ts";
@@ -91,7 +91,7 @@ sheetStack.setDefault(Vertical(
                     isMobile.map((mobile) => mobile ? "mobile-navigation" : "navigation"),
                     "limited-width",
                 ),
-                MediaQuery("(max-width: 700px)", (small) =>
+                isMobile.map((mobile) =>
                     Vertical(
                         Grid(
                             Grid(
@@ -114,15 +114,16 @@ sheetStack.setDefault(Vertical(
                                 .addClass("details-item"),
                         )
                             .setWidth("100%")
-                            .setEvenColumns(small ? 1 : 2)
+                            .setEvenColumns(mobile ? 1 : 2)
                             .setGap(),
                         Table([
                             ["Amount", "auto", ({ amount }) => Label(`${amount.toFixed(2)} £`)],
                             ["Description", "auto", ({ description }) => Label(description)],
                             ["Counterparty", "auto", ({ counterParty }) => Label(counterParty)],
                             ["Date", "auto", ({ timestamp }) => Label(new Date(Number(timestamp)).toDateString())],
                         ], wallet.transactions),
-                    ).setGap()),
+                    ).setGap()
+                ).asRefComponent(),
             ).addClass("limited-width")
             : LoadingSpinner()
     ).asRefComponent(),