fix card preview - refs #2681

assets/css/scss/_base.scss

@@ -744,23 +744,34 @@ hr {
 /* COURSE PREVIEW */
 
 .card-view{
-
+  .category {
+    position: absolute;
+    border-radius: 10px;
+    background-color: #FFCC00;
+    color: #000000;
+    font-weight: bold;
+    padding: 0.2rem 0.8rem;
+    top: -0.8rem;
+    left: 0.5rem;
+    font-size: 12px;
+    z-index: 1;
+  }
   &.card-course-classic{
     width: 425px;
   }
   &.card-course{
-    width: 340px;
+    width: 328px;
   }
   margin: auto;
   .doc-preview{
     .preview-lg{
-      width: 350px;
-      height: 190px;
+      width: 328px;
+      height: 185px;
       background-color: #000000;
     }
     .preview-sm{
       width: 160px;
-      height: 93px;
+      height: 90px;
       background-color: #000000;
     }
     .img-preview{

main/create_course/add_course.php

@@ -21,7 +21,7 @@ use Chamilo\CoreBundle\Repository\CourseCategoryRepository;
 // Flag forcing the "current course" reset.
 $cidReset = true;
 
-require_once __DIR__.'/../inc/global.inc.php';
+require_once __DIR__ . '/../inc/global.inc.php';
 
 // Check access rights.
 if (!api_is_allowed_to_create_course()) {
@@ -58,7 +58,7 @@ $htmlHeadXtra[] = '<script>
 </script>';
 
 $interbreadcrumb[] = [
-    'url' => api_get_path(WEB_PATH).'user_portal.php',
+    'url' => api_get_path(WEB_PATH) . 'user_portal.php',
     'name' => get_lang('MyCourses'),
 ];
 
@@ -106,7 +106,7 @@ $allowed_picture_types = api_get_supported_image_extensions(false);
 
 $form->addRule(
     'picture',
-    get_lang('OnlyImagesAllowed').' ('.implode(',', $allowed_picture_types).')',
+    get_lang('OnlyImagesAllowed') . ' (' . implode(',', $allowed_picture_types) . ')',
     'filetype',
     $allowed_picture_types
 );
@@ -118,7 +118,7 @@ $countCategories = $courseCategoriesRepo->countAllInAccessUrl(
 
 if ($countCategories >= 100) {
     // Category code
-    $url = api_get_path(WEB_AJAX_PATH).'course.ajax.php?a=search_category';
+    $url = api_get_path(WEB_AJAX_PATH) . 'course.ajax.php?a=search_category';
     $form->addElement(
         'select_ajax',
         'category_code',
@@ -229,7 +229,7 @@ if ($course_validation_feature) {
     // if it is activated.
     if (empty($terms_and_conditions_url)) {
         if (api_get_setting('allow_terms_conditions') === 'true') {
-            $terms_and_conditions_url = api_get_path(WEB_CODE_PATH).'auth/inscription.php?legal';
+            $terms_and_conditions_url = api_get_path(WEB_CODE_PATH) . 'auth/inscription.php?legal';
         }
     }
 
@@ -277,7 +277,7 @@ if (api_get_setting('teacher_can_select_course_template') === 'true') {
             get_lang('PickACourseAsATemplateForThisNewCourse'),
         ],
         null,
-        ['url' => api_get_path(WEB_AJAX_PATH).'course.ajax.php?a=search_course']
+        ['url' => api_get_path(WEB_AJAX_PATH) . 'course.ajax.php?a=search_course']
     );
 }
 
@@ -340,8 +340,8 @@ if ($form->validate()) {
             $params['gradebook_model_id'] = isset($course_values['gradebook_model_id']) ? $course_values['gradebook_model_id'] : null;
             $params['course_template'] = isset($course_values['course_template']) ? $course_values['course_template'] : '';
 
-            include_once api_get_path(SYS_CODE_PATH).'lang/english/trad4all.inc.php';
-            $file_to_include = api_get_path(SYS_CODE_PATH).'lang/'.$course_language.'/trad4all.inc.php';
+            include_once api_get_path(SYS_CODE_PATH) . 'lang/english/trad4all.inc.php';
+            $file_to_include = api_get_path(SYS_CODE_PATH) . 'lang/' . $course_language . '/trad4all.inc.php';
 
             if (file_exists($file_to_include)) {
                 include $file_to_include;
@@ -378,13 +378,13 @@ if ($form->validate()) {
                 $splash = api_get_setting('course_creation_splash_screen');
                 if ($splash === 'true') {
                     $url = api_get_path(WEB_CODE_PATH);
-                    $url .= 'course_info/start.php?'.api_get_cidreq_params($course_info['code']);
+                    $url .= 'course_info/start.php?' . api_get_cidreq_params($course_info['code']);
                     $url .= '&first=1';
-                    header('Location: '.$url);
+                    header('Location: ' . $url);
                     exit;
                 } else {
-                    $url = api_get_path(WEB_COURSE_PATH).$course_info['directory'].'/';
-                    header('Location: '.$url);
+                    $url = api_get_path(WEB_COURSE_PATH) . $course_info['directory'] . '/';
+                    header('Location: ' . $url);
                     exit;
                 }
             } else {
@@ -412,7 +412,7 @@ if ($form->validate()) {
 
             if ($request_id) {
                 $course_request_info = CourseRequestManager::get_course_request_info($request_id);
-                $message = (is_array($course_request_info) ? '<strong>'.$course_request_info['code'].'</strong> : ' : '').get_lang('CourseRequestCreated');
+                $message = (is_array($course_request_info) ? '<strong>' . $course_request_info['code'] . '</strong> : ' : '') . get_lang('CourseRequestCreated');
                 $message = Display::return_message(
                     $message,
                     'confirmation',
@@ -422,7 +422,7 @@ if ($form->validate()) {
                     'div',
                     Display::url(
                         get_lang('Enter'),
-                        api_get_path(WEB_PATH).'user_portal.php',
+                        api_get_path(WEB_PATH) . 'user_portal.php',
                         ['class' => 'btn btn-default']
                     ),
                     ['style' => 'float: left; margin:0px; padding: 0px;']

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

@@ -261,14 +261,14 @@ class HTML_QuickForm_file extends HTML_QuickForm_input
             $ratio = '';
             $scalable = $param['scalable'];
         }
-        
+
         return '<script>
         $(document).ready(function() {
-            var $inputFile = $(\'#'.$id.'\'),
-                $image = $(\'#'.$id.'_preview_image\'),
-                $input = $(\'[name="'.$id.'_crop_result"]\'),
-                $cropButton = $(\'#'.$id.'_crop_button\'),
-                $formGroup = $(\'#'.$id.'-form-group\');                
+            var $inputFile = $(\'#' . $id . '\'),
+                $image = $(\'#' . $id . '_preview_image\'),
+                $input = $(\'[name="' . $id . '_crop_result"]\'),
+                $cropButton = $(\'#' . $id . '_crop_button\'),
+                $formGroup = $(\'#' . $id . '-form-group\');                
 
             function isValidType(file) {
                 var fileTypes = [\'image/jpg\', \'image/jpeg\', \'image/gif\', \'image/png\'];
@@ -289,7 +289,7 @@ class HTML_QuickForm_file extends HTML_QuickForm_input
                 $image
                     .cropper(\'destroy\')
                     .cropper({
-                        '.$ratio.'
+                        ' . $ratio . '
                         responsive : true,
                         preview: \'.img-preview\',
                         center : false,
@@ -297,7 +297,7 @@ class HTML_QuickForm_file extends HTML_QuickForm_input
                         movable: false,
                         zoomable: false,
                         rotatable: false,
-                        scalable: '.$scalable.',
+                        scalable: ' . $scalable . ',
                         crop: function(event) {
                             // Output the result data for cropping image.
                             $input.val(event.detail.x + \',\' + event.detail.y + \',\' + event.detail.width + \',\' + event.detail.height);
@@ -320,7 +320,7 @@ class HTML_QuickForm_file extends HTML_QuickForm_input
 
                     if (inputFile.setCustomValidity) {
                         inputFile.setCustomValidity(
-                            inputFile.title ? inputFile.title : \''.get_lang('OnlyImagesAllowed').'\'
+                            inputFile.title ? inputFile.title : \'' . get_lang('OnlyImagesAllowed') . '\'
                         );
                     }
 
@@ -352,7 +352,7 @@ class HTML_QuickForm_file extends HTML_QuickForm_input
                 $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);
+                $(\'[name="' . $id . '_crop_image_base_64"]\').val(dataUrl);
                 $cropButton.hide();
             });
                     

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

@@ -4,8 +4,8 @@
             var $inputTitle = $("#add_course_title");
             $inputTitle.keyup(function () {
                 var value = $(this).val();
-                var titleDefault = "{{ "Titulo del curso"|trans }}";
-                if(value.length > 0){
+                var titleDefault = "{{ "Course Title"|trans }}";
+                if (value.length > 0) {
                     $("#title_course").text(value);
                     $("#title_course_card").text(value);
                 } else {
@@ -13,77 +13,86 @@
                     $("#title_course_card").text(titleDefault);
                 }
             }).keyup();
-        });
 
+            $("select[name=category_code]").change(function () {
+                $(".category").show();
+                var $category = $('select[name=category_code] option:selected').html();
+                $(".category").text($category);
+            });
+        });
     </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 id="preview_course" class="card" style="display: none;">
-            <div class="card-body">
-                <div id="view-classic-course" class="card card-view card-course-classic ">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-md-5">
-                                <div class="doc-preview">
-                                    <div class="img-preview preview-sm">
-
+    <div class="row">
+        <div class="col-md-8">
+            {{ form }}
+        </div>
+        <div class="col-md-4">
+            <div id="preview_course" class="card" style="display: none; border: none; box-shadow: none;">
+                <div class="card-body">
+                    <div id="view-classic-course" class="card card-view card-course-classic ">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col-md-5">
+                                    <div class="category" style="display: none;">
                                     </div>
-                                    <div class="img-box" style="display: none;">
-                                        <img id="image-cut-sm" src="" class="preview-sm" >
+                                    <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>
-                            <div class="col-md-7">
-                                <div class="card-inside">
-                                    <h5 id="title_course" class="title">
-                                    </h5>
-                                    <div class="list-teachers">
-                                        <i class="fas fa-user-tie"></i>
-                                        <span class="name">
+                                <div class="col-md-7">
+                                    <div class="card-inside">
+                                        <h5 id="title_course" class="title">
+                                        </h5>
+                                        <div class="list-teachers">
+                                            <i class="fas fa-user-tie"></i>
+                                            <span class="name">
                                             {{ name }}
                                         </span>
+                                        </div>
                                     </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 id="view-card-course" class="card card-view card-course mt-5 mb-3">
+                        <div class="card-image">
+                            <div class="category" style="display: none;">
                             </div>
-                            <div class="img-box" style="display: none;">
-                                <img id="image-cut-lg" src="" class="preview-lg" >
+                            <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>
-                    <div class="card-body p-3">
+                        <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">
+                            <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>
             </div>
         </div>
     </div>
-</div>
 {% endautoescape %}