Skip to content

Commit 79cc0a4

Browse files
CussaCussa
committed
🧹 Move styles to css
1 parent 91ca844 commit 79cc0a4

4 files changed

Lines changed: 236 additions & 49 deletions

File tree

‎by-type.mjs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -200,10 +200,10 @@ function renderItems(items) {
200200
return `
201201
<div class="item" data-issue='${JSON.stringify(item).replace(/'/g, "&apos;")}'>
202202
<div class="item-header">
203-
<span class="item-title-text" style="cursor: pointer;">
203+
<span class="item-title-text">
204204
${escapeHtml(item.title)}
205205
</span>
206-
<a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%3Cspan+class%3D"pl-s1">${item.html_url}" class="item-title" target="_blank" rel="noopener noreferrer" style="margin-left: 8px; font-size: 14px;" onclick="event.stopPropagation();">↗️</a>
206+
<a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%3Cspan+class%3D"pl-s1">${item.html_url}" class="item-title-link" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation();">↗️</a>
207207
<span class="item-number">#${item.number}</span>
208208
</div>
209209
<div class="item-meta">
@@ -218,7 +218,7 @@ function renderItems(items) {
218218
const labelColor = typeof label === 'object' && label.color ?
219219
`#${label.color}` : '#6e7681';
220220
const textColor = getContrastColor(labelColor);
221-
return `<span class="label" style="background: ${labelColor}; color: ${textColor}">${escapeHtml(labelName)}</span>`;
221+
return `<span class="label" style="--label-bg: ${labelColor}; --label-color: ${textColor}">${escapeHtml(labelName)}</span>`;
222222
}).join('')}
223223
</div>
224224
</div>

‎main.mjs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -182,10 +182,10 @@ function renderSwimlane(repoData) {
182182
<div class="swimlane-stats">
183183
<div>
184184
<span>📝 Issues: ${totalIssues}</span>
185-
<span style="${totalPRs > 0 ? 'color: #a371f7; font-weight: 600;' : ''}">🔀 PRs: ${totalPRs}</span>
185+
<span class="${totalPRs > 0 ? 'stat-prs' : ''}">🔀 PRs: ${totalPRs}</span>
186186
</div>
187187
<div>
188-
<span style="${bugCount > 0 ? 'color: #f85149; font-weight: 600;' : bugCount === 0 ? 'color: #3fb950; font-weight: 600;' : ''}">🐛 Bugs: ${bugCount}</span>
188+
<span class="${bugCount > 0 ? 'stat-bugs-present' : bugCount === 0 ? 'stat-bugs-none' : ''}">🐛 Bugs: ${bugCount}</span>
189189
<span>✨ Features: ${featureCount}</span>
190190
<span>📋 Tasks: ${taskCount}</span>
191191
<span>❓ Other: ${otherCount}</span>
@@ -247,7 +247,7 @@ function renderItems(items, isPR = false) {
247247
const labelColor = typeof label === 'object' && label.color ?
248248
`#${label.color}` : '#6e7681';
249249
const textColor = getContrastColor(labelColor);
250-
return `<span class="label" style="background: ${labelColor}; color: ${textColor}">${escapeHtml(labelName)}</span>`;
250+
return `<span class="label" style="--label-bg: ${labelColor}; --label-color: ${textColor}">${escapeHtml(labelName)}</span>`;
251251
}).join('')}
252252
</div>
253253
</div>

‎shared.mjs‎

Lines changed: 42 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -282,9 +282,9 @@ export function showError(message) {
282282
const errorDiv = document.createElement('div');
283283
errorDiv.className = 'error';
284284
errorDiv.innerHTML = `
285-
<div style="display: flex; justify-content: space-between; align-items: start;">
286-
<div style="flex: 1;">${message}</div>
287-
<button onclick="this.parentElement.parentElement.remove()" style="background: none; border: none; color: #ffa198; cursor: pointer; font-size: 20px; padding: 0; margin-left: 10px; line-height: 1;">&times;</button>
285+
<div class="error-content">
286+
<div class="error-message">${message}</div>
287+
<button onclick="this.parentElement.parentElement.remove()" class="error-close-btn">&times;</button>
288288
</div>
289289
`;
290290
errorContainer.innerHTML = '';
@@ -580,13 +580,12 @@ export function updateCacheStatus() {
580580
// Populate details panel
581581
if (cacheDetails) {
582582
cacheDetails.innerHTML = `
583-
<div style="font-size: 11px; color: #8b949e; margin-bottom: 8px; padding: 6px; background: #161b22; border-radius: 4px; border-left: 2px solid #58a6ff;">
583+
<div class="cache-tip">
584584
💡 <strong>Tip:</strong> Left-click to toggle repo in list • Right-click to delete from cache
585585
</div>
586586
` + cacheInfo.map(info => `
587587
<div class="cache-detail-item">
588-
<span style="font-family: monospace; color: #58a6ff; cursor: pointer; text-decoration: underline;"
589-
class="cache-repo-name"
588+
<span class="cache-repo-name"
590589
data-repo="${escapeHtml(info.repo)}"
591590
title="Left-click to toggle in list • Right-click to delete from cache">
592591
${escapeHtml(info.repo)}
@@ -846,22 +845,22 @@ export function setupHelpPanel() {
846845

847846
// Help content
848847
const helpHTML = `
849-
<div style="padding: 20px; max-width: 800px; margin: 0 auto;">
850-
<h2 style="color: #58a6ff; margin-bottom: 20px;">📖 Quick Start Guide</h2>
848+
<div class="help-content-wrapper">
849+
<h2>📖 Quick Start Guide</h2>
851850
852-
<section style="margin-bottom: 30px;">
853-
<h3 style="color: #8b949e; margin-bottom: 10px;">🚀 Getting Started</h3>
854-
<ol style="line-height: 1.8;">
851+
<section>
852+
<h3>🚀 Getting Started</h3>
853+
<ol>
855854
<li><strong>Enter repositories</strong> in the format <code>owner/repo</code> (one per line)</li>
856855
<li><strong>Optional (but required for private repos):</strong> Add a GitHub token for higher rate limits (5000/hour vs 60/hour) and to access private repositories</li>
857856
<li>Click <strong>"Load Issues & PRs"</strong> to fetch data</li>
858857
<li>Switch between <strong>"By Repository"</strong> and <strong>"By Type"</strong> views</li>
859858
</ol>
860859
</section>
861860
862-
<section style="margin-bottom: 30px;">
863-
<h3 style="color: #8b949e; margin-bottom: 10px;">🎯 Key Features</h3>
864-
<ul style="line-height: 1.8;">
861+
<section>
862+
<h3>🎯 Key Features</h3>
863+
<ul>
865864
<li><strong>Click on any issue/PR card</strong> to view details inline</li>
866865
<li><strong>PRs open directly on GitHub</strong> for code review</li>
867866
<li><strong>Color coding:</strong> Bugs (🐛 red/green), PRs (🔀 purple when present)</li>
@@ -870,9 +869,9 @@ export function setupHelpPanel() {
870869
</ul>
871870
</section>
872871
873-
<section style="margin-bottom: 30px;">
874-
<h3 style="color: #8b949e; margin-bottom: 10px;">💾 Cache Management</h3>
875-
<ul style="line-height: 1.8;">
872+
<section>
873+
<h3>💾 Cache Management</h3>
874+
<ul>
876875
<li><strong>Click "📦 cached"</strong> to expand/collapse cache details</li>
877876
<li><strong>Left-click</strong> a cached repo name to toggle it in your list</li>
878877
<li><strong>Right-click</strong> a cached repo name to delete it from cache</li>
@@ -881,19 +880,19 @@ export function setupHelpPanel() {
881880
</ul>
882881
</section>
883882
884-
<section style="margin-bottom: 30px;">
885-
<h3 style="color: #8b949e; margin-bottom: 10px;">🔗 Sharing & URLs</h3>
886-
<ul style="line-height: 1.8;">
883+
<section>
884+
<h3>🔗 Sharing & URLs</h3>
885+
<ul>
887886
<li><strong>URL auto-updates</strong> when you load repositories</li>
888887
<li><strong>Share button (🔗)</strong> copies the current URL to clipboard</li>
889888
<li><strong>Bookmark URLs</strong> to save your repository configurations</li>
890889
<li><strong>URL format:</strong> <code>?repos=owner/repo1,owner/repo2</code></li>
891890
</ul>
892891
</section>
893892
894-
<section style="margin-bottom: 30px;">
895-
<h3 style="color: #8b949e; margin-bottom: 10px;">⚠️ Important Notes</h3>
896-
<ul style="line-height: 1.8;">
893+
<section>
894+
<h3>⚠️ Important Notes</h3>
895+
<ul>
897896
<li><strong>Red pulsing Load button</strong> means config changed - click to reload</li>
898897
<li><strong>100% client-side</strong> - no data sent to servers, all stays local</li>
899898
<li><strong>Token stored locally</strong> in your browser only</li>
@@ -902,16 +901,16 @@ export function setupHelpPanel() {
902901
</ul>
903902
</section>
904903
905-
<section style="margin-bottom: 20px;">
906-
<h3 style="color: #8b949e; margin-bottom: 10px;">🎨 View Modes</h3>
907-
<ul style="line-height: 1.8;">
904+
<section>
905+
<h3>🎨 View Modes</h3>
906+
<ul>
908907
<li><strong>By Repository:</strong> Each repo gets its own section showing all issues/PRs</li>
909908
<li><strong>By Type:</strong> Issues grouped across all repos (PRs, Bugs, Features, Tasks)</li>
910909
</ul>
911910
</section>
912911
913-
<div style="padding: 15px; background: #161b22; border-radius: 6px; border-left: 3px solid #238636;">
914-
<strong style="color: #3fb950;">💡 Pro Tip:</strong> Use the cache panel to quickly add/remove repos you've previously viewed!
912+
<div class="help-pro-tip">
913+
<strong>💡 Pro Tip:</strong> Use the cache panel to quickly add/remove repos you've previously viewed!
915914
</div>
916915
</div>
917916
`;
@@ -962,9 +961,9 @@ export function formatMarkdown(text) {
962961
html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
963962

964963
// Headers
965-
html = html.replace(/^### (.+)$/gm, '<h3 style="color: #c9d1d9; font-size: 16px; margin: 15px 0 10px 0;">$1</h3>');
966-
html = html.replace(/^## (.+)$/gm, '<h2 style="color: #c9d1d9; font-size: 18px; margin: 15px 0 10px 0;">$1</h2>');
967-
html = html.replace(/^# (.+)$/gm, '<h1 style="color: #c9d1d9; font-size: 20px; margin: 15px 0 10px 0;">$1</h1>');
964+
html = html.replace(/^### (.+)$/gm, '<h3 class="md-h3">$1</h3>');
965+
html = html.replace(/^## (.+)$/gm, '<h2 class="md-h2">$1</h2>');
966+
html = html.replace(/^# (.+)$/gm, '<h1 class="md-h1">$1</h1>');
968967

969968
// Bold
970969
html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
@@ -978,36 +977,36 @@ export function formatMarkdown(text) {
978977
html = html.replace(/~~(.+?)~~/g, '<del>$1</del>');
979978

980979
// Links
981-
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%242" target="_blank" rel="noopener noreferrer" style="color: #58a6ff; text-decoration: none;">$1 ↗️</a>');
980+
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%242" target="_blank" rel="noopener noreferrer" class="md-link">$1 ↗️</a>');
982981

983982
// Unordered lists
984-
html = html.replace(/^\* (.+)$/gm, '<li style="margin-left: 20px;">$1</li>');
985-
html = html.replace(/^- (.+)$/gm, '<li style="margin-left: 20px;">$1</li>');
983+
html = html.replace(/^\* (.+)$/gm, '<li class="md-list-item">$1</li>');
984+
html = html.replace(/^- (.+)$/gm, '<li class="md-list-item">$1</li>');
986985

987986
// Ordered lists
988-
html = html.replace(/^\d+\. (.+)$/gm, '<li style="margin-left: 20px;">$1</li>');
987+
html = html.replace(/^\d+\. (.+)$/gm, '<li class="md-list-item">$1</li>');
989988

990989
// Wrap consecutive list items and remove extra newlines within lists
991990
html = html.replace(/(<li[\s\S]*?<\/li>\s*)+/g, (match) => {
992991
// Remove newlines between list items
993992
const cleanedList = match.replace(/\n/g, '');
994-
return '<ul style="margin: 10px 0;">' + cleanedList + '</ul>';
993+
return '<ul class="md-list">' + cleanedList + '</ul>';
995994
});
996995

997996
// Blockquotes
998-
html = html.replace(/^&gt; (.+)$/gm, '<blockquote style="border-left: 3px solid #30363d; padding-left: 15px; margin: 10px 0; color: #8b949e;">$1</blockquote>');
997+
html = html.replace(/^&gt; (.+)$/gm, '<blockquote class="md-blockquote">$1</blockquote>');
999998

1000999
// Horizontal rules
1001-
html = html.replace(/^---$/gm, '<hr style="border: none; border-top: 1px solid #30363d; margin: 20px 0;">');
1000+
html = html.replace(/^---$/gm, '<hr class="md-hr">');
10021001

10031002
// Restore HTML tags (must be before converting &lt; back)
10041003
html = html.replace(/\|\|\|HTMLTAG(\d+)\|\|\|/g, (match, index) => htmlTags[parseInt(index)]);
10051004

10061005
// Paragraphs - preserve double line breaks
1007-
html = html.replace(/\n\n/g, '</p><p style="margin-bottom: 12px;">');
1006+
html = html.replace(/\n\n/g, '</p><p class="md-paragraph">');
10081007
html = html.replace(/\n/g, '<br>');
10091008

1010-
return '<p style="margin-bottom: 12px;">' + html + '</p>';
1009+
return '<p class="md-paragraph">' + html + '</p>';
10111010
}
10121011

10131012
/**
@@ -1024,7 +1023,7 @@ export function renderIssueDetails(issue, htmlUrl, iframeTitle, detailsContent)
10241023
<div class="issue-detail-header">
10251024
<div class="issue-detail-title">
10261025
${escapeHtml(issue.title)}
1027-
<a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%3Cspan+class%3D"pl-s1">${htmlUrl}" target="_blank" rel="noopener noreferrer" style="color: #58a6ff; font-size: 14px; margin-left: 10px; text-decoration: none;" title="Open on GitHub">↗️</a>
1026+
<a href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%3Cspan+class%3D"pl-s1">${htmlUrl}" target="_blank" rel="noopener noreferrer" class="issue-detail-link" title="Open on GitHub">↗️</a>
10281027
</div>
10291028
<div class="issue-detail-meta">
10301029
<span>${issue.state === 'open' ? '🟢' : '🔴'} ${issue.state}</span>
@@ -1033,14 +1032,14 @@ export function renderIssueDetails(issue, htmlUrl, iframeTitle, detailsContent)
10331032
<span>🔄 Updated: ${updatedDate}</span>
10341033
${issue.milestone ? `<span>🎯 ${escapeHtml(issue.milestone.title)}</span>` : ''}
10351034
</div>
1036-
${formatReactions(issue.reactions) ? `<div class="issue-detail-reactions" style="margin-top: 12px; padding: 10px; background: #161b22; border-radius: 6px;">${formatReactions(issue.reactions)}</div>` : ''}
1035+
${formatReactions(issue.reactions) ? `<div class="issue-detail-reactions">${formatReactions(issue.reactions)}</div>` : ''}
10371036
</div>
10381037
10391038
${issue.body ? `
10401039
<div class="issue-detail-body">
10411040
${formatMarkdown(issue.body)}
10421041
</div>
1043-
` : '<div class="issue-detail-body" style="color: #8b949e;"><em>No description provided.</em></div>'}
1042+
` : '<div class="issue-detail-body issue-detail-empty"><em>No description provided.</em></div>'}
10441043
`;
10451044

10461045
html += `<a href="${htmlUrl}" target="_blank" rel="noopener noreferrer" class="view-on-github">View on GitHub ↗️</a>`;

0 commit comments

Comments
 (0)