Skip to content

Replace table with mobile-friendly cards and progress bars in github-ratelimit #101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simonw merged 1 commit into from
Nov 4, 2025
Merged

Replace table with mobile-friendly cards and progress bars in github-ratelimit #101

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
198 changes: 127 additions & 71 deletions github-ratelimit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,42 +60,98 @@
margin-bottom: 15px;
}

table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
.rate-limit-card {
background: #ffffff;
border: 1px solid #d0d7de;
border-radius: 6px;
padding: 16px;
margin-bottom: 12px;
transition: box-shadow 0.2s;
}

thead {
background: #f6f8fa;
.rate-limit-card:hover {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

th {
text-align: left;
padding: 12px;
font-weight: 600;
color: #57606a;
border-bottom: 2px solid #d0d7de;
font-size: 14px;
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}

td {
padding: 12px;
border-bottom: 1px solid #d0d7de;
font-size: 14px;
.resource-name {
font-weight: 600;
color: #24292f;
font-size: 16px;
}

tr:last-child td {
border-bottom: none;
.remaining-count {
font-size: 14px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}

tbody tr:hover {
.progress-container {
width: 100%;
height: 24px;
background: #f6f8fa;
border-radius: 6px;
overflow: hidden;
margin-bottom: 12px;
border: 1px solid #d0d7de;
}

.resource-name {
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #2da44e 0%, #26a148 100%);
transition: width 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 12px;
font-weight: 600;
min-width: 0;
}

.progress-bar.warning {
background: linear-gradient(90deg, #bf8700 0%, #9a6700 100%);
}

.progress-bar.critical {
background: linear-gradient(90deg, #d1242f 0%, #cf222e 100%);
}

.progress-text {
white-space: nowrap;
padding: 0 8px;
}

.card-stats {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 13px;
color: #57606a;
}

.stat-item {
flex: 1;
}

.stat-label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}

.stat-value {
display: block;
color: #24292f;
font-variant-numeric: tabular-nums;
}

.number {
Expand All @@ -112,11 +168,6 @@
font-weight: 600;
}

.ditto {
color: #57606a;
text-align: center;
}

button {
padding: 10px 20px;
background: #2da44e;
Expand Down Expand Up @@ -185,12 +236,17 @@
font-size: 24px;
}

table {
font-size: 12px;
.rate-limit-card {
padding: 12px;
}

th, td {
padding: 8px;
.resource-name {
font-size: 14px;
}

.card-stats {
flex-direction: column;
gap: 8px;
}
}
</style>
Expand Down Expand Up @@ -303,35 +359,24 @@ <h1>GitHub Rate Limit Checker</h1>

const data = await response.json();

// Create table
// Create cards container
const resultsContainer = document.createElement('div');
resultsContainer.className = 'results';

resultsContainer.innerHTML = `
<h2>GitHub API Rate Limits</h2>
<table>
<thead>
<tr>
<th>Resource</th>
<th>Limit</th>
<th>Used</th>
<th>Remaining</th>
<th>Resets At</th>
<th>Resets In</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
<div class="timestamp">Last checked: ${new Date().toLocaleString()}</div>
`;
const header = document.createElement('h2');
header.textContent = 'GitHub API Rate Limits';
resultsContainer.appendChild(header);

resultsDiv.appendChild(resultsContainer);
const tableBody = document.getElementById('tableBody');
const cardsContainer = document.createElement('div');
cardsContainer.id = 'cardsContainer';
resultsContainer.appendChild(cardsContainer);

// Track previous row's reset values for ditto marks
let prevResetsAt = null;
let prevResetsIn = null;
const timestamp = document.createElement('div');
timestamp.className = 'timestamp';
timestamp.textContent = `Last checked: ${new Date().toLocaleString()}`;
resultsContainer.appendChild(timestamp);

resultsDiv.appendChild(resultsContainer);

// Display each resource type
const resources = data.resources;
Expand All @@ -342,28 +387,39 @@ <h2>GitHub API Rate Limits</h2>
const reset = resourceData.reset;
const remainingClass = getRemainingClass(remaining, limit);

const usedPercentage = (used / limit) * 100;
const resetsAt = formatTimestamp(reset);
const resetsIn = formatTimeRemaining(reset);

// Use ditto marks if values match previous row
const displayResetsAt = (resetsAt === prevResetsAt) ? '″' : resetsAt;
const displayResetsIn = (resetsIn === prevResetsIn) ? '″' : resetsIn;

const row = document.createElement('tr');
row.innerHTML = `
<td class="resource-name">${resourceType}</td>
<td class="number">${limit.toLocaleString()}</td>
<td class="number">${used.toLocaleString()}</td>
<td class="number ${remainingClass}">${remaining.toLocaleString()}</td>
<td class="${displayResetsAt === '″' ? 'ditto' : ''}">${displayResetsAt}</td>
<td class="${displayResetsIn === '″' ? 'ditto' : ''}">${displayResetsIn}</td>
const card = document.createElement('div');
card.className = 'rate-limit-card';
card.innerHTML = `
<div class="card-header">
<span class="resource-name">${resourceType}</span>
<span class="remaining-count ${remainingClass}">${remaining.toLocaleString()} left</span>
</div>
<div class="progress-container">
<div class="progress-bar ${remainingClass}" style="width: ${usedPercentage}%">
<span class="progress-text">${used.toLocaleString()} / ${limit.toLocaleString()} used</span>
</div>
</div>
<div class="card-stats">
<div class="stat-item">
<span class="stat-label">Limit</span>
<span class="stat-value number">${limit.toLocaleString()}</span>
</div>
<div class="stat-item">
<span class="stat-label">Resets At</span>
<span class="stat-value">${resetsAt}</span>
</div>
<div class="stat-item">
<span class="stat-label">Resets In</span>
<span class="stat-value">${resetsIn}</span>
</div>
</div>
`;

tableBody.appendChild(row);

// Update previous values
prevResetsAt = resetsAt;
prevResetsIn = resetsIn;
cardsContainer.appendChild(card);
}

} catch (error) {
Expand Down