Clone the people page: urls with legacy redirects, chrome, tabs, search
This commit is contained in:
Ian Gulliver
@@ -2,16 +2,21 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Helios Directory</title>
|
||||
<link rel="stylesheet" href="/directory/static/style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<meta name="theme-color" content="#F6F6F6">
|
||||
<title>Helios Who?</title>
|
||||
<link rel="icon" href="/static/brand/icon-192.png">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap">
|
||||
<link rel="stylesheet" href="/static/directory/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Helios Directory</h1>
|
||||
<input id="search" type="search" placeholder="Search people and families" autofocus>
|
||||
</header>
|
||||
<main id="people"></main>
|
||||
<script src="/directory/static/app.js"></script>
|
||||
<aside class="sidebar">
|
||||
<div class="brand"><img src="/static/brand/icon-192.png" alt=""><span>Helios Who?</span></div>
|
||||
<nav id="nav"></nav>
|
||||
<div class="user"><span class="user-avatar">{{.UserInitial}}</span><span>{{.UserName}}</span></div>
|
||||
</aside>
|
||||
<main id="main"></main>
|
||||
<script src="/static/directory/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
const state = {model: null};
|
||||
|
||||
function hue(text) {
|
||||
let h = 0;
|
||||
for (const c of text) {
|
||||
h = (h * 31 + c.codePointAt(0)) % 360;
|
||||
}
|
||||
return h;
|
||||
}
|
||||
|
||||
function el(tag, className, text) {
|
||||
const node = document.createElement(tag);
|
||||
if (className) {
|
||||
node.className = className;
|
||||
}
|
||||
if (text) {
|
||||
node.textContent = text;
|
||||
}
|
||||
return node;
|
||||
}
|
||||
|
||||
function initials(name) {
|
||||
const words = name.trim().split(/\s+/);
|
||||
if (words.length === 0 || !words[0]) {
|
||||
return '?';
|
||||
}
|
||||
const first = words[0][0];
|
||||
return words.length > 1 ? first + words[words.length - 1][0] : first;
|
||||
}
|
||||
|
||||
function roles(p) {
|
||||
return [p.isStudent && 'Student', p.isParent && 'Parent', p.isStaff && 'Staff'].filter(Boolean);
|
||||
}
|
||||
|
||||
function card(p, family) {
|
||||
const root = el('div', 'card');
|
||||
if (p.photoUrl) {
|
||||
const img = el('img', 'avatar');
|
||||
img.src = p.photoUrl;
|
||||
img.loading = 'lazy';
|
||||
root.append(img);
|
||||
} else {
|
||||
const avatar = el('div', 'avatar', initials(p.fullName));
|
||||
avatar.style.background = `hsl(${hue(p.fullName)} 60% 45%)`;
|
||||
root.append(avatar);
|
||||
}
|
||||
const info = el('div');
|
||||
info.append(el('div', 'name', p.fullName));
|
||||
if (p.pronouns) {
|
||||
info.append(el('div', 'pronouns', p.pronouns));
|
||||
}
|
||||
const who = [roles(p).join(' / ')];
|
||||
if (p.grade) {
|
||||
who.push([p.grade, p.classroom, p.section].filter(Boolean).join(' ▶ '));
|
||||
}
|
||||
if (p.jobTitle) {
|
||||
who.push(p.jobTitle);
|
||||
}
|
||||
info.append(el('div', 'detail', who.join(' · ')));
|
||||
if (family && family.name) {
|
||||
info.append(el('div', 'detail', family.name));
|
||||
}
|
||||
if (family && family.address) {
|
||||
info.append(el('div', 'detail', family.address));
|
||||
}
|
||||
const contact = [p.phone, p.email].filter(Boolean).join(' · ');
|
||||
if (contact) {
|
||||
info.append(el('div', 'detail', contact));
|
||||
}
|
||||
root.append(info);
|
||||
return root;
|
||||
}
|
||||
|
||||
function render() {
|
||||
const q = document.querySelector('#search').value.trim().toLowerCase();
|
||||
const list = document.querySelector('#people');
|
||||
list.replaceChildren();
|
||||
if (!state.model) {
|
||||
return;
|
||||
}
|
||||
const matches = state.model.people.filter(p => {
|
||||
const family = state.model.families[p.familyKey];
|
||||
return `${p.fullName} ${family ? family.name : ''}`.toLowerCase().includes(q);
|
||||
});
|
||||
if (matches.length === 0) {
|
||||
list.append(el('div', 'empty', 'No matches.'));
|
||||
return;
|
||||
}
|
||||
for (const p of matches) {
|
||||
list.append(card(p, state.model.families[p.familyKey]));
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
const res = await fetch('/directory/api/model');
|
||||
if (!res.ok) {
|
||||
throw new Error(`loading model failed: ${res.status}`);
|
||||
}
|
||||
state.model = await res.json();
|
||||
render();
|
||||
}
|
||||
|
||||
document.querySelector('#search').addEventListener('input', render);
|
||||
load();
|
||||
@@ -1,97 +0,0 @@
|
||||
:root {
|
||||
--bg: #f6f7f9;
|
||||
--card: #ffffff;
|
||||
--line: #e2e6eb;
|
||||
--text: #1c2430;
|
||||
--muted: #5b6572;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--card);
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#search {
|
||||
flex: 1;
|
||||
max-width: 24rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #cdd3db;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#people {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pronunciation {
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.detail {
|
||||
color: var(--muted);
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--muted);
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
Reference in New Issue
Block a user