chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add card preview course create - refs #2681

Browse Source
pull/2818/head
Alex Aragón 7 years ago
parent 24c829c8bd
commit fa2a46e746
5 changed files with 126 additions and 35 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 42
      assets/css/scss/_base.scss
  2. 4
      assets/js/app.js
  3. 16
      main/create_course/add_course.php
  4. 17
      main/inc/lib/pear/HTML/QuickForm/file.php
  5. 82
      main/template/default/create_course/add_course.html.twig

42
assets/css/scss/_base.scss
Unescape View File

@ -741,7 +741,49 @@ hr {
}
}
/* COURSE PREVIEW */
.card-view{
&.card-course-classic{
width: 425px;
}
&.card-course{
width: 340px;
}
margin: auto;
.doc-preview{
.preview-lg{
width: 350px;
height: 190px;
background-color: #000000;
}
.preview-sm{
width: 160px;
height: 93px;
background-color: #000000;
}
.img-preview{
float: left;
margin-right: .5rem;
overflow: hidden;
text-align: center;
}
}
.card-body{
padding: 0;
.title{
color: $default-link;
font-size: 16px;
}
.card-inside{
padding: 0.8rem 0.8rem 0.8rem 0;
}
}
}
/* COURSE CLASSIC */
.grid-course{
display: grid;
grid-gap: 1rem;

4
assets/js/app.js
Unescape View File

@ -271,6 +271,10 @@ $(function() {
var id = $(this).attr('id') + '_options';
var button = $(this);
$("#" + id).toggle();
if($("#preview_course").length >= 0){
$("#preview_course").toggle();
}
});
/**

16
main/create_course/add_course.php
Unescape View File

@ -74,26 +74,14 @@ $form = new FormValidator('add_course');
$form->addElement('header', $tool_name);
// Title
/*$form->addElement(
'text',
'title',
[
get_lang('CourseName'),
get_lang('Ex'),
],
[
'id' => 'title',
]
);*/
$form->addText(
'title',
[
get_lang('CourseName'),
get_lang('For example: Innovation management'),
get_lang('Course Name'),
get_lang('Write a short and striking course name, For example: Innovation Management'),
],
true);
$form->applyFilter('title', 'html_filter');
//$form->addRule('title', get_lang('ThisFieldIsRequired'), 'required');
$form->addButtonAdvancedSettings('advanced_params');
$form->addElement(

17
main/inc/lib/pear/HTML/QuickForm/file.php
Unescape View File

@ -291,6 +291,7 @@ class HTML_QuickForm_file extends HTML_QuickForm_input
.cropper({
'.$ratio.'
responsive : true,
preview: \'.img-preview\',
center : false,
guides : false,
movable: false,
@ -308,6 +309,10 @@ class HTML_QuickForm_file extends HTML_QuickForm_input
var inputFile = this,
file = inputFile.files[0],
fileReader = new FileReader();
$(".img-box").hide();
$(".img-preview").show();
if (!isValidType(file)) {
$formGroup.hide();
@ -335,13 +340,23 @@ class HTML_QuickForm_file extends HTML_QuickForm_input
});
$cropButton.on(\'click\', function () {
var $imageLarge = $("#image-cut-lg");
var $imageSmall = $("#image-cut-sm");
var canvas = $image.cropper(\'getCroppedCanvas\'),
dataUrl = canvas.toDataURL();
$(".img-box").show();
$(".img-preview").hide();
$image.attr(\'src\', dataUrl).cropper(\'destroy\').off(\'load\', imageCropper);
$imageSmall.attr(\'src\', dataUrl).cropper(\'destroy\').off(\'load\', imageCropper);
$imageLarge.attr(\'src\', dataUrl).cropper(\'destroy\').off(\'load\', imageCropper);
$(\'[name="'.$id.'_crop_image_base_64"]\').val(dataUrl);
$cropButton.hide();
});
});
</script>';
}

82
main/template/default/create_course/add_course.html.twig
Unescape View File

@ -1,45 +1,87 @@
{% autoescape false %}
<script type="text/javascript">
$(function () {
var $inputTitle = $("#add_course_title");
$inputTitle.keyup(function () {
var value = $(this).val();
var titleDefault = "{{ "Titulo del curso"|trans }}";
if(value.length > 0){
$("#title_course").text(value);
$("#title_course_card").text(value);
} else {
$("#title_course").text(titleDefault);
$("#title_course_card").text(titleDefault);
}
}).keyup();
});
</script>
{% set name %}
{{ app.user.firstname }} {{ app.user.lastname }}
{% endset %}
<div class="row">
<div class="col-md-8">
{{ form }}
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
{{ 'Preview of the course'|trans }}
</div>
<div id="preview_course" class="card" style="display: none;">
<div class="card-body">
<div id="view-course" class="card card-course-classic ">
<div id="view-classic-course" class="card card-view card-course-classic ">
<div class="card-body">
<div class="row">
<div class="col-md-5">
<a href="#">
<img src="http://chamilo2.test/../courses/INTRODUCCIONLAREALIDADAUMENTADA/course-pic.png" class="img-fluid">
</a>
<div class="doc-preview">
<div class="img-preview preview-sm">
</div>
<div class="img-box" style="display: none;">
<img id="image-cut-sm" src="" class="preview-sm" >
</div>
</div>
</div>
<div class="col-md-7">
<div class="card-inside">
<div class="float-right">
<a class="btn btn-outline-primary btn-sm" href="#">
<i class="fas fa-pencil-alt"></i>
</a>
</div>
<h5 class="title">
<a href="#">
Titulo del curso
</a>
<h5 id="title_course" class="title">
</h5>
<div class="list-teachers">
<i class="fas fa-user-tie"></i>
<a href="#">
Joe Doe
</a>
<span class="name">
{{ name }}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="view-card-course" class="card card-view card-course mt-3 mb-3">
<div class="card-image">
<div class="doc-preview">
<div class="img-preview preview-lg">
</div>
<div class="img-box" style="display: none;">
<img id="image-cut-lg" src="" class="preview-lg" >
</div>
</div>
</div>
<div class="card-body p-3">
<div class="card-title">
<h5 id="title_course_card" class="title">
</h5>
</div>
<div class="card-author mb-2">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<span class="name">
{{ name }}
</span>
</div>
</div>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save