Nice! got DaisyUI themes to work!

This commit is contained in:
BOTAlex 2024-07-29 18:05:03 +02:00
parent b381426a05
commit 0b6c3ba827
10 changed files with 44 additions and 29 deletions

View File

@ -1,4 +1,7 @@
@import '@fontsource/fira-mono'; @import '@fontsource/fira-mono';
@tailwind base;
@tailwind components;
@tailwind utilities;
:root { :root {
--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, --font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,

View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" data-theme="coffee">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
@ -9,8 +9,8 @@
<!-- IMPORTANT: Remove before production!!! --> <!-- IMPORTANT: Remove before production!!! -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script src="src/lib/OpenBirchWasm/OpenBirchWrapper.js"></script> <script src="./OpenBirchWasm/OpenBirchWrapper.js"></script>
<script src="src/lib/OpenBirchWasm/OpenBirch.js"></script> <script src="./OpenBirchWasm/OpenBirch.js"></script>
</head> </head>

View File

@ -57,7 +57,7 @@
</div> </div>
</div> </div>
</ParallaxLayer> </ParallaxLayer>
<ParallaxLayer rate={0.2} offset={0.6} span={1} class="bg-base-100"> <ParallaxLayer rate={0.1} offset={0.575} span={1} class="bg-base-100">
<div class="double_centered_boxes py-16"> <div class="double_centered_boxes py-16">
<div> <div>
<h1 class="text-neutral-content"> <h1 class="text-neutral-content">

View File

@ -5,13 +5,13 @@
</script> </script>
<header class="navbar bg-base-100"> <header class="navbar bg-base-100">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar"> <a tabindex="0" role="button" href="/" class="btn btn-ghost btn-circle avatar">
<div class="w-10 rounded-full"> <div class="w-10 rounded-full">
<img <img
alt="Tailwind CSS Navbar component" alt="Tailwind CSS Navbar component"
src={goku} /> src={goku} />
</div> </div>
</div> </a>
<div class="flex-1"/> <div class="flex-1"/>
<div class="flex-none"> <div class="flex-none">
<ul class="menu menu-horizontal px-1"> <ul class="menu menu-horizontal px-1">

View File

@ -7,39 +7,46 @@
test = test.concat(test); test = test.concat(test);
test = test.concat(test); test = test.concat(test);
let inputValue: string; let inputField: HTMLInputElement;
async function handleKeydown(event: KeyboardEvent) { async function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Enter') { if (event.key === 'Enter') {
OpenBirch.sendCommand(inputValue) pushCommand();
inputValue = '';
} }
} }
// Locally start sending command
function pushCommand(){
OpenBirch.sendCommand(inputField.value)
inputField.value = '';
}
</script> </script>
<div class="consoleContainer p-4" style="height: 92vh;"> <div class="consoleContainer p-4">
<div class="overflow-auto p-4" style="background-color: #191724;"> <div class="p-4 flex grow flex-col bg-primary-content rounded-xl overflow-auto">
<ul> <div class="">
<ul class="prose">
{#each $OpenBirch as consoleEntry} {#each $OpenBirch as consoleEntry}
{#if consoleEntry.sender == 0} {#if consoleEntry.sender == 0}
<li>{consoleEntry.message}</li> <li class=""><b>&gt;</b> {" " + consoleEntry.message}</li>
{:else} {:else}
<li>&gt;{" " + consoleEntry.message}</li> <li class="text-accent opacity-75"><b><i>{consoleEntry.message}</i></b></li>
{/if} {/if}
{/each} {/each}
</ul> </ul>
</div> </div>
</div>
<div> <div class="pt-4 join">
<label class="input input-bordered flex items-center gap-2"> <div class="input join-item input-bordered flex grow items-center gap-2">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="currentColor" class="h-8 w-8 opacity-70 block m-auto fill-primary">
class="h-8 w-8 opacity-70 block m-auto">
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/> <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
</svg> </svg>
<input type="text" class="grow" placeholder="Search" bind:value={inputValue} on:keydown={handleKeydown} /> <input autofocus type="text" class="grow text-primary" placeholder="" bind:this={inputField} on:keydown={handleKeydown} />
</label> </div>
<button class="btn join-item btn-secondary" on:click={pushCommand}>Execute</button>
</div> </div>
</div> </div>
@ -49,6 +56,12 @@
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
position: absolute;
right: 0;
left: 0;
bottom: 0;
top: 75px;
&:nth-child(1) { &:nth-child(1) {
flex: 0 0 90%; flex: 0 0 90%;
} }

View File

@ -6,8 +6,7 @@ export default {
}, },
plugins: [require("@tailwindcss/typography"), require('daisyui')], plugins: [require("@tailwindcss/typography"), require('daisyui')],
daisyui: { daisyui: {
themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"] themes: ["coffee"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
darkTheme: "dark", // name of one of the included themes for dark mode
base: true, // applies background color and foreground color for root element by default base: true, // applies background color and foreground color for root element by default
styled: true, // include daisyUI colors and design decisions for all components styled: true, // include daisyUI colors and design decisions for all components
utils: true, // adds responsive and modifier utility classes utils: true, // adds responsive and modifier utility classes

View File

@ -2,7 +2,7 @@
"extends": "./.svelte-kit/tsconfig.json", "extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"allowJs": true, "allowJs": true,
"checkJs": true, "checkJs": false,
"esModuleInterop": true, "esModuleInterop": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"resolveJsonModule": true, "resolveJsonModule": true,