feat: Fix product tables and responsive fonts
- Add product detail page ([slug].astro) with table rendering - Display productTables from site-config.ts on product pages - Add responsive font scaling for large screens (1280px+) - Base font scales from 16px to 24px on 4K displays - All text elements use responsive sizing (md/lg/xl breakpoints) - Tables styled with green headers and alternating rows - Add comprehensive documentation (FIXES_SUMMARY.md) Fixes: - Product specification tables now visible on product pages - Font too small on large screens - now responsive
This commit is contained in:
Kunthawat Greethong
167
dealplustech-astro/FIXES_SUMMARY.md
Normal file
167
dealplustech-astro/FIXES_SUMMARY.md
Normal file
@@ -0,0 +1,167 @@
|
||||
# 🔧 Fixes Applied - Product Tables & Responsive Fonts
|
||||
|
||||
## ✅ Issue 1: Product Tables Disappeared
|
||||
|
||||
### Problem
|
||||
The product specification tables (extracted from images) were not showing on product pages in the Astro migration.
|
||||
|
||||
### Root Cause
|
||||
- The Astro product detail page template (`[slug].astro`) was missing
|
||||
- Product tables data exists in `src/data/site-config.ts` but wasn't being rendered
|
||||
- Markdown files don't include table data (tables are in TypeScript file)
|
||||
|
||||
### Solution
|
||||
Created `src/pages/products/[slug].astro` with:
|
||||
1. **Table Rendering Section** - Displays all `productTables` from site-config
|
||||
2. **Proper Styling** - Matches original Next.js design with:
|
||||
- Table name headers
|
||||
- Alternating row colors
|
||||
- Responsive table containers
|
||||
- Proper borders and shadows
|
||||
|
||||
### Code Added
|
||||
```astro
|
||||
{productTables.length > 0 && (
|
||||
<section class="mb-12">
|
||||
<h2>ตารางข้อมูลผลิตภัณฑ์</h2>
|
||||
{productTables.map((table) => (
|
||||
<div class="bg-white rounded-2xl...">
|
||||
<h3>{table.tableName}</h3>
|
||||
<table>
|
||||
<thead>{table.headers.map(...)} </thead>
|
||||
<tbody>{table.rows.map(...)} </tbody>
|
||||
</table>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
```
|
||||
|
||||
### Data Source
|
||||
Tables are loaded from `src/data/site-config.ts` via `productCategories.find(p => p.id === product.data.id).productTables`
|
||||
|
||||
Products with tables:
|
||||
- ✅ ppr-welder (1 table)
|
||||
- ✅ poloplast (4 tables)
|
||||
- ✅ syler (2 tables)
|
||||
- ✅ xylent (3 tables)
|
||||
- ✅ pvc/upvc (6 tables)
|
||||
- ✅ realflex (3 tables)
|
||||
|
||||
---
|
||||
|
||||
## ✅ Issue 2: Font Too Small on Large Screens
|
||||
|
||||
### Problem
|
||||
Text was not scaling properly on larger screens (desktop, 4K monitors).
|
||||
|
||||
### Root Cause
|
||||
- Base font size was fixed at browser default (16px)
|
||||
- No responsive scaling for larger viewports
|
||||
- Tailwind classes weren't enough for very large screens
|
||||
|
||||
### Solution
|
||||
Added responsive font scaling in `src/styles/global.css`:
|
||||
|
||||
```css
|
||||
/* Base font size */
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Scale up for larger screens */
|
||||
@media (min-width: 1280px) {
|
||||
html { font-size: 18px; }
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
html { font-size: 20px; }
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) {
|
||||
html { font-size: 22px; }
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
html { font-size: 24px; }
|
||||
}
|
||||
```
|
||||
|
||||
### Additional Responsive Text Classes
|
||||
```css
|
||||
.text-responsive-sm { text-sm md:text-base lg:text-lg xl:text-xl; }
|
||||
.text-responsive-base { text-base md:text-lg lg:text-xl xl:text-2xl; }
|
||||
.text-responsive-lg { text-lg md:text-xl lg:text-2xl xl:text-3xl; }
|
||||
.text-responsive-xl { text-xl md:text-2xl lg:text-3xl xl:text-4xl; }
|
||||
```
|
||||
|
||||
### Updated Components
|
||||
All major text elements now use responsive sizing:
|
||||
- **Buttons**: `text-base md:text-lg`
|
||||
- **Section titles**: `text-3xl md:text-4xl lg:text-5xl xl:text-6xl`
|
||||
- **Table headers**: `text-xl md:text-2xl lg:text-3xl`
|
||||
- **Table cells**: `text-base md:text-lg lg:text-xl`
|
||||
- **Features/FAQ**: `text-base md:text-lg lg:text-xl`
|
||||
|
||||
---
|
||||
|
||||
## 📊 Before & After Comparison
|
||||
|
||||
| Screen Size | Before | After |
|
||||
|-------------|--------|-------|
|
||||
| **Mobile (< 768px)** | 16px base | 16px base ✓ |
|
||||
| **Tablet (768-1280px)** | 16px base | 16px base ✓ |
|
||||
| **Desktop (1280-1536px)** | 16px base | **18px base** ↑ |
|
||||
| **Large (1536-1920px)** | 16px base | **20px base** ↑ |
|
||||
| **XL (1920-2560px)** | 16px base | **22px base** ↑ |
|
||||
| **4K (> 2560px)** | 16px base | **24px base** ↑ |
|
||||
|
||||
### Font Scaling Examples
|
||||
|
||||
**Product Title:**
|
||||
- Before: `text-4xl` (36px fixed)
|
||||
- After: `text-4xl md:text-5xl lg:text-6xl xl:text-7xl` (36px → 60px)
|
||||
|
||||
**Table Headers:**
|
||||
- Before: `text-lg` (18px fixed)
|
||||
- After: `text-xl md:text-2xl lg:text-3xl` (20px → 30px)
|
||||
|
||||
**Body Text:**
|
||||
- Before: `text-base` (16px fixed)
|
||||
- After: Responsive + base font scaling (16px → 24px)
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Testing Checklist
|
||||
|
||||
### Product Tables
|
||||
- [ ] Visit any product page (e.g., `/pp-r-pp-rct-poloplast/`)
|
||||
- [ ] Scroll to "ตารางข้อมูลผลิตภัณฑ์" section
|
||||
- [ ] Verify tables are visible with proper styling
|
||||
- [ ] Check table headers have green background
|
||||
- [ ] Check rows alternate white/gray
|
||||
- [ ] Verify tables scroll horizontally on mobile
|
||||
|
||||
### Responsive Fonts
|
||||
- [ ] Test on mobile (375px) - text should be readable
|
||||
- [ ] Test on tablet (768px) - text slightly larger
|
||||
- [ ] Test on desktop (1920px) - text noticeably larger
|
||||
- [ ] Test on 4K (3840px) - text should be large and clear
|
||||
- [ ] Check product titles scale properly
|
||||
- [ ] Check table text scales properly
|
||||
- [ ] Check buttons scale properly
|
||||
|
||||
---
|
||||
|
||||
## 📁 Files Modified
|
||||
|
||||
| File | Changes |
|
||||
|------|---------|
|
||||
| `src/pages/products/[slug].astro` | ✅ Created - product detail page with tables |
|
||||
| `src/styles/global.css` | ✅ Updated - responsive font scaling |
|
||||
|
||||
---
|
||||
|
||||
**Status:** ✅ Both issues fixed
|
||||
**Build:** ✅ Passing
|
||||
**Next:** Test on actual device/screen sizes
|
||||
Reference in New Issue
Block a user