mypresta.rocks/prestashop-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update preview.html with better descriptions and all shapes

Browse Source 
- Clarify shape descriptions (icon = logo mark only, rectangle = icon + text)
- Add text-only sections for both payments and socials
- Use proper 150x100 aspect ratio for rectangle/full-logo/text-only
- Add grid-wide CSS class for wider icon display

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
myprestarocks
2026-01-27 11:46:42 +00:00
parent d694f9f21f
commit f292284a2e
1 changed files with 67 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
preview.html
View File

@@ -67,6 +67,9 @@
gap: 15px;
margin-bottom: 30px;
}
.grid-wide {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.icon-box {
background: #fff;
border: 1px solid #ddd;
@@ -125,36 +128,42 @@
<div id="payments" class="section active">
<h2>Payment Icons</h2>
<h3>Icon Shape - Light Accent (la)</h3>
<h3>Icon (logo mark only) - Light Accent</h3>
<div class="grid" id="payments-icon-la"></div>
<h3>Icon Shape - Dark Accent (da) - Dark Background</h3>
<h3>Icon (logo mark only) - Dark Accent on Dark Background</h3>
<div class="grid" id="payments-icon-da"></div>
<h3>Icon Shape - Light Mode (lm)</h3>
<h3>Icon (logo mark only) - Light Mode (monochrome)</h3>
<div class="grid" id="payments-icon-lm"></div>
<h3>Icon Shape - Dark Mode (dm) - Dark Background</h3>
<h3>Icon (logo mark only) - Dark Mode (monochrome) on Dark Background</h3>
<div class="grid" id="payments-icon-dm"></div>
<h3>Square Shape - Light Accent (la)</h3>
<h3>Square (logo in square frame) - Light Accent</h3>
<div class="grid" id="payments-square-la"></div>
<h3>Rectangle Shape - Light Accent (la)</h3>
<div class="grid" id="payments-rectangle-la"></div>
<h3>Rectangle (icon + brand text, 150×100) - Light Accent</h3>
<div class="grid grid-wide" id="payments-rectangle-la"></div>
<h3>Text Only (brand name) - Light Accent</h3>
<div class="grid grid-wide" id="payments-text-only-la"></div>
</div>
<div id="socials" class="section">
<h2>Social Icons</h2>
<h3>Icon Shape - Light Accent (la)</h3>
<h3>Icon (logo mark only) - Light Accent</h3>
<div class="grid" id="socials-icon-la"></div>
<h3>Icon Shape - Dark Accent (da) - Dark Background</h3>
<h3>Icon (logo mark only) - Dark Accent on Dark Background</h3>
<div class="grid" id="socials-icon-da"></div>
<h3>Full Logo - Light Accent (la)</h3>
<div class="grid" id="socials-full-logo-la"></div>
<h3>Full Logo (icon + brand text, 150×100) - Light Accent</h3>
<div class="grid grid-wide" id="socials-full-logo-la"></div>
<h3>Text Only (brand name) - Light Accent</h3>
<div class="grid grid-wide" id="socials-text-only-la"></div>
</div>
<script>
@@ -249,6 +258,49 @@
});
}
// Render wide icons (150x100 aspect ratio)
function renderIconsWide(containerId, brands, spriteFile, suffix, width, height, isDark = false) {
const container = document.getElementById(containerId);
if (!container) return;
fetch(spriteFile)
.then(r => r.text())
.then(svg => {
const spriteId = `sprite-${containerId}`;
const div = document.createElement('div');
div.id = spriteId;
div.style.cssText = 'position:absolute;width:0;height:0;overflow:hidden;';
div.innerHTML = svg;
document.body.appendChild(div);
const symbols = div.querySelectorAll('symbol');
const symbolIds = Array.from(symbols).map(s => s.id);
brands.forEach(brand => {
const id = `${brand}_${suffix}`;
const exists = symbolIds.includes(id);
if (!exists) {
console.warn(`[${containerId}] MISSING symbol: #${id}`);
}
const box = document.createElement('div');
box.className = 'icon-box' + (isDark ? ' dark' : '') + (exists ? '' : ' missing');
box.innerHTML = `
<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" style="${exists ? '' : 'border: 2px dashed red;'}">
<use href="#${id}"></use>
</svg>
<span>${brand}${exists ? '' : ' (MISSING)'}</span>
`;
container.appendChild(box);
});
})
.catch(e => {
console.error(`[${containerId}] Error:`, e);
container.innerHTML = `<p>Error loading ${spriteFile}: ${e.message}</p>`;
});
}
// Debug: Check for invisible icons after render
function debugInvisibleIcons() {
document.querySelectorAll('.icon-box').forEach(box => {
@@ -296,12 +348,14 @@
renderIcons('payments-icon-lm', paymentBrands, 'sprites/payments/icon-lm.svg', 'lm', 45);
renderIcons('payments-icon-dm', paymentBrands, 'sprites/payments/icon-dm.svg', 'dm', 45, true);
renderIcons('payments-square-la', paymentBrands, 'sprites/payments/square-la.svg', 'la', 45);
renderIcons('payments-rectangle-la', paymentBrands, 'sprites/payments/rectangle-la.svg', 'la', 60);
renderIconsWide('payments-rectangle-la', paymentBrands, 'sprites/payments/rectangle-la.svg', 'la', 150, 100);
renderIconsWide('payments-text-only-la', paymentBrands, 'sprites/payments/text-only-la.svg', 'la', 150, 100);
// Social icons
renderIcons('socials-icon-la', socialBrands, 'sprites/socials/icon-la.svg', 'la', 45);
renderIcons('socials-icon-da', socialBrands, 'sprites/socials/icon-da.svg', 'da', 45, true);
renderIcons('socials-full-logo-la', socialBrands, 'sprites/socials/full-logo-la.svg', 'la', 80);
renderIconsWide('socials-full-logo-la', socialBrands, 'sprites/socials/full-logo-la.svg', 'la', 150, 100);
renderIconsWide('socials-text-only-la', socialBrands, 'sprites/socials/text-only-la.svg', 'la', 150, 100);
function showSection(name) {
document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));