From 862fc3a5d1c22f21a9cfcd46b03295e926380d54 Mon Sep 17 00:00:00 2001 From: Kelvi Yawo Jules Agbessi Awuklu Date: Sat, 16 Nov 2024 21:54:47 +0100 Subject: [PATCH] Update file subject.php --- webseite/subject.php | 180 +++++++++++++++++++++++++++++++------------ 1 file changed, 130 insertions(+), 50 deletions(-) diff --git a/webseite/subject.php b/webseite/subject.php index b781b5f..0d98b74 100644 --- a/webseite/subject.php +++ b/webseite/subject.php @@ -146,11 +146,12 @@ $topics = $subjectData->topics; .container { display: grid; - grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); - gap: 2rem; + grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); /* Back to original 380px for desktop */ + gap: 2rem; /* Back to original 2rem gap */ padding: 2rem; max-width: 1600px; margin: 0 auto; + width: 100%; } .topic-card { @@ -312,12 +313,76 @@ $topics = $subjectData->topics; .search-container { left: 0; + padding: 0.85rem; /* Match with menu-toggle top */ + padding-left: 4.5rem; /* Increased space for menu icon */ + } + + .menu-toggle { + display: block; + } + + .search-box { + width: calc(100% - 1rem); /* Adjust width to account for padding */ + } + + .container { + grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); /* Slightly smaller for tablets */ + gap: 1.5rem; + padding: 1.5rem; + } + } + + @media (max-width: 768px) { + .container { + grid-template-columns: 1fr; /* Single column on mobile */ + gap: 1.5rem; + padding: 1rem; + } + + .topic-card { + margin: 0 1rem; /* Add horizontal margins */ + } + + .main-content { + padding-top: 4rem; + } + + .search-container { + padding: 0.75rem 1rem; + } + } + + @media (max-width: 480px) { + .search-container { + padding: 0.75rem; + padding-left: 4rem; /* Keep space for menu icon */ + } + + .search-box { + font-size: 0.9rem; + padding: 0.5rem 0.75rem; + } + + .download-links { + flex-direction: column; + } + + .download-btn { + width: 100%; + } + + .container { + padding: 0.5rem; + } + + .topic-card { + margin: 0 0.5rem; } } .menu-toggle { position: fixed; - top: 1rem; + top: 0.85rem; /* Adjusted to align with search bar */ left: 1rem; z-index: 60; background: white; @@ -327,13 +392,18 @@ $topics = $subjectData->topics; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); display: none; + width: 42px; /* Fixed width */ + height: 42px; /* Fixed height */ + display: flex; /* Added to center icon */ + align-items: center; /* Added to center icon */ + justify-content: center; /* Added to center icon */ } - @media (max-width: 1024px) { - .menu-toggle { - display: block; - } + /* Adjust the menu icon size */ + .menu-toggle i { + font-size: 1.25rem; /* Standardize icon size */ } + /* Add floating animation for icons */ @keyframes float { 0%, 100% { transform: translateY(0); } @@ -523,15 +593,6 @@ $topics = $subjectData->topics; Kurse - - Erfolge - - - Fortschritt - - - Hilfe -
@@ -559,13 +620,13 @@ $topics = $subjectData->topics;

Verwandte Themen:

@@ -574,17 +635,17 @@ $topics = $subjectData->topics;

Übungen herunterladen:

files as $fileName) { - ?> + foreach ($topicData->files as $fileName) { + ?> - id/topics/$topicData->id/$fileName")?>" target="_blank" download class="download-btn"> - - - + id/topics/$topicData->id/$fileName")?>" target="_blank" download class="download-btn"> + + + -
@@ -671,9 +732,11 @@ $topics = $subjectData->topics; const progressBars = document.querySelectorAll('.progress-bar'); progressBars.forEach(bar => { const progressElement = bar.querySelector('.progress'); - setTimeout(() => { - progressElement.style.width = '100%'; - }, 300); + if (progressElement) { // Add null check + setTimeout(() => { + progressElement.style.width = '100%'; + }, 300); + } }); }); @@ -714,29 +777,42 @@ $topics = $subjectData->topics; // Add card hover effects document.querySelectorAll('.topic-card').forEach(card => { card.addEventListener('mouseenter', () => { - gsap.to(card.querySelector('.topic-icon'), { - rotate: -10, - scale: 1.2, - duration: 0.3 - }); + const icon = card.querySelector('.topic-icon'); + if (window.gsap) { + gsap.to(icon, { + rotate: -10, + scale: 1.2, + duration: 0.3 + }); + } else { + // Fallback animation using CSS + icon.style.transform = 'rotate(-10deg) scale(1.2)'; + } }); card.addEventListener('mouseleave', () => { - gsap.to(card.querySelector('.topic-icon'), { - rotate: 0, - scale: 1, - duration: 0.3 - }); + const icon = card.querySelector('.topic-icon'); + if (window.gsap) { + gsap.to(icon, { + rotate: 0, + scale: 1, + duration: 0.3 + }); + } else { + // Fallback animation using CSS + icon.style.transform = 'none'; + } }); }); + // Update search function with fallback animation function handleSearch() { const searchTerm = document.getElementById('searchInput').value.toLowerCase(); const topicCards = document.querySelectorAll('.topic-card'); topicCards.forEach(card => { - const title = card.querySelector('.topic-title').textContent.toLowerCase(); - const description = card.querySelector('.topic-description').textContent.toLowerCase(); + const title = card.querySelector('.topic-title')?.textContent.toLowerCase() || ''; + const description = card.querySelector('.topic-description')?.textContent.toLowerCase() || ''; const relatedTopics = Array.from(card.querySelectorAll('.related-topics li')) .map(li => li.textContent.toLowerCase()) .join(' '); @@ -745,12 +821,16 @@ $topics = $subjectData->topics; if (content.includes(searchTerm)) { card.style.display = 'block'; - // Optional: Add animation for appearing cards - gsap.to(card, { - opacity: 1, - y: 0, - duration: 0.3 - }); + if (window.gsap) { + gsap.to(card, { + opacity: 1, + y: 0, + duration: 0.3 + }); + } else { + card.style.opacity = 1; + card.style.transform = 'translateY(0)'; + } } else { card.style.display = 'none'; }