add card preview course create - refs #2681

assets/css/scss/_base.scss

@@ -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;

assets/js/app.js

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

main/create_course/add_course.php

@@ -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('Course Name'),
-        get_lang('For example: Innovation management'),
+        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(

main/inc/lib/pear/HTML/QuickForm/file.php

@@ -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,
@@ -309,6 +310,10 @@ class HTML_QuickForm_file extends HTML_QuickForm_input
                     file = inputFile.files[0],
                     fileReader = new FileReader();
                     
+                    $(".img-box").hide();
+                    $(".img-preview").show();
+
+
                 if (!isValidType(file)) {
                     $formGroup.hide();
                     $cropButton.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>';
     }

main/template/default/create_course/add_course.html.twig

@@ -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 id="preview_course" class="card" style="display: none;">
-            <div class="card-header">
-                {{ 'Preview of the course'|trans }}
-            </div>
             <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="#">
+                                <div class="doc-preview">
-                                    <img src="http://chamilo2.test/../courses/INTRODUCCIONLAREALIDADAUMENTADA/course-pic.png" class="img-fluid">
+                                    <div class="img-preview preview-sm">
-                                </a>
+
+                                    </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">
+                                    <h5 id="title_course" class="title">
-                                        <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>
                                     <div class="list-teachers">
                                         <i class="fas fa-user-tie"></i>
-                                        <a href="#">
+                                        <span class="name">
-                                            Joe Doe
+                                            {{ name }}
-                                        </a>
+                                        </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>