my own indieAuth provider!
indiko.dunkirk.sh/docs
indieauth
oauth2-server
chore: fix the cards
+16
-5
+6
-3
src/client/admin-clients.ts
+6
-3
src/client/admin-clients.ts
···
133
133
const firstSeenDate = new Date(client.firstSeen * 1000).toLocaleDateString();
134
134
135
135
return `
136
-
<div class="client-card" data-client-id="${client.clientId}" onclick="toggleClient('${client.clientId}')">
137
-
<div class="client-header">
136
+
<div class="client-card" data-client-id="${client.clientId}">
137
+
<div class="client-header" onclick="toggleClient('${client.clientId}')">
138
138
<div class="client-logo">
139
139
${client.logoUrl
140
140
? `<img src="${client.logoUrl}" alt="${client.name}" />`
···
158
158
<button class="btn-edit" onclick="event.stopPropagation(); editClient('${client.clientId}')">edit</button>
159
159
<button class="btn-delete" onclick="event.stopPropagation(); deleteClient('${client.clientId}')">delete</button>
160
160
` : ''}
161
-
<span class="expand-indicator" style="color: var(--old-rose); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05rem;">details ▼</span>
161
+
<span class="expand-indicator">details <span class="arrow">▼</span></span>
162
162
</div>
163
163
</div>
164
164
<div class="client-details" id="details-${encodeURIComponent(client.clientId)}">
···
174
174
if (!card) return;
175
175
176
176
const isExpanded = card.classList.contains('expanded');
177
+
const arrow = card.querySelector('.arrow') as HTMLElement;
177
178
178
179
if (isExpanded) {
179
180
card.classList.remove('expanded');
181
+
if (arrow) arrow.textContent = '▼';
180
182
return;
181
183
}
182
184
183
185
card.classList.add('expanded');
186
+
if (arrow) arrow.textContent = '▲';
184
187
185
188
const detailsDiv = document.getElementById(`details-${encodeURIComponent(clientId)}`);
186
189
if (!detailsDiv) return;
+10
-2
src/html/admin-clients.html
+10
-2
src/html/admin-clients.html
···
356
356
color: var(--old-rose);
357
357
}
358
358
359
-
.client-card.expanded .expand-indicator::after {
360
-
content: " ▲" !important;
359
+
.expand-indicator {
360
+
color: var(--old-rose);
361
+
font-size: 0.75rem;
362
+
text-transform: uppercase;
363
+
letter-spacing: 0.05rem;
364
+
cursor: pointer;
365
+
}
366
+
367
+
.client-header {
368
+
cursor: pointer;
361
369
}
362
370
363
371
.client-actions {