Clean working solution - simplified JavaScript
- Simplified JavaScript to only handle year timeline sections - Fixed overflow-y: auto to enable scrolling - Remove interference with footer and other content - Keep all markdown content unchanged - Create proper story structure without breaking existing elements - Add quick navigation and interactive year sections - Clean, maintainable approach
This commit is contained in:
parent
32264deb5a
commit
45a3c27e45
2 changed files with 26 additions and 23 deletions
|
|
@ -3,7 +3,8 @@
|
|||
background: linear-gradient(135deg, #0A1929 0%, #1A2332 50%, #0F172A 100%);
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Logo styling */
|
||||
|
|
|
|||
|
|
@ -1,18 +1,9 @@
|
|||
// Journey Page JavaScript - Convert markdown to interactive timeline
|
||||
// Simple Journey Page JavaScript - Only handle year timeline
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('Journey.js loaded - DOM content loaded');
|
||||
|
||||
// Find the container with story content
|
||||
const container = document.querySelector('.container') || document.querySelector('main');
|
||||
if (!container) {
|
||||
console.log('No container found');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Container found, looking for year sections...');
|
||||
|
||||
// Find all h2 elements that contain years
|
||||
const yearHeaders = Array.from(container.querySelectorAll('h2')).filter(h2 => {
|
||||
const yearHeaders = Array.from(document.querySelectorAll('h2')).filter(h2 => {
|
||||
const text = h2.textContent;
|
||||
return /\d{4}/.test(text);
|
||||
});
|
||||
|
|
@ -25,6 +16,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
}
|
||||
|
||||
// Wrap everything in story structure
|
||||
const container = document.querySelector('.container') || document.querySelector('main');
|
||||
if (!container) {
|
||||
console.log('No container found');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create story structure but only wrap year sections
|
||||
const storyPage = document.createElement('div');
|
||||
storyPage.className = 'story-page';
|
||||
|
||||
|
|
@ -34,17 +32,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
const storyThread = document.createElement('div');
|
||||
storyThread.className = 'story-thread';
|
||||
|
||||
// Move all content to new structure
|
||||
// Move all content from original container to new structure
|
||||
while (container.firstChild) {
|
||||
storyContainer.appendChild(container.firstChild);
|
||||
storyThread.appendChild(container.firstChild);
|
||||
}
|
||||
|
||||
storyThread.appendChild(storyContainer);
|
||||
storyPage.appendChild(storyThread);
|
||||
container.appendChild(storyPage);
|
||||
|
||||
// Now convert h2 elements to collapsible sections
|
||||
const allH2Elements = storyContainer.querySelectorAll('h2');
|
||||
// Now convert only the h2 year sections
|
||||
const allH2Elements = storyThread.querySelectorAll('h2');
|
||||
const sections = [];
|
||||
|
||||
allH2Elements.forEach((h2, index) => {
|
||||
|
|
@ -104,7 +98,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
}
|
||||
});
|
||||
|
||||
// Add click handlers
|
||||
// Add click handlers for the year sections
|
||||
sections.forEach(section => {
|
||||
const header = section.querySelector('.year-header');
|
||||
const content = section.querySelector('.year-content');
|
||||
|
|
@ -152,7 +146,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
</div>
|
||||
`;
|
||||
|
||||
storyContainer.insertBefore(quickJump, storyThread);
|
||||
storyThread.insertBefore(quickJump, storyThread);
|
||||
|
||||
// Add jump handlers
|
||||
quickJump.querySelectorAll('.jump-to-year').forEach(btn => {
|
||||
|
|
@ -169,5 +163,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
});
|
||||
}
|
||||
|
||||
console.log('Story conversion completed with', sections.length, 'sections');
|
||||
// Wrap everything in story structure
|
||||
storyPage.appendChild(storyContainer);
|
||||
storyPage.appendChild(storyThread);
|
||||
|
||||
// Replace the original container content with the new structure
|
||||
container.innerHTML = '';
|
||||
container.appendChild(storyPage);
|
||||
|
||||
console.log('Story conversion completed with', sections.length, 'year sections');
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue