diff --git a/static/admin.html b/static/admin.html
index a507c42..f082faf 100644
--- a/static/admin.html
+++ b/static/admin.html
@@ -9,50 +9,30 @@
font-family: var(--wa-font-sans);
max-width: 800px;
margin: 0 auto;
- padding: 1rem;
+ padding: 0.5rem;
opacity: 0;
+ font-size: 0.9rem;
}
.header {
display: flex;
align-items: center;
- gap: 1rem;
- margin-bottom: 2rem;
- }
- .header img {
- width: 40px;
- height: 40px;
- border-radius: 50%;
+ gap: 0.5rem;
+ margin-bottom: 0.75rem;
}
+ .header img { width: 32px; height: 32px; border-radius: 50%; }
.header .spacer { flex: 1; }
- wa-card {
- margin-bottom: 1rem;
- display: block;
- }
- wa-card h3 { margin: 0 0 0.5rem 0; }
- .admin-row {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- margin-bottom: 0.25rem;
- }
- .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;
- }
+ h2 { margin: 0.75rem 0 0.25rem; font-size: 1.1rem; }
+ wa-card { margin-bottom: 0.5rem; display: block; --spacing: 0.6rem; }
+ wa-button::part(base) { padding: 0.15rem 0.4rem; min-height: 0; }
+ wa-button[size="small"]::part(base) { font-size: 0.8rem; }
+ wa-input::part(base) { min-height: 0; }
+ .trip-header { display: flex; align-items: center; gap: 0.25rem; }
+ .trip-header h3 { flex: 1; margin: 0; font-size: 1rem; }
+ .admin-row { display: flex; align-items: center; gap: 0.25rem; }
+ .add-row { display: flex; gap: 0.25rem; margin-top: 0.25rem; }
+ .add-row wa-input { flex: 1; }
+ .create-trip { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; }
.create-trip wa-input { flex: 1; }
- .trip-header {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- }
- .trip-header h3 { flex: 1; }
@@ -66,8 +46,8 @@
Create Trip
-
- Create
+
+ +
Trips
diff --git a/static/admin.js b/static/admin.js
index 3549990..474508a 100644
--- a/static/admin.js
+++ b/static/admin.js
@@ -24,6 +24,7 @@ async function loadTrips() {
container.innerHTML = '';
for (const trip of trips) {
const card = document.createElement('wa-card');
+
const header = document.createElement('div');
header.className = 'trip-header';
const h3 = document.createElement('h3');
@@ -32,9 +33,9 @@ async function loadTrips() {
tripLink.textContent = trip.name;
h3.appendChild(tripLink);
const deleteBtn = document.createElement('wa-button');
- deleteBtn.variant = 'danger';
deleteBtn.size = 'small';
- deleteBtn.textContent = 'Delete Trip';
+ deleteBtn.variant = 'danger';
+ deleteBtn.textContent = '\u00d7';
deleteBtn.addEventListener('click', async () => {
if (!confirm('Delete trip "' + trip.name + '"?')) return;
await api('DELETE', '/api/trips/' + trip.id);
@@ -44,19 +45,15 @@ async function loadTrips() {
header.appendChild(deleteBtn);
card.appendChild(header);
- const adminLabel = document.createElement('strong');
- adminLabel.textContent = 'Trip Admins:';
- card.appendChild(adminLabel);
-
for (const admin of trip.admins) {
const row = document.createElement('div');
row.className = 'admin-row';
const span = document.createElement('span');
span.textContent = admin.email;
const removeBtn = document.createElement('wa-button');
- removeBtn.variant = 'danger';
removeBtn.size = 'small';
- removeBtn.textContent = 'Remove';
+ removeBtn.variant = 'text';
+ removeBtn.textContent = '\u00d7';
removeBtn.addEventListener('click', async () => {
await api('DELETE', '/api/trips/' + trip.id + '/admins/' + admin.id);
loadTrips();
@@ -67,13 +64,13 @@ async function loadTrips() {
}
const addRow = document.createElement('div');
- addRow.className = 'add-admin-row';
+ addRow.className = 'add-row';
const input = document.createElement('wa-input');
input.placeholder = 'Admin email';
+ input.size = 'small';
const addBtn = document.createElement('wa-button');
- addBtn.variant = 'neutral';
addBtn.size = 'small';
- addBtn.textContent = 'Add Admin';
+ addBtn.textContent = '+';
addBtn.addEventListener('click', async () => {
const email = input.value.trim();
if (!email) return;
diff --git a/static/trip.html b/static/trip.html
index 16822dc..fba7da0 100644
--- a/static/trip.html
+++ b/static/trip.html
@@ -9,52 +9,31 @@
font-family: var(--wa-font-sans);
max-width: 800px;
margin: 0 auto;
- padding: 1rem;
+ padding: 0.5rem;
opacity: 0;
+ font-size: 0.9rem;
}
.header {
display: flex;
align-items: center;
- gap: 1rem;
- margin-bottom: 2rem;
- }
- .header img {
- width: 40px;
- height: 40px;
- border-radius: 50%;
+ gap: 0.5rem;
+ margin-bottom: 0.75rem;
}
+ .header img { width: 32px; height: 32px; border-radius: 50%; }
.header .spacer { flex: 1; }
- wa-card {
- margin-bottom: 1rem;
- display: block;
- }
- wa-card h3 { margin: 0 0 0.5rem 0; }
- .parent-row {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- margin-bottom: 0.25rem;
- margin-left: 1rem;
- }
- .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;
- }
+ h2 { margin: 0.75rem 0 0.25rem; font-size: 1.1rem; }
+ h3 { margin: 0.5rem 0 0.25rem; font-size: 1rem; }
+ wa-card { margin-bottom: 0.5rem; display: block; --spacing: 0.6rem; }
+ wa-button::part(base) { padding: 0.15rem 0.4rem; min-height: 0; }
+ wa-button[size="small"]::part(base) { font-size: 0.8rem; }
+ wa-input::part(base) { min-height: 0; }
+ .student-header { display: flex; align-items: center; gap: 0.25rem; }
+ .student-header span { flex: 1; font-weight: bold; }
+ .parent-row { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.75rem; }
+ .add-row { display: flex; gap: 0.25rem; margin-top: 0.25rem; margin-left: 0.75rem; }
+ .add-row wa-input { flex: 1; }
+ .add-student { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; }
.add-student wa-input { flex: 1; }
- .student-header {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- }
- .student-header h3 { flex: 1; }
@@ -69,9 +48,9 @@
Add Student
-
-
- Add
+
+
+ +
Students
diff --git a/static/trip.js b/static/trip.js
index 6ed5218..8ed9b17 100644
--- a/static/trip.js
+++ b/static/trip.js
@@ -23,36 +23,33 @@ async function loadStudents() {
container.innerHTML = '';
for (const student of students) {
const card = document.createElement('wa-card');
+
const header = document.createElement('div');
header.className = 'student-header';
- const h3 = document.createElement('h3');
- h3.textContent = student.name + ' (' + student.email + ')';
+ const label = document.createElement('span');
+ label.textContent = student.name + ' (' + student.email + ')';
const deleteBtn = document.createElement('wa-button');
- deleteBtn.variant = 'danger';
deleteBtn.size = 'small';
- deleteBtn.textContent = 'Remove';
+ deleteBtn.variant = 'danger';
+ deleteBtn.textContent = '\u00d7';
deleteBtn.addEventListener('click', async () => {
if (!confirm('Remove student "' + student.name + '"?')) return;
await api('DELETE', '/api/trips/' + tripID + '/students/' + student.id);
loadStudents();
});
- header.appendChild(h3);
+ header.appendChild(label);
header.appendChild(deleteBtn);
card.appendChild(header);
- const parentLabel = document.createElement('strong');
- parentLabel.textContent = 'Parents:';
- card.appendChild(parentLabel);
-
for (const parent of student.parents) {
const row = document.createElement('div');
row.className = 'parent-row';
const span = document.createElement('span');
span.textContent = parent.email;
const removeBtn = document.createElement('wa-button');
- removeBtn.variant = 'danger';
removeBtn.size = 'small';
- removeBtn.textContent = 'Remove';
+ removeBtn.variant = 'text';
+ removeBtn.textContent = '\u00d7';
removeBtn.addEventListener('click', async () => {
await api('DELETE', '/api/trips/' + tripID + '/students/' + student.id + '/parents/' + parent.id);
loadStudents();
@@ -63,13 +60,13 @@ async function loadStudents() {
}
const addRow = document.createElement('div');
- addRow.className = 'add-parent-row';
+ addRow.className = 'add-row';
const input = document.createElement('wa-input');
input.placeholder = 'Parent email';
+ input.size = 'small';
const addBtn = document.createElement('wa-button');
- addBtn.variant = 'neutral';
addBtn.size = 'small';
- addBtn.textContent = 'Add Parent';
+ addBtn.textContent = '+';
addBtn.addEventListener('click', async () => {
const email = input.value.trim();
if (!email) return;