123 lines
3.3 KiB
Plaintext
123 lines
3.3 KiB
Plaintext
{% include "header" %}
|
|
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
|
|
|
<main class="np-main np-homepage">
|
|
|
|
{% include "sub_navigation" %}
|
|
<div class="np-homepage-featured np-max-width">
|
|
<div class="np-homepage-featured-text">
|
|
<div class="np-homepage-headline">
|
|
{{ homepage.featured_courses_headline }}
|
|
</div>
|
|
<div class="np-homepage-subheadline">
|
|
{{ homepage.featured_courses_subheadline }}
|
|
</div>
|
|
</div>
|
|
|
|
{% assign in_progress_count = 0 %}
|
|
{% assign max_courses = 3 %}
|
|
|
|
{% for course in courses.enrolled %}
|
|
{% if course.started? and course.completed? == false and in_progress_count < max_courses %}
|
|
{% if in_progress_count == 0 %}
|
|
<div class="np-homepage-featured-courses row">
|
|
{% endif %}
|
|
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
|
{% include "cards_course" with course %}
|
|
</div>
|
|
{% assign in_progress_count = in_progress_count | plus: 1 %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if in_progress_count > 0 %}
|
|
</div>
|
|
{% else %}
|
|
<div class="np-homepage-featured-empty">
|
|
<img
|
|
class="np-zero-state-courses"
|
|
alt="No lessons in progress"
|
|
/>
|
|
<div class="np-zero-state-text">
|
|
You don't have any lessons in progress yet. Explore a lesson or learning path to get started.
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Explore Buttons -->
|
|
<div class="np-explore-all-lessons-container">
|
|
<a href="/app/courses" class="np-explore-all-lessons-btn np-btn-primary">
|
|
Explore lessons
|
|
</a>
|
|
{% if features.learning_paths? %}
|
|
<a href="/app/learning_paths" class="np-explore-all-lessons-btn np-btn-secondary">
|
|
Explore learning paths
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
<style>
|
|
/* Explore Buttons */
|
|
.np-explore-all-lessons-container {
|
|
text-align: center;
|
|
margin-top: 32px;
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.np-explore-all-lessons-btn {
|
|
display: inline-block;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
|
border: 1px solid transparent;
|
|
min-width: 200px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Primary Button - Dark Green */
|
|
.np-explore-all-lessons-btn.np-btn-primary {
|
|
background-color: #013D29;
|
|
color: white;
|
|
border-color: #013D29;
|
|
}
|
|
|
|
.np-explore-all-lessons-btn.np-btn-primary:hover {
|
|
background-color: #022f20;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-color: #022f20;
|
|
}
|
|
|
|
/* Secondary Button - Light with Border */
|
|
.np-explore-all-lessons-btn.np-btn-secondary {
|
|
background-color: white;
|
|
color: #013D29;
|
|
border-color: #013D29;
|
|
}
|
|
|
|
.np-explore-all-lessons-btn.np-btn-secondary:hover {
|
|
background-color: #f8f9fa;
|
|
color: #013D29;
|
|
text-decoration: none;
|
|
border-color: #013D29;
|
|
}
|
|
|
|
/* Responsive: Side by side on larger screens */
|
|
@media (min-width: 768px) {
|
|
.np-explore-all-lessons-container {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
}
|
|
}
|
|
</style>
|