117 lines
4.5 KiB
Plaintext
117 lines
4.5 KiB
Plaintext
|
|
|
|
{% if learning_paths.available.any? %}
|
|
{% assign paths_shown = 0 %}
|
|
{% assign paths_to_show = 6 %}
|
|
<div class="nintex-fw-container">
|
|
<div class="np-homepage-featured-text">
|
|
<div class="nintex-headline">
|
|
<span class="lang-en-US">Learning Paths</span>
|
|
<span class="lang-es">Rutas de aprendizaje</span>
|
|
<span class="lang-fr">Chemins d'apprentissage</span>
|
|
<span class="lang-de">Lernpfade</span>
|
|
<span class="lang-en-GB">Learning Paths</span>
|
|
<span class="lang-nl">Leerpaden</span>
|
|
<span class="lang-pt-BR">Caminhos de aprendizagem</span>
|
|
</div>
|
|
{% comment %} <div class="nintex-subheadline">
|
|
<span class="lang-en-US">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
<span class="lang-es">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
<span class="lang-fr">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
<span class="lang-de">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
<span class="lang-en-GB">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
<span class="lang-nl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
<span class="lang-pt-BR">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
|
|
</div> {% endcomment %}
|
|
</div>
|
|
<div class="embla-container">
|
|
<div class="embla-buttons">
|
|
<button class="embla-button embla-button--prev" onclick="scrollPrev()">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
|
|
fill="#BE0075"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="embla-button embla-button--next" onclick="scrollNext()">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
|
|
fill="#BE0075"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="embla" id="embla-homepage-paths">
|
|
<div class="embla__container">
|
|
{% for learning_path in learning_paths.available %}
|
|
<div class="embla__slide">
|
|
{% include "cards_learning_path_nintex" with learning_path %}
|
|
</div>
|
|
{% assign paths_shown = paths_shown | plus: 1 %}
|
|
{% if paths_shown >= paths_to_show %}
|
|
{% break %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="nintex-btns-container">
|
|
<a href="/app/learning_paths" class="nintex-text-button">
|
|
<span class="lang-en-US">View more</span>
|
|
<span class="lang-es">Ver más</span>
|
|
<span class="lang-fr">Voir plus</span>
|
|
<span class="lang-de">Mehr anzeigen</span>
|
|
<span class="lang-en-GB">View more</span>
|
|
<span class="lang-nl">Meer bekijken</span>
|
|
<span class="lang-pt-BR">Ver mais</span>
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
|
|
fill="white"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<script>
|
|
var embla;
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var emblaNode = document.querySelector('#embla-homepage-paths');
|
|
const options = { loop: false }
|
|
const plugins = [EmblaCarouselAutoplay({
|
|
delay: 10000,
|
|
stopOnMouseEnter: true,
|
|
})]
|
|
|
|
embla = EmblaCarousel(emblaNode, options, plugins);
|
|
|
|
|
|
});
|
|
|
|
function scrollPrev() {
|
|
if(embla.canScrollPrev()) {
|
|
embla.scrollPrev();
|
|
}else{
|
|
embla.scrollTo(document.getElementsByClassName('embla__slide').length - 1);
|
|
}
|
|
}
|
|
|
|
function scrollNext() {
|
|
if(embla.canScrollNext()) {
|
|
embla.scrollNext();
|
|
}else{
|
|
embla.scrollTo(0);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@media screen and (min-width: 768px) {
|
|
.embla__slide {
|
|
flex: 0 0 calc((100% - 2rem) / 3);
|
|
min-width: 0;
|
|
}
|
|
}
|
|
</style> |