uqbar-dao/nectar
1
1
Fork 0
mirror of https://github.com/uqbar-dao/nectar.git synced 2024-11-23 03:44:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

package publish mobile styling

Browse Source
This commit is contained in:
Tobias Merkle 2024-05-10 16:07:36 -04:00
parent 5fe05b45ac
commit f1326df00b
5 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
kinode/packages/app_store/pkg/ui/assets/index-_gafBK2F.js → kinode/packages/app_store/pkg/ui/assets/index-BxGs27ah.js
View File

File diff suppressed because one or more lines are too long

1
kinode/packages/app_store/pkg/ui/assets/index-a6MeH9L9.css
View File

File diff suppressed because one or more lines are too long

1
kinode/packages/app_store/pkg/ui/assets/index-umttRNrr.css Normal file
View File

File diff suppressed because one or more lines are too long

4
kinode/packages/app_store/pkg/ui/index.html
View File

@ -14,8 +14,8 @@
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover" />
<script type="module" crossorigin src="/main:app_store:sys/assets/index-_gafBK2F.js"></script>
<link rel="stylesheet" crossorigin href="/main:app_store:sys/assets/index-a6MeH9L9.css">
<script type="module" crossorigin src="/main:app_store:sys/assets/index-BxGs27ah.js"></script>
<link rel="stylesheet" crossorigin href="/main:app_store:sys/assets/index-umttRNrr.css">
</head>
<body>

45
kinode/packages/app_store/ui/src/pages/PublishPage.tsx
View File

@ -17,6 +17,8 @@ import Checkbox from "../components/Checkbox";
import Jazzicon from "../components/Jazzicon";
import { Tooltip } from "../components/Tooltip";
import HomeButton from "../components/HomeButton";
import classNames from "classnames";
import { isMobileCheck } from "../utils/dimensions";
const { useIsActivating } = hooks;
@ -208,17 +210,22 @@ export default function PublishPage({
}
}, [listedApps, packageName, publisherId, isUpdate, setIsUpdate]);
const isMobile = isMobileCheck()
return (
<div className="max-w-[900px] w-full flex flex-col">
<HomeButton />
<div className={classNames("w-full flex flex-col gap-2", {
'max-w-[900px]': !isMobile,
'p-2 h-screen w-screen': isMobile
})}>
{!isMobile && <HomeButton />}
<SearchHeader
hideSearch
hidePublish
onBack={showMetadataForm ? () => setShowMetadataForm(false) : undefined}
/>
<div className="flex justify-between items-center my-2">
<div className="flex-center justify-between">
<h4>Publish Package</h4>
{Boolean(account) && <div className="card flex items-center">
{Boolean(account) && <div className="card flex-center">
<span>Publishing as:</span>
<Jazzicon address={account!} className="mx-2" />
<span className="font-mono">{account?.slice(0, 4)}...{account?.slice(-4)}</span>
@ -226,20 +233,20 @@ export default function PublishPage({
</div>
{loading ? (
<div className="flex flex-col items-center">
<div className="flex-col-center">
<Loader msg={loading} />
</div>
) : publishSuccess ? (
<div className="flex flex-col items-center">
<h4 className="mb-2">Package Published!</h4>
<div className="mb-2">
<div className="flex-col-center gap-2">
<h4>Package Published!</h4>
<div>
<strong>Package Name:</strong> {publishSuccess.packageName}
</div>
<div className="mb-2">
<div>
<strong>Publisher ID:</strong> {publishSuccess.publisherId}
</div>
<button
className={`flex ml-2 mt-2`}
className={`flex ml-2`}
onClick={() => setPublishSuccess(undefined)}
>
Publish Another Package
@ -249,7 +256,7 @@ export default function PublishPage({
<MetadataForm {...{ packageName, publisherId, app: state?.app }} goBack={() => setShowMetadataForm(false)} />
) : !account || !isActive ? (
<>
<h4 style={{}}>Please connect your wallet to publish a package</h4>
<h4>Please connect your wallet {isMobile && <br />} to publish a package</h4>
<button className={`connect-wallet row`} onClick={connectWallet}>
Connect Wallet
</button>
@ -258,7 +265,7 @@ export default function PublishPage({
<Loader msg="Approve connection in your wallet" />
) : (
<form
className="flex flex-col flex-1 overflow-y-auto"
className="flex flex-col flex-1 overflow-y-auto gap-2"
onSubmit={publishPackage}
>
<div
@ -272,7 +279,7 @@ export default function PublishPage({
Update existing package
</label>
</div>
<div className="flex flex-col mb-2">
<div className="flex flex-col">
<label htmlFor="package-name">Package Name</label>
<input
id="package-name"
@ -284,7 +291,7 @@ export default function PublishPage({
onBlur={checkIfUpdate}
/>
</div>
<div className="flex flex-col mb-2">
<div className="flex flex-col">
<label htmlFor="publisher-id">Publisher ID</label>
<input
id="publisher-id"
@ -295,7 +302,7 @@ export default function PublishPage({
onBlur={checkIfUpdate}
/>
</div>
<div className="flex flex-col mb-2">
<div className="flex flex-col gap-2">
<label htmlFor="metadata-url">
Metadata URL
</label>
@ -308,7 +315,7 @@ export default function PublishPage({
onBlur={calculateMetadataHash}
placeholder="https://github/my-org/my-repo/metadata.json"
/>
<div className="mt-2">
<div>
Metadata is a JSON file that describes your package.
<br /> You can{" "}
<a onClick={() => setShowMetadataForm(true)}
@ -319,7 +326,7 @@ export default function PublishPage({
.
</div>
</div>
<div className="flex flex-col mb-2">
<div className="flex flex-col">
<label htmlFor="metadata-hash">Metadata Hash</label>
<input
readOnly
@ -336,7 +343,7 @@ export default function PublishPage({
</form>
)}
<div className="flex flex-col my-2 mt-4">
<div className="flex flex-col">
<h4>Packages You Own</h4>
{myPublishedApps.length > 0 ? (
<div className="flex flex-col">
@ -346,11 +353,9 @@ export default function PublishPage({
<Jazzicon address={app.publisher} className="mr-2" />
<span>{app.package}</span>
</div>
{/* <Tooltip content="View Package"> */}
<button className="flex items-center" onClick={() => unpublishPackage(app.package, app.publisher)}>
<span>Unpublish</span>
</button>
{/* </Tooltip> */}
</div>
))}
</div>