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 {
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;
<a href="#" class="nav-link">
<i class="fas fa-book"></i> Kurse
</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>
<div class="search-container">
@@ -559,13 +620,13 @@ $topics = $subjectData->topics;
<h4>Verwandte Themen:</h4>
<ul>
<?php
foreach ($topicData->relatedTopics as $relatedTopic) {
?>
foreach ($topicData->relatedTopics as $relatedTopic) {
?>
<li><?php echo($relatedTopic); ?></li>
<li><?php echo($relatedTopic); ?></li>
<?php
}
<?php
}
?>
</ul>
</div>
@@ -574,17 +635,17 @@ $topics = $subjectData->topics;
<h4>Übungen herunterladen:</h4>
<div class="download-links">
<?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">
<i class="fas fa-file-pdf"></i>
<?php echo($fileName); ?>
</a>
<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>
<?php echo($fileName); ?>
</a>
<?php
}
<?php
}
?>
</div>
</div>
@@ -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';
}