Some more CSS styling for the options page.

This commit is contained in:
Ryan Breen
2023-01-25 00:14:15 -05:00
parent b6acf27087
commit 83cf21e5f5
6 changed files with 284 additions and 90 deletions

View File

@@ -10,36 +10,39 @@
</head>
<body x-data="options" class="text-fuchsia-900 bg-fuchsia-400 p-32">
<h1 class="text-6xl font-bold">Settings</h1>
<h1 class="text-6xl font-bold">Advanced</h1>
<select x-model.number="profileIndex" name="profiles" id="profiles">
<select class="mt-3 input w-64" x-model.number="profileIndex" name="profiles" id="profiles" class="mt-3">
<template x-for="(profileName, index) in profileNames" :key="profileName">
<option x-text="profileName" :value="index"></option>
</template>
</select>
<h2 class="text-5xl font-bold">Relays</h2>
<h2 class="text-5xl font-bold mt-6">Relays</h2>
<table>
<thead>
<td>URL</td>
<td>Read</td>
<td>Write</td>
<td>Actions</td>
<table class="mt-3">
<thead class="font-bold text-lg">
<td class="p-2 text-center">URL</td>
<td class="p-2 text-center">Read</td>
<td class="p-2 text-center">Write</td>
<td class="p-2 text-center">Actions</td>
</thead>
<template x-for="(relay, index) in relays" :key="index">
<tr>
<td x-text="relay.url"></td>
<td><input type="checkbox" x-model="relay.read" @change="await saveRelaysForProfile(index)"></td>
<td><input type="checkbox" x-model="relay.write" @change="await saveRelaysForProfile(index)"></td>
<td><button
class="rounded-lg p-1 bg-fuchsia-900 text-fuchsia-400 hover:bg-fuchsia-800 hover:text-fuchsia-300 active:bg-fuchsia-700 active:text-fuchsia-200"
@click="await deleteRelay(index)">Delete</button></td>
<td class="p-2 w-1/3" x-text="relay.url"></td>
<td class="p-2 text-center"><input type="checkbox" x-model="relay.read"
@change="await saveRelaysForProfile(index)"></td>
<td class="p-2 text-center"><input type="checkbox" x-model="relay.write"
@change="await saveRelaysForProfile(index)"></td>
<td class="p-2 text-center">
<button class="btn" @click="await deleteRelay(index)">Delete</button>
</td>
</tr>
</template>
</table>
<input x-model="newRelay" type="text" @keyup.enter="await addRelay()"> <button @click="await addRelay()">Add</button>
<input class="mt-3 input" x-model="newRelay" type="text" @keyup.enter="await addRelay()" placeholder="wss://...">
<button class="btn" @click="await addRelay()">Add</button>
<div class="text-red-500 font-bold" x-show="urlError.length > 0" x-text="urlError"></div>
</body>