gator/parts-store
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Readability + phone-fit pass: kill horizontal overflow, calmer type/spacing, collapse long use-cases + SPICE

Browse source
This commit is contained in:
gator 2026-08-15 01:35:08 +00:00
parent 4c390d45c7
commit 0a1208e496
2 changed files with 74 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
assets/part.js
View file

@ -58,7 +58,10 @@ window.ppcbReady(async () => {
const params = (p.params || []).map((x) => `<tr><td>${esc(x.name)}</td><td class="v">${esc(x.value)} ${esc(x.unit || '')}${x.note ? `<span class="cond">${esc(x.note)}</span>` : ''}</td></tr>`).join('');
const pinsList = (p.pins || []).map((x) => `<div class="pin"><span class="n">${esc(x.pin ?? '')}</span>${esc(x.name || '')}<span class="t">${esc(x.type || '')}</span></div>`).join('');
const ucs = (p.use_cases || []).map((u) => `<li>${esc(u)}</li>`).join('');
const ucArr = p.use_cases || [];
const ucLi = (a) => a.map((u) => `<li>${esc(u)}</li>`).join('');
const ucs = ucArr.length ? `<ul class="uc">${ucLi(ucArr.slice(0, 5))}</ul>` +
(ucArr.length > 5 ? `<details class="more"><summary>+${ucArr.length - 5} more uses</summary><ul class="uc">${ucLi(ucArr.slice(5))}</ul></details>` : '') : '';
const tagList = Object.entries(p.tags || {}).filter(([, v]) => v != null && v !== '' && !Array.isArray(v) && typeof v !== 'boolean').map(([k, v]) => `<span class="tag"><b>${esc(k)}</b> ${esc(v)}</span>`).join('');
const kr = ((p.tags || {}).key_ratings || []).map((r) => `<span class="tag">${esc(r)}</span>`).join('');
const ser = p.series ? `<div class="tags" style="margin-top:8px">${Object.entries(p.series).filter(([k]) => k !== 'mesh').map(([k, v]) => `<span class="tag"><b>${esc(k)}</b> ${esc(v)}</span>`).join('')}</div>` : '';
@ -84,12 +87,12 @@ window.ppcbReady(async () => {
</div>
<div class="assets"><span><span class="ok">✓</span> 3D model</span><span><span class="ok">✓</span> Schematic</span><span><span class="ok">✓</span> Footprint</span><span><span class="ok">✓</span> SPICE</span><span><span class="ok">✓</span> ${(p.pins || []).length} pins</span></div>
${p.when_to_use ? `<div class="section"><h3>When to use</h3><p style="color:var(--text);line-height:1.6;margin:0">${esc(p.when_to_use)}</p></div>` : ''}
${ucs ? `<div class="section"><h3>What it's used for</h3><ul class="uc">${ucs}</ul></div>` : ''}
${ucs ? `<div class="section"><h3>What it's used for</h3>${ucs}</div>` : ''}
${params ? `<div class="section"><h3>Specifications</h3><table class="ptable">${params}</table></div>` : ''}
${ser}
${pinsList ? `<div class="section"><h3>Pins &amp; pads</h3><div class="pins">${pinsList}</div></div>` : ''}
${(tagList || kr) ? `<div class="section"><h3>Requirement tags</h3><div class="tags">${kr}${tagList}</div></div>` : ''}
${p.spice ? `<div class="section"><h3>SPICE model</h3><pre class="spice">${esc(p.spice)}</pre></div>` : ''}
${p.spice ? `<div class="section"><h3>SPICE model</h3><details class="more"><summary>show model</summary><pre class="spice">${esc(p.spice)}</pre></details></div>` : ''}
</div>
</div>`;

68
assets/style.css
View file

@ -207,3 +207,71 @@ html:not(.ppcb-authed) body{overflow:hidden}
.assets{gap:12px;font-size:12px}
.gate-h{font-size:24px}
}
/* ============ readability + phone-fit pass (overrides) ============ */
html,body{overflow-x:hidden;max-width:100%}
body{font-size:16px;line-height:1.55}
.wrap{max-width:1060px}
/* grid/flex children must be allowed to shrink, or wide content (SPICE, tables, monospace) forces
the whole page wider than the viewport = horizontal scroll on phones */
.detail>div,.card,.vals>div,.viz,.grid>*{min-width:0}
pre.spice{max-width:100%;font-size:12px}
.ptable{table-layout:fixed;width:100%}
.ptable td{word-break:break-word}
.ptable td:first-child{width:42%}
.uc li{overflow-wrap:anywhere}
/* calmer, more readable type + spacing */
.hero{min-height:70vh}
.hero h1{font-size:clamp(32px,5.4vw,60px);max-width:17ch;line-height:1.04}
.hero p{font-size:clamp(16px,1.9vw,18px);max-width:50ch}
.sec{padding:68px 0}
.sec h2{font-size:clamp(25px,3.2vw,36px)}
.sec .lead{font-size:17px}
.vals{margin-top:44px;gap:24px}
.val h3{font-size:19px}
.val p{font-size:15px}
/* detail page: tighter + scannable */
.detail{gap:36px;padding:36px 0 80px}
.dclass{font-size:12px}
.dh1{font-size:clamp(25px,3.2vw,36px)}
.dmpn{font-size:14px}
.section{margin:24px 0}
.section h3{margin-bottom:10px}
.uc li{font-size:15px;padding:11px 0;line-height:1.5}
.ptable{font-size:14px}
.ptable td{padding:9px 4px}
.pin{font-size:12px;padding:8px 10px}
.card .sm{font-size:13px}
.assets{gap:16px;font-size:12px}
/* mobile */
@media(max-width:820px){
.hero{min-height:auto;padding:92px 0 64px}
#hero-canvas{opacity:.65}
.sec{padding:48px 0}
.vizpanel,.viewer{height:44vh;min-height:270px}
.dactions{gap:8px}
.dactions .btn{padding:11px 15px;font-size:14px}
}
@media(max-width:540px){
.wrap{padding:0 16px}
nav.main{gap:13px}
nav.main a{font-size:12px}
.hero h1{font-size:clamp(27px,8.5vw,38px)}
.hero p{font-size:15px}
.sec h2{font-size:23px}
.sec .lead,.val p,.card .sm{font-size:14px}
.uc li{font-size:14px}
pre.spice{font-size:11px}
}
/* collapsible "more" toggles (use-cases / SPICE) */
.more{margin-top:8px}
.more>summary{cursor:pointer;font-family:var(--mono);font-size:13px;color:var(--acc);list-style:none;padding:6px 0}
.more>summary::-webkit-details-marker{display:none}
.more>summary::before{content:"+ "}
.more[open]>summary::before{content:"– "}
.more[open]>summary{margin-bottom:8px}
.more .uc li:first-child{border-top:1px solid var(--line)}