helios/rooms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact admin and trip UI with smaller padding and icon buttons

Browse Source
This commit is contained in:
Ian Gulliver
2026-02-14 22:27:49 -08:00
parent 7afbb1efa2
commit 5db70a51df
4 changed files with 57 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
static/admin.html
View File

@@ -9,50 +9,30 @@
font-family: var(--wa-font-sans); font-family: var(--wa-font-sans);
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
padding: 1rem; padding: 0.5rem;
opacity: 0; opacity: 0;
font-size: 0.9rem;
} }
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 0.5rem;
margin-bottom: 2rem; margin-bottom: 0.75rem;
}
.header img {
width: 40px;
height: 40px;
border-radius: 50%;
} }
.header img { width: 32px; height: 32px; border-radius: 50%; }
.header .spacer { flex: 1; } .header .spacer { flex: 1; }
wa-card { h2 { margin: 0.75rem 0 0.25rem; font-size: 1.1rem; }
margin-bottom: 1rem; wa-card { margin-bottom: 0.5rem; display: block; --spacing: 0.6rem; }
display: block; wa-button::part(base) { padding: 0.15rem 0.4rem; min-height: 0; }
} wa-button[size="small"]::part(base) { font-size: 0.8rem; }
wa-card h3 { margin: 0 0 0.5rem 0; } wa-input::part(base) { min-height: 0; }
.admin-row { .trip-header { display: flex; align-items: center; gap: 0.25rem; }
display: flex; .trip-header h3 { flex: 1; margin: 0; font-size: 1rem; }
align-items: center; .admin-row { display: flex; align-items: center; gap: 0.25rem; }
gap: 0.5rem; .add-row { display: flex; gap: 0.25rem; margin-top: 0.25rem; }
margin-bottom: 0.25rem; .add-row wa-input { flex: 1; }
} .create-trip { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; }
.add-admin-row {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
}
.add-admin-row wa-input { flex: 1; }
.create-trip {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
}
.create-trip wa-input { flex: 1; } .create-trip wa-input { flex: 1; }
.trip-header {
display: flex;
align-items: center;
gap: 0.5rem;
}
.trip-header h3 { flex: 1; }
</style> </style>
</head> </head>
<body> <body>
@@ -66,8 +46,8 @@
</div> </div>
<h2>Create Trip</h2> <h2>Create Trip</h2>
<div class="create-trip"> <div class="create-trip">
<wa-input id="new-trip-name" placeholder="Trip name"></wa-input> <wa-input id="new-trip-name" placeholder="Trip name" size="small"></wa-input>
<wa-button variant="brand" id="create-trip-btn">Create</wa-button> <wa-button size="small" id="create-trip-btn">+</wa-button>
</div> </div>
<h2>Trips</h2> <h2>Trips</h2>
<div id="trips"></div> <div id="trips"></div>

19
static/admin.js
View File

@@ -24,6 +24,7 @@ async function loadTrips() {
container.innerHTML = ''; container.innerHTML = '';
for (const trip of trips) { for (const trip of trips) {
const card = document.createElement('wa-card'); const card = document.createElement('wa-card');
const header = document.createElement('div'); const header = document.createElement('div');
header.className = 'trip-header'; header.className = 'trip-header';
const h3 = document.createElement('h3'); const h3 = document.createElement('h3');
@@ -32,9 +33,9 @@ async function loadTrips() {
tripLink.textContent = trip.name; tripLink.textContent = trip.name;
h3.appendChild(tripLink); h3.appendChild(tripLink);
const deleteBtn = document.createElement('wa-button'); const deleteBtn = document.createElement('wa-button');
deleteBtn.variant = 'danger';
deleteBtn.size = 'small'; deleteBtn.size = 'small';
deleteBtn.textContent = 'Delete Trip'; deleteBtn.variant = 'danger';
deleteBtn.textContent = '\u00d7';
deleteBtn.addEventListener('click', async () => { deleteBtn.addEventListener('click', async () => {
if (!confirm('Delete trip "' + trip.name + '"?')) return; if (!confirm('Delete trip "' + trip.name + '"?')) return;
await api('DELETE', '/api/trips/' + trip.id); await api('DELETE', '/api/trips/' + trip.id);
@@ -44,19 +45,15 @@ async function loadTrips() {
header.appendChild(deleteBtn); header.appendChild(deleteBtn);
card.appendChild(header); card.appendChild(header);
const adminLabel = document.createElement('strong');
adminLabel.textContent = 'Trip Admins:';
card.appendChild(adminLabel);
for (const admin of trip.admins) { for (const admin of trip.admins) {
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'admin-row'; row.className = 'admin-row';
const span = document.createElement('span'); const span = document.createElement('span');
span.textContent = admin.email; span.textContent = admin.email;
const removeBtn = document.createElement('wa-button'); const removeBtn = document.createElement('wa-button');
removeBtn.variant = 'danger';
removeBtn.size = 'small'; removeBtn.size = 'small';
removeBtn.textContent = 'Remove'; removeBtn.variant = 'text';
removeBtn.textContent = '\u00d7';
removeBtn.addEventListener('click', async () => { removeBtn.addEventListener('click', async () => {
await api('DELETE', '/api/trips/' + trip.id + '/admins/' + admin.id); await api('DELETE', '/api/trips/' + trip.id + '/admins/' + admin.id);
loadTrips(); loadTrips();
@@ -67,13 +64,13 @@ async function loadTrips() {
} }
const addRow = document.createElement('div'); const addRow = document.createElement('div');
addRow.className = 'add-admin-row'; addRow.className = 'add-row';
const input = document.createElement('wa-input'); const input = document.createElement('wa-input');
input.placeholder = 'Admin email'; input.placeholder = 'Admin email';
input.size = 'small';
const addBtn = document.createElement('wa-button'); const addBtn = document.createElement('wa-button');
addBtn.variant = 'neutral';
addBtn.size = 'small'; addBtn.size = 'small';
addBtn.textContent = 'Add Admin'; addBtn.textContent = '+';
addBtn.addEventListener('click', async () => { addBtn.addEventListener('click', async () => {
const email = input.value.trim(); const email = input.value.trim();
if (!email) return; if (!email) return;

61
static/trip.html
View File

@@ -9,52 +9,31 @@
font-family: var(--wa-font-sans); font-family: var(--wa-font-sans);
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto;
padding: 1rem; padding: 0.5rem;
opacity: 0; opacity: 0;
font-size: 0.9rem;
} }
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 0.5rem;
margin-bottom: 2rem; margin-bottom: 0.75rem;
}
.header img {
width: 40px;
height: 40px;
border-radius: 50%;
} }
.header img { width: 32px; height: 32px; border-radius: 50%; }
.header .spacer { flex: 1; } .header .spacer { flex: 1; }
wa-card { h2 { margin: 0.75rem 0 0.25rem; font-size: 1.1rem; }
margin-bottom: 1rem; h3 { margin: 0.5rem 0 0.25rem; font-size: 1rem; }
display: block; wa-card { margin-bottom: 0.5rem; display: block; --spacing: 0.6rem; }
} wa-button::part(base) { padding: 0.15rem 0.4rem; min-height: 0; }
wa-card h3 { margin: 0 0 0.5rem 0; } wa-button[size="small"]::part(base) { font-size: 0.8rem; }
.parent-row { wa-input::part(base) { min-height: 0; }
display: flex; .student-header { display: flex; align-items: center; gap: 0.25rem; }
align-items: center; .student-header span { flex: 1; font-weight: bold; }
gap: 0.5rem; .parent-row { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.75rem; }
margin-bottom: 0.25rem; .add-row { display: flex; gap: 0.25rem; margin-top: 0.25rem; margin-left: 0.75rem; }
margin-left: 1rem; .add-row wa-input { flex: 1; }
} .add-student { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; }
.add-parent-row {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
margin-left: 1rem;
}
.add-parent-row wa-input { flex: 1; }
.add-student {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
}
.add-student wa-input { flex: 1; } .add-student wa-input { flex: 1; }
.student-header {
display: flex;
align-items: center;
gap: 0.5rem;
}
.student-header h3 { flex: 1; }
</style> </style>
</head> </head>
<body> <body>
@@ -69,9 +48,9 @@
<h2 id="trip-name"></h2> <h2 id="trip-name"></h2>
<h3>Add Student</h3> <h3>Add Student</h3>
<div class="add-student"> <div class="add-student">
<wa-input id="new-student-name" placeholder="Student name"></wa-input> <wa-input id="new-student-name" placeholder="Name" size="small"></wa-input>
<wa-input id="new-student-email" placeholder="Student email"></wa-input> <wa-input id="new-student-email" placeholder="Email" size="small"></wa-input>
<wa-button variant="brand" id="add-student-btn">Add</wa-button> <wa-button size="small" id="add-student-btn">+</wa-button>
</div> </div>
<h3>Students</h3> <h3>Students</h3>
<div id="students"></div> <div id="students"></div>

25
static/trip.js
View File

@@ -23,36 +23,33 @@ async function loadStudents() {
container.innerHTML = ''; container.innerHTML = '';
for (const student of students) { for (const student of students) {
const card = document.createElement('wa-card'); const card = document.createElement('wa-card');
const header = document.createElement('div'); const header = document.createElement('div');
header.className = 'student-header'; header.className = 'student-header';
const h3 = document.createElement('h3'); const label = document.createElement('span');
h3.textContent = student.name + ' (' + student.email + ')'; label.textContent = student.name + ' (' + student.email + ')';
const deleteBtn = document.createElement('wa-button'); const deleteBtn = document.createElement('wa-button');
deleteBtn.variant = 'danger';
deleteBtn.size = 'small'; deleteBtn.size = 'small';
deleteBtn.textContent = 'Remove'; deleteBtn.variant = 'danger';
deleteBtn.textContent = '\u00d7';
deleteBtn.addEventListener('click', async () => { deleteBtn.addEventListener('click', async () => {
if (!confirm('Remove student "' + student.name + '"?')) return; if (!confirm('Remove student "' + student.name + '"?')) return;
await api('DELETE', '/api/trips/' + tripID + '/students/' + student.id); await api('DELETE', '/api/trips/' + tripID + '/students/' + student.id);
loadStudents(); loadStudents();
}); });
header.appendChild(h3); header.appendChild(label);
header.appendChild(deleteBtn); header.appendChild(deleteBtn);
card.appendChild(header); card.appendChild(header);
const parentLabel = document.createElement('strong');
parentLabel.textContent = 'Parents:';
card.appendChild(parentLabel);
for (const parent of student.parents) { for (const parent of student.parents) {
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'parent-row'; row.className = 'parent-row';
const span = document.createElement('span'); const span = document.createElement('span');
span.textContent = parent.email; span.textContent = parent.email;
const removeBtn = document.createElement('wa-button'); const removeBtn = document.createElement('wa-button');
removeBtn.variant = 'danger';
removeBtn.size = 'small'; removeBtn.size = 'small';
removeBtn.textContent = 'Remove'; removeBtn.variant = 'text';
removeBtn.textContent = '\u00d7';
removeBtn.addEventListener('click', async () => { removeBtn.addEventListener('click', async () => {
await api('DELETE', '/api/trips/' + tripID + '/students/' + student.id + '/parents/' + parent.id); await api('DELETE', '/api/trips/' + tripID + '/students/' + student.id + '/parents/' + parent.id);
loadStudents(); loadStudents();
@@ -63,13 +60,13 @@ async function loadStudents() {
} }
const addRow = document.createElement('div'); const addRow = document.createElement('div');
addRow.className = 'add-parent-row'; addRow.className = 'add-row';
const input = document.createElement('wa-input'); const input = document.createElement('wa-input');
input.placeholder = 'Parent email'; input.placeholder = 'Parent email';
input.size = 'small';
const addBtn = document.createElement('wa-button'); const addBtn = document.createElement('wa-button');
addBtn.variant = 'neutral';
addBtn.size = 'small'; addBtn.size = 'small';
addBtn.textContent = 'Add Parent'; addBtn.textContent = '+';
addBtn.addEventListener('click', async () => { addBtn.addEventListener('click', async () => {
const email = input.value.trim(); const email = input.value.trim();
if (!email) return; if (!email) return;