Layout/Style adjustments

This commit is contained in:
Meleki committed 2026-02-27 17:09:44 +01:00
1 parent e662548d79
commit 286a91204f
6 files changed
+103 -84

No files matched your search

+4
View File
@@ -58,6 +58,10 @@
border: none;
}
.chat-page .page-content > * {
width: 900px;
}
#chat {
flex: 1;
overflow-y: auto;
+1 -3
View File
@@ -1,6 +1,5 @@
.dashboard {
.dashboard .page-content {
padding: calc(var(--s4) * 2);
overflow-y: auto;
}
.dashboard section {
@@ -82,7 +81,6 @@
}
.card.placeholder {
border-style: dashed;
align-items: center;
justify-content: center;
}
-2
View File
@@ -1,10 +1,8 @@
.form {
padding: calc(var(--s4) * 2);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--s3);
max-width: 600px;
}
.avatar-section {
+13
View File
@@ -21,6 +21,19 @@ header {
overflow: hidden;
}
.page-content {
display: flex;
flex-direction: column;
align-items: flex-start;
overflow-y: auto;
flex: 1;
}
.page-content > * {
width: 600px;
max-width: 100%;
}
.back-btn {
background: none;
border: none;
+3 -4
View File
@@ -1,10 +1,9 @@
.placeholder-content {
.placeholder {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s4);
gap: var(--s2);
padding: calc(var(--s4) * 2);
}
.placeholder-icon {
+82 -75
View File
@@ -32,19 +32,20 @@
<template id="tpl-dashboard">
<div class="page dashboard">
<section>
<div class="section-header">
<h2>Sessions</h2>
</div>
<div class="card-grid" id="sessionCards"></div>
</section>
<section>
<div class="section-header">
<h2>Agents</h2>
</div>
<div class="card-grid" id="agentCards"></div>
</section>
<div class="page-content">
<section>
<div class="section-header">
<h2>Sessions</h2>
</div>
<div class="card-grid" id="sessionCards"></div>
</section>
<section>
<div class="section-header">
<h2>Agents</h2>
</div>
<div class="card-grid" id="agentCards"></div>
</section>
</div>
</div>
</template>
@@ -55,33 +56,35 @@
<h1 id="sessionPageTitle">Neue Session</h1>
<button id="openChatBtn" disabled>Chat öffnen</button>
</header>
<div class="form">
<div class="avatar-section">
<div class="avatar-preview" id="sessionImagePreview">?</div>
<input type="file" id="sessionImageInput" accept="image/*" hidden>
<button id="sessionImageBtn">Bild ändern</button>
<button id="sessionImageClearBtn">Entfernen</button>
</div>
<label>Name</label>
<input type="text" id="sessionName" placeholder="Name der Session">
<label>Beschreibung</label>
<textarea id="sessionDescription" rows="3" placeholder="Beschreibung (optional)"></textarea>
<label>Agent</label>
<select id="agentSelect"></select>
<label>Workspace</label>
<div class="input-with-btn">
<input type="text" id="sessionWorkspace" placeholder="Absoluter Pfad zum Arbeitsverzeichnis (optional)">
<button type="button" id="sessionWorkspaceBrowse" class="input-addon-btn">📂</button>
</div>
<label>Kontext</label>
<textarea id="sessionContext" rows="4" placeholder="Zusätzlicher Kontext für den System-Prompt (optional)"></textarea>
<label>Custom-Befehle</label>
<div class="custom-commands" id="customCommandsList"></div>
<button type="button" id="addCommandBtn" class="add-cmd-btn">+ Befehl hinzufügen</button>
<div class="form-actions">
<button id="sessionSaveBtn">Speichern</button>
<button id="sessionCancelBtn">Abbrechen</button>
<button id="sessionDeleteBtn" class="danger-btn" hidden>Löschen</button>
<div class="page-content">
<div class="form">
<div class="avatar-section">
<div class="avatar-preview" id="sessionImagePreview">?</div>
<input type="file" id="sessionImageInput" accept="image/*" hidden>
<button id="sessionImageBtn">Bild ändern</button>
<button id="sessionImageClearBtn">Entfernen</button>
</div>
<label>Name</label>
<input type="text" id="sessionName" placeholder="Name der Session">
<label>Beschreibung</label>
<textarea id="sessionDescription" rows="3" placeholder="Beschreibung (optional)"></textarea>
<label>Agent</label>
<select id="agentSelect"></select>
<label>Workspace</label>
<div class="input-with-btn">
<input type="text" id="sessionWorkspace" placeholder="Absoluter Pfad zum Arbeitsverzeichnis (optional)">
<button type="button" id="sessionWorkspaceBrowse" class="input-addon-btn">📂</button>
</div>
<label>Kontext</label>
<textarea id="sessionContext" rows="4" placeholder="Zusätzlicher Kontext für den System-Prompt (optional)"></textarea>
<label>Custom-Befehle</label>
<div class="custom-commands" id="customCommandsList"></div>
<button type="button" id="addCommandBtn" class="add-cmd-btn">+ Befehl hinzufügen</button>
<div class="form-actions">
<button id="sessionSaveBtn">Speichern</button>
<button id="sessionCancelBtn">Abbrechen</button>
<button id="sessionDeleteBtn" class="danger-btn" hidden>Löschen</button>
</div>
</div>
</div>
</div>
@@ -93,30 +96,32 @@
<button class="back-btn" data-page="dashboard">←</button>
<h1 id="agentPageTitle">Neuer Agent</h1>
</header>
<div class="form">
<div class="avatar-section">
<div class="avatar-preview" id="avatarPreview">?</div>
<input type="file" id="avatarInput" accept="image/*" hidden>
<button id="avatarBtn">Avatar ändern</button>
<button id="avatarClearBtn">Entfernen</button>
</div>
<label>Name</label>
<input type="text" id="agentName" placeholder="Name des Agents">
<label>Beschreibung</label>
<input type="text" id="agentDescription" placeholder="Kurze Beschreibung (optional)">
<label>Model</label>
<select id="agentModel">
<option value="sonnet">Sonnet 4.6</option>
<option value="opus">Opus 4.6</option>
</select>
<label>Persona</label>
<textarea id="agentPersona" rows="6" placeholder="Persönlichkeit / Seele des Agents"></textarea>
<label>Anweisungen</label>
<textarea id="agentInstructions" rows="6" placeholder="Technische Anweisungen"></textarea>
<div class="form-actions">
<button id="agentSaveBtn">Speichern</button>
<button id="agentCancelBtn">Abbrechen</button>
<button id="agentDeleteBtn" class="danger-btn" hidden>Löschen</button>
<div class="page-content">
<div class="form">
<div class="avatar-section">
<div class="avatar-preview" id="avatarPreview">?</div>
<input type="file" id="avatarInput" accept="image/*" hidden>
<button id="avatarBtn">Avatar ändern</button>
<button id="avatarClearBtn">Entfernen</button>
</div>
<label>Name</label>
<input type="text" id="agentName" placeholder="Name des Agents">
<label>Beschreibung</label>
<input type="text" id="agentDescription" placeholder="Kurze Beschreibung (optional)">
<label>Model</label>
<select id="agentModel">
<option value="sonnet">Sonnet 4.6</option>
<option value="opus">Opus 4.6</option>
</select>
<label>Persona</label>
<textarea id="agentPersona" rows="6" placeholder="Persönlichkeit / Seele des Agents"></textarea>
<label>Anweisungen</label>
<textarea id="agentInstructions" rows="6" placeholder="Technische Anweisungen"></textarea>
<div class="form-actions">
<button id="agentSaveBtn">Speichern</button>
<button id="agentCancelBtn">Abbrechen</button>
<button id="agentDeleteBtn" class="danger-btn" hidden>Löschen</button>
</div>
</div>
</div>
</div>
@@ -135,16 +140,18 @@
</div>
</div>
</header>
<div id="chat"></div>
<div class="meta-bar" id="meta"></div>
<div id="filePreview" class="file-preview" hidden></div>
<div id="refPreview" class="ref-preview" hidden></div>
<div class="input-area">
<input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf" multiple hidden>
<button id="explorerBtn" class="file-btn" title="Workspace durchsuchen">📂</button>
<button id="fileBtn" class="file-btn" title="Datei anhängen">📎</button>
<textarea id="input" placeholder="Nachricht eingeben... (Ctrl+Enter)" rows="2"></textarea>
<button id="send">Senden</button>
<div class="page-content">
<div id="chat"></div>
<div class="meta-bar" id="meta"></div>
<div id="filePreview" class="file-preview" hidden></div>
<div id="refPreview" class="ref-preview" hidden></div>
<div class="input-area">
<input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf" multiple hidden>
<button id="explorerBtn" class="file-btn" title="Workspace durchsuchen">📂</button>
<button id="fileBtn" class="file-btn" title="Datei anhängen">📎</button>
<textarea id="input" placeholder="Nachricht eingeben... (Ctrl+Enter)" rows="2"></textarea>
<button id="send">Senden</button>
</div>
</div>
</div>
</template>
@@ -155,7 +162,7 @@
<button class="back-btn" data-page="dashboard">←</button>
<h1>Einstellungen</h1>
</header>
<div class="placeholder-content">
<div class="page-content placeholder">
<div class="placeholder-icon">⚙️</div>
<h2>Einstellungen</h2>
<p>Hier können diverse Einstellungen getroffen werden.</p>