LukeParke/OpenAPI.gg
1
0
Fork 0
mirror of https://github.com/LukeHagar/OpenAPI.gg.git synced 2025-12-06 04:20:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjusted styling

Browse Source
This commit is contained in:
Luke Hagar
2024-05-23 10:25:30 -05:00
parent 06adb4f1f0
commit 11eb9cb57e
4 changed files with 39 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/sections/Authentication.svelte
View File

@@ -47,7 +47,7 @@
</script>
<form
class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 space-y-4"
class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 min-h-20 space-y-4"
>
{#each $openApiStore.security as schema, index}
<div class="card w-full p-4">
@@ -68,14 +68,14 @@
{/each}
<span class="flex justify-center items-center gap-2 max-w-sm mx-auto">
<select name="security-schema" bind:value={selectedSchema} class="input w-fit">
<select name="security-schema" bind:value={selectedSchema} class="input w-fit text-sm">
<option value="basicAuth" selected>Basic Auth</option>
<option value="bearerAuth">Bearer Auth</option>
<option value="ApiKeyAuth">API Key Auth</option>
<option value="openId">OpenID</option>
<option value="oAuthSample">OAuth2</option>
</select>
<button type="button" class="btn variant-filled-primary" on:click={addSecuritySchema}>
<button type="button" class="btn text-sm variant-filled-primary" on:click={addSecuritySchema}>
Add Security Schema
</button>
</span>

46
src/lib/components/sections/Info.svelte
View File

@@ -4,11 +4,13 @@
import { openApiStore } from '$lib';
</script>
<form class="container mx-auto card px-6 py-4 space-y-4">
<label class="text-xl space-y-2">
<span>Title (required)</span>
<form
class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 space-y-2"
>
<label class=" space-y-1">
<span class="text-sm">Title (required)</span>
<input
class="input"
class="input text-sm"
name="title"
placeholder="Sample API"
type="text"
@@ -16,8 +18,8 @@
required
/>
</label>
<label class="text-xl space-y-2">
<span> Description (optional) </span>
<label class=" space-y-1">
<span class="text-sm"> Description (optional) </span>
<textarea
class="textarea"
name="description"
@@ -25,10 +27,10 @@
bind:value={$openApiStore.info.description}
/>
</label>
<label class="text-xl space-y-2">
<span>Version (required)</span>
<label class=" space-y-1">
<span class="text-sm">Version (required)</span>
<input
class="input"
class="input text-sm"
name="version"
placeholder="0.1.0"
type="text"
@@ -36,42 +38,42 @@
required
/>
</label>
<label class="text-xl space-y-2">
<span>Terms of Service (optional)</span>
<label class=" space-y-1">
<span class="text-sm">Terms of Service (optional)</span>
<input
class="input"
class="input text-sm"
name="termsOfService"
placeholder="https://example.com/terms"
type="url"
bind:value={$openApiStore.info.termsOfService}
/>
</label>
<div class="border-token rounded-container-token space-y-4 p-4">
<div class="border-token rounded-container-token space-y-2 p-4">
<h4 class="h4">Contact Information</h4>
<label class="text-xl space-y-2">
<span>Name (optional)</span>
<label class=" space-y-1">
<span class="text-sm">Name (optional)</span>
<input
class="input"
class="input text-sm"
name="contactName"
placeholder="John Doe"
type="text"
bind:value={$openApiStore.info.contact.name}
/>
</label>
<label class="text-xl space-y-2">
<span>Email (optional)</span>
<label class=" space-y-1">
<span class="text-sm">Email (optional)</span>
<input
class="input"
class="input text-sm"
name="contactEmail"
placeholder="email@example.com"
type="email"
bind:value={$openApiStore.info.contact.email}
/>
</label>
<label class="text-xl space-y-2">
<span>URL (optional)</span>
<label class=" space-y-1">
<span class="text-sm">URL (optional)</span>
<input
class="input"
class="input text-sm"
name="contactUrl"
placeholder="https://example.com"
type="url"

12
src/lib/components/sections/Paths.svelte
View File

@@ -3,7 +3,7 @@
import { openApiStore, pathRegex, sortPathsAlphabetically } from '$lib';
import { pathTemplate } from '$lib/pathTemplate';
import PathListItem from '../atoms/PathListItem.svelte';
import AddPathButtons from '../atoms/AddPathButtons.svelte';
import PathButtons from '../atoms/PathButtons.svelte';
import { getModalStore } from '@skeletonlabs/skeleton';
const modalStore = getModalStore();
@@ -43,17 +43,17 @@
</script>
<div
class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 space-y-3"
class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 min-h-20 space-y-3"
>
{#if Object.keys($openApiStore.paths).length > 0}
<AddPathButtons />
<PathButtons />
<hr />
{#each Object.keys($openApiStore.paths) as pathName, index}
<PathListItem {pathName} id={index} />
{/each}
<AddPathButtons />
{:else}
<AddPathButtons justify="justify-center" sort={false} />
<PathButtons />
{:else}
<PathButtons justify="justify-center" sort={false} />
{/if}
</div>

8
src/lib/components/sections/Servers.svelte
View File

@@ -23,7 +23,9 @@
};
</script>
<form class="container mx-auto card px-6 py-4 space-y-6">
<form
class="container mx-auto border-token rounded-container-token bg-surface-backdrop-token px-6 py-4 min-h-20 space-y-6"
>
<!-- If openApiStore.servers isnt an array show add button -->
{#if Array.isArray($openApiStore.servers)}
<ul class="list space-y-6">
@@ -46,13 +48,13 @@
{/each}
</ul>
<span class="flex justify-center" class:!mt-0={$openApiStore.servers.length === 0}>
<button type="button" class="btn variant-filled-primary" on:click={addServer}>
<button type="button" class="btn text-sm variant-filled-primary" on:click={addServer}>
Add Server
</button>
</span>
{:else}
<span class="flex justify-center mt-0">
<button type="button" class="btn variant-filled-primary" on:click={addServer}>
<button type="button" class="btn text-sm variant-filled-primary" on:click={addServer}>
Add Server
</button>
</span>