Skip to content

Commit f75abb7

Browse files
ralyodioralyodio
committed
refactor: convert API key table to responsive list layout with improved mobile styling
1 parent 5351dbc commit f75abb7

File tree

2 files changed

+162
-52
lines changed

2 files changed

+162
-52
lines changed

‎public/js/components/api-key-manager.js‎

Lines changed: 75 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -135,37 +135,62 @@ export class ApiKeyManager extends BaseComponent {
135135
background-color: var(--secondary-dark);
136136
}
137137
138-
.table-responsive {
139-
overflow-x: auto;
138+
.api-keys-list {
139+
width: 100%;
140+
list-style-position: inside;
141+
padding: 0;
140142
margin-bottom: 20px;
141143
}
142144
143-
.api-keys-table {
144-
width: 100%;
145-
border-collapse: collapse;
146-
margin-bottom: 20px;
145+
.api-key-item {
146+
padding: 15px;
147+
margin-bottom: 10px;
148+
border: 1px solid var(--border-color);
149+
border-radius: var(--border-radius-md);
150+
background-color: var(--background-color);
147151
}
148152
149-
.api-keys-table th,
150-
.api-keys-table td {
151-
padding: 12px 15px;
152-
text-align: left;
153-
border-bottom: 1px solid var(--border-color);
153+
.api-key-item:hover {
154+
background-color: var(--surface-variant);
155+
}
156+
157+
.api-key-header {
158+
display: flex;
159+
justify-content: space-between;
160+
align-items: center;
161+
margin-bottom: 10px;
154162
}
155163
156-
.api-keys-table th {
164+
.api-key-name {
157165
font-weight: var(--font-weight-semibold);
166+
font-size: var(--font-size-lg);
167+
}
168+
169+
.api-key-details {
170+
margin-bottom: 15px;
171+
}
172+
173+
.api-key-detail {
174+
margin-bottom: 5px;
175+
display: flex;
176+
flex-wrap: wrap;
177+
}
178+
179+
.api-key-label {
180+
font-weight: var(--font-weight-medium);
158181
color: var(--text-secondary);
159-
background-color: var(--surface-variant);
182+
margin-right: 10px;
183+
min-width: 100px;
160184
}
161185
162-
.api-keys-table tr:hover {
163-
background-color: var(--surface-variant);
186+
.api-key-value {
187+
color: var(--text-primary);
164188
}
165189
166-
.api-keys-table .actions {
190+
.api-key-actions {
167191
display: flex;
168192
gap: 10px;
193+
flex-wrap: wrap;
169194
}
170195
171196
.empty-state {
@@ -321,39 +346,37 @@ export class ApiKeyManager extends BaseComponent {
321346
}
322347

323348
return `
324-
<div class="table-responsive">
325-
<table class="api-keys-table">
326-
<thead>
327-
<tr>
328-
<th>Name</th>
329-
<th>Status</th>
330-
<th>Created</th>
331-
<th>Last Used</th>
332-
<th>Actions</th>
333-
</tr>
334-
</thead>
335-
<tbody>
336-
${this._apiKeys.map(key => `
337-
<tr data-key-id="${key.id}">
338-
<td>${key.name}</td>
339-
<td>
340-
<span class="status-badge ${key.is_active ? 'active' : 'inactive'}">
341-
${key.is_active ? 'Active' : 'Inactive'}
342-
</span>
343-
</td>
344-
<td>${this._formatDate(key.created_at)}</td>
345-
<td>${key.last_used_at ? this._formatDate(key.last_used_at) : 'Never'}</td>
346-
<td class="actions">
347-
<button class="toggle-button ${key.is_active ? 'active' : ''}" data-action="toggle" data-key-id="${key.id}" title="${key.is_active ? 'Deactivate this API key' : 'Activate this API key'}">
348-
${key.is_active ? 'Deactivate' : 'Activate'}
349-
</button>
350-
<button class="delete-button" data-action="delete" data-key-id="${key.id}" title="Delete this API key permanently">Delete</button>
351-
</td>
352-
</tr>
353-
`).join('')}
354-
</tbody>
355-
</table>
356-
</div>
349+
<ol class="api-keys-list">
350+
${this._apiKeys.map(key => `
351+
<li class="api-key-item" data-key-id="${key.id}">
352+
<div class="api-key-header">
353+
<div class="api-key-name">${key.name}</div>
354+
<span class="status-badge ${key.is_active ? 'active' : 'inactive'}">
355+
${key.is_active ? 'Active' : 'Inactive'}
356+
</span>
357+
</div>
358+
359+
<div class="api-key-details">
360+
<div class="api-key-detail">
361+
<span class="api-key-label">Created:</span>
362+
<span class="api-key-value">${this._formatDate(key.created_at)}</span>
363+
</div>
364+
365+
<div class="api-key-detail">
366+
<span class="api-key-label">Last Used:</span>
367+
<span class="api-key-value">${key.last_used_at ? this._formatDate(key.last_used_at) : 'Never'}</span>
368+
</div>
369+
</div>
370+
371+
<div class="api-key-actions">
372+
<button class="toggle-button ${key.is_active ? 'active' : ''}" data-action="toggle" data-key-id="${key.id}" title="${key.is_active ? 'Deactivate this API key' : 'Activate this API key'}">
373+
${key.is_active ? 'Deactivate' : 'Activate'}
374+
</button>
375+
<button class="delete-button" data-action="delete" data-key-id="${key.id}" title="Delete this API key permanently">Delete</button>
376+
</div>
377+
</li>
378+
`).join('')}
379+
</ol>
357380
`;
358381
}
359382

@@ -443,9 +466,9 @@ export class ApiKeyManager extends BaseComponent {
443466
}
444467

445468
// Toggle and delete buttons
446-
const apiKeysTable = this.$('.api-keys-table');
447-
if (apiKeysTable) {
448-
apiKeysTable.addEventListener('click', (e) => {
469+
const apiKeysList = this.$('.api-keys-list');
470+
if (apiKeysList) {
471+
apiKeysList.addEventListener('click', (e) => {
449472
const button = e.target.closest('button');
450473
if (!button) return;
451474

‎public/js/components/api-keys/api-endpoint-base.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,18 @@ export class ApiEndpointBase extends BaseComponent {
100100
border-radius: var(--border-radius-md);
101101
overflow-x: auto;
102102
margin-bottom: var(--spacing-md);
103+
max-width: 100%;
103104
}
104105
105106
pre {
106107
margin: 0;
107108
font-family: monospace;
108109
color: var(--text-primary);
110+
white-space: pre-wrap;
111+
word-wrap: break-word;
112+
word-break: break-word;
113+
font-size: 0.9em;
114+
line-height: 1.5;
109115
}
110116
111117
.parameter-table {
@@ -137,6 +143,40 @@ export class ApiEndpointBase extends BaseComponent {
137143
font-style: italic;
138144
}
139145
146+
/* Mobile parameter list styles */
147+
.parameter-list {
148+
margin-bottom: var(--spacing-md);
149+
}
150+
151+
.parameter-item {
152+
padding: var(--spacing-sm);
153+
border: 1px solid var(--border-color);
154+
border-radius: var(--border-radius-md);
155+
margin-bottom: var(--spacing-sm);
156+
background-color: var(--surface-variant);
157+
}
158+
159+
.parameter-header {
160+
display: flex;
161+
justify-content: space-between;
162+
margin-bottom: var(--spacing-xs);
163+
}
164+
165+
.parameter-name {
166+
font-weight: var(--font-weight-semibold);
167+
color: var(--text-primary);
168+
}
169+
170+
.parameter-type {
171+
margin-bottom: var(--spacing-xs);
172+
color: var(--text-secondary);
173+
}
174+
175+
.parameter-desc {
176+
color: var(--text-secondary);
177+
font-size: 0.9em;
178+
}
179+
140180
/* Code examples tabs */
141181
.code-examples {
142182
margin-bottom: var(--spacing-lg);
@@ -176,6 +216,10 @@ export class ApiEndpointBase extends BaseComponent {
176216
}
177217
178218
@media (max-width: 768px) {
219+
:host {
220+
padding: var(--spacing-md);
221+
}
222+
179223
.endpoint-header {
180224
flex-direction: column;
181225
align-items: flex-start;
@@ -185,12 +229,33 @@ export class ApiEndpointBase extends BaseComponent {
185229
margin-bottom: var(--spacing-xs);
186230
}
187231
232+
.endpoint-path {
233+
font-size: var(--font-size-md);
234+
word-break: break-all;
235+
}
236+
188237
.code-tabs {
189238
flex-wrap: wrap;
190239
}
191240
192241
.code-tab {
193242
margin-bottom: var(--spacing-xs);
243+
font-size: var(--font-size-xs);
244+
padding: var(--spacing-xs) var(--spacing-xs);
245+
}
246+
247+
.code-block {
248+
padding: var(--spacing-sm);
249+
}
250+
251+
pre {
252+
font-size: 0.8em;
253+
}
254+
255+
.parameter-table th,
256+
.parameter-table td {
257+
padding: var(--spacing-xs) var(--spacing-sm);
258+
font-size: 0.9em;
194259
}
195260
}
196261
`;
@@ -295,6 +360,28 @@ export class ApiEndpointBase extends BaseComponent {
295360
return '';
296361
}
297362

363+
// For mobile, use a list-based approach
364+
const isMobile = window.innerWidth <= 768;
365+
366+
if (isMobile) {
367+
return `
368+
<div class="section-title">Request Parameters</div>
369+
<div class="parameter-list">
370+
${parameters.map(param => `
371+
<div class="parameter-item">
372+
<div class="parameter-header">
373+
<span class="parameter-name">${param.name}</span>
374+
<span class="${param.required ? 'parameter-required' : 'parameter-optional'}">${param.required ? 'required' : 'optional'}</span>
375+
</div>
376+
<div class="parameter-type"><strong>Type:</strong> ${param.type}</div>
377+
<div class="parameter-desc">${param.description}</div>
378+
</div>
379+
`).join('')}
380+
</div>
381+
`;
382+
}
383+
384+
// For desktop, use the table approach
298385
return `
299386
<div class="section-title">Request Parameters</div>
300387
<table class="parameter-table">

0 commit comments

Comments
 (0)