norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Hubert just completed a project for Pipedrive, so downloaded those templates. I kept the old ones as the Pipedrive team noticed some things were overwritten. So until they are fully in production and working correctly, I'm keeping two copies. Will update with the correct files once Hubert investigates.

Browse Source
This commit is contained in:
Norm Rasmussen
2025-07-08 15:29:07 -04:00
parent 1980bd456d
commit a7d9930ed6
177 changed files with 12594 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
Custom_Templates/customer_templates/Pipedrive - Learn - 7.8 Designs/_video_courses.html.liquid Normal file
View File

@ -0,0 +1,156 @@
{% assign categories_uuids = "" %}
{% assign categories_names = "" %}
{% for course in courses.in_catalog %}
{% if course.categories.size > 0 and course.ribbon == "VIDEO" %}
{% assign course_categories_ids = course.categories | map: 'id' | join: "|||" %}
{% assign course_categories_names = course.categories | map: 'name' | join: "|||" %}
{% assign categories_uuids = categories_uuids | append: course_categories_ids | append: "|||" %}
{% assign categories_names = categories_names | append: course_categories_names | append: "|||" %}
{% endif %}
{% endfor %}
{% assign categories_uuids = categories_uuids | split: "|||" | uniq %}
{% assign categories_names = categories_names | split: "|||" | uniq %}
<div class="courses container width-limit">
{% include "video_filter", uuids: categories_uuids, names: categories_names %}
{% 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="courses-section" item-categories="{{ category_uuid }}">
<div class="courses-section-header">
<h3 class="courses-title strong">
{{ categories_names | slice: y }}
</h3>
<div class="courses-section-button" onclick="expandCategory('{{ category_uuid }}')">
<span class="courses-section-button-hide">
<span class="lang-en">Show less</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span>
</span>
<span class="courses-section-button-expand">
<span class="lang-en">View all</span>
<span class="lang-de"></span>
<span class="lang-es"></span>
<span class="lang-fr"></span>
<span class="lang-br"></span> <i class="fas fa-arrow-right"></i>
</span>
</div>
</div>
<div class="courses-list row">
{% for course in courses.in_catalog %}
{% assign course_categories = course.categories | map: 'id' %}
{% if course.ribbon == "VIDEO" %}
{% for cat in course_categories %}
{% if category_uuid contains cat %}
{% assign number_of_videos = number_of_videos | plus: 1 %}
{% include "cards_video" %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
</section>
{% if number_of_videos <= 3 %}
<style>
{% if number_of_videos == 1 %}
.courses-section[item-categories="{{ category_uuid }}"] .courses-section-button {
display: none;
}
{% elsif number_of_videos == 2 %}
@media only screen and (min-width: 768px) {
.courses-section[item-categories="{{ category_uuid }}"] .courses-section-button {
display: none;
}
}
{% else %}
@media only screen and (min-width: 1200px) {
.courses-section[item-categories="{{ category_uuid }}"] .courses-section-button {
display: none;
}
}
{% endif %}
</style>
{% endif %}
{% endfor %}
</div>
<style>
.courses-title {
padding-bottom: 40px;
padding-top: 40px;
}
.courses-section:not(:last-of-type) .courses-list {
border-bottom: 1px solid #E1E1FF;
}
.courses-section-filtered .courses-list {
border-bottom: none !important;
}
.courses-list {
padding-bottom: 20px;
}
.courses-section-filtered {
margin-top: 40px;
}
.courses-section-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.courses-section-filtered .courses-section-header {
display: none;
}
.courses-section-button {
color: #0070D6;
cursor: pointer;
}
.courses-section-button-hide {
display: none;
}
.courses-section.courses-section-expanded .courses-section-button-hide {
display: block;
}
.courses-section.courses-section-expanded .courses-section-button-expand {
display: none;
}
@media only screen and (max-width: 767px) {
.courses-section:not(.courses-section-expanded) .course-card:not(:first-child) {
display: none;
}
}
@media only screen and (min-width: 768px) {
.courses-list > div {
padding-left: 15px;
padding-right: 15px;
}
.courses-list {
padding-bottom: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.courses-section:not(.courses-section-expanded) .course-card:nth-child(n+3) {
display: none;
}
}
@media only screen and (min-width: 1200px) {
.courses-section:not(.courses-section-expanded) .course-card:nth-child(n+4) {
display: none;
}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.course-card-description').forEach((x) => {
$clamp(x, {clamp: 5});
})
});
function expandCategory(category_uuid) {
document.querySelector(`.courses-section[item-categories="${category_uuid}"]`).classList.toggle('courses-section-expanded');
}
</script>