Page MenuHome
Differential D11410 Diff 37545 common/templates/common/components.html

Changeset View

Standalone View

View Options

common/templates/common/components.html

{% macro breadcrumbs() %} {% macro breadcrumbs() %}
<ol class="breadcrumb"> <ol class="breadcrumb">
{{ caller() }} {{ caller() }}
</ol> </ol>
{% endmacro %} {% endmacro %}
{% macro breadcrumb(label, url=None) %} {% macro breadcrumb(label, url=None) %}
<li class="breadcrumb-item"> <li class="breadcrumb-item">
{% if url is not none %} {% if url is not none %}
<a href="{{ url }}">{{ label }}</a> <a href="{{ url }}">{{ label }}</a>
{% else %} {% else %}
{{ label }} {{ label }}
{% endif %} {% endif %}
</li> </li>
{% endmacro %} {% endmacro %}
{% macro cards() %} {% macro cards() %}
<div class="row"> <div class="row">
{{ caller() }} {{ caller() }}
</div> </div>
{% endmacro %} {% endmacro %}
{% macro pills(class=[]) %} {% macro pills(class=[]) %}
<div class="pills {{ class|join(' ') }}"> <div class="pills {{ class|join(' ') }}">
{{ caller() }} {{ caller() }}
</div> </div>
{% endmacro %} {% endmacro %}
{% macro pill(label, url=None) %} {% macro pill(label, url=None) %}
{% if url is none %} {% if url is none %}
<p class="badge badge-pill">{{ label }}</p> <p class="badge badge-pill">{{ label }}</p>
{% else %} {% else %}
<a class="badge badge-pill" href="{{ url }}">{{ label }}</a> <a class="badge badge-pill" href="{{ url }}">{{ label }}</a>
{% endif %} {% endif %}
{% endmacro %} {% endmacro %}
{% macro jumbotron(value='text') %} {% macro jumbotron(value='text') %}
<div style="background-image:url('value/{{ value }}')" <div style="background-image:url('value/{{ value }}')"
class="jumbotron jumbotron-fluid jumbotron-overlay header"> class="jumbotron jumbotron-fluid jumbotron-overlay header">
<div class="container-xl"> <div class="container-xl">
<div class="row"> <div class="row">
<div class="col-lg-5 col-xl-4"> <div class="col-lg-5 col-xl-4">
<div class="jumbotron-body"> <div class="jumbotron-body">
{{ caller() }} {{ caller() }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% endmacro %} {% endmacro %}
{% macro searchbar(placeholder) %} {% macro searchbar(placeholder) %}
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="material-icons">search</i></span> <div class="input-group-prepend"><span class="input-group-text"><i class="material-icons">search</i></span>
</div> </div>
<input type="text" placeholder="{{ placeholder }}" class="form-control"> <input type="text" placeholder="{{ placeholder }}" class="form-control">
</div> </div>
{% endmacro %} {% endmacro %}
{% macro select() %} {% macro select() %}
<select class="custom-select"> <select class="custom-select">
{{ caller() }} {{ caller() }}
</select> </select>
{% endmacro %} {% endmacro %}
{% macro video_player(url, progress_url, start_position) %} {% macro video_player(url, progress_url, start_position) %}
<div class="video-player" data-progress-url="{{ progress_url }}" <div class="video-player" data-progress-url="{{ progress_url }}"
{% if start_position is not none %}data-start-position="{{ start_position }}{% endif %}"> {% if start_position is not none %}data-start-position="{{ start_position }}{% endif %}">
<video playsinline controls> <video playsinline controls>
<source src="{{ url }}"> <source src="{{ url }}">
</video> </video>
</div> </div>
{% endmacro %} {% endmacro %}
{% macro checkbox_toggle(checked) %} {% macro checkbox_toggle(checked) %}
<div class="col-auto text-right"> <div class="col-auto text-right">
<div class="form-group mb-0"> <div class="form-group mb-0">
<label class="form-group mb-0 form-switch"> <label class="form-group mb-0 form-switch">
{% if checked %} {% if checked %}
<input type="checkbox" class="form-check-input" checked="checked"> <input type="checkbox" class="form-check-input" checked="checked">
{% else %} {% else %}
<input type="checkbox" class="form-check-input"> <input type="checkbox" class="form-check-input">
{% endif %} {% endif %}
<span class="slider"></span> <span class="slider"></span>
</label> </label>
</div> </div>
</div> </div>
{% endmacro %} {% endmacro %}
{% macro nav_drawer() %} {% macro nav_drawer() %}
<nav class="nav-drawer"> <nav class="nav-drawer">
<div class="nav-drawer-spacer"> <div class="nav-drawer-spacer">
</div> </div>
<div class="nav-drawer-body"> <div class="nav-drawer-body">
{{ caller() }} {{ caller() }}
</div> </div>
<div class="drawer-overlay"></div> <div class="drawer-overlay"></div>
</nav> </nav>
{% endmacro %} {% endmacro %}
{% macro nav_drawer_header(title, subtitle=None) %} {% macro nav_drawer_header(title, subtitle=None) %}
<div class="drawer-nav-header"> <div class="drawer-nav-header">
{% if subtitle is not none %}<p class="subtitle">{{ subtitle }}</p>{% endif %} {% if subtitle is not none %}<p class="subtitle">{{ subtitle }}</p>{% endif %}
<h2>{{ title }}</h2> <h2>{{ title }}</h2>
</div> </div>
{% endmacro %} {% endmacro %}
{% macro nav_drawer_group() %} {% macro nav_drawer_group() %}
<div class="drawer-nav-group"> <div class="drawer-nav-group">
<ol class="training-nav-list"> <ol class="training-nav-list">
{{ caller() }} {{ caller() }}
</ol> </ol>
</div> </div>
{% endmacro %} {% endmacro %}
{% macro nav_drawer_collapsable_group(id, title, collapsed) %} {% macro nav_drawer_collapsable_group(id, title, collapsed) %}
<div class="drawer-nav-group"> <div class="drawer-nav-group">
<h3 class="drawer-nav-dropdown {% if collapsed %}collapsed{% endif %}" <h3 class="drawer-nav-dropdown {% if collapsed %}collapsed{% endif %}"
data-toggle="collapse" data-target="#{{ id }}"> data-toggle="collapse" data-target="#{{ id }}">
<i class="material-icons">keyboard_arrow_down</i> <i class="material-icons">keyboard_arrow_down</i>
{{ title }} {{ title }}
</h3> </h3>
<ol id="{{ id }}" class="training-nav-list collapse {% if not collapsed %}show{% endif %}"> <ol id="{{ id }}" class="training-nav-list collapse {% if not collapsed %}show{% endif %}">
{{ caller() }} {{ caller() }}
</ol> </ol>
</div> </div>
{% endmacro %} {% endmacro %}
{% macro nav_drawer_section(title, href, active, admin_change_href=None) %} {% macro nav_drawer_section(title, href, active, admin_change_href=None) %}
<li class="drawer-nav-section"> <li class="drawer-nav-section">
<a href="{{ href }}" class="drawer-nav-section-link {% if active %}active{% endif %}"> <a href="{{ href }}" class="drawer-nav-section-link {% if active %}active{% endif %}">
<div class="drawer-nav-section-icon"> <div class="drawer-nav-section-icon">
<i class="material-icons">insert_drive_file</i> <i class="material-icons">insert_drive_file</i>
<svg width="30" height="30" <svg width="30" height="30"
class="drawer-nav-section-icon-progress"> class="drawer-nav-section-icon-progress">
<circle cx="15" cy="15" r="14"/> <circle cx="15" cy="15" r="14"/>
</svg> </svg>
</div> </div>
<div> <div>
<h4>{{ title }}</h4> <h4>{{ title }}</h4>
</div> </div>
</a> </a>
{% if admin_change_href is not none %} {% if admin_change_href is not none %}
<a href="{{ admin_change_href }}">edit</a> <a href="{{ admin_change_href }}">edit</a>
{% endif %} {% endif %}
</li> </li>
{% endmacro %} {% endmacro %}
{% macro nav_drawer_progress_section(title, href, active, started, finished, progress_fraction, admin_change_href=None) %} {% macro nav_drawer_progress_section(title, href, active, started, finished, progress_fraction, admin_change_href=None) %}
<li class="drawer-nav-section {% if finished %}complete{% endif %}"> <li class="drawer-nav-section {% if finished %}complete{% endif %}">
<a href="{{ href }}" class="drawer-nav-section-link {% if active %}active{% endif %}"> <a href="{{ href }}" class="drawer-nav-section-link {% if active %}active{% endif %}">
<div class="drawer-nav-section-icon"> <div class="drawer-nav-section-icon">
{% if finished %} {% if finished %}
<i class="material-icons">done</i> <i class="material-icons">done</i>
{% else %} {% else %}
<i class="material-icons">play_arrow</i> <i class="material-icons">play_arrow</i>
{% endif %} {% endif %}
<svg width="30" height="30" <svg width="30" height="30"
class="drawer-nav-section-icon-progress" class="drawer-nav-section-icon-progress"
style="--progress-fraction: {{ 1.0 if finished else progress_fraction }}"> style="--progress-fraction: {{ 1.0 if finished else progress_fraction }}">
<circle cx="15" cy="15" r="14"/> <circle cx="15" cy="15" r="14"/>
</svg> </svg>
</div> </div>
<div> <div>
<h4>{{ title }}</h4> <h4>{{ title }}</h4>
</div> </div>
</a> </a>
{% if admin_change_href is not none %} {% if admin_change_href is not none %}
<a href="{{ admin_change_href }}">edit</a> <a href="{{ admin_change_href }}">edit</a>
{% endif %} {% endif %}
</li> </li>
{% endmacro %} {% endmacro %}