98 lines
3.0 KiB
Plaintext
98 lines
3.0 KiB
Plaintext
{% assign recommended_counter = 0 %}
|
|
|
|
<div class="recommended-wrapper" id="recommended-section">
|
|
<div class="heading lang-en">
|
|
Get your DeepL certificate
|
|
</div>
|
|
<div class="heading lang-de">
|
|
Erwerben Sie Ihr DeepL-Zertifikat
|
|
</div>
|
|
<div class="heading lang-jp">
|
|
修了証発行コース
|
|
</div>
|
|
<div class="heading lang-fr">
|
|
Obtenez votre certificat DeepL
|
|
</div>
|
|
|
|
<div class="recommended-wrapper-content">
|
|
{% comment %} {% for course in courses.enrolled %}
|
|
{% unless course.properties.resource or course.properties.on_demand %}
|
|
<div class="carousel-card recommended-card">
|
|
{% include "cards_course" with course %}
|
|
</div>
|
|
{% assign recommended_counter = recommended_counter | plus: 1 %}
|
|
{% endunless %}
|
|
{% endfor %} {% endcomment %}
|
|
{% for learning_path in learning_paths.enrolled %}
|
|
{% for category in learning_path.categories %}
|
|
{% if category.name == userLanguage %}
|
|
<div class="carousel-card recommended-card">
|
|
{% include "cards_learning_path" %}
|
|
</div>
|
|
{% assign recommended_counter = recommended_counter | plus: 1 %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="see-all-btn-container">
|
|
<a class="light-btn" id="expand-btn" href="/app/catalog">See all</a>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.recommended-wrapper-content {
|
|
display: grid;
|
|
grid-template-columns: repeat(4,1fr);
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
}
|
|
@media only screen and (max-width: 1170px) {
|
|
.recommended-wrapper-content {
|
|
grid-template-columns: repeat(2,1fr);
|
|
}
|
|
}
|
|
@media only screen and (max-width: 768px) {
|
|
.recommended-wrapper-content {
|
|
grid-template-columns: repeat(1,1fr);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const cards = document.querySelectorAll('.recommended-card');
|
|
const seeAllBtn = document.getElementById('expand-btn');
|
|
|
|
const maxCards = 8;
|
|
const initialVisibleCards = 4;
|
|
const totalCards = cards.length;
|
|
let isExpanded = false;
|
|
|
|
if (totalCards > initialVisibleCards) {
|
|
seeAllBtn.style.display = 'block';
|
|
} else {
|
|
seeAllBtn.style.display = 'none';
|
|
}
|
|
|
|
function updateCardVisibility() {
|
|
cards.forEach((card, index) => {
|
|
if (isExpanded) {
|
|
card.style.display = index < maxCards ? 'block' : 'none';
|
|
} else {
|
|
card.style.display = index < initialVisibleCards ? 'block' : 'none';
|
|
}
|
|
});
|
|
|
|
seeAllBtn.textContent = isExpanded ? 'Show Less' : 'See All';
|
|
}
|
|
|
|
updateCardVisibility();
|
|
|
|
seeAllBtn.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
isExpanded = !isExpanded;
|
|
updateCardVisibility();
|
|
});
|
|
});
|
|
</script> |