Develop Frontend Components for Project, Package, and Instance Views

2025-12-12 10:23:44 -06:00
parent 8b7b523aa8
commit e89947f3d3
25 changed files with 2123 additions and 170 deletions
--- a/frontend/src/pages/Home.css
+++ b/frontend/src/pages/Home.css
@@ -272,6 +272,179 @@
  color: var(--text-muted);
 }

+.owner {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+.project-meta__dates {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  text-align: right;
+}
+
+.project-meta__owner {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border-primary);
+}
+
+/* List Controls */
+.list-controls {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.list-controls__search {
+  flex: 1;
+  min-width: 200px;
+  max-width: 400px;
+}
+
+/* Stats in project cards */
+.project-stats {
+  display: flex;
+  gap: 16px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-primary);
+}
+
+.project-stats__item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.project-stats__value {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.project-stats__label {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Page header enhancements */
+.page-header__info {
+  flex: 1;
+}
+
+.page-header__title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.page-header__meta {
+  display: flex;
+  gap: 16px;
+  margin-top: 8px;
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Package card styles */
+.package-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.package-card__header h3 {
+  margin-bottom: 0;
+}
+
+.package-stats {
+  display: flex;
+  gap: 20px;
+  margin: 16px 0;
+  padding: 12px 0;
+  border-top: 1px solid var(--border-primary);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.package-stats__item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.package-stats__value {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.package-stats__label {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.latest-tag {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.latest-tag strong {
+  color: var(--accent-primary);
+}
+
+/* List controls select */
+.list-controls__select {
+  padding: 8px 32px 8px 12px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+}
+
+.list-controls__select:hover {
+  background-color: var(--bg-hover);
+  border-color: var(--border-secondary);
+}
+
+.list-controls__select:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+}
+
+/* Form row for side-by-side inputs */
+.form-row {
+  display: flex;
+  gap: 16px;
+}
+
+.form-row .form-group {
+  flex: 1;
+}
+
 /* Breadcrumb */
 .breadcrumb {
  display: flex;