Revert project layout to previous grid

This commit is contained in:
chris 2025-12-10 14:14:33 -05:00
parent cafed99725
commit bcb6f4b784
2 changed files with 12 additions and 69 deletions

View File

@ -48,7 +48,6 @@ let fireflyTimer = null;
let fireflyActive = false;
let titleClicks = [];
let easterEggCooling = false;
let pendingImport = null;
// --- Service Worker ---
if ('serviceWorker' in navigator) {
@ -263,7 +262,7 @@ async function handleImport(event) {
const text = await file.text();
const data = JSON.parse(text);
if (!data.projects || !Array.isArray(data.projects)) throw new Error('Invalid file');
pendingImport = data.projects;
projects = data.projects;
if (typeof data.isDarkMode === 'boolean') {
isDarkMode = data.isDarkMode;
localStorage.setItem('crochetDarkMode', isDarkMode);
@ -272,7 +271,9 @@ async function handleImport(event) {
animationsEnabled = data.animationsEnabled;
localStorage.setItem('crochetAnimations', animationsEnabled);
}
showImportSelection();
localStorage.setItem('crochetCounters', JSON.stringify(projects));
applyTheme();
render();
} catch (err) {
showAlert({ title: 'Import failed', text: err.message });
}
@ -283,47 +284,6 @@ if (importInput) {
importInput.addEventListener('change', handleImport);
}
function showImportSelection() {
if (!pendingImport || !Array.isArray(pendingImport) || !saveOverlay) return;
const importSelection = document.getElementById('importSelection');
const importList = document.getElementById('importList');
if (!importSelection || !importList) return;
importList.innerHTML = '';
pendingImport.forEach((p, idx) => {
const item = document.createElement('label');
item.className = 'save-item';
item.innerHTML = `
<input type="checkbox" checked data-idx="${idx}">
<span>${p.name || 'Project ' + (idx + 1)}</span>
`;
importList.appendChild(item);
});
importSelection.classList.remove('hidden');
saveOverlay.classList.add('active');
}
function cancelImportSelection() {
pendingImport = null;
const importSelection = document.getElementById('importSelection');
const importList = document.getElementById('importList');
if (importSelection) importSelection.classList.add('hidden');
if (importList) importList.innerHTML = '';
}
function applyImportSelection() {
const importList = document.getElementById('importList');
if (!importList || !pendingImport) { cancelImportSelection(); return; }
const inputs = importList.querySelectorAll('input[type="checkbox"]');
const selected = Array.from(inputs).filter(i => i.checked).map(i => Number(i.dataset.idx));
if (selected.length === 0) { cancelImportSelection(); return; }
const selectedProjects = pendingImport.filter((_, idx) => selected.includes(idx));
projects = projects.concat(selectedProjects);
localStorage.setItem('crochetCounters', JSON.stringify(projects));
render();
cancelImportSelection();
closeSaveModal();
showAlert({ title: 'Import complete', text: `${selectedProjects.length} project(s) added.` });
}
function openSaveModal() {
if (!saveOverlay || !saveList) return;
saveList.innerHTML = '';
@ -445,7 +405,6 @@ function handleAmbientDrift() {
}
handleAmbientDrift();
const logoIcon = document.querySelector('.brand-icon');
if (logoIcon) {
logoIcon.addEventListener('click', () => {

View File

@ -232,7 +232,6 @@ h1 {
.save-item input { width: 18px; height: 18px; }
.save-actions { display: flex; justify-content: flex-end; gap: 8px; }
.icon-woodland { width: 22px; height: 22px; }
.import-selection { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.container {
max-width: 1200px;
@ -244,28 +243,15 @@ h1 {
}
.projects-grid {
display: block;
column-width: 340px;
column-gap: 20px;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px;
align-items: start; /* Prevent shorter cards from stretching to tallest row mate */
}
@media (max-width: 768px) {
@media (min-width: 1280px) {
.projects-grid {
column-width: 100%;
}
}
@media (max-width: 1100px) {
.projects-grid {
display: block;
column-width: 340px;
column-gap: 20px;
}
.project-container {
break-inside: avoid;
margin: 0 0 20px;
width: auto;
grid-template-columns: repeat(3, minmax(320px, 1fr));
}
}
@ -274,13 +260,11 @@ h1 {
background: var(--card-bg);
border-radius: 18px;
padding: 5px 15px 15px 15px;
margin: 0 0 20px;
margin-bottom: 2rem;
box-shadow: var(--shadow);
transition: background-color 0.3s;
border: 1px solid var(--border);
break-inside: avoid;
display: inline-block;
width: 100%;
z-index: 10;
}
.project-header {