You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
248 lines
14 KiB
248 lines
14 KiB
{% extends 'base_index.html' %}
|
|
{% block title %}{{ course.head.title }} / {{ lesson.head.title }}{% endblock %}
|
|
<!-- content -->
|
|
{% block content %}
|
|
<!-- main -->
|
|
<div class="col">
|
|
<!-- Голова -->
|
|
<div style="background:url({{ course.head.big_img }}) top right; background-size:cover">
|
|
<div class="visible-sm visible-xs" style="background-color: rgba(0, 0, 0, 0.5);">
|
|
<div class="wrapper-lg" style="padding: 0 20px;">
|
|
<div class="row m-t" style="margin-top: 0;padding-top: 20px; padding-bottom: 20px;">
|
|
<div class="col-sm-7">
|
|
<div class="clear m-b">
|
|
<div class="m-b m-t-sm">
|
|
<span class="h1 text-warning text-u-c" style="font-weight: bold;">
|
|
{{ course.head.title }}
|
|
</span>
|
|
</div>
|
|
<div style="color: #fff;margin-bottom: 5px;">
|
|
<b style="margin-right: 5px;">Приобретаемые навыки:</b>
|
|
{% for skill in course.head.skills %}
|
|
<span class="label font-normal text-white" style="background: {{ skill.color }}">{% if skill.mini_icon %}<img src="{{ skill.mini_icon.url }}" style="margin-top: -1px;width: 10px;
|
|
height: 10px;
|
|
margin-right: 5px;">{% endif %}{{ skill }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
<div style="color: #fff;">
|
|
{{ course.head.lessons }} урока(-ов)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-5" style="text-align: center;">
|
|
{% if course.head.progress != 0 %}
|
|
<div class="chart" data-percent="{{ course.head.progress }}" data-scale-color="#fff"
|
|
style="text-align: center;color: #fff;">
|
|
<span id="canvas_length">{{ course.head.progress }}%</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wrapper-lg hidden-xs hidden-sm" style="padding: 0 20px;">
|
|
<div class="row m-t" style="margin-top: 0;padding-top: 20px; padding-bottom: 20px;">
|
|
<div class="col-sm-7">
|
|
<div class="clear m-b">
|
|
<div class="m-b m-t-sm">
|
|
<span class="h1 text-warning text-u-c" style="font-weight: bold;">
|
|
{{ course.head.title }}
|
|
</span>
|
|
</div>
|
|
<div style="color: #fff;margin-bottom: 5px;">
|
|
<b style="margin-right: 5px;">Приобретаемые навыки:</b>
|
|
{% for skill in course.head.skills %}
|
|
<span class="label font-normal text-white" style="background: {{ skill.color }}">{% if skill.mini_icon %}<img src="{{ skill.mini_icon.url }}" style="margin-top: -1px;width: 10px;
|
|
height: 10px;
|
|
margin-right: 5px;">{% endif %}{{ skill }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
<div style="color: #fff;">
|
|
{{ course.head.lessons }} урока(-ов)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-5" style="text-align: center;">
|
|
{% if course.head.progress != 0 %}
|
|
<div class="chart" data-percent="{{ course.head.progress }}" data-scale-color="#fff"
|
|
style="text-align: center;color: #fff;">
|
|
<span id="canvas_length">{{ course.head.progress }}%</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Кнопки материала -->
|
|
<div class="wrapper bg-white b-b">
|
|
<ul class="nav nav-pills nav-sm">
|
|
<li>
|
|
<a type="button" style="width: 100%;" class="col-lg-10 btn btn-default dropdown-toggle" href="/courses/{{ course.head.course_id }}">
|
|
<i class="glyphicon glyphicon-chevron-left"></i> Страница курса
|
|
</a>
|
|
</li>
|
|
<!-- Кнопка нового урока -->
|
|
<li name="next_button" {% if lesson.head.status.flag != 'F' %}style="display: none;"{% endif %}>
|
|
<a type="button" href="{{ lesson.next.button.link }}{{ lesson.next.obj.id }}" style="background: {{ lesson.next.button.background }}; color: {{ lesson.next.button.color }}"
|
|
by_type="{{ lesson.next.button.by_type }}"
|
|
self_id="{{ lesson.next.obj.id }}"
|
|
course_id="{{ lesson.next.obj.course.id }}">
|
|
{{ lesson.next.button.title }} <i class="glyphicon glyphicon-chevron-right"></i>
|
|
</a>
|
|
</li>
|
|
<!-- Статус -->
|
|
<li style="float: right; padding: 6px 12px;">
|
|
<span style="padding: 6px 12px;font-weight: bold;">
|
|
<span class="label font-normal text-white bg-{{ lesson.head.status.color }}" style="margin-left: 10px;font-size: 19px;{{ lesson.head.status.styles }}">{{ lesson.head.status.title }}<i class="{{ lesson.head.status.icon }}" style="margin-right: 5px; margin-left: 10px; top: 3px;"></i></span>
|
|
</span>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="tab-content">
|
|
<div class="wrapper-md tab-pane active" role="tabpanel" id="lesson">
|
|
|
|
<div class="row">
|
|
<div style="clear: both;" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
<div class="panel-heading bg-primary" style="text-align: center;max-width: 1500px;margin: 0 auto;">
|
|
<span class="text-lt">Видео к занятию: {{ lesson.head.title }}</span>
|
|
</div>
|
|
|
|
<div class="panel b-a" style="max-width: 1500px;margin: auto;border: 0">
|
|
<div style="padding: 0;clear: both;{% if lesson.head.status.flag == 'F' %}display: none;{% endif %}" name="current_button" class="panel-heading no-border">
|
|
<button type="button" class="btn btn-success" onclick="read_lesson({{ lesson.head.mid }})" style="width: 100%; font-weight: bold; font-size: 22px; height: 70px">
|
|
<i class="glyphicon glyphicon-ok"></i> Пометить как просмотренное
|
|
</button>
|
|
|
|
</div>
|
|
<div style="padding: 0;{% if lesson.head.status.flag != 'F' %}display: none;{% endif %}" name="next_button" class="panel-heading no-border">
|
|
<a type="button" href="{{ lesson.next.button.link }}{{ lesson.next.obj.id }}">
|
|
<button class="btn" style="width: 100%; font-weight: bold; font-size: 22px;height: 70px;background: {{ lesson.next.button.background }}; color: {{ lesson.next.button.color }}"
|
|
by_type="{{ lesson.next.button.by_type }}"
|
|
self_id="{{ lesson.next.obj.id }}"
|
|
course_id="{{ lesson.next.obj.course.id }}">
|
|
{{ lesson.next.button.title }}
|
|
</button>
|
|
</a>
|
|
</div>
|
|
<div class="item m-l-n-xxs m-r-n-xxs embed-responsive embed-responsive-16by9" name="video_frame">
|
|
{{ lesson.video|safe }}
|
|
</div>
|
|
<div style="padding: 0;clear: both;{% if lesson.head.status.flag == 'F' %}display: none;{% endif %}" name="current_button" class="col-md-12 col-sm-12 col-xs-12">
|
|
<button type="button" class="btn btn-success" onclick="read_lesson({{ lesson.head.mid }})" style="width: 100%; font-weight: bold; font-size: 22px; height: 70px">
|
|
<i class="glyphicon glyphicon-ok"></i> Пометить как просмотренное
|
|
</button>
|
|
</div>
|
|
<div style="padding: 0;{% if lesson.head.status.flag != 'F' %}display: none;{% endif %}" name="next_button" class="col-md-12 col-sm-12 col-xs-12">
|
|
<a type="button" href="{{ lesson.next.button.link }}{{ lesson.next.obj.id }}">
|
|
<button class="btn" style="width: 100%; font-weight: bold; font-size: 22px;height: 70px;background: {{ lesson.next.button.background }}; color: {{ lesson.next.button.color }}"
|
|
by_type="{{ lesson.next.button.by_type }}"
|
|
self_id="{{ lesson.next.obj.id }}"
|
|
course_id="{{ lesson.next.obj.course.id }}">
|
|
{{ lesson.next.button.title }}
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if lesson.description %}
|
|
<div class="{% if lesson.materials.all %}col-lg-6 {% else %}col-lg-12 {% endif %}col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px;">
|
|
<div class="panel panel-info">
|
|
<div class="panel-heading">
|
|
<h2 class="m-t-none text-black" style="margin-bottom: 5px;">Описание урока</h2>
|
|
</div>
|
|
<div class="wrapper-lg">
|
|
<div>
|
|
{{ lesson.description|safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if lesson.materials %}
|
|
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" style="margin-top: 20px;">
|
|
<div draggable="true" class="panel panel-info">
|
|
<div class="panel-heading">
|
|
Материалы к уроку
|
|
</div>
|
|
{% for i in lesson.materials %}
|
|
<div class="list-group bg-white">
|
|
{% if i.format == 'I' %}
|
|
<a href="{{ i.url }}" class="list-group-item" target="_blank" id="single_image">
|
|
{% else %}
|
|
<a href="{{ i.url }}" class="list-group-item" target="_blank">
|
|
{% endif %}
|
|
{% if i.icon_type != 'class' %}
|
|
<img src="{{ i.icon }}">
|
|
{% else %}
|
|
<i class="{{ i.icon }} text-lg inline text-primary"></i>
|
|
{% endif %}
|
|
<span class="clear inline">
|
|
<span>{{ i.title }}</span>
|
|
<small class="text-muted clear text-ellipsis">{{ i.name }}</small>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
{% if lesson.head.on_comment %}
|
|
<span name="old_comments_show" style="color: #ccc;
|
|
border-bottom: 1px dotted #ccc; display: none;
|
|
cursor: pointer;" onclick="$(this).fadeOut('fast', function(){$('[name=old_comments]').fadeIn()})">Показать старые комментарии</span>
|
|
<div class="row" name="old_comments" style="display: none; margin-top: 20px;">
|
|
<!-- Старые комментарии -->
|
|
<a name="comment_list_place"></a>
|
|
<div class="col-lg-12">
|
|
<div class="m-b b-l m-l-md streamline" name="lesson_comments_block" lesson_id="{{ lesson.head.mid }}">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!---->
|
|
|
|
{% include 'comments_block.html' %}
|
|
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<!-- / main header -->
|
|
|
|
</div>
|
|
<!-- / main -->
|
|
{% include 'right_site.html' %}
|
|
<input name="LESSON_ID" value="{{ lesson.head.mid }}" style="display: none;">
|
|
{% endblock %}
|
|
<!-- / content -->
|
|
{% block js %}
|
|
<script type="text/javascript" src='/static/js/lesson.js'></script>
|
|
<!--<script type="text/javascript" src='/static/js/video_reloader.js'></script>-->
|
|
{% if 'to_comment' in request.GET %}
|
|
<script>
|
|
$(function () {
|
|
setTimeout(function() {
|
|
$('html,body').stop().animate({ scrollTop: $('div[name=comment_{{ request.GET.to_comment }}]').offset().top }, 1000);
|
|
$('div[name=comment_{{ request.GET.to_comment }}]').css('background', 'red');
|
|
}, 4000);
|
|
})
|
|
</script>
|
|
{% endif %}
|
|
<script>
|
|
$(function() {
|
|
$('.chart').easyPieChart({
|
|
rotate: 0,
|
|
lineWidth: 60,
|
|
trackColor: 'rgba(255,255,255,0)',
|
|
barColor: 'rgba(35,183,229,0.7)',
|
|
size: 120,
|
|
lineCap: 'butt',
|
|
animate: 1000,
|
|
scaleLength: 0
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |