Avatarit vaakariviin: kompakti layout, säästää pystytilaa
Org-chart muutettu vertikaalisesta hierarkiasta horisontaaliseksi riviksi: Asiakas → Manageri → [Koodari, Data, QA, DevOps, Tarkkailija] - Connector-viivat muutettu pystysuuntaisista vaakanuoliksi - Avatar-kortit 72px leveitä (oli 130px), kuvat 48px (oli 80px) - Roolikuvaus poistettu korteista — pelkkä nimi riittää - Tarkkailija siirretty absolute-asemasta rivin loppuun - Responsive-tyylit päivitetty Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -397,56 +397,48 @@
|
|||||||
.terminal-prompt { color: #d29922; }
|
.terminal-prompt { color: #d29922; }
|
||||||
.org-chart {
|
.org-chart {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 40px;
|
gap: 6px;
|
||||||
perspective: 1000px;
|
margin-bottom: 12px;
|
||||||
padding: 25px 50px;
|
padding: 10px 12px;
|
||||||
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
.org-level {
|
.org-level {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
gap: 6px;
|
||||||
gap: 40px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.org-connector {
|
.org-connector {
|
||||||
width: 2px;
|
width: 20px;
|
||||||
height: 40px;
|
height: 2px;
|
||||||
background: linear-gradient(to bottom, rgba(88, 166, 255, 0.8), rgba(88, 166, 255, 0.2));
|
background: linear-gradient(to right, rgba(88, 166, 255, 0.8), rgba(88, 166, 255, 0.2));
|
||||||
margin: 0px auto;
|
align-self: center;
|
||||||
box-shadow: 0 0 10px rgba(88, 166, 255, 0.5);
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.org-branch {
|
.org-branch {
|
||||||
width: 510px;
|
display: none;
|
||||||
height: 40px;
|
|
||||||
border-top: 2px solid rgba(88, 166, 255, 0.5);
|
|
||||||
border-left: 2px solid rgba(88, 166, 255, 0.5);
|
|
||||||
border-right: 2px solid rgba(88, 166, 255, 0.5);
|
|
||||||
border-top-left-radius: 12px;
|
|
||||||
border-top-right-radius: 12px;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: -2px;
|
|
||||||
box-shadow: inset 0 3px 6px -3px rgba(88, 166, 255, 0.4);
|
|
||||||
}
|
}
|
||||||
.avatar-card {
|
.avatar-card {
|
||||||
background: linear-gradient(145deg, rgba(33, 38, 45, 0.4) 0%, rgba(13, 17, 23, 0.8) 100%);
|
background: linear-gradient(145deg, rgba(33, 38, 45, 0.4) 0%, rgba(13, 17, 23, 0.8) 100%);
|
||||||
backdrop-filter: blur(12px);
|
backdrop-filter: blur(12px);
|
||||||
border: 1px solid rgba(240, 246, 252, 0.1);
|
border: 1px solid rgba(240, 246, 252, 0.1);
|
||||||
border-radius: 16px;
|
border-radius: 12px;
|
||||||
padding: 12px 10px;
|
padding: 6px 6px 4px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 130px;
|
width: 72px;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
|
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
||||||
}
|
}
|
||||||
.avatar-card:hover {
|
.avatar-card:hover {
|
||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
transform: translateY(-4px) scale(1.02);
|
transform: translateY(-2px) scale(1.02);
|
||||||
border-color: rgba(240, 246, 252, 0.3);
|
border-color: rgba(240, 246, 252, 0.3);
|
||||||
box-shadow: 0 12px 20px rgba(0,0,0,0.4);
|
box-shadow: 0 8px 14px rgba(0,0,0,0.4);
|
||||||
}
|
}
|
||||||
@keyframes idle-breathe {
|
@keyframes idle-breathe {
|
||||||
0%, 100% { transform: translateY(0) scale(1); }
|
0%, 100% { transform: translateY(0) scale(1); }
|
||||||
@@ -461,10 +453,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.avatar-card img {
|
.avatar-card img {
|
||||||
width: 80px;
|
width: 48px;
|
||||||
height: 80px;
|
height: 48px;
|
||||||
border-radius: 18px;
|
border-radius: 12px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 4px;
|
||||||
border: 2px solid rgba(240, 246, 252, 0.1);
|
border: 2px solid rgba(240, 246, 252, 0.1);
|
||||||
transition: all 0.4s ease;
|
transition: all 0.4s ease;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
@@ -608,7 +600,7 @@
|
|||||||
background: #0d1117;
|
background: #0d1117;
|
||||||
border: 1px solid var(--accent-color);
|
border: 1px solid var(--accent-color);
|
||||||
}
|
}
|
||||||
.avatar-name { font-weight: 700; font-size: 13px; color: #f0f6fc; letter-spacing: 0.5px; margin-bottom: 2px; }
|
.avatar-name { font-weight: 700; font-size: 10px; color: #f0f6fc; letter-spacing: 0.3px; margin-bottom: 0; }
|
||||||
.avatar-role { font-size: 10px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; line-height: 1.2; word-wrap: break-word; }
|
.avatar-role { font-size: 10px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; line-height: 1.2; word-wrap: break-word; }
|
||||||
.agent-prompt-editor {
|
.agent-prompt-editor {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
@@ -669,17 +661,14 @@
|
|||||||
#metrics-grid { grid-template-columns: 1fr 1fr !important; }
|
#metrics-grid { grid-template-columns: 1fr 1fr !important; }
|
||||||
|
|
||||||
/* Org chart mobile tweaks */
|
/* Org chart mobile tweaks */
|
||||||
.org-chart { padding: 20px 10px; }
|
.org-chart { padding: 6px; gap: 4px; }
|
||||||
.org-branch { display: none; }
|
.org-level { flex-wrap: wrap; gap: 4px !important; }
|
||||||
.org-connector { margin-bottom: 10px; height: 20px; }
|
.org-connector { width: 12px; }
|
||||||
.org-level { flex-wrap: wrap; justify-content: center; gap: 15px !important; }
|
|
||||||
#avatar-observer { display: block; position: relative !important; right: auto !important; top: auto !important; margin: 0 auto; margin-bottom: 15px; }
|
|
||||||
|
|
||||||
/* Avatar cards downscaling */
|
/* Avatar cards downscaling */
|
||||||
.avatar-card { width: 100px; padding: 8px 4px; }
|
.avatar-card { width: 56px; padding: 4px 3px 2px; }
|
||||||
.avatar-card img { width: 55px; height: 55px; margin-bottom: 4px; border-radius: 12px; }
|
.avatar-card img { width: 36px; height: 36px; margin-bottom: 2px; border-radius: 8px; }
|
||||||
.avatar-name { font-size: 11px; margin-bottom: 1px; }
|
.avatar-name { font-size: 9px; margin-bottom: 0; }
|
||||||
.avatar-role { font-size: 8px; line-height: 1.1; }
|
|
||||||
|
|
||||||
/* User Input Area */
|
/* User Input Area */
|
||||||
#user-input-box > div { flex-direction: column; }
|
#user-input-box > div { flex-direction: column; }
|
||||||
@@ -696,8 +685,8 @@
|
|||||||
.container > div:first-child { margin-bottom: 6px; }
|
.container > div:first-child { margin-bottom: 6px; }
|
||||||
.container h1 { font-size: 22px; }
|
.container h1 { font-size: 22px; }
|
||||||
.container .sub { font-size: 12px; }
|
.container .sub { font-size: 12px; }
|
||||||
.avatar-card { padding: 6px 4px; }
|
.avatar-card { padding: 4px 4px 2px; }
|
||||||
.avatar-card img { width: 50px; height: 50px; margin-bottom: 4px; }
|
.avatar-card img { width: 40px; height: 40px; margin-bottom: 2px; }
|
||||||
}
|
}
|
||||||
@media (min-height: 1200px) {
|
@media (min-height: 1200px) {
|
||||||
.terminal-panel { height: clamp(350px, 40vh, 600px); }
|
.terminal-panel { height: clamp(350px, 40vh, 600px); }
|
||||||
@@ -1026,58 +1015,40 @@
|
|||||||
<!-- LEFT COLUMN: Org chart & Prompt Editor -->
|
<!-- LEFT COLUMN: Org chart & Prompt Editor -->
|
||||||
<div style="flex:1; min-width:300px; overflow-x:auto;">
|
<div style="flex:1; min-width:300px; overflow-x:auto;">
|
||||||
<div class="org-chart">
|
<div class="org-chart">
|
||||||
<!-- Taso 1 -->
|
|
||||||
<div class="org-level">
|
<div class="org-level">
|
||||||
<div class="avatar-card" id="avatar-client" data-agent="client" onclick="selectAgent('client', event)">
|
<div class="avatar-card" id="avatar-client" data-agent="client" onclick="selectAgent('client', event)">
|
||||||
<img src="/avatars/kettu_notext.png" alt="Asiakas (Kettu)">
|
<img src="/avatars/kettu_notext.png" alt="Asiakas">
|
||||||
<div class="avatar-name">Asiakas</div>
|
<div class="avatar-name">Asiakas</div>
|
||||||
<div class="avatar-role">Tuoteomistaja</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="org-connector"></div>
|
<div class="org-connector"></div>
|
||||||
|
<div class="org-level">
|
||||||
<!-- Taso 2 -->
|
|
||||||
<div class="org-level" style="position: relative;">
|
|
||||||
<!-- Tarkkailija laitetaan erilleen kauemmas sivuun jotta se näyttää itsenäiseltä valvojalta -->
|
|
||||||
<div class="avatar-card" id="avatar-observer" data-agent="observer" onclick="selectAgent('observer', event)" style="position: absolute; right: calc(50% + 350px); top: 0;">
|
|
||||||
<img src="/avatars/aikuinen_susi.png" alt="Tarkkailija (Aikuinen Susi)">
|
|
||||||
<div class="avatar-name">Tarkkailija</div>
|
|
||||||
<div class="avatar-role">Laadunvalvonta</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="avatar-card" id="avatar-kpn" data-agent="manager" onclick="selectAgent('manager', event)">
|
<div class="avatar-card" id="avatar-kpn" data-agent="manager" onclick="selectAgent('manager', event)">
|
||||||
<img src="/avatars/karhunpentu.png" alt="Manageri (Karhunpentu)">
|
<img src="/avatars/karhunpentu.png" alt="Manageri">
|
||||||
<div class="avatar-name">Manageri</div>
|
<div class="avatar-name">Manageri</div>
|
||||||
<div class="avatar-role">KPN CLI</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="org-connector"></div>
|
<div class="org-connector"></div>
|
||||||
|
<div class="org-level">
|
||||||
<div class="org-branch"></div>
|
|
||||||
|
|
||||||
<!-- Taso 3 -->
|
|
||||||
<div class="org-level" style="gap: 20px;">
|
|
||||||
<div class="avatar-card" id="avatar-coder" data-agent="coder" onclick="selectAgent('coder', event)">
|
<div class="avatar-card" id="avatar-coder" data-agent="coder" onclick="selectAgent('coder', event)">
|
||||||
<img src="/avatars/kipina_notext.png" alt="Koodari (Salamanteri)">
|
<img src="/avatars/kipina_notext.png" alt="Koodari">
|
||||||
<div class="avatar-name">Koodari</div>
|
<div class="avatar-name">Koodari</div>
|
||||||
<div class="avatar-role">SOFTAKEHITYS</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="avatar-card" id="avatar-data" data-agent="data" onclick="selectAgent('data', event)">
|
<div class="avatar-card" id="avatar-data" data-agent="data" onclick="selectAgent('data', event)">
|
||||||
<img src="/avatars/pesukarhu_notext.png" alt="Data-Agentti (Pesukarhu)">
|
<img src="/avatars/pesukarhu_notext.png" alt="Data">
|
||||||
<div class="avatar-name">Data</div>
|
<div class="avatar-name">Data</div>
|
||||||
<div class="avatar-role">Tietokannat</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="avatar-card" id="avatar-qa" data-agent="qa" onclick="selectAgent('qa', event)">
|
<div class="avatar-card" id="avatar-qa" data-agent="qa" onclick="selectAgent('qa', event)">
|
||||||
<img src="/avatars/susi_notext.png" alt="QA (Pikkususi)">
|
<img src="/avatars/susi_notext.png" alt="QA">
|
||||||
<div class="avatar-name">QA</div>
|
<div class="avatar-name">QA</div>
|
||||||
<div class="avatar-role">Testaus</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="avatar-card" id="avatar-tester" data-agent="tester" onclick="selectAgent('tester', event)">
|
<div class="avatar-card" id="avatar-tester" data-agent="tester" onclick="selectAgent('tester', event)">
|
||||||
<img src="/avatars/laiskiainen_notext.png" alt="DevOps (Laiskiainen)">
|
<img src="/avatars/laiskiainen_notext.png" alt="DevOps">
|
||||||
<div class="avatar-name">DevOps</div>
|
<div class="avatar-name">DevOps</div>
|
||||||
<div class="avatar-role">Käyttöönotto</div>
|
</div>
|
||||||
|
<div class="avatar-card" id="avatar-observer" data-agent="observer" onclick="selectAgent('observer', event)">
|
||||||
|
<img src="/avatars/aikuinen_susi.png" alt="Tarkkailija">
|
||||||
|
<div class="avatar-name">Tarkkailija</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user