123 lines
3.6 KiB
Plaintext
123 lines
3.6 KiB
Plaintext
<div class="webinars-hidden">
|
|
{% for x in (1..categories_uuids.size) %}
|
|
{% assign number_of_videos = 0 %}
|
|
{% assign y = x | minus: 1 %}
|
|
{% assign category_uuid = categories_uuids | slice: y %}
|
|
<section class="webinars-section" item-categories="{{ category_uuid }}">
|
|
<div class="webinars-section-header">
|
|
<h3 class="webinars-title strong">
|
|
{{ categories_names | slice: y }}
|
|
</h3>
|
|
<div class="webinars-section-button" onclick="this.parentNode.parentNode.classList.toggle('webinars-section-expanded')">
|
|
<span class="webinars-section-button-hide">
|
|
<span>Show less</span>
|
|
</span>
|
|
<span class="webinars-section-button-expand">
|
|
<span>View all</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="webinars-list row">
|
|
{% for course in courses.in_catalog %}
|
|
{% assign course_categories = course.categories | map: 'id' %}
|
|
{% if course.properties.webinar %}
|
|
{% for cat in course_categories %}
|
|
{% if category_uuid contains cat %}
|
|
{% assign number_of_videos = number_of_videos | plus: 1 %}
|
|
{% include "cards_course" %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
{% if number_of_videos <= 3 %}
|
|
<style>
|
|
{% if number_of_videos == 1 %}
|
|
.webinars-section[item-categories="{{ category_uuid }}"] .webinars-section-button {
|
|
display: none;
|
|
}
|
|
{% elsif number_of_videos == 2 %}
|
|
@media only screen and (min-width: 768px) {
|
|
.webinars-section[item-categories="{{ category_uuid }}"] .webinars-section-button {
|
|
display: none;
|
|
}
|
|
}
|
|
{% else %}
|
|
@media only screen and (min-width: 1200px) {
|
|
.webinars-section[item-categories="{{ category_uuid }}"] .webinars-section-button {
|
|
display: none;
|
|
}
|
|
}
|
|
{% endif %}
|
|
</style>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<style>
|
|
.webinars-title {
|
|
padding-bottom: 40px;
|
|
padding-top: 40px;
|
|
}
|
|
.webinars-section:not(:last-of-type) .webinars-list {
|
|
border-bottom: 1px solid #E1E1FF;
|
|
}
|
|
.webinars-section-filtered .webinars-list {
|
|
border-bottom: none !important;
|
|
}
|
|
.webinars-list {
|
|
padding-bottom: 20px;
|
|
}
|
|
.webinars-section-filtered {
|
|
margin-top: 40px;
|
|
}
|
|
.webinars-section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.webinars-section-filtered .webinars-section-header {
|
|
display: none;
|
|
}
|
|
.webinars-section-button {
|
|
color: #0070D6;
|
|
cursor: pointer;
|
|
}
|
|
.webinars-section-button-hide {
|
|
display: none;
|
|
}
|
|
.webinars-section.webinars-section-expanded .webinars-section-button-hide {
|
|
display: block;
|
|
}
|
|
.webinars-section.webinars-section-expanded .webinars-section-button-expand {
|
|
display: none;
|
|
}
|
|
@media only screen and (max-width: 767px) {
|
|
.webinars-section:not(.webinars-section-expanded) .course-card:not(:first-child) {
|
|
display: none;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 768px) {
|
|
.webinars-list > div {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
.webinars-list {
|
|
padding-bottom: 40px;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 768px) and (max-width: 1199px) {
|
|
.webinars-section:not(.webinars-section-expanded) .course-card:nth-child(n+3) {
|
|
display: none;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1200px) {
|
|
.webinars-section:not(.webinars-section-expanded) .course-card:nth-child(n+4) {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|