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