Skip to content

Commit b9372ff

Browse files
aanthonymaxaanthonymax
committed
update mobile
1 parent 973b42f commit b9372ff

File tree

5 files changed

+354
-35
lines changed

5 files changed

+354
-35
lines changed

‎www/app/src/components/ComparisonTable.css‎

Lines changed: 105 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -371,18 +371,26 @@
371371
}
372372
}
373373

374+
@media (min-width: 601px) {
375+
.slider-controls {
376+
display: none;
377+
}
378+
}
379+
374380
@media (max-width: 600px) {
375381
.comparison-header {
376-
margin-bottom: 20px;
382+
margin-bottom: 29px;
383+
text-align: start;
377384
}
378385

379386
.comparison-title {
380387
font-size: 24px;
381388
line-height: 1.3;
389+
margin-bottom: 8px;
382390
}
383391

384392
.comparison-subtitle {
385-
font-size: 14px;
393+
font-size: 16px;
386394
line-height: 1.4;
387395
}
388396

@@ -392,50 +400,128 @@
392400

393401
.table-container {
394402
padding: 0 4px;
403+
overflow-x: hidden;
404+
max-width: 400px;
395405
}
396406

397407
.columns-grid {
398-
grid-template-columns: repeat(4, minmax(100px, 1fr));
408+
grid-template-columns: repeat(4, minmax(147px, 1fr));
399409
gap: 8px;
400410
min-width: 440px;
401411
}
402412

403413
.column-header {
404414
padding: 8px 10px;
405415
border-radius: 6px 6px 0 0;
416+
height: 100%;
417+
display: flex;
406418
}
407419

408420
.column-header-content {
409-
font-size: 12px;
421+
font-size: 20px;
422+
justify-content: start;
410423
}
411424

412425
.framework-header {
413-
font-size: 12px;
414-
gap: 4px;
426+
font-size: 20px;
427+
gap: 10px;
428+
flex-direction: row;
429+
line-height: 1;
415430
}
416431

417432
.framework-logo {
418-
width: 20px;
419-
height: 20px;
433+
width: 27px;
434+
height: 27px;
420435
padding: 2px;
421436
}
422437

423438
.column-cell {
424439
padding: 8px 10px;
425440
font-size: 12px;
441+
justify-content: start;
426442
}
427443

428444
.feature-column .column-cell {
429-
font-size: 12px;
445+
font-size: 14px;
430446
}
431447

432448
.feature-name {
433-
font-size: 12px;
449+
font-size: 14px;
434450
line-height: 1.3;
435451
}
436452

437453
.feature-value {
438-
font-size: 12px;
454+
font-size: 14px;
455+
}
456+
457+
.slider-controls {
458+
display: flex;
459+
align-items: center;
460+
justify-content: center;
461+
gap: 16px;
462+
margin-top: 16px;
463+
padding: 0 8px;
464+
}
465+
466+
.slider-nav-button {
467+
width: 31px;
468+
height: 31px;
469+
border: none;
470+
background: transparent;
471+
cursor: pointer;
472+
display: flex;
473+
align-items: center;
474+
justify-content: center;
475+
padding: 0;
476+
transition: opacity 0.2s ease-in-out;
477+
color: var(--homepage-nav-color);
478+
}
479+
480+
.slider-nav-button:hover:not(:disabled) {
481+
opacity: 0.7;
482+
}
483+
484+
.slider-nav-button:disabled {
485+
opacity: 0.3;
486+
cursor: not-allowed;
487+
}
488+
489+
.slider-nav-button svg {
490+
width: 31px;
491+
height: 31px;
492+
display: block;
493+
}
494+
495+
.slider-button-flipped {
496+
transform: rotate(180deg);
497+
}
498+
499+
.slider-indicators {
500+
display: flex;
501+
align-items: center;
502+
gap: 8px;
503+
}
504+
505+
.slider-indicator {
506+
width: 8px;
507+
height: 8px;
508+
border-radius: 50%;
509+
border: none;
510+
background-color: #d9d9d9;
511+
cursor: pointer;
512+
padding: 0;
513+
transition:
514+
background-color 0.2s ease-in-out,
515+
transform 0.2s ease-in-out;
516+
}
517+
518+
.slider-indicator:hover {
519+
transform: scale(1.2);
520+
}
521+
522+
.slider-indicator.active {
523+
background-color: var(--homepage-nav-color);
524+
transform: scale(1.2);
439525
}
440526

441527
.feature-value svg {
@@ -453,9 +539,16 @@
453539
}
454540

455541
.comparison-note {
456-
font-size: 11px;
542+
font-size: 12px;
457543
line-height: 1.6;
458544
padding: 0 4px;
545+
display: flex;
546+
flex-wrap: nowrap;
547+
text-align: start;
548+
}
549+
550+
.metrics-link {
551+
display: contents;
459552
}
460553

461554
.note-image {

‎www/app/src/components/ComparisonTable.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ export default {
22
name: "ComparisonTable",
33
data() {
44
return {
5+
currentSlide: 0,
6+
totalSlides: 3, // Slides: 0-1, 1-2, 2-3 (showing 2 columns at a time)
57
features: [
68
{
79
name: "Bundle Size (gzipped)",
@@ -72,6 +74,53 @@ export default {
7274
}
7375
}
7476
return "neutral";
77+
},
78+
79+
scrollToSlide() {
80+
const container = this.$refs.tableContainer;
81+
if (!container) return;
82+
83+
const grid = container.querySelector(".columns-grid");
84+
if (!grid) return;
85+
86+
const columnWidth = grid.children[0].offsetWidth;
87+
const gap = parseInt(getComputedStyle(grid).gap) || 0;
88+
89+
const step = columnWidth + gap;
90+
91+
container.scrollTo({
92+
left: step * this.currentSlide,
93+
behavior: "smooth"
94+
});
95+
},
96+
97+
nextSlide() {
98+
if (this.currentSlide < this.totalSlides - 1) {
99+
this.currentSlide++;
100+
this.scrollToSlide();
101+
}
102+
},
103+
104+
prevSlide() {
105+
if (this.currentSlide > 0) {
106+
this.currentSlide--;
107+
this.scrollToSlide();
108+
}
109+
},
110+
111+
goToSlide(index) {
112+
if (index >= 0 && index < this.totalSlides) {
113+
this.currentSlide = index;
114+
this.scrollToSlide();
115+
}
116+
},
117+
118+
isFirstSlide() {
119+
return this.currentSlide === 0;
120+
},
121+
122+
isLastSlide() {
123+
return this.currentSlide === this.totalSlides - 1;
75124
}
76125
}
77126
};

‎www/app/src/components/ComparisonTable.vue‎

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</p>
88
</div>
99

10-
<div class="table-container">
10+
<div class="table-container" ref="tableContainer">
1111
<!-- Header row -->
1212
<div class="columns-grid comparison-grid-header">
1313
<div class="column-header column-header-feature">
@@ -212,6 +212,71 @@
212212
</div>
213213
</div>
214214
</div>
215+
<div class="slider-controls">
216+
<button
217+
class="slider-nav-button slider-nav-button-prev"
218+
@click="prevSlide"
219+
:disabled="isFirstSlide()"
220+
aria-label="Previous column"
221+
>
222+
<svg
223+
width="31"
224+
height="31"
225+
viewBox="0 0 31 31"
226+
fill="none"
227+
xmlns="http://www.w3.org/2000/svg"
228+
>
229+
<circle cx="15.5" cy="15.5" r="15" stroke="currentColor" />
230+
<path
231+
d="M7.39644 15.1464C7.20118 15.3417 7.20118 15.6583 7.39644 15.8536L10.5784 19.0355C10.7737 19.2308 11.0903 19.2308 11.2855 19.0355C11.4808 18.8403 11.4808 18.5237 11.2855 18.3284L8.4571 15.5L11.2855 12.6716C11.4808 12.4763 11.4808 12.1597 11.2855 11.9645C11.0903 11.7692 10.7737 11.7692 10.5784 11.9645L7.39644 15.1464ZM22.3889 15.5L22.3889 15L7.75 15L7.75 15.5L7.75 16L22.3889 16L22.3889 15.5Z"
232+
fill="currentColor"
233+
/>
234+
</svg>
235+
</button>
236+
237+
<div class="slider-indicators">
238+
<button
239+
class="slider-indicator"
240+
:class="{ active: currentSlide === 0 }"
241+
@click="goToSlide(0)"
242+
aria-label="Go to Feature and HMPL columns"
243+
></button>
244+
<button
245+
class="slider-indicator"
246+
:class="{ active: currentSlide === 1 }"
247+
@click="goToSlide(1)"
248+
aria-label="Go to HMPL and Alpine columns"
249+
></button>
250+
<button
251+
class="slider-indicator"
252+
:class="{ active: currentSlide === 2 }"
253+
@click="goToSlide(2)"
254+
aria-label="Go to Alpine and HTMX columns"
255+
></button>
256+
</div>
257+
258+
<button
259+
class="slider-nav-button slider-nav-button-next"
260+
@click="nextSlide"
261+
:disabled="isLastSlide()"
262+
aria-label="Next column"
263+
>
264+
<svg
265+
width="31"
266+
height="31"
267+
viewBox="0 0 31 31"
268+
fill="none"
269+
xmlns="http://www.w3.org/2000/svg"
270+
class="slider-button-flipped"
271+
>
272+
<circle cx="15.5" cy="15.5" r="15" stroke="currentColor" />
273+
<path
274+
d="M7.39644 15.1464C7.20118 15.3417 7.20118 15.6583 7.39644 15.8536L10.5784 19.0355C10.7737 19.2308 11.0903 19.2308 11.2855 19.0355C11.4808 18.8403 11.4808 18.5237 11.2855 18.3284L8.4571 15.5L11.2855 12.6716C11.4808 12.4763 11.4808 12.1597 11.2855 11.9645C11.0903 11.7692 10.7737 11.7692 10.5784 11.9645L7.39644 15.1464ZM22.3889 15.5L22.3889 15L7.75 15L7.75 15.5L7.75 16L22.3889 16L22.3889 15.5Z"
275+
fill="currentColor"
276+
/>
277+
</svg>
278+
</button>
279+
</div>
215280
<div class="comparison-footer">
216281
<p class="comparison-note">
217282
<svg

0 commit comments

Comments
 (0)