UI fixes
This commit is contained in:
parent
eaa79c6c49
commit
c939ab13c5
|
|
@ -59,7 +59,7 @@ Bun.serve<ClientData>({
|
|||
clients.delete(ws);
|
||||
if (clients.size === 0) wsClients.delete(game);
|
||||
}
|
||||
console.log(`[css-hot] ${game} disconnected (${wsClients.get(game)!.size} clients)`);
|
||||
console.log(`[css-hot] ${game} disconnected (${wsClients.get(game)?.size ?? 0} clients)`);
|
||||
},
|
||||
message() { },
|
||||
},
|
||||
|
|
|
|||
|
|
@ -99,8 +99,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
|
|
|
|||
|
|
@ -85,10 +85,10 @@
|
|||
|
||||
.deleteButton {
|
||||
composes: deleteButton from '@common/assets/ui.module.css';
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
height: 36px;
|
||||
min-width: 36px;
|
||||
border-radius: 6px;
|
||||
font-size: 20px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.field {
|
||||
|
|
|
|||
|
|
@ -85,10 +85,10 @@
|
|||
|
||||
.deleteButton {
|
||||
composes: deleteButton from '@common/assets/ui.module.css';
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
height: 36px;
|
||||
min-width: 36px;
|
||||
border-radius: 6px;
|
||||
font-size: 20px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.field {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,23 @@
|
|||
composes: editorHeader from '@common/assets/ui.module.css';
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.addEntry {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.titleInput {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
|
|
@ -119,6 +136,30 @@
|
|||
font-size: 18px;
|
||||
}
|
||||
|
||||
.deleteConfirm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: var(--radius);
|
||||
font-size: 13px;
|
||||
|
||||
& span {
|
||||
font-weight: 500;
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
.confirmButton {
|
||||
composes: confirmButton from '@common/assets/ui.module.css';
|
||||
}
|
||||
|
||||
.cancelButton {
|
||||
composes: cancelButton from '@common/assets/ui.module.css';
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@ import styles from '../../assets/character-editor.module.css';
|
|||
import { CharacterRole, useAppState, type Character } from "../../contexts/state";
|
||||
import LLM from "../../utils/llm";
|
||||
|
||||
// TODO fix delete button size
|
||||
|
||||
export const CharacterEditor = ({ visible }: { visible: boolean }) => {
|
||||
const { currentWorld, currentStory, mergedCharacters, dispatch, connection, model } = useAppState();
|
||||
const [newNickname, setNewNickname] = useState<Record<string, string>>({});
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ import styles from '../../assets/location-editor.module.css';
|
|||
import { LocationScale, useAppState, type Location } from "../../contexts/state";
|
||||
import LLM from "../../utils/llm";
|
||||
|
||||
// TODO fix delete button size
|
||||
|
||||
export const LocationEditor = ({ visible }: { visible: boolean }) => {
|
||||
const { currentWorld, currentStory, dispatch, connection, model } = useAppState();
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState<string | null>(null);
|
||||
|
|
|
|||
|
|
@ -3,13 +3,11 @@ import { useState } from "preact/hooks";
|
|||
import styles from '../../assets/lore-editor.module.css';
|
||||
import { useAppState, type LoreEntry } from "../../contexts/state";
|
||||
|
||||
// TODO move adding ui below title on mobile
|
||||
// TODO add confirm to delete
|
||||
|
||||
export const LoreEditor = ({ visible }: { visible: boolean }) => {
|
||||
const { currentWorld, currentStory, dispatch } = useAppState();
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [newTitle, setNewTitle] = useState('');
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState<string | null>(null);
|
||||
|
||||
if (!currentWorld || !visible) {
|
||||
return null;
|
||||
|
|
@ -157,13 +155,34 @@ export const LoreEditor = ({ visible }: { visible: boolean }) => {
|
|||
>
|
||||
↓
|
||||
</button>
|
||||
<button
|
||||
class={styles.deleteButton}
|
||||
onClick={() => handleDeleteEntry(entry.id)}
|
||||
title="Delete"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
{showDeleteConfirm === entry.id ? (
|
||||
<div class={styles.deleteConfirm}>
|
||||
<span>Delete?</span>
|
||||
<button
|
||||
class={styles.confirmButton}
|
||||
onClick={() => {
|
||||
handleDeleteEntry(entry.id);
|
||||
setShowDeleteConfirm(null);
|
||||
}}
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
class={styles.cancelButton}
|
||||
onClick={() => setShowDeleteConfirm(null)}
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
class={styles.deleteButton}
|
||||
onClick={() => setShowDeleteConfirm(entry.id)}
|
||||
title="Delete"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue