Skip to content

Commit 4be0bfd

Browse files
emericklawemericklaw
committed
Add screen resolutions
1 parent c3785b9 commit 4be0bfd

File tree

2 files changed

+70
-53
lines changed

2 files changed

+70
-53
lines changed

‎src/lib/components/CompatibilityTable.svelte‎

Lines changed: 55 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,17 @@
2323
document.getElementById('toggleDetailedView')!.textContent = detailedRows[0].classList.contains('hidden')
2424
? 'Show Detailed View'
2525
: 'Hide Detailed View';
26-
26+
2727
// Recheck gradient visibility after toggling detailed view
2828
setTimeout(checkGradientVisibility, 100);
2929
}
3030
3131
function checkGradientVisibility() {
3232
if (!scrollContainer) return;
33-
33+
3434
const isScrollable = scrollContainer.scrollWidth > scrollContainer.clientWidth;
3535
const isScrolledToEnd = scrollContainer.scrollLeft + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1;
36-
36+
3737
showGradient = isScrollable && !isScrolledToEnd;
3838
}
3939
@@ -43,11 +43,11 @@
4343
4444
onMount(() => {
4545
checkGradientVisibility();
46-
46+
4747
// Also check on window resize
4848
const handleResize = () => checkGradientVisibility();
4949
window.addEventListener('resize', handleResize);
50-
50+
5151
return () => {
5252
window.removeEventListener('resize', handleResize);
5353
};
@@ -68,59 +68,61 @@
6868
Show Detailed View
6969
</button>
7070
<div class="table-wrapper relative">
71-
<div
72-
class="w-full overflow-x-auto whitespace-nowrap"
73-
bind:this={scrollContainer}
74-
on:scroll={handleScroll}
75-
>
71+
<div class="w-full overflow-x-auto whitespace-nowrap" bind:this={scrollContainer} on:scroll={handleScroll}>
7672
<table class="w-full border-collapse rounded-lg bg-neutral-900">
77-
<thead>
78-
<tr>
79-
<th class="sticky left-0 z-10 bg-neutral-900 px-4 py-3 text-center text-base text-white">Device</th>
80-
{#each features as feat}
81-
<th
82-
class="px-4 py-3 text-center text-base text-white {feat === 'ESP' || feat === 'Battery' || feat === 'Flash' || feat === 'PSRAM'
83-
? 'detailed hidden'
84-
: ''}">{feat.replace('_', ' ')}</th
85-
>
86-
{/each}
87-
</tr>
88-
</thead>
89-
<tbody>
90-
{#each compatibilityData as row, index}
91-
<tr class="group even:bg-neutral-800 hover:bg-neutral-700">
92-
<td class="sticky left-0 z-10 px-4 py-3 text-center text-base text-white {index % 2 === 0 ? 'bg-neutral-900' : 'bg-neutral-800'} group-hover:bg-neutral-700"
93-
>{row.device}</td
94-
>
95-
{#each features as key}
96-
<td
97-
title={typeof row[key] === 'string' ? row[key] : ''}
98-
class={key === 'ESP' || key === 'Battery' || key === 'Flash' || key === 'PSRAM' ? 'detailed hidden' : ''}
73+
<thead>
74+
<tr>
75+
<th class="sticky left-0 z-10 bg-neutral-900 px-4 py-3 text-center text-base text-white">Device</th>
76+
{#each features as feat}
77+
<th
78+
class="px-4 py-3 text-center text-base text-white {feat === 'Screen' ||
79+
feat === 'ESP' ||
80+
feat === 'Battery' ||
81+
feat === 'Flash' ||
82+
feat === 'PSRAM'
83+
? 'detailed hidden'
84+
: ''}">{feat.replace('_', ' ')}</th
9985
>
100-
{#if (key === 'ESP' || key === 'Battery' || key === 'Flash' || key === 'PSRAM') && typeof row[key] === 'string'}
101-
{row[key]}
102-
{:else if key === 'NFC' && typeof row[key] === 'string' && row[key] !== 'Module Required'}
103-
✅
104-
{:else if key === 'Mic'}
105-
{typeof row[key] === 'string' ? '✅' : '❌'}
106-
{#if typeof row[key] === 'string'}<span class="detailed hidden">{row[key]}</span>{/if}
107-
{:else if key === 'Audio'}
108-
{row[key] === 'Tone' ? '🔈' : typeof row[key] === 'string' ? '🔊' : '❌'}
109-
{#if typeof row[key] === 'string'}<span class="detailed hidden">{row[key] !== 'Tone' ? 'Full - ' : ''}{row[key]}</span>{/if}
110-
{:else}
111-
{row[key] === true ? '✅' : row[key] === false ? '❌' : row[key] === 'Module Required' ? 'ℹ️' : ''}
112-
{/if}
113-
</td>
11486
{/each}
11587
</tr>
116-
{/each}
117-
</tbody>
118-
</table>
88+
</thead>
89+
<tbody>
90+
{#each compatibilityData as row, index}
91+
<tr class="group even:bg-neutral-800 hover:bg-neutral-700">
92+
<td
93+
class="sticky left-0 z-10 px-4 py-3 text-center text-base text-white {index % 2 === 0
94+
? 'bg-neutral-900'
95+
: 'bg-neutral-800'} group-hover:bg-neutral-700">{row.device}</td
96+
>
97+
{#each features as key}
98+
<td
99+
title={typeof row[key] === 'string' ? row[key] : ''}
100+
class={key === 'Screen' || key === 'ESP' || key === 'Battery' || key === 'Flash' || key === 'PSRAM' ? 'detailed hidden' : ''}
101+
>
102+
{#if (key === 'Screen' || key === 'ESP' || key === 'Battery' || key === 'Flash' || key === 'PSRAM') && typeof row[key] === 'string'}
103+
{row[key]}
104+
{:else if key === 'NFC' && typeof row[key] === 'string' && row[key] !== 'Module Required'}
105+
✅
106+
{:else if key === 'Mic'}
107+
{typeof row[key] === 'string' ? '✅' : '❌'}
108+
{#if typeof row[key] === 'string'}<span class="detailed hidden">{row[key]}</span>{/if}
109+
{:else if key === 'Audio'}
110+
{row[key] === 'Tone' ? '🔈' : typeof row[key] === 'string' ? '🔊' : '❌'}
111+
{#if typeof row[key] === 'string'}<span class="detailed hidden">{row[key] !== 'Tone' ? 'Full - ' : ''}{row[key]}</span>{/if}
112+
{:else}
113+
{row[key] === true ? '✅' : row[key] === false ? '❌' : row[key] === 'Module Required' ? 'ℹ️' : ''}
114+
{/if}
115+
</td>
116+
{/each}
117+
</tr>
118+
{/each}
119+
</tbody>
120+
</table>
121+
</div>
122+
{#if showGradient}
123+
<div class="scroll-gradient" transition:fade={{ duration: 300 }}></div>
124+
{/if}
119125
</div>
120-
{#if showGradient}
121-
<div class="scroll-gradient" transition:fade={{ duration: 300 }}></div>
122-
{/if}
123-
</div>
124126
<br />
125127
<h2 class="text-lg">
126128
For <strong>Wiring Diagrams</strong> check the

‎src/lib/data/devices.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"BadUSB": true,
1010
"RGB_Led": true,
1111
"Audio": "NS4168",
12+
"Screen": "240x135",
1213
"ESP": "ESP32-S3FN8",
1314
"Battery": "120mAh + 1400mAh",
1415
"Flash": "8MB",
@@ -24,6 +25,7 @@
2425
"BadUSB": true,
2526
"RGB_Led": true,
2627
"Audio": "NS4150B",
28+
"Screen": "240x135",
2729
"ESP": "ESP32-S3FN8",
2830
"Battery": "1750mAh",
2931
"Flash": "8MB",
@@ -39,6 +41,7 @@
3941
"BadUSB": true,
4042
"RGB_Led": false,
4143
"Audio": "Tone",
44+
"Screen": "240x135",
4245
"ESP": "ESP32-PICO-V3-02",
4346
"Battery": "200mAh",
4447
"Flash": "8MB",
@@ -54,6 +57,7 @@
5457
"BadUSB": true,
5558
"RGB_Led": false,
5659
"Audio": "Tone",
60+
"Screen": "240x135",
5761
"ESP": "ESP32-PICO-D4",
5862
"Battery": "120mAh",
5963
"Flash": "4MB",
@@ -69,6 +73,7 @@
6973
"BadUSB": false,
7074
"RGB_Led": false,
7175
"Audio": "NS4148",
76+
"Screen": "320x240",
7277
"ESP": "ESP32-D0WDQ6-V3",
7378
"Battery": "110mAh",
7479
"Flash": "16MB",
@@ -84,6 +89,7 @@
8489
"BadUSB": false,
8590
"RGB_Led": false,
8691
"Audio": "NS4168",
92+
"Screen": "320*240",
8793
"ESP": "ESP32-D0WDQ6-V3",
8894
"Battery": "390mAh",
8995
"Flash": "16MB",
@@ -99,6 +105,7 @@
99105
"BadUSB": true,
100106
"RGB_Led": false,
101107
"Audio": "AW88298",
108+
"Screen": "320x240",
102109
"ESP": "ESP32-S3",
103110
"Battery": "None",
104111
"Flash": "16MB",
@@ -114,6 +121,7 @@
114121
"BadUSB": false,
115122
"RGB_Led": false,
116123
"Audio": false,
124+
"Screen": "320x240",
117125
"ESP": "ESP32-WROOM-32",
118126
"Battery": "None",
119127
"Flash": "4MB",
@@ -129,6 +137,7 @@
129137
"BadUSB": true,
130138
"RGB_Led": true,
131139
"Audio": "MAX98357A",
140+
"Screen": "320x170",
132141
"ESP": "ESP32-S3-WROOM-1U",
133142
"Battery": "1300mAh",
134143
"Flash": "16MB",
@@ -144,6 +153,7 @@
144153
"BadUSB": true,
145154
"RGB_Led": true,
146155
"Audio": "MAX98357A",
156+
"Screen": "320x170",
147157
"ESP": "ESP32-S3-WROOM-1U",
148158
"Battery": "1300mAh",
149159
"Flash": "16MB",
@@ -159,6 +169,7 @@
159169
"BadUSB": true,
160170
"RGB_Led": false,
161171
"Audio": "ES8311",
172+
"Screen": "480×222",
162173
"ESP": "ESP32-S3",
163174
"Battery": "1500mAh",
164175
"Flash": "16MB",
@@ -174,6 +185,7 @@
174185
"BadUSB": true,
175186
"RGB_Led": false,
176187
"Audio": false,
188+
"Screen": "320x170",
177189
"ESP": "ESP32-S3FN16R8",
178190
"Battery": "None",
179191
"Flash": "16MB",
@@ -189,6 +201,7 @@
189201
"BadUSB": true,
190202
"RGB_Led": false,
191203
"Audio": "MAX98357A",
204+
"Screen": "320x240",
192205
"ESP": "ESP32-S3FN16R8",
193206
"Battery": "None (Pro has 2000mAh)",
194207
"Flash": "16MB",
@@ -204,6 +217,7 @@
204217
"BadUSB": true,
205218
"RGB_Led": false,
206219
"Audio": "MAX98357A",
220+
"Screen": "240x240",
207221
"ESP": "ESP32-S3FN16R8",
208222
"Battery": "1500mAh",
209223
"Flash": "16MB",
@@ -219,6 +233,7 @@
219233
"BadUSB": true,
220234
"RGB_Led": true,
221235
"Audio": "Tone",
236+
"Screen": "320x170",
222237
"ESP": "ESP32-S3-WROOM-1 NR16R8",
223238
"Battery": "None",
224239
"Flash": "16MB",

0 commit comments

Comments
 (0)