danvics/debrid-services-comparison
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor status indicators to use emoji for better visual representation and accessibility

Browse source
This commit is contained in:
fynks 2025-10-11 10:07:05 +05:00
parent fdd69290da
commit d13d4c192a
2 changed files with 7 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
dist/css/styles.css vendored
View file

@ -1779,55 +1779,15 @@ th {
} }
.status-indicator { .status-indicator {
display: inline-flex; display: inline-block;
align-items: center; font-size: 1.25rem;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
border-radius: var(--radius-full);
border: 1.5px solid color-mix(in srgb, var(--border-secondary) 70%, transparent);
background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
color: var(--text-secondary);
font-weight: var(--font-semibold);
letter-spacing: .02em;
transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.status-indicator::before {
content: attr(data-symbol);
line-height: 1; line-height: 1;
font-size: .9rem; transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.status-indicator[data-supported="true"] {
background: linear-gradient(145deg, rgba(16, 185, 129, .16), rgba(16, 185, 129, .08));
border-color: rgba(16, 185, 129, .55);
color: color-mix(in srgb, var(--success) 92%, #fff 8%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
[data-theme="dark"] .status-indicator[data-supported="true"] {
background: linear-gradient(145deg, rgba(16, 185, 129, .32), rgba(16, 185, 129, .18));
border-color: rgba(16, 185, 129, .7);
box-shadow: inset 0 1px 0 rgba(16, 185, 129, .25);
}
.status-indicator[data-supported="false"] {
background: linear-gradient(145deg, rgba(239, 68, 68, .14), rgba(239, 68, 68, .06));
border-color: rgba(239, 68, 68, .45);
color: color-mix(in srgb, var(--error) 90%, #fff 10%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
[data-theme="dark"] .status-indicator[data-supported="false"] {
background: linear-gradient(145deg, rgba(239, 68, 68, .28), rgba(239, 68, 68, .15));
border-color: rgba(239, 68, 68, .55);
box-shadow: inset 0 1px 0 rgba(239, 68, 68, .2);
} }
.status-cell:hover .status-indicator, .status-cell:hover .status-indicator,
.support-status:hover .status-indicator { .support-status:hover .status-indicator {
opacity: 0.9; transform: scale(1.1);
} }
.empty-state-row { .empty-state-row {

6
dist/js/app.js vendored
View file

@ -357,7 +357,7 @@ class TableManager {
const indicator = document.createElement("span"); const indicator = document.createElement("span");
indicator.className = "status-indicator"; indicator.className = "status-indicator";
indicator.dataset.supported = isSupported ? "true" : "false"; indicator.dataset.supported = isSupported ? "true" : "false";
indicator.dataset.symbol = isSupported ? "✓" : "✕"; indicator.textContent = isSupported ? "✅" : "❌";
indicator.setAttribute("aria-hidden", "true"); indicator.setAttribute("aria-hidden", "true");
const srText = document.createElement("span"); const srText = document.createElement("span");
@ -675,10 +675,10 @@ class ComparisonManager {
const getStatusCell = (supported) => { const getStatusCell = (supported) => {
const supportedClass = supported ? "supported" : "not-supported"; const supportedClass = supported ? "supported" : "not-supported";
const supportedFlag = supported ? "true" : "false"; const supportedFlag = supported ? "true" : "false";
const symbol = supported ? "✓" : "✕"; const emoji = supported ? "✅" : "❌";
return ` return `
<td class="support-status ${supportedClass}" data-supported="${supportedFlag}"> <td class="support-status ${supportedClass}" data-supported="${supportedFlag}">
<span class="status-indicator" data-supported="${supportedFlag}" data-symbol="${symbol}" aria-hidden="true"></span> <span class="status-indicator" data-supported="${supportedFlag}" aria-hidden="true">${emoji}</span>
<span class="visually-hidden">${supported ? "Supported" : "Not supported"}</span> <span class="visually-hidden">${supported ? "Supported" : "Not supported"}</span>
</td> </td>
`; `;