Layout/Style adjustments
This commit is contained in:
1 parent
e662548d79
commit
286a91204f
6 files changed
+103
-84
No files matched your search
@@ -58,6 +58,10 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
.chat-page .page-content > * {
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
#chat {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user