Page MenuHome
Differential D11410 Diff 37550 common/templates/common/components/cards/card_carousel.html

Changeset View

Standalone View

View Options

common/templates/common/components/cards/card_carousel.html

{% comment %} EXAMPLE USAGE: {% comment %} EXAMPLE USAGE:
{% include 'common/components/cards/card_carousel.html' with title="Title" subtitle="Subtitle" slides=3 card_set=recently_watched_sections media_type="sections" id="carouselId" %} {% include 'common/components/cards/card_carousel.html' with title="Title" subtitle="Subtitle" slides=3 card_set=recently_watched_sections media_type="sections" id="carouselId" %}
{% endcomment %} {% endcomment %}
<section class="mb-4"> <section class="mb-4">
<div class="row justify-content-center mb-2"> <div class="row justify-content-center mb-2">
<div class="col"> <div class="col">
{% if title_link %} {% if title_link %}
<a href="{{ title_link }}" class="mb-0 h2">{{ title|default:"Title" }}</a> <a href="{{ title_link }}" class="mb-0 h2">{{ title|default:"Title" }}</a>
{% else %} {% else %}
<h2 class="mb-0">{{ title|default:"Title" }}</h2> <h2 class="mb-0">{{ title|default:"Title" }}</h2>
{% endif %} {% endif %}
<p class="mb-0">{{ subtitle|default:"Subtitle" }}</p> <p class="mb-0">{{ subtitle|default:"Subtitle" }}</p>
</div> </div>
<div class="col-md-auto d-none d-md-block carousel-card-toolbar"> <div class="col-md-auto d-none d-md-block carousel-card-toolbar">
<a class="btn btn-lg btn-transparent btn-icon {% if card_set|length <= 1 %}onlyOne{% elif card_set|length <= slides %} lessThanSlides {% endif %}" <a class="btn btn-lg btn-transparent btn-icon {% if card_set|length <= 1 %}onlyOne{% elif card_set|length <= slides %} lessThanSlides {% endif %}"
href="#{{ id }}" role="button" data-slide="prev"> href="#{{ id }}" role="button" data-slide="prev">
<i class="material-icons">arrow_back</i> <i class="material-icons">arrow_back</i>
</a> </a>
<a class="btn btn-lg btn-transparent btn-icon {% if card_set|length <= 1 %}onlyOne{% elif card_set|length <= slides %} lessThanSlides {% endif %}" <a class="btn btn-lg btn-transparent btn-icon {% if card_set|length <= 1 %}onlyOne{% elif card_set|length <= slides %} lessThanSlides {% endif %}"
href="#{{ id }}" role="button" data-slide="next"> href="#{{ id }}" role="button" data-slide="next">
<i class="material-icons">arrow_forward</i> <i class="material-icons">arrow_forward</i>
</a> </a>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div id="{{ id }}" class="carousel carousel-card-{{ slides|default:"3" }} slide w-100" data-touch="true" <div id="{{ id }}" class="carousel carousel-card-{{ slides|default:"3" }} slide w-100" data-touch="true"
data-ride="carousel" data-interval="0"> data-ride="carousel" data-interval="0">
<div class="carousel-inner w-100" role="listbox"> <div class="carousel-inner w-100" role="listbox">
{% for card in card_set|slice:':1' %} {% for card in card_set|slice:':1' %}
<div class="carousel-item active"> <div class="carousel-item active">
{% if media_type == "file" %} {% if media_type == "file" %}
{% include "common/components/file_carousel.html" with film_asset=card card_sizes="col-lg-3 col-6 col-md-4" %} {% include "common/components/file_carousel.html" with film_asset=card card_sizes="col-lg-3 col-6 col-md-4" %}
{% elif media_type == "section" %} {% elif media_type == "section" %}
{% include "training/components/card_training_section.html" with section=card card_sizes="col-lg-3 col-6 col-md-4" %} {% include "training/components/card_training_section.html" with section=card card_sizes="col-lg-3 col-6 col-md-4" %}
{% elif media_type == "blog" %} {% elif media_type == "blog" %}
{% include 'blog/card_blog.html' with post=card %} {% include 'blog/card_blog.html' with post=card %}
{% elif media_type == "training" %} {% elif media_type == "training" %}
{% include "training/components/card_training.html" with training=card card_sizes="col-12 col-sm-6 col-lg-4" %} {% include "training/components/card_training.html" with training=card card_sizes="col-12 col-sm-6 col-lg-4" %}
{% endif %} {% endif %}
</div> </div>
{% endfor %} {% endfor %}
{% for card in card_set|slice:'1:6' %} {% for card in card_set|slice:'1:6' %}
<div class="carousel-item"> <div class="carousel-item">
{% if media_type == "file" %} {% if media_type == "file" %}
{% include "common/components/file_carousel.html" with film_asset=card card_sizes="col-lg-3 col-6 col-md-4" %} {% include "common/components/file_carousel.html" with film_asset=card card_sizes="col-lg-3 col-6 col-md-4" %}
{% elif media_type == "section" %} {% elif media_type == "section" %}
{% include "training/components/card_training_section.html" with section=card card_sizes="col-lg-3 col-6 col-md-4" %} {% include "training/components/card_training_section.html" with section=card card_sizes="col-lg-3 col-6 col-md-4" %}
{% elif media_type == "blog" %} {% elif media_type == "blog" %}
{% include 'blog/card_blog.html' with post=card %} {% include 'blog/card_blog.html' with post=card %}
{% elif media_type == "training" %} {% elif media_type == "training" %}
{% include "training/components/card_training.html" with training=card card_sizes="col-12 col-sm-6 col-lg-4" %} {% include "training/components/card_training.html" with training=card card_sizes="col-12 col-sm-6 col-lg-4" %}
{% endif %} {% endif %}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div> </div>
<div class="row d-block d-md-none"> <div class="row d-block d-md-none">
<div class="col-md-auto carousel-card-toolbar"> <div class="col-md-auto carousel-card-toolbar">
<a class="btn btn-lg btn-transparent btn-icon {% if card_set|length <= 1 %}onlyOne{% elif card_set|length <= slides %} lessThanSlides {% endif %}" <a class="btn btn-lg btn-transparent btn-icon {% if card_set|length <= 1 %}onlyOne{% elif card_set|length <= slides %} lessThanSlides {% endif %}"
Show All 10 Lines