admin/honeyDueKMP
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Parity gallery: force uniform aspect ratio + object-fit so Android and iOS screenshots render at identical display size regardless of native capture dimensions.

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Trey T
2026-04-20 18:24:02 -05:00
parent 9fa58352c0
commit 16096f4b70
2 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/parity-gallery.html
View File

@@ -23,10 +23,17 @@
.row { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 12px;
margin-bottom: 8px; align-items: start; }
.label { font-size: 12px; color: #c9d1d9; padding-top: 4px; }
.row img { width: 100%; border: 1px solid #30363d; border-radius: 4px; display: block; }
/* Force every screenshot — Android and iOS — into the same display box.
Native capture sizes differ (Android 360×800 @1x, iOS 390×844 @2x) so
without a forced aspect-ratio + object-fit the row heights shift by a
few percent per platform, making side-by-side comparisons noisy. */
.row img { width: 100%; aspect-ratio: 9 / 19.5; object-fit: contain;
background: #0d1117; border: 1px solid #30363d; border-radius: 4px;
display: block; }
.missing { display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 200px; background: #21262d; border-radius: 4px;
font-size: 13px; font-weight: 600; padding: 8px; }
aspect-ratio: 9 / 19.5; width: 100%;
background: #21262d; border-radius: 4px;
font-size: 13px; font-weight: 600; padding: 8px; box-sizing: border-box; }
.missing.missing-needed { border: 2px dashed #f85149; color: #f85149; }
.missing.missing-platform { border: 1px solid #30363d; color: #8b949e; }
.missing .hint { color: #6e7681; font-size: 10px; font-weight: 400;

13
scripts/build_parity_gallery.py
View File

@@ -329,10 +329,17 @@ PAGE_HEAD = """<!DOCTYPE html>
.row { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 12px;
margin-bottom: 8px; align-items: start; }
.label { font-size: 12px; color: #c9d1d9; padding-top: 4px; }
.row img { width: 100%; border: 1px solid #30363d; border-radius: 4px; display: block; }
/* Force every screenshot — Android and iOS — into the same display box.
Native capture sizes differ (Android 360×800 @1x, iOS 390×844 @2x) so
without a forced aspect-ratio + object-fit the row heights shift by a
few percent per platform, making side-by-side comparisons noisy. */
.row img { width: 100%; aspect-ratio: 9 / 19.5; object-fit: contain;
background: #0d1117; border: 1px solid #30363d; border-radius: 4px;
display: block; }
.missing { display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 200px; background: #21262d; border-radius: 4px;
font-size: 13px; font-weight: 600; padding: 8px; }
aspect-ratio: 9 / 19.5; width: 100%;
background: #21262d; border-radius: 4px;
font-size: 13px; font-weight: 600; padding: 8px; box-sizing: border-box; }
.missing.missing-needed { border: 2px dashed #f85149; color: #f85149; }
.missing.missing-platform { border: 1px solid #30363d; color: #8b949e; }
.missing .hint { color: #6e7681; font-size: 10px; font-weight: 400;