From df08d0c58fba0cd435aa36b060d75686e4a4a81c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20Arag=C3=B3n?= <aragcar@gmail.com>
Date: Mon, 29 Oct 2018 17:58:01 -0500
Subject: [PATCH] update course list classic - refs #2681

---
 assets/css/base.css                           |  24 ---
 assets/css/scss/_base.scss                    |  70 ++++++-
 assets/css/scss/_variables.scss               |   3 +-
 .../classic_courses_with_category.html.twig   |   1 +
 ...classic_courses_without_category.html.twig | 181 +++++++++---------
 .../user_portal/course_categories.html.twig   |   2 +-
 .../views/Layout/base-layout.html.twig        |   2 +-
 .../Resources/views/Macros/box.html.twig      |  21 +-
 8 files changed, 185 insertions(+), 119 deletions(-)

diff --git a/assets/css/base.css b/assets/css/base.css
index ad677d884f..b555ea554a 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -7386,31 +7386,7 @@ ul#toolnavbox-two li a.btn {
     margin-bottom: 5px;
 }
 
-.select2-container .select2-selection--single {
-    height: 32px !important;
-    border-color: #CCCCCC !important;
-}
-
-.select2-container--default .select2-selection--multiple {
-    background-color: #FFF !important;
-    border: 1px solid #CCC !important;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-}
 
-.select2-container .select2-search--inline .select2-search__field {
-    margin-top: 6px !important;
-    margin-bottom: 4px !important;
-}
-
-.select2-dropdown {
-    background-color: #FFF !important;
-    border: 1px solid #CCC !important;
-    border-top: none !important;
-}
 
 .page-blank {
     padding: 20px 30px;
diff --git a/assets/css/scss/_base.scss b/assets/css/scss/_base.scss
index 5521840576..e217dc5ecd 100644
--- a/assets/css/scss/_base.scss
+++ b/assets/css/scss/_base.scss
@@ -17,6 +17,7 @@ body {
   line-height: 1.5;
   letter-spacing: 0.2px;
   overflow-x: hidden;
+  background: $page-background;
 }
 
 h1,
@@ -81,11 +82,7 @@ a {
 hr {
   border-top: 1px solid $border-color;
 }
-.btn-select{
-  color: #4e718f;
-  background-color: white;
-  border-color: #88b6df;
-}
+
 .btn-create-one{
   border-color: #b8daff;
   background-color: #cce5ff;
@@ -224,8 +221,44 @@ hr {
 }
 .footer{
   padding: 18px;
+  background-color: $default-white;
+  border-top: 1px solid #dee2e6;
+}
+/** SELECT */
+
+.btn-select{
+  color: #495057;
+  background-color: white;
+  border-color: $select-color;
+  &.bs-placeholder{
+    color: $select-color !important;
+  }
 }
 
+.select2-container--default{
+  .select2-selection--single {
+    background-color: #fff;
+    border: 1px solid $select-color;
+    border-radius: 4px;
+    height: 40px !important;
+    line-height: 40px;
+    .select2-selection__rendered{
+      line-height: 40px;
+    }
+    .select2-selection__arrow{
+      height: 40px;
+      b{
+        border-color: #495057 transparent transparent transparent;
+        border-width: 6px 5px 0 5px;
+        left: 20%;
+      }
+    }
+  }
+}
+.help-block{
+  font-size: 12px;
+  margin-bottom: 0;
+}
 // ---------------------------------------------------------
 // PAGE CONTAINER
 // ---------------------------------------------------------
@@ -393,6 +426,33 @@ footer {
     padding: 1.88rem 1.81rem;
   }
 }
+/* COURSE CLASSIC */
+.course-list{
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 1rem;
+  grid-row-gap: 16px;
+}
+.card-course-classic{
+  border: 1px solid #dee2e6;
+  border-bottom-width: 5px;
+  display: grid;
+  grid-template-columns: auto;
+  grid-gap: 10px;
+  align-items: center;
+  .card-body{
+    padding: 1rem 1.2rem;
+    .title{
+      font-size: 16px;
+      a{
+        color: $grey-800;
+      }
+    }
+  }
+}
+
+
+/* COURSE GRID */
 .card-course{
   transform: perspective(1px) translateZ(0);
   transition-property: box-shadow;
diff --git a/assets/css/scss/_variables.scss b/assets/css/scss/_variables.scss
index 8aaaa2cf0e..b67b3cda7b 100644
--- a/assets/css/scss/_variables.scss
+++ b/assets/css/scss/_variables.scss
@@ -44,7 +44,7 @@ $default-link         : rgb(0, 153, 255);
 // COLORS PAGE
 // ---------------------------------------------------------
 
-$page-background      : #f2f8f9;
+$page-background      : #ffffff;
 $menu-background      :linear-gradient(120deg, #00a5e4, #4a71d0);
 $sidebar-link         : #54667A;
 $sidebar-bg           : #FFFFFF;
@@ -52,6 +52,7 @@ $sidebar-focus        : rgba(0, 0, 0, 0.07);
 $header-link          : #FFFFFF;
 $header-hover         : #eddf0e;
 $breadcrumb-color     : #d2f1ff;
+$select-color         : #ced4da;
 // ---------------------------------------------------------
 // OTHERS
 // ---------------------------------------------------------
diff --git a/main/template/default/user_portal/classic_courses_with_category.html.twig b/main/template/default/user_portal/classic_courses_with_category.html.twig
index d9fc2d7e4f..1ae33f51dd 100644
--- a/main/template/default/user_portal/classic_courses_with_category.html.twig
+++ b/main/template/default/user_portal/classic_courses_with_category.html.twig
@@ -1,4 +1,5 @@
 {% autoescape false %}
+
 {% if not categories is empty %}
     <div class="classic-courses">
         {% for category in categories %}
diff --git a/main/template/default/user_portal/classic_courses_without_category.html.twig b/main/template/default/user_portal/classic_courses_without_category.html.twig
index 8e7fe89733..2d9d045b42 100644
--- a/main/template/default/user_portal/classic_courses_without_category.html.twig
+++ b/main/template/default/user_portal/classic_courses_without_category.html.twig
@@ -1,99 +1,108 @@
+{% import '@ChamiloTheme/Macros/box.html.twig' as macro %}
+
 {% autoescape false %}
+
 {% if not courses is empty %}
-    <div class="classic-courses">
+    <div class="course-list">
     {% for item in courses %}
-        <div class="panel panel-default">
-            <div class="panel-body">
-                <div class="row">
-                    <div class="col-md-2">
-                        {% if item.visibility == constant('COURSE_VISIBILITY_CLOSED') and not item.current_user_is_teacher %}
-                            <span class="thumbnail">
-                                {% if item.thumbnails != '' %}
-                                    <img src="{{ item.thumbnails }}" title="{{ item.title }}"
-                                         alt="{{ item.title }}"/>
-                                {% else %}
-                                    {{ 'blackboard.png' | img(48, item.title ) }}
-                                {% endif %}
-                            </span>
-                        {% else %}
-                            <a href="{{ item.link }}" class="thumbnail">
-                                {% if item.thumbnails != '' %}
-                                    <img src="{{ item.thumbnails }}" title="{{ item.title }}"
-                                         alt="{{ item.title }}"/>
-                                {% else %}
-                                    {{ 'blackboard.png' | img(48, item.title ) }}
-                                {% endif %}
+
+        {% set image %}
+            {% if item.visibility == constant('COURSE_VISIBILITY_CLOSED') and not item.current_user_is_teacher %}
+                <span class="thumbnail">
+                    {% if item.thumbnails != '' %}
+                        <img src="{{ item.thumbnails }}" title="{{ item.title }}"
+                             alt="{{ item.title }}"/>
+                    {% else %}
+                        {{ 'blackboard.png' | img(48, item.title ) }}
+                    {% endif %}
+                </span>
+            {% else %}
+                <a href="{{ item.link }}" class="thumbnail">
+                    {% if item.thumbnails != '' %}
+                        <img src="{{ item.thumbnails }}" title="{{ item.title }}"
+                             alt="{{ item.title }}"/>
+                    {% else %}
+                        {{ 'blackboard.png' | img(48, item.title ) }}
+                    {% endif %}
+                </a>
+            {% endif %}
+        {% endset %}
+
+        {% set title %}
+            {% if item.edit_actions != '' %}
+                <div class="float-right">
+                    {% if item.document == '' %}
+                        <a class="btn btn-outline-secondary btn-sm" href="{{ item.edit_actions }}">
+                            <i class="fas fa-pencil-alt"></i>
+                        </a>
+                    {% else %}
+                        <div class="btn-group" role="group">
+                            <a class="btn btn-outline-secondary btn-sm" href="{{ item.edit_actions }}">
+                                <i class="fas fa-pencil-alt"></i>
                             </a>
-                        {% endif %}
-                    </div>
-                    <div class="col-md-10">
-                        {% if item.edit_actions != '' %}
-                            <div class="pull-right">
-                                {% if item.document == '' %}
-                                    <a class="btn btn-default btn-sm" href="{{ item.edit_actions }}">
-                                        <i class="fa fa-pencil" aria-hidden="true"></i>
-                                    </a>
-                                {% else %}
-                                    <div class="btn-group" role="group">
-                                        <a class="btn btn-default btn-sm" href="{{ item.edit_actions }}">
-                                            <i class="fa fa-pencil" aria-hidden="true"></i>
-                                        </a>
-                                        {{ item.document }}
-                                    </div>
-                                {% endif %}
-                            </div>
-                        {% endif %}
-                        <h4 class="course-items-title">
-                            {% if item.visibility == constant('COURSE_VISIBILITY_CLOSED') and not item.current_user_is_teacher %}
-                                {{ item.title }} {{ item.code_course }}
-                            {% else %}
-                                <a href="{{ item.link }}">
-                                    {{ item.title }} {{ item.code_course }}
-                                </a>
-                                {{ item.notifications }}
-                                {% if item.is_special_course %}
-                                    {{ 'klipper.png' | img(22, 'CourseAutoRegister'|get_lang ) }}
-                                {% endif %}
-                            {% endif %}
-                        </h4>
-                        <div class="course-items-session">
-                            <div class="list-teachers">
-                                {% if item.teachers|length > 0 %}
-                                    {{ 'teacher.png' | img(16, 'Professor'|get_lang ) }}
-                                    {% for teacher in item.teachers %}
-                                        {% set counter = counter + 1 %}
-                                        {% if counter > 1 %} | {% endif %}
-                                        <a href="{{ teacher.url }}" class="ajax"
-                                        data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
-                                            {{ teacher.firstname }} {{ teacher.lastname }}
-                                        </a>
-                                    {% endfor %}
+                            {{ item.document }}
+                        </div>
+                    {% endif %}
+                </div>
+            {% endif %}
+
+            <h5 class="title">
+                {% if item.visibility == constant('COURSE_VISIBILITY_CLOSED') and not item.current_user_is_teacher %}
+                    {{ item.title }} {{ item.code_course }}
+                {% else %}
+                    <a href="{{ item.link }}">
+                        {{ item.title }} {{ item.code_course }}
+                    </a>
+                    {{ item.notifications }}
+                    {% if item.is_special_course %}
+                        {{ 'klipper.png' | img(22, 'CourseAutoRegister'|get_lang ) }}
+                    {% endif %}
+                {% endif %}
+            </h5>
+        {% endset %}
+
+        {% set content %}
+            <div class="list-teachers">
+                {% if item.teachers|length > 0 %}
+                    {{ 'teacher.png' | img(16, 'Professor'|get_lang ) }}
+                    {% for teacher in item.teachers %}
+                        {% set counter = counter + 1 %}
+                        {% if counter > 1 %} | {% endif %}
+                        <a href="{{ teacher.url }}" class="ajax"
+                           data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
+                            {{ teacher.firstname }} {{ teacher.lastname }}
+                        </a>
+                    {% endfor %}
+                {% endif %}
+            </div>
+            <div class="student-progress">
+                {% if item.student_info %}
+                    {% if (item.student_info.progress is not null) and (item.student_info.score is not null) %}
+                        <div class="course-student-info">
+                            <div class="student-info">
+                                {% if (item.student_info.progress is not null) %}
+                                    {{ "StudentCourseProgressX" | get_lang | format(item.student_info.progress) }}
                                 {% endif %}
-                            </div>
-                            {% if item.student_info %}
-                                {% if (item.student_info.progress is not null) and (item.student_info.score is not null) %}
-                                    <div class="course-student-info">
-                                        <div class="student-info">
-                                            {% if (item.student_info.progress is not null) %}
-                                                {{ "StudentCourseProgressX" | get_lang | format(item.student_info.progress) }}
-                                            {% endif %}
 
-                                            {% if (item.student_info.score is not null) %}
-                                                {{ "StudentCourseScoreX" | get_lang | format(item.student_info.score) }}
-                                            {% endif %}
+                                {% if (item.student_info.score is not null) %}
+                                    {{ "StudentCourseScoreX" | get_lang | format(item.student_info.score) }}
+                                {% endif %}
 
-                                            {% if (item.student_info.certificate is not null) %}
-                                                {{ "StudentCourseCertificateX" | get_lang | format(item.student_info.certificate) }}
-                                            {% endif %}
-                                        </div>
-                                    </div>
+                                {% if (item.student_info.certificate is not null) %}
+                                    {{ "StudentCourseCertificateX" | get_lang | format(item.student_info.certificate) }}
                                 {% endif %}
-                            {% endif %}
+                            </div>
                         </div>
-                    </div>
-                </div>
+                    {% endif %}
+                {% endif %}
             </div>
-        </div>
+
+        {% endset %}
+
+        {{ macro.box_course_classic(item.course_id, title, content, image) }}
+
+
+
     {% endfor %}
     </div>
 {% endif %}
diff --git a/main/template/default/user_portal/course_categories.html.twig b/main/template/default/user_portal/course_categories.html.twig
index 6eefd6d496..5d778be400 100644
--- a/main/template/default/user_portal/course_categories.html.twig
+++ b/main/template/default/user_portal/course_categories.html.twig
@@ -36,7 +36,7 @@
                 </div>
             {% endset %}
 
-            {{ macro.panel_row('category', title, subtitle, content, image) }}
+            {{ macro.box_category_course('category', title, subtitle, content, image) }}
 
         {% endif %}
     </div>
diff --git a/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig b/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig
index 068f1109b4..7e8d15d48f 100644
--- a/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig
+++ b/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig
@@ -95,7 +95,7 @@
         <!-- MAIN CONTENT -->
         {% autoescape false %}
         <main class='main-content bg-content'>
-            <div class="container box-body">
+            <div class="container-fluid box-body">
                 <div class="pt-1 pb-1">
                 {% block page_content %}
 
diff --git a/src/ThemeBundle/Resources/views/Macros/box.html.twig b/src/ThemeBundle/Resources/views/Macros/box.html.twig
index 18b8e7b9ff..4d03f3b2e8 100644
--- a/src/ThemeBundle/Resources/views/Macros/box.html.twig
+++ b/src/ThemeBundle/Resources/views/Macros/box.html.twig
@@ -214,7 +214,7 @@
     {% endautoescape %}
 {% endmacro %}
 
-{% macro panel_row(id, title, subtitle, content, image) %}
+{% macro box_category_course(id, title, subtitle, content, image) %}
     {% autoescape false %}
         <div class="card card-{{ id }} p-3 mt-3 mb-3">
             <div class="card-body pb-3">
@@ -245,3 +245,22 @@
         </div>
     {% endautoescape %}
 {% endmacro %}
+
+{% macro box_course_classic(id, title, content, image) %}
+    {% autoescape false %}
+        {% set values = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']%}
+        <div id="course-{{ id }}" class="card card-course-classic" style="border-bottom-color: {{ '#' ~ random(values)~ random(values)~ random(values)~ random(values)~ random(values)~ random(values)~'50'  }}">
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-3">
+                        {{ image }}
+                    </div>
+                    <div class="col-md-9">
+                        {{ title }}
+                        {{ content }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endautoescape %}
+{% endmacro %}
\ No newline at end of file