Changeset View
Changeset View
Standalone View
Standalone View
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 %} | ||||