Mirroristas/pockethost
2
0
Fork 0
mirror of https://github.com/pockethost/pockethost.git synced 2025-11-24 14:35:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

enh(dashboard): update max width constraints on instance detail pages

Browse Source
This commit is contained in:
Ben Allfree 2025-07-18 19:09:36 -07:00
parent 6aad803416
commit 2a8a97e48d
7 changed files with 110 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
packages/dashboard/src/routes/(app)/instances/[instanceId]/Overview.svelte
View File

@ -2,6 +2,7 @@
import CodeSample from '$components/CodeSample.svelte' import CodeSample from '$components/CodeSample.svelte'
import CardHeader from '$src/components/cards/CardHeader.svelte' import CardHeader from '$src/components/cards/CardHeader.svelte'
import { DISCORD_URL, INSTANCE_URL } from '$src/env' import { DISCORD_URL, INSTANCE_URL } from '$src/env'
import { isCnameActive } from 'pockethost/common'
import { instance } from './store' import { instance } from './store'
let installSnippet = `npm i pocketbase` let installSnippet = `npm i pocketbase`
@ -18,50 +19,39 @@
});` });`
</script> </script>
<CardHeader documentation={`/docs/accessing-instance/`}>Overview</CardHeader> <div class="max-w-2xl">
<CardHeader documentation={`/docs/accessing-instance/`}>Overview</CardHeader>
<!-- These should be p but the inside already has p --> <!-- These should be p but the inside already has p -->
<div> <div>
<p class="mb-2">Your PocketBase URL is</p> <p class="mb-2">Your PocketBase URL is</p>
<CodeSample code={url} /> <CodeSample code={url} />
</div> </div>
<div> <div>
<p class="mb-2">Installing PocketBase</p> <p class="mb-2">Installing PocketBase</p>
<CodeSample code={installSnippet} /> <CodeSample code={installSnippet} />
</div> </div>
<div> <div>
<p class="mb-2">Connecting to Your Instance</p> <p class="mb-2">Connecting to Your Instance</p>
{#if $instance.cname} <CodeSample code={connectionSnippet} />
{#if $instance.cname_active} </div>
<div class="text-accent">Notice: You are in Custom Domain mode</div>
{:else}
<div class="text-error">
Notice: You are in Custom Domain mode but it is not active and will not work. Go find <a
href={DISCORD_URL}
target="_blank"
class="link"><code>.noaxis</code> on Discord</a
> to get set up.
</div>
{/if}
{/if}
<CodeSample code={connectionSnippet} />
</div>
<div> <div>
<p class="mb-2">Making Your First Query</p> <p class="mb-2">Making Your First Query</p>
<CodeSample code={firstQuerySnippet} /> <CodeSample code={firstQuerySnippet} />
</div> </div>
<div> <div>
<p>Additional Resources:</p> <p>Additional Resources:</p>
<ul class="list-disc pl-4"> <ul class="list-disc pl-4">
<li> <li>
<a href={`https://pocketbase.io/docs/api-records/`} target="_blank" class="link">PocketBase Web APIs</a> <a href={`https://pocketbase.io/docs/api-records/`} target="_blank" class="link">PocketBase Web APIs</a>
</li> </li>
<li> <li>
<a href="https://www.npmjs.com/package/pocketbase" target="_blank" class="link">PocketBase NPM Package</a> <a href="https://www.npmjs.com/package/pocketbase" target="_blank" class="link">PocketBase NPM Package</a>
</li> </li>
</ul> </ul>
</div>
</div> </div>

16
packages/dashboard/src/routes/(app)/instances/[instanceId]/admin-sync/+page.svelte
View File

@ -22,13 +22,15 @@
} }
</script> </script>
<CardHeader documentation={`/docs/admin-sync`}>Admin Sync</CardHeader> <div class="max-w-2xl">
<CardHeader documentation={`/docs/admin-sync`}>Admin Sync</CardHeader>
<p class="mb-8"> <p class="mb-8">
Admin Sync ensures that your instance always has an admin account that matches the login credentials of your Admin Sync ensures that your instance always has an admin account that matches the login credentials of your
pockethost.io account. pockethost.io account.
</p> </p>
<ErrorMessage message={errorMessage} /> <ErrorMessage message={errorMessage} />
<Toggle checked={!!syncAdmin} onChange={handleChange} /> <Toggle checked={!!syncAdmin} onChange={handleChange} />
</div>

42
packages/dashboard/src/routes/(app)/instances/[instanceId]/delete/+page.svelte
View File

@ -63,30 +63,32 @@
} }
</script> </script>
<CardHeader documentation={`/docs/delete`}>Delete Instance</CardHeader> <div class="max-w-2xl">
<CardHeader documentation={`/docs/delete`}>Delete Instance</CardHeader>
{#if power} {#if power}
<AlertBar message="Instance must be powered off before deleting." type="error" /> <AlertBar message="Instance must be powered off before deleting." type="error" />
{/if} {/if}
<div class="mb-8"> <div class="mb-8">
Deleting your instance will immediately and permanently delete your instance: Deleting your instance will immediately and permanently delete your instance:
<ul class="ml-10 text-error"> <ul class="ml-10 text-error">
<li>Your subdomain</li> <li>Your subdomain</li>
<li><pre>pb_data/*</pre></li> <li><pre>pb_data/*</pre></li>
<li><pre>pb_public/*</pre></li> <li><pre>pb_public/*</pre></li>
<li><pre>pb_migrations/*</pre></li> <li><pre>pb_migrations/*</pre></li>
<li><pre>pb_static/*</pre></li> <li><pre>pb_static/*</pre></li>
</ul> </ul>
If you are storing files on S3, you must delete them separately. If you are storing files on S3, you must delete them separately.
</div>
<ErrorMessage message={errorMessage} />
<form class="flex change-version-form-container-query gap-4" on:submit={handleSave}>
<button type="submit" class="btn btn-error" disabled={power || isButtonDisabled}>Delete Instance</button>
</form>
</div> </div>
<ErrorMessage message={errorMessage} />
<form class="flex change-version-form-container-query gap-4" on:submit={handleSave}>
<button type="submit" class="btn btn-error" disabled={power || isButtonDisabled}>Delete Instance</button>
</form>
<style> <style>
.change-version-form-container-query { .change-version-form-container-query {
flex-direction: column; flex-direction: column;

16
packages/dashboard/src/routes/(app)/instances/[instanceId]/dev/+page.svelte
View File

@ -20,13 +20,15 @@
} }
</script> </script>
<CardHeader documentation={`/docs/dev-mode`}>Dev Mode</CardHeader> <div class="max-w-2xl">
<CardHeader documentation={`/docs/dev-mode`}>Dev Mode</CardHeader>
<p class="mb-8"> <p class="mb-8">
Starting with PocketBase v0.20.1, your instance will show debugging output in the instance logs. Performance is Starting with PocketBase v0.20.1, your instance will show debugging output in the instance logs. Performance is
degraded while Dev Mode is active. degraded while Dev Mode is active.
</p> </p>
<ErrorMessage message={errorMessage} /> <ErrorMessage message={errorMessage} />
<Toggle onChange={handleChange} checked={!!dev} onClass="warning" /> <Toggle onChange={handleChange} checked={!!dev} onClass="warning" />
</div>

66
packages/dashboard/src/routes/(app)/instances/[instanceId]/ftp/+page.svelte
View File

@ -15,37 +15,39 @@
const ftpUrl = FTP_URL(email) const ftpUrl = FTP_URL(email)
</script> </script>
<CardHeader documentation={`/docs/ftp`}>FTP Access</CardHeader> <div class="max-w-2xl">
<div class="mb-8">Securely access your instance files via FTPS. Use your PocketHost account login and password.</div> <CardHeader documentation={`/docs/ftp`}>FTP Access</CardHeader>
<div class="mb-8">Securely access your instance files via FTPS. Use your PocketHost account login and password.</div>
<div class="mb-12"> <div class="mb-12">
<CodeSample code={`ftp ${ftpUrl}`} language={bash} /> <CodeSample code={`ftp ${ftpUrl}`} language={bash} />
</div>
<table class="table">
<thead>
<tr>
<th class="border-b-2 border-neutral">Directory</th>
<th class="border-b-2 border-neutral">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>pb_data</th>
<td>The PocketBase data directory, including upload storage and database backups</td>
</tr>
<tr>
<th>pb_public</th>
<td>Public files, such as a web frontend</td>
</tr>
<tr>
<th>pb_migrations</th>
<td>The PocketBase migrations directory</td>
</tr>
<tr>
<th>pb_hooks</th>
<td>The PocketBase JS hooks directory</td>
</tr>
</tbody>
</table>
</div> </div>
<table class="table">
<thead>
<tr>
<th class="border-b-2 border-neutral">Directory</th>
<th class="border-b-2 border-neutral">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>pb_data</th>
<td>The PocketBase data directory, including upload storage and database backups</td>
</tr>
<tr>
<th>pb_public</th>
<td>Public files, such as a web frontend</td>
</tr>
<tr>
<th>pb_migrations</th>
<td>The PocketBase migrations directory</td>
</tr>
<tr>
<th>pb_hooks</th>
<td>The PocketBase JS hooks directory</td>
</tr>
</tbody>
</table>

2
packages/dashboard/src/routes/(app)/instances/[instanceId]/rename/+page.svelte
View File

@ -59,7 +59,7 @@
} }
</script> </script>
<div class="max-w-lg"> <div class="max-w-2xl">
<CardHeader documentation={`/docs/rename-instance`}>Rename Instance</CardHeader> <CardHeader documentation={`/docs/rename-instance`}>Rename Instance</CardHeader>
<p class="mb-8"> <p class="mb-8">

7
packages/dashboard/src/routes/(app)/instances/[instanceId]/secrets/+page.svelte
View File

@ -14,6 +14,7 @@
<title>{subdomain} secrets - PocketHost</title> <title>{subdomain} secrets - PocketHost</title>
</svelte:head> </svelte:head>
<!-- Consistency is key --> <div class="max-w-2xl">
<CardHeader>Secrets</CardHeader> <CardHeader>Secrets</CardHeader>
<SecretsInner /> <SecretsInner />
</div>