From d99ee9ef1e7ec301490361f69c71104372de128e Mon Sep 17 00:00:00 2001 From: Yuri Tatishchev Date: Wed, 1 Jan 2025 21:39:33 -0800 Subject: [PATCH] more layout improvements --- src/app.css | 4 + .../app/code-snippet/code-snippet.svelte | 72 +++++++----- src/routes/+layout.svelte | 2 +- src/routes/clients/+page.svelte | 2 +- src/routes/clients/[id]/+page.svelte | 8 +- src/routes/connections/+page.svelte | 14 +-- tailwind.config.ts | 111 +++++++++--------- 7 files changed, 113 insertions(+), 100 deletions(-) diff --git a/src/app.css b/src/app.css index 238cd75..3b8985c 100644 --- a/src/app.css +++ b/src/app.css @@ -44,6 +44,8 @@ --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; + + --surface: 210 26% 76%; } @media (prefers-color-scheme: dark) { @@ -85,6 +87,8 @@ --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; + + --surface: 217.2 40.6% 10.5%; } } } diff --git a/src/lib/components/app/code-snippet/code-snippet.svelte b/src/lib/components/app/code-snippet/code-snippet.svelte index 9df5770..9cdc6eb 100644 --- a/src/lib/components/app/code-snippet/code-snippet.svelte +++ b/src/lib/components/app/code-snippet/code-snippet.svelte @@ -16,51 +16,59 @@ let wasCopied = $state(false); + const roundedPre = copy || download ? 'rounded-b-lg' : 'rounded-lg'; + async function copyToClipboard() { await navigator.clipboard.writeText(data); wasCopied = true; } -
-
- 
{data}
- {#if copy || download} - - -
+
+ {#if copy || download} + +
+ Configuration +
{#if copy} -
- -
+ {/if} {#if download} -
- - - - -
+ + + {/if}
- {/if} +
+ {/if} +
+ 
{data}
+ + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 8c5e767..a1f6331 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -29,7 +29,7 @@ -
+
{@render children()}
diff --git a/src/routes/clients/+page.svelte b/src/routes/clients/+page.svelte index 63c63cd..83f8b58 100644 --- a/src/routes/clients/+page.svelte +++ b/src/routes/clients/+page.svelte @@ -38,7 +38,7 @@ {#each data.clients as client} - + @@ -25,10 +27,10 @@

{data.client.name}

-
+
-
+
{@html qrCode.svg()}
diff --git a/src/routes/connections/+page.svelte b/src/routes/connections/+page.svelte index 8873f85..139e0bf 100644 --- a/src/routes/connections/+page.svelte +++ b/src/routes/connections/+page.svelte @@ -17,13 +17,11 @@ }); function getSize(size: number) { - let sizes = ['Bytes', 'KiB', 'MiB', 'GiB', - 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']; + let sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']; for (let i = 1; i < sizes.length; i++) { if (size < Math.pow(1024, i)) - return (Math.round((size / Math.pow( - 1024, i - 1)) * 100) / 100) + ' ' + sizes[i - 1]; + return Math.round((size / Math.pow(1024, i - 1)) * 100) / 100 + ' ' + sizes[i - 1]; } return size; } @@ -33,7 +31,7 @@ Connections - + Name @@ -49,14 +47,14 @@ {#each data.peers.rows as peer} - + {peer.name} - {peer['public-key']} + {peer['public-key']} {peer.endpoint}
{#each peer['allowed-ips'].split(',') as addr} - {addr} + {addr} {/each}
diff --git a/tailwind.config.ts b/tailwind.config.ts index 1699018..7fca059 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,93 +1,94 @@ -import { fontFamily } from "tailwindcss/defaultTheme"; -import type { Config } from "tailwindcss"; -import tailwindcssAnimate from "tailwindcss-animate"; +import { fontFamily } from 'tailwindcss/defaultTheme'; +import type { Config } from 'tailwindcss'; +import tailwindcssAnimate from 'tailwindcss-animate'; const config: Config = { - darkMode: ["media"], - content: ["./src/**/*.{html,js,svelte,ts}"], - safelist: ["dark"], + darkMode: ['media'], + content: ['./src/**/*.{html,js,svelte,ts}'], + safelist: ['dark'], theme: { container: { center: true, - padding: "2rem", + padding: '2rem', screens: { - "2xl": "1400px" - } + '2xl': '1400px', + }, }, extend: { colors: { - border: "hsl(var(--border) / )", - input: "hsl(var(--input) / )", - ring: "hsl(var(--ring) / )", - background: "hsl(var(--background) / )", - foreground: "hsl(var(--foreground) / )", + border: 'hsl(var(--border) / )', + input: 'hsl(var(--input) / )', + ring: 'hsl(var(--ring) / )', + background: 'hsl(var(--background) / )', + foreground: 'hsl(var(--foreground) / )', primary: { - DEFAULT: "hsl(var(--primary) / )", - foreground: "hsl(var(--primary-foreground) / )" + DEFAULT: 'hsl(var(--primary) / )', + foreground: 'hsl(var(--primary-foreground) / )', }, secondary: { - DEFAULT: "hsl(var(--secondary) / )", - foreground: "hsl(var(--secondary-foreground) / )" + DEFAULT: 'hsl(var(--secondary) / )', + foreground: 'hsl(var(--secondary-foreground) / )', }, destructive: { - DEFAULT: "hsl(var(--destructive) / )", - foreground: "hsl(var(--destructive-foreground) / )" + DEFAULT: 'hsl(var(--destructive) / )', + foreground: 'hsl(var(--destructive-foreground) / )', }, muted: { - DEFAULT: "hsl(var(--muted) / )", - foreground: "hsl(var(--muted-foreground) / )" + DEFAULT: 'hsl(var(--muted) / )', + foreground: 'hsl(var(--muted-foreground) / )', }, accent: { - DEFAULT: "hsl(var(--accent) / )", - foreground: "hsl(var(--accent-foreground) / )" + DEFAULT: 'hsl(var(--accent) / )', + foreground: 'hsl(var(--accent-foreground) / )', }, popover: { - DEFAULT: "hsl(var(--popover) / )", - foreground: "hsl(var(--popover-foreground) / )" + DEFAULT: 'hsl(var(--popover) / )', + foreground: 'hsl(var(--popover-foreground) / )', }, card: { - DEFAULT: "hsl(var(--card) / )", - foreground: "hsl(var(--card-foreground) / )" + DEFAULT: 'hsl(var(--card) / )', + foreground: 'hsl(var(--card-foreground) / )', }, sidebar: { - DEFAULT: "hsl(var(--sidebar-background))", - foreground: "hsl(var(--sidebar-foreground))", - primary: "hsl(var(--sidebar-primary))", - "primary-foreground": "hsl(var(--sidebar-primary-foreground))", - accent: "hsl(var(--sidebar-accent))", - "accent-foreground": "hsl(var(--sidebar-accent-foreground))", - border: "hsl(var(--sidebar-border))", - ring: "hsl(var(--sidebar-ring))", - }, + DEFAULT: 'hsl(var(--sidebar-background))', + foreground: 'hsl(var(--sidebar-foreground))', + primary: 'hsl(var(--sidebar-primary))', + 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))', + accent: 'hsl(var(--sidebar-accent))', + 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))', + border: 'hsl(var(--sidebar-border))', + ring: 'hsl(var(--sidebar-ring))', + }, + surface: 'hsl(var(--surface) / )', }, borderRadius: { - xl: "calc(var(--radius) + 4px)", - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)" + xl: 'calc(var(--radius) + 4px)', + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)', }, fontFamily: { - sans: [...fontFamily.sans] + sans: [...fontFamily.sans], }, keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--bits-accordion-content-height)" }, + 'accordion-down': { + from: { height: '0' }, + to: { height: 'var(--bits-accordion-content-height)' }, }, - "accordion-up": { - from: { height: "var(--bits-accordion-content-height)" }, - to: { height: "0" }, + 'accordion-up': { + from: { height: 'var(--bits-accordion-content-height)' }, + to: { height: '0' }, }, - "caret-blink": { - "0%,70%,100%": { opacity: "1" }, - "20%,50%": { opacity: "0" }, + 'caret-blink': { + '0%,70%,100%': { opacity: '1' }, + '20%,50%': { opacity: '0' }, }, }, animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", - "caret-blink": "caret-blink 1.25s ease-out infinite", - }, + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out', + 'caret-blink': 'caret-blink 1.25s ease-out infinite', + }, }, }, plugins: [tailwindcssAnimate],