soconnor/robot-plugins
1
0
Fork 0
mirror of https://github.com/soconnor0919/robot-plugins.git synced 2025-12-12 23:24:43 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refine web interface styling and layout with semantic class names

Browse Source
This commit is contained in:
Sean O'Connor
2025-02-14 09:45:58 -05:00
parent c027e50f47
commit 8a12b0ee1b
2 changed files with 120 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
assets/style.css
View File

@@ -106,6 +106,10 @@ body::after {
grid-template-columns: repeat(2, 1fr);
}
.space-y-6 > * + * {
margin-top: 1.5rem;
}
@media (max-width: 768px) {
.grid-cols-2 {
grid-template-columns: 1fr;
@@ -178,6 +182,86 @@ body::after {
background: hsl(var(--secondary));
}
/* Stats Grid */
.stats-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.stat-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
background: hsl(var(--secondary));
border-radius: var(--radius);
}
.stat-label {
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--muted-foreground));
}
.stat-value {
font-size: 1.5rem;
font-weight: 600;
color: hsl(var(--card-foreground));
line-height: 1;
}
/* Info Grid */
.info-grid {
display: grid;
gap: 1.5rem;
}
.info-section {
display: grid;
gap: 1rem;
}
.info-title {
font-size: 0.875rem;
font-weight: 600;
color: hsl(var(--card-foreground));
padding-bottom: 0.5rem;
border-bottom: 1px solid hsl(var(--border));
}
.info-item {
display: grid;
gap: 0.5rem;
}
.info-label {
font-size: 0.875rem;
color: hsl(var(--muted-foreground));
}
.info-value {
font-size: 0.875rem;
color: hsl(var(--card-foreground));
}
.info-link {
color: hsl(var(--primary));
text-decoration: none;
font-size: 0.875rem;
}
.info-link:hover {
text-decoration: underline;
}
/* Badge List */
.badge-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Badges and Tags */
.badge {
display: inline-flex;
@@ -208,39 +292,6 @@ body::after {
line-height: 1;
background: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
margin: 0.25rem;
}
/* Stats */
.stat {
display: flex;
align-items: center;
gap: 0.5rem;
color: hsl(var(--muted-foreground));
font-size: 0.875rem;
}
/* Content */
.content {
display: grid;
gap: 0.75rem;
}
.content h4 {
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: hsl(var(--card-foreground));
}
.content a {
color: hsl(var(--primary));
text-decoration: none;
font-size: 0.875rem;
}
.content a:hover {
text-decoration: underline;
}
/* Code */

65
index.html
View File

@@ -9,7 +9,7 @@
<body>
<div class="container">
<div id="loading">Loading repository data...</div>
<div id="content" class="hidden">
<div id="content" class="hidden space-y-6">
<!-- Header -->
<div class="card header-card">
<div class="card-header">
@@ -30,9 +30,11 @@
<p class="card-description">Repository information and metrics</p>
</div>
<div class="card-content">
<div class="stat">
<span>Available Plugins:</span>
<span id="pluginCount"></span>
<div class="stats-grid">
<div class="stat-item">
<span class="stat-label">Available Plugins</span>
<span id="pluginCount" class="stat-value"></span>
</div>
</div>
</div>
</div>
@@ -46,17 +48,18 @@
<p class="card-description">Repository maintainer information</p>
</div>
<div class="card-content">
<div class="content">
<div>
<span>Name:</span>
<span id="authorName"></span>
<div class="info-grid">
<div class="info-item">
<span class="info-label">Name</span>
<span id="authorName" class="info-value"></span>
</div>
<div id="authorOrgContainer" class="hidden">
<span>Organization:</span>
<span id="authorOrg"></span>
<div id="authorOrgContainer" class="info-item hidden">
<span class="info-label">Organization</span>
<span id="authorOrg" class="info-value"></span>
</div>
<div id="authorUrlContainer" class="hidden">
<a id="authorUrl" target="_blank">View Profile</a>
<div id="authorUrlContainer" class="info-item hidden">
<span class="info-label">Profile</span>
<a id="authorUrl" target="_blank" class="info-link">View Profile</a>
</div>
</div>
</div>
@@ -69,24 +72,27 @@
<p class="card-description">Version requirements and support</p>
</div>
<div class="card-content">
<div class="content">
<div>
<h4>HRIStudio</h4>
<div>
<span>Min Version:</span>
<code id="hriMin"></code>
<div class="info-grid">
<div class="info-section">
<h4 class="info-title">HRIStudio</h4>
<div class="info-item">
<span class="info-label">Min Version</span>
<code id="hriMin" class="info-value"></code>
</div>
<div id="hriRecommendedContainer" class="hidden">
<span>Recommended:</span>
<code id="hriRecommended"></code>
<div id="hriRecommendedContainer" class="info-item hidden">
<span class="info-label">Recommended</span>
<code id="hriRecommended" class="info-value"></code>
</div>
</div>
<div id="ros2Container" class="hidden">
<h4>ROS 2</h4>
<div id="ros2Distributions"></div>
<div id="ros2RecommendedContainer" class="hidden">
<span>Recommended:</span>
<code id="ros2Recommended"></code>
<div id="ros2Container" class="info-section hidden">
<h4 class="info-title">ROS 2</h4>
<div class="info-item">
<span class="info-label">Distributions</span>
<div id="ros2Distributions" class="badge-list"></div>
</div>
<div id="ros2RecommendedContainer" class="info-item hidden">
<span class="info-label">Recommended</span>
<code id="ros2Recommended" class="info-value"></code>
</div>
</div>
</div>
@@ -101,7 +107,7 @@
<p class="card-description">Repository categories and features</p>
</div>
<div class="card-content">
<div id="tags"></div>
<div id="tags" class="badge-list"></div>
</div>
</div>
</div>
@@ -193,4 +199,5 @@
loadRepositoryData();
</script>
</body>
</html>
</html>