Differential D11410 Diff 37545 training/templates/training/components.html

Changeset View

Standalone View

training/templates/training/components.html

	{% import 'common/components.html' as components %}			{% import 'common/components.html' as components %}

	{% macro progressbar(fraction) %}			{% macro progressbar(fraction) %}
	<div class="progress">			<div class="progress">
	<div class="progress-bar" role="progressbar" style="width:{{ fraction*100 }}%;"></div>			<div class="progress-bar" role="progressbar" style="width:{{ fraction*100 }}%;"></div>
	</div>			</div>
	{% endmacro %}			{% endmacro %}

	{% macro badge_difficulty(label, color='blue') %}			{% macro badge_difficulty(label, color='blue') %}
	<div class="badge badge-difficulty badge-{{ color }}">			<div class="badge badge-difficulty badge-{{ color }}">
	<i class="material-icons btn-material-icons">extension</i>			<i class="material-icons btn-material-icons">extension</i>
	{{ label }}			{{ label }}
	</div>			</div>
	{% endmacro %}			{% endmacro %}

	{% macro card_training_checkbox_favorite(checked, class=[]) %}			{% macro card_training_checkbox_favorite(checked, class=[]) %}
	<button class="btn btn-ctrl-xs checkbox-favorite {{ class\|join(' ') }}"			<button class="btn btn-ctrl-xs checkbox-favorite {{ class\|join(' ') }}"
	{% if checked %}data-checked="checked"{% endif %} data-toggle="tooltip" data-placement="left" title="Save for later">			{% if checked %}data-checked="checked"{% endif %} data-toggle="tooltip" data-placement="left" title="Save for later">
	<i class="material-icons btn-material-icons checkbox-favorite-icon-checked">check</i>			<i class="material-icons btn-material-icons checkbox-favorite-icon-checked">check</i>
	<i class="material-icons btn-material-icons checkbox-favorite-icon-unchecked">add</i>			<i class="material-icons btn-material-icons checkbox-favorite-icon-unchecked">add</i>
	</button>			</button>
	{% endmacro %}			{% endmacro %}

	{% macro card_section(section) %}			{% macro card_section(section) %}
	{% set image_placeholder = static('training/images/placeholders/card.jpg') %}			{% set image_placeholder = static('training/images/placeholders/card.jpg') %}
	<div class="col-12 col-sm-6 col-lg-4 card-grid-item">			<div class="col-12 col-sm-6 col-lg-4 card-grid-item">
	<div class="card card-media">			<div class="card card-media">

	<div class="card-header" style='background-image: url("{{ image_placeholder }}")'>			<div class="card-header" style='background-image: url("{{ image_placeholder }}")'>
	{{ progressbar(section.progress_fraction) }}			{{ progressbar(section.progress_fraction) }}

	</div>			</div>

	<a class="card-body" href="{{ section.url }}">			<a class="card-body" href="{{ section.url }}">
	<p class="card-subtitle">{{ section.training_name }}</p>			<p class="card-subtitle">{{ section.training_name }}</p>
	<p class="card-subtitle">{{ section.chapter_name_with_index }}</p>			<p class="card-subtitle">{{ section.chapter_name_with_index }}</p>
	<h2 class="card-title">{{ section.name_with_index }}</h2>			<h2 class="card-title">{{ section.name_with_index }}</h2>
	</a>			</a>
	</div>			</div>
	</div>			</div>
	{% endmacro %}			{% endmacro %}

	{% macro card_training(training) %}			{% macro card_training(training) %}
	{% set difficulty_color = {'beginner': 'green', 'intermediate': 'blue', 'advanced': 'red'}.get(training.difficulty, 'blue') %}			{% set difficulty_color = {'beginner': 'green', 'intermediate': 'blue', 'advanced': 'red'}.get(training.difficulty, 'blue') %}
	<div class="col-12 col-sm-6 col-lg-4 card-grid-item">			<div class="col-12 col-sm-6 col-lg-4 card-grid-item">
	<div class="card card-media card-training" data-favorite-url="{{ training.favorite_url }}">			<div class="card card-media card-training" data-favorite-url="{{ training.favorite_url }}">

	<div class="card-header" style='background-image: url("{{ training.thumbnail }}")'>			<div class="card-header" style='background-image: url("{{ training.thumbnail }}")'>
	<a href="{{ training.url }}" class="card-header-link"></a>			<a href="{{ training.url }}" class="card-header-link"></a>
	{{ badge_difficulty(label=training.difficulty.label, color=difficulty_color) }}			{{ badge_difficulty(label=training.difficulty.label, color=difficulty_color) }}
	{{ card_training_checkbox_favorite(checked=training.favorited, class=['btn-save-media', 'card-training-favorite']) }}			{{ card_training_checkbox_favorite(checked=training.favorited, class=['btn-save-media', 'card-training-favorite']) }}
	</div>			</div>

	<a class="card-body" href="{{ training.url }}">			<a class="card-body" href="{{ training.url }}">
	<p class="card-subtitle">{{ training.type.label }}</p>			<p class="card-subtitle">{{ training.type.label }}</p>
	<h2 class="card-title">{{ training.name }}</h2>			<h2 class="card-title">{{ training.name }}</h2>
	<p class="card-text">{{ training.description }}</p>			<p class="card-text">{{ training.description }}</p>
	</a>			</a>

	<div class="card-footer">			<div class="card-footer">
	{% call components.pills() %}			{% call components.pills() %}
	{% for tag in training.tags %}			{% for tag in training.tags %}
	{{ components.pill(label=tag) }}			{{ components.pill(label=tag) }}
	{% endfor %}			{% endfor %}
	{% endcall %}			{% endcall %}
	</div>			</div>

	</div>			</div>
	</div>			</div>
	{% endmacro %}			{% endmacro %}