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

Restyle admin and trip UI with wa-tag, wa-details expandos, and visual hierarchy

Browse Source
This commit is contained in:
Ian Gulliver
2026-02-15 17:40:39 -08:00
parent 5db70a51df
commit 737e83f629
4 changed files with 164 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
static/trip.html
View File

@@ -21,19 +21,39 @@
}
.header img { width: 32px; height: 32px; border-radius: 50%; }
.header .spacer { flex: 1; }
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; }
h2 { margin: 0.75rem 0 0.5rem; font-size: 1.1rem; color: var(--wa-color-brand-60); }
wa-card { margin-bottom: 0.5rem; display: block; --spacing: 0.6rem; --border-width: 0; --border-radius: 0.5rem; }
wa-card::part(base) { background: var(--wa-color-neutral-50); }
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; }
wa-details { margin-top: 0.5rem; font-size: 1rem; --spacing: 0.6rem; }
wa-card wa-details { font-size: 0.8rem; }
wa-details::part(summary) { font-weight: bold; }
wa-details::part(content) { padding-top: 0.2rem; }
.student-name { font-weight: bold; display: block; margin-bottom: 0.3rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.3rem; }
wa-tag { transition: opacity var(--wa-transition-normal); }
wa-input.email { max-width: 20rem; }
.add-form { display: flex; flex-direction: column; gap: 0.3rem; max-width: 20rem; }
.add-form wa-button { align-self: flex-start; }
.close-btn {
all: unset;
cursor: pointer;
opacity: 0;
padding: 0 0.3rem;
font-size: 1rem;
line-height: 1;
}
wa-card:hover .close-btn { opacity: 0.25; }
.close-btn:hover { opacity: 1 !important; color: var(--wa-color-danger-50, #dc3545); }
.input-action {
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
opacity: 0.4;
padding: 0 0.2rem;
}
.input-action:hover { opacity: 1; }
</style>
</head>
<body>
@@ -46,14 +66,14 @@
<wa-button variant="neutral" size="small" id="logout-btn">Switch User</wa-button>
</div>
<h2 id="trip-name"></h2>
<h3>Add Student</h3>
<div class="add-student">
<wa-input id="new-student-name" placeholder="Name" size="small"></wa-input>
<wa-input id="new-student-email" placeholder="Email" size="small"></wa-input>
<wa-button size="small" id="add-student-btn">+</wa-button>
</div>
<h3>Students</h3>
<div id="students"></div>
<wa-details summary="Add Student">
<div class="add-form">
<wa-input id="new-student-name" placeholder="Name" size="small"></wa-input>
<wa-input id="new-student-email" placeholder="Email" size="small"></wa-input>
<wa-button size="small" id="add-student-btn">Add Student</wa-button>
</div>
</wa-details>
</div>
<script type="module" src="/trip.js"></script>
</body>