Safak/SWE
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Update file subject.php

Browse Source
This commit is contained in:
Kelvi Yawo Jules Agbessi Awuklu
2024-11-16 21:54:47 +01:00
parent fd2431b1fa
commit 862fc3a5d1
1 changed files with 130 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
webseite/subject.php
View File

@@ -146,11 +146,12 @@ $topics = $subjectData->topics;
.container { .container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); /* Back to original 380px for desktop */
gap: 2rem; gap: 2rem; /* Back to original 2rem gap */
padding: 2rem; padding: 2rem;
max-width: 1600px; max-width: 1600px;
margin: 0 auto; margin: 0 auto;
width: 100%;
} }
.topic-card { .topic-card {
@@ -312,12 +313,76 @@ $topics = $subjectData->topics;
.search-container { .search-container {
left: 0; 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 { .menu-toggle {
position: fixed; position: fixed;
top: 1rem; top: 0.85rem; /* Adjusted to align with search bar */
left: 1rem; left: 1rem;
z-index: 60; z-index: 60;
background: white; background: white;
@@ -327,13 +392,18 @@ $topics = $subjectData->topics;
cursor: pointer; cursor: pointer;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
display: none; 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) { /* Adjust the menu icon size */
.menu-toggle { .menu-toggle i {
display: block; font-size: 1.25rem; /* Standardize icon size */
}
} }
/* Add floating animation for icons */ /* Add floating animation for icons */
@keyframes float { @keyframes float {
0%, 100% { transform: translateY(0); } 0%, 100% { transform: translateY(0); }
@@ -523,15 +593,6 @@ $topics = $subjectData->topics;
<a href="#" class="nav-link"> <a href="#" class="nav-link">
<i class="fas fa-book"></i> Kurse <i class="fas fa-book"></i> Kurse
</a> </a>
<a href="#" class="nav-link">
<i class="fas fa-trophy"></i> Erfolge
</a>
<a href="#" class="nav-link">
<i class="fas fa-chart-line"></i> Fortschritt
</a>
<a href="#" class="nav-link">
<i class="fas fa-question-circle"></i> Hilfe
</a>
</nav> </nav>
<div class="search-container"> <div class="search-container">
@@ -559,13 +620,13 @@ $topics = $subjectData->topics;
<h4>Verwandte Themen:</h4> <h4>Verwandte Themen:</h4>
<ul> <ul>
<?php <?php
foreach ($topicData->relatedTopics as $relatedTopic) { foreach ($topicData->relatedTopics as $relatedTopic) {
?> ?>
<li><?php echo($relatedTopic); ?></li> <li><?php echo($relatedTopic); ?></li>
<?php <?php
} }
?> ?>
</ul> </ul>
</div> </div>
@@ -574,17 +635,17 @@ $topics = $subjectData->topics;
<h4>Übungen herunterladen:</h4> <h4>Übungen herunterladen:</h4>
<div class="download-links"> <div class="download-links">
<?php <?php
foreach ($topicData->files as $fileName) { foreach ($topicData->files as $fileName) {
?> ?>
<a href="<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName")?>" target="_blank" download class="download-btn"> <a href="<?php echo("config/subjects/$subjectData->id/topics/$topicData->id/$fileName")?>" target="_blank" download class="download-btn">
<i class="fas fa-file-pdf"></i> <i class="fas fa-file-pdf"></i>
<?php echo($fileName); ?> <?php echo($fileName); ?>
</a> </a>
<?php <?php
} }
?> ?>
</div> </div>
</div> </div>
@@ -671,9 +732,11 @@ $topics = $subjectData->topics;
const progressBars = document.querySelectorAll('.progress-bar'); const progressBars = document.querySelectorAll('.progress-bar');
progressBars.forEach(bar => { progressBars.forEach(bar => {
const progressElement = bar.querySelector('.progress'); const progressElement = bar.querySelector('.progress');
setTimeout(() => { if (progressElement) { // Add null check
progressElement.style.width = '100%'; setTimeout(() => {
}, 300); progressElement.style.width = '100%';
}, 300);
}
}); });
}); });
@@ -714,29 +777,42 @@ $topics = $subjectData->topics;
// Add card hover effects // Add card hover effects
document.querySelectorAll('.topic-card').forEach(card => { document.querySelectorAll('.topic-card').forEach(card => {
card.addEventListener('mouseenter', () => { card.addEventListener('mouseenter', () => {
gsap.to(card.querySelector('.topic-icon'), { const icon = card.querySelector('.topic-icon');
rotate: -10, if (window.gsap) {
scale: 1.2, gsap.to(icon, {
duration: 0.3 rotate: -10,
}); scale: 1.2,
duration: 0.3
});
} else {
// Fallback animation using CSS
icon.style.transform = 'rotate(-10deg) scale(1.2)';
}
}); });
card.addEventListener('mouseleave', () => { card.addEventListener('mouseleave', () => {
gsap.to(card.querySelector('.topic-icon'), { const icon = card.querySelector('.topic-icon');
rotate: 0, if (window.gsap) {
scale: 1, gsap.to(icon, {
duration: 0.3 rotate: 0,
}); scale: 1,
duration: 0.3
});
} else {
// Fallback animation using CSS
icon.style.transform = 'none';
}
}); });
}); });
// Update search function with fallback animation
function handleSearch() { function handleSearch() {
const searchTerm = document.getElementById('searchInput').value.toLowerCase(); const searchTerm = document.getElementById('searchInput').value.toLowerCase();
const topicCards = document.querySelectorAll('.topic-card'); const topicCards = document.querySelectorAll('.topic-card');
topicCards.forEach(card => { topicCards.forEach(card => {
const title = card.querySelector('.topic-title').textContent.toLowerCase(); const title = card.querySelector('.topic-title')?.textContent.toLowerCase() || '';
const description = card.querySelector('.topic-description').textContent.toLowerCase(); const description = card.querySelector('.topic-description')?.textContent.toLowerCase() || '';
const relatedTopics = Array.from(card.querySelectorAll('.related-topics li')) const relatedTopics = Array.from(card.querySelectorAll('.related-topics li'))
.map(li => li.textContent.toLowerCase()) .map(li => li.textContent.toLowerCase())
.join(' '); .join(' ');
@@ -745,12 +821,16 @@ $topics = $subjectData->topics;
if (content.includes(searchTerm)) { if (content.includes(searchTerm)) {
card.style.display = 'block'; card.style.display = 'block';
// Optional: Add animation for appearing cards if (window.gsap) {
gsap.to(card, { gsap.to(card, {
opacity: 1, opacity: 1,
y: 0, y: 0,
duration: 0.3 duration: 0.3
}); });
} else {
card.style.opacity = 1;
card.style.transform = 'translateY(0)';
}
} else { } else {
card.style.display = 'none'; card.style.display = 'none';
} }