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

feature/capabilities (#2)

Browse Source 
Reviewed-on: #2
This commit is contained in:
master
2025-08-28 11:17:37 +02:00
parent 6c58e479af
commit bb46e5d412
6 changed files with 504 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
public/styles.css
View File

@@ -209,16 +209,16 @@ p {
}
.member-card {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 1rem;
transition: all 0.2s ease;
cursor: pointer;
position: relative;
margin-bottom: 0.5rem;
opacity: 1;
transform: translateY(0);
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 1rem;
transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
cursor: pointer;
position: relative;
margin-bottom: 0.5rem;
opacity: 1;
z-index: 1;
}
.member-card::before {
@@ -240,18 +240,18 @@ p {
}
.member-card:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
z-index: 2;
}
.member-card.expanded {
background: rgba(0, 0, 0, 0.6);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.6);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
z-index: 5;
}
.member-card.expanded:hover {
transform: scale(1.02) translateY(-2px);
}
.expand-icon:hover {
@@ -307,15 +307,16 @@ p {
}
.member-details {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
opacity: 0;
}
.member-card.expanded .member-details {
max-height: 2000px; /* Allow full expansion for active tasks while maintaining smooth transition */
opacity: 1;
max-height: none; /* Remove fixed limit to allow dynamic height */
opacity: 1;
overflow: visible;
}
.detail-row {
@@ -1689,7 +1690,6 @@ p {
}
.member-card.expanded .member-details {
max-height: 2000px; /* Allow full expansion for active tasks while maintaining smooth transition */
opacity: 1;
}
@@ -1725,4 +1725,153 @@ p {
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease;
}
/* Capabilities Styles */
.capabilities-list {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.capability-item {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 0.75rem;
}
.capability-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.cap-method {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.5px;
padding: 0.15rem 0.5rem;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.9);
}
.cap-uri {
font-family: 'Courier New', monospace;
font-size: 0.85rem;
opacity: 0.9;
flex: 1;
}
.cap-call-btn {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.9);
padding: 0.4rem 0.8rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
}
.cap-call-btn:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
border-color: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.capability-form {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.5rem 0.75rem;
margin-top: 0.5rem;
}
.capability-param {
display: flex;
flex-direction: column;
gap: 0.25rem;
background: rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
padding: 0.5rem;
}
.param-name {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
/* Adjust param-input to support <select> as well */
.param-input {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ecf0f1;
padding: 0.45rem 0.6rem;
border-radius: 6px;
outline: none;
transition: border-color 0.2s ease, background 0.2s ease;
font-size: 0.9rem;
appearance: none;
}
.param-input option {
background: #1f2937;
color: #ecf0f1;
}
.param-input:focus {
border-color: rgba(139, 92, 246, 0.5);
background: rgba(139, 92, 246, 0.08);
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}
.capability-params.none {
opacity: 0.7;
font-size: 0.85rem;
padding: 0.25rem 0.25rem 0 0.25rem;
}
.capability-result {
margin-top: 0.5rem;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.2);
padding: 0.75rem;
}
.cap-call-success {
color: #4caf50;
background: rgba(76, 175, 80, 0.1);
border: 1px solid rgba(76, 175, 80, 0.2);
padding: 0.5rem;
border-radius: 6px;
}
.cap-call-error {
color: #f44336;
background: rgba(244, 67, 54, 0.1);
border: 1px solid rgba(244, 67, 54, 0.2);
padding: 0.5rem;
border-radius: 6px;
}
.cap-result-pre {
margin-top: 0.5rem;
white-space: pre-wrap;
word-break: break-word;
font-family: 'Courier New', monospace;
font-size: 0.85rem;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 0.5rem;
border-radius: 6px;
}