From 1f0e4d65551c83668a6c163ee8f5387cccb36442 Mon Sep 17 00:00:00 2001 From: flocom Date: Sun, 7 Jun 2026 16:44:00 +0200 Subject: [PATCH] Redesign the Project Languages modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A polished overhaul of the languages modal: - Sticky header with subtitle + a live language-count chip; scrollable body; sticky Done footer (modal is now a flex column). - Clean add-bar: globe-icon select + accent "All App Store" button. - Language cards: rounded flag tile, name, Main/Current pill badges, a "code · N screenshots" subline, hover-revealed remove, and the per-language drop zone (solid green when it has images, dashed when empty). - "Bulk import & text" icon action cards (folder import / CSV template / CSV import) instead of plain buttons. - A proper toggle switch for "Sync main language", in its own card. Also fixes a layout bug: the old .languages-list had max-height:300px which made the flex cards shrink and clip their drop zones; cards now keep natural height and the modal body scrolls. Co-Authored-By: Claude Opus 4.8 --- appstore-features.js | 31 +++--- index.html | 81 +++++++++------ styles.css | 230 ++++++++++++++++++++++++++++++++----------- 3 files changed, 242 insertions(+), 100 deletions(-) diff --git a/appstore-features.js b/appstore-features.js index dee5479..0ad3047 100644 --- a/appstore-features.js +++ b/appstore-features.js @@ -242,12 +242,15 @@ if (typeof window !== 'undefined' && typeof setTextValue === 'function') { }; } -// ---- Override updateLanguagesList: stacked rows + per-language drop zones ---- +// ---- Override updateLanguagesList: language cards + per-language drop zones ---- function updateLanguagesList() { const container = document.getElementById('languages-list'); if (!container) return; container.innerHTML = ''; + const chip = document.getElementById('lang-count-chip'); + if (chip) chip.textContent = state.projectLanguages.length; + state.projectLanguages.forEach((lang, i) => { const flag = languageFlags[lang] || '🏳️'; const name = languageNames[lang] || lang.toUpperCase(); @@ -257,26 +260,30 @@ function updateLanguagesList() { const count = countImagesForLanguage(lang); const item = document.createElement('div'); - item.className = 'language-item-stacked'; + item.className = 'lang-card'; item.innerHTML = ` -
- ${flag} - ${name} - ${isMain ? 'Main' : ''} - ${isCurrent ? 'Current' : ''} - ${count} img -
-
+
Drop ${name} screenshots here, or click to browse
`; - const removeBtn = item.querySelector('.remove-btn'); + const removeBtn = item.querySelector('.lang-remove'); if (!isOnly) removeBtn.addEventListener('click', () => removeProjectLanguage(lang)); const dz = item.querySelector('.lang-dropzone'); diff --git a/index.html b/index.html index 9c8d183..5243c5f 100644 --- a/index.html +++ b/index.html @@ -1884,45 +1884,70 @@

App Store Screenshot Generator