Changeset View
Changeset View
Standalone View
Standalone View
training/templates/training/section.html
| {% extends 'training/base_with_navigation.html' %} | {% extends 'training/base_with_navigation.html' %} | ||||
| {% load static %} | {% load static %} | ||||
| {% load pipeline %} | {% load pipeline %} | ||||
| {% load common_extras %} | {% load common_extras %} | ||||
| {% block title_append %} - {{ training.name }}: {{ section.name }}{% endblock title_append %} | {% block title_append %} - {{ training.name }}: {{ section.name }}{% endblock title_append %} | ||||
| {% block meta %} | {% block meta %} | ||||
| {% capture title %}{{ training.name }}: {{ section.name }}{% endcapture %} | {% capture title %}{{ training.name }}: {{ section.name }}{% endcapture %} | ||||
| {% firstof section.thumbnail_m_url training.thumbnail_m_url as image_url %} | {% firstof section.thumbnail_m_url training.thumbnail_m_url as image_url %} | ||||
| {% with description=training.description image_url=section.thumbnail_m_url %} | {% with description=training.description image_url=section.thumbnail_m_url %} | ||||
| {% include 'common/components/meta.html' %} | {% include 'common/components/meta.html' %} | ||||
| {% endwith %} | {% endwith %} | ||||
| {% endblock %} | {% endblock %} | ||||
| {% block scripts %} | {% block scripts %} | ||||
| {{ block.super }} | {{ block.super }} | ||||
| {% if request.user.is_authenticated %} | {% if request.user.is_authenticated %} | ||||
| {{ section_progress_reporting_data|json_script:"sectionProgressReportingData" }} | {{ section_progress_reporting_data|json_script:"sectionProgressReportingData" }} | ||||
| {% endif %} | {% endif %} | ||||
| {% javascript 'training' %} | {% javascript 'training' %} | ||||
| {% endblock scripts %} | {% endblock scripts %} | ||||
| {% block nexted_content %} | {% block nexted_content %} | ||||
| <div class="row mb-3"> | <div class="row mb-3"> | ||||
| {% if video is not none %} | {% if video is not none %} | ||||
| <div class="col training-video"> | <div class="col training-video"> | ||||
| {% if section.is_free or request.user|has_active_subscription %} | {% if section.is_free or request.user|has_active_subscription %} | ||||
| {% include 'common/components/video_player.html' with url=video.url progress_url=video.progress_url start_position=video.start_position poster=section.thumbnail_m_url %} | {% include 'common/components/video_player.html' with url=video.url progress_url=video.progress_url start_position=video.start_position poster=section.thumbnail_m_url %} | ||||
| {% else %} | {% else %} | ||||
| {% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %} | {% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %} | ||||
| {% endif %} | {% endif %} | ||||
| </div> | </div> | ||||
| {% else %} | {% else %} | ||||
| <div class="col training-video"> | <div class="col training-video"> | ||||
| {% if section.is_free or request.user|has_active_subscription %} | {% if section.is_free or request.user|has_active_subscription %} | ||||
| {% if section.thumbnail %} | {% if section.thumbnail %} | ||||
| {% include "common/components/helpers/image_set.html" with alt=section.name classes="img-fluid img-width-100 rounded" img_source=section.thumbnail xsmall_width="600" small_width="800" medium_width="1000" large_width="1200" xlarge_width="1920" %} | {% include "common/components/helpers/image_set.html" with alt=section.name classes="img-fluid img-width-100 rounded" img_source=section.thumbnail xsmall_width="600" small_width="800" medium_width="1000" large_width="1200" xlarge_width="1920" %} | ||||
| {% endif %} | {% endif %} | ||||
| {% else %} | {% else %} | ||||
| {% include 'common/components/content_locked.html' with background=training.picture_header %} | {% include 'common/components/content_locked.html' with background=training.picture_header %} | ||||
| {% endif %} | {% endif %} | ||||
| </div> | </div> | ||||
| {% endif %} | {% endif %} | ||||
| </div> | </div> | ||||
| <div class="row"> | <div class="row"> | ||||
| <div class="col"> | <div class="col"> | ||||
| <div class="row align-items-start"> | <div class="row align-items-start"> | ||||
| <div class="col-12 col-md mb-2 mb-md-3"> | <div class="col-12 col-md mb-2 mb-md-3"> | ||||
| <div class="d-none d-md-block"> | <div class="d-none d-md-block"> | ||||
| <p class="subtitle small">{{ chapter.name }}</p> | <p class="subtitle small">{{ chapter.name }}</p> | ||||
| <h2 class="">{{ section.name }}</h2> | <h2 class="">{{ section.name }}</h2> | ||||
| </div> | </div> | ||||
| <div class="text-muted x-small"> | <div class="text-muted x-small"> | ||||
| <p class="d-inline mr-2">{{ section.date_created|date:"jS F Y" }}</p> | <p class="d-inline mr-2">{{ section.date_created|date:"jS F Y" }}</p> | ||||
| {% if section.static_asset.license %} | {% if section.static_asset.license %} | ||||
| <a href="{{ section.static_asset.license.url }}" target="_blank" class="d-inline mr-2 text-muted" | <a href="{{ section.static_asset.license.url }}" target="_blank" class="d-inline mr-2 text-muted" | ||||
| data-toggle="tooltip" data-placement="bottom" title="{{ section.static_asset.license.description }}"> | data-toggle="tooltip" data-placement="bottom" title="{{ section.static_asset.license.description }}"> | ||||
| <i class="material-icons icon-inline x-small">info</i> | <i class="material-icons icon-inline x-small">info</i> | ||||
| {{ section.static_asset.license }} | {{ section.static_asset.license }} | ||||
| </a> | </a> | ||||
| {% endif %} | {% endif %} | ||||
| {% if section.is_free %} | {% if section.is_free %} | ||||
| <p class="d-inline mr-2 text-success"> | <p class="d-inline mr-2 text-success"> | ||||
| <i class="material-icons icon-inline x-small">lock_open</i> | <i class="material-icons icon-inline x-small">lock_open</i> | ||||
| Free | Free | ||||
| </p> | </p> | ||||
| {% endif %} | {% endif %} | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="col-12 col-md-auto mb-2 mb-md-0 mt-0 mt-md-3"> | <div class="col-12 col-md-auto mb-2 mb-md-0 mt-0 mt-md-3"> | ||||
| <div class="training-toolbar-container"> | <div class="training-toolbar-container"> | ||||
| <div class="training-toolbar"> | <div class="training-toolbar"> | ||||
| {% if section.is_free or request.user|has_active_subscription %} | {% if section.is_free or request.user|has_active_subscription %} | ||||
| {% if section.download_url %} | {% if section.download_url %} | ||||
| <a href="{{ section.download_url }}" download onclick="setTimeout(resetProgress, 100)" class="btn btn-sm btn-dark">Download <span | <a href="{{ section.download_url }}" download onclick="setTimeout(resetProgress, 100)" class="btn btn-sm btn-dark">Download <span | ||||
| class="subtitle">({{ section.download_size }})</span></a> | class="subtitle">({{ section.download_size }})</span></a> | ||||
| {% endif %} | {% endif %} | ||||
| {% endif %} | {% endif %} | ||||
| {% if user.is_staff %} | {% if user.is_staff %} | ||||
| <a href="{{ section.admin_url }}" class="btn btn-sm btn-icon btn-dark"> | <a href="{{ section.admin_url }}" class="btn btn-sm btn-icon btn-dark"> | ||||
| <i class="material-icons btn-material-icons">create</i> | <i class="material-icons btn-material-icons">create</i> | ||||
| </a> | </a> | ||||
| {% endif %} | {% endif %} | ||||
| <button data-toggle="dropdown" class="btn btn-sm btn-icon btn-dark"> | <button data-toggle="dropdown" class="btn btn-sm btn-icon btn-dark"> | ||||
| <i class="material-icons">more_horiz</i> | <i class="material-icons">more_horiz</i> | ||||
| </button> | </button> | ||||
| <div class="dropdown-menu dropdown-menu-right"> | <div class="dropdown-menu dropdown-menu-right"> | ||||
| <a href="https://developer.blender.org/maniphest/task/edit/form/15/" target="_blank" | <a href="https://developer.blender.org/maniphest/task/edit/form/15/" target="_blank" | ||||
| class="dropdown-item"> | class="dropdown-item"> | ||||
| <i class="material-icons">flag</i> | <i class="material-icons">flag</i> | ||||
| <span>Report Problem</span> | <span>Report Problem</span> | ||||
| </a> | </a> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="row mb-2"> | <div class="row mb-2"> | ||||
| {% if section.static_asset.author_image_url %} | {% if section.static_asset.author_image_url %} | ||||
| <div style="background-image:url('{{ section.static_asset.author_image_url }}');" class="profile ml-2"></div> | <div style="background-image:url('{{ section.static_asset.author_image_url }}');" class="profile ml-2"></div> | ||||
| {% else %} | {% else %} | ||||
| <div style="background-image:url('{% static 'common/images/blank-profile-pic.png' %}');" class="profile ml-2"> | <div style="background-image:url('{% static 'common/images/blank-profile-pic.png' %}');" class="profile ml-2"> | ||||
| </div> | </div> | ||||
| {% endif %} | {% endif %} | ||||
| <div class="col-auto"> | <div class="col-auto"> | ||||
| <p class="subtitle text-white-50 x-small">Author</p> | <p class="subtitle text-white-50 x-small">Author</p> | ||||
| <h4 class="comment-name">{{ section.static_asset.author_name }}</h4> | <h4 class="comment-name">{{ section.static_asset.author_name }}</h4> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <section class="mb-3 markdown-text">{% with_shortcodes section.text|markdown %}</section> | <section class="mb-3 markdown-text">{% with_shortcodes section.text|markdown %}</section> | ||||
| {% comment %} <div class="card card-dark d-md-none"> | {% comment %} <div class="card card-dark d-md-none"> | ||||
| <div class="card-body"> | <div class="card-body"> | ||||
| <!-- TODO(Mike): Get next training --> | <!-- TODO(Mike): Get next training --> | ||||
| {% if video is not none %} | {% if video is not none %} | ||||
| <div class="row mb-2 justify-content-between"> | <div class="row mb-2 justify-content-between"> | ||||
| <div class="col-auto"> | <div class="col-auto"> | ||||
| <p class="subtitle small">Autoplay Next Section</p> | <p class="subtitle small">Autoplay Next Section</p> | ||||
| <h3 class="mb-0">02. Point Tracking - Part 2</h3> | <h3 class="mb-0">02. Point Tracking - Part 2</h3> | ||||
| </div> | </div> | ||||
| Show All 10 Lines | <div class="col"> | ||||
| <a href="#" class="video-preview"> | <a href="#" class="video-preview"> | ||||
| <img src="{% static 'training/images/placeholders/video.jpg' %}" class="img-fluid"> | <img src="{% static 'training/images/placeholders/video.jpg' %}" class="img-fluid"> | ||||
| </a> | </a> | ||||
| </div> | </div> | ||||
| </div> {% endcomment %} | </div> {% endcomment %} | ||||
| <section class="mb-3">{% include 'comments/components/comment_section.html' %}</section> | <section class="mb-3">{% include 'comments/components/comment_section.html' %}</section> | ||||
| </div> | </div> | ||||
| {% comment %} <div class="col-md-4"> | {% comment %} <div class="col-md-4"> | ||||
| <div class="card card-dark d-none d-md-block"> | <div class="card card-dark d-none d-md-block"> | ||||
| <div class="card-body"> | <div class="card-body"> | ||||
| {% if video is not none %} | {% if video is not none %} | ||||
| <div class="row mb-2 justify-content-between"> | <div class="row mb-2 justify-content-between"> | ||||
| <div class="col-md-auto"> | <div class="col-md-auto"> | ||||
| <p class="subtitle small">Autoplay Next Section</p> | <p class="subtitle small">Autoplay Next Section</p> | ||||
| <h3 class="mb-0">02. Point Tracking - Part 2</h3> | <h3 class="mb-0">02. Point Tracking - Part 2</h3> | ||||
| </div> | </div> | ||||
| Show All 9 Lines | <div class="card card-dark d-none d-md-block"> | ||||
| {% endif %} | {% endif %} | ||||
| <a href="#" class="video-preview"> | <a href="#" class="video-preview"> | ||||
| <img src="{% static 'training/images/placeholders/video.jpg' %}" class="img-fluid"> | <img src="{% static 'training/images/placeholders/video.jpg' %}" class="img-fluid"> | ||||
| </a> | </a> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> {% endcomment %} | </div> {% endcomment %} | ||||
| </div> | </div> | ||||
| {% endblock nexted_content %} | {% endblock nexted_content %} | ||||