iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve expand icon

Browse Source
This commit is contained in:
0x1d
2025-08-25 10:32:47 +02:00
parent e393b07471
commit d5b8b5d8d4
2 changed files with 40 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/script.js
View File

@@ -424,7 +424,11 @@ function displayClusterMembers(members, expandedCards = new Map()) {
<span class="latency-value">${member.latency ? member.latency + 'ms' : 'N/A'}</span> <span class="latency-value">${member.latency ? member.latency + 'ms' : 'N/A'}</span>
</div> </div>
</div> </div>
<div class="expand-icon">▶️</div> <div class="expand-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 9l6 6 6-6"/>
</svg>
</div>
</div> </div>
<div class="member-details"> <div class="member-details">
<div class="loading-details">Loading detailed information...</div> <div class="loading-details">Loading detailed information...</div>

39
public/styles.css
View File

@@ -150,8 +150,23 @@ p {
transform: scale(1.02); transform: scale(1.02);
} }
.expand-icon:hover {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.2);
}
.expand-icon:hover svg {
}
.member-card.expanded .expand-icon { .member-card.expanded .expand-icon {
transform: rotate(90deg); background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.9);
}
.member-card.expanded .expand-icon svg {
transform: rotate(180deg);
} }
.member-header { .member-header {
@@ -166,9 +181,25 @@ p {
} }
.expand-icon { .expand-icon {
font-size: 1.2rem; color: rgba(255, 255, 255, 0.7);
opacity: 0.7; cursor: pointer;
transition: transform 0.3s ease; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-left: auto;
padding: 0.25rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.expand-icon svg {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.member-details { .member-details {