Merge branch 'master' of github.com:chamilo/chamilo-lms

assets/css/scss/_base.scss

@@ -264,12 +264,12 @@ footer {
   transform: perspective(1px) translateZ(0);
   transition-property: box-shadow;
   transition-duration: 0.3s;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.15);
   &:hover,
   &:focus{
-    box-shadow: 0 18px 10px -10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.20);
   }
-  &.card-line{
+  /*&.card-line{
     &:hover{
       &:before{
         transition: all .3s;
@@ -289,7 +289,7 @@ footer {
       left: 0;
       transition: all .3s;
     }
-  }
+  }*/
   .category{
     position: absolute;
     border-radius: 10px;

main/template/default/user_portal/course_categories.html.twig

@@ -1,25 +1,45 @@
-<p class="lead">{{ 'MyCoursePageCategoryIntroduction'|get_lang }}</p>
-<ul class="media-list">
+{% import "ChamiloThemeBundle:Macros:box.html.twig" as macro %}
+
+<h2>{{ 'CourseCategory'|get_lang }}</h2>
+<p>{{ 'MyCoursePageCategoryIntroduction'|get_lang }}</p>
+{% autoescape false %}
+<div class="row">
     {% for category in course_categories %}
+    <div class="col-sm-12">
         {% if category %}
-            <li class="media">
-                <div class="media-left">
-                    <a href="{{ _p.web_self ~ '?' ~ {'category':category.code}|url_encode }}">
-                        <img src="{{ category.image ? _p.web_upload ~ category.image : 'session_default.png'|icon(128) }}"
-                             alt="{{ category.name }}" width="200" class="media-object">
+
+            {% set image %}
+                <a href="{{ _p.web_self ~ '?' ~ {'category':category.code}|url_encode }}">
+                    <img src="{{ category.image ? _p.web_upload ~ category.image : 'session_default.png'|icon(128) }}"
+                         alt="{{ category.name }}" class="img-fluid">
+                </a>
+            {% endset %}
+
+            {% set title %}
+                <a href="{{ _p.web_self ~ '?' ~ {'category':category.code}|url_encode }}">
+                    {{ category.name }}
+                </a>
+            {% endset %}
+
+            {% set subtitle %}
+                {{ category.code }}
+            {% endset %}
+
+            {% set content %}
+                {% if category.description %}
+                    {{ category.description }}
+                {% endif %}
+                <div class="float-right">
+                    <a href="{{ _p.web_self ~ '?' ~ {'category':category.code}|url_encode }}" class="btn btn-outline-primary btn-sm">
+                        {{ 'View'|get_lang }}
                     </a>
                 </div>
-                <div class="media-body">
-                    <h4 class="media-heading">{{ category.name }}</h4>
-                    <p>{{ category.code }}</p>
-                    {% if category.description %}
-                        <p>{{ category.description }}</p>
-                    {% endif %}
-                    <a href="{{ _p.web_self ~ '?' ~ {'category':category.code}|url_encode }}" class="btn btn-default">
-                        {{ 'View'|get_lang }} <span class="fa fa-arrow-right" aria-hidden="true"></span>
-                    </a>
-                </div>
-            </li>
+            {% endset %}
+
+            {{ macro.rowpanel('category', title, subtitle, content, image) }}
+
         {% endif %}
+    </div>
     {% endfor %}
-</ul>
+</div>
+{% endautoescape %}

main/template/default/user_portal/grid_courses_without_category.html.twig

@@ -4,7 +4,7 @@
     <div class="course-columns">
         <div class="row">
         {% for item in courses %}
-            <div class="col-sm">
+            <div class="col-sm-3 col-md-3">
             {% if item.title %}
                 {% set image %}
                     {% if item.category != '' %}

src/ThemeBundle/Resources/views/Macros/box.html.twig

@@ -179,4 +179,33 @@
             {% endif %}
         </div>
     {% endautoescape %}
-{% endmacro %}
+{% endmacro %}
+
+{% macro rowpanel(id, title, subtitle, content, image) %}
+    {% autoescape false %}
+        <div class="card card-line card-{{ id }} mt-3 mb-3">
+            <div class="card-body pb-3">
+                <div class="row">
+                    <div class="col-sm-3">
+                        {% if image %}
+                            {{ image }}
+                        {% endif %}
+                    </div>
+                    <div class="col-sm-9">
+                        {% if title %}
+                            <h5 class="card-title">{{ title }}</h5>
+                        {% endif %}
+                        {% if subtitle %}
+                            <p class="card-subtitle mb-2 text-muted">{{ subtitle }}</p>
+                        {% endif %}
+                        {% if content %}
+                            <div class="description">
+                                {{ content }}
+                            </div>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    {% endautoescape %}
+{% endmacro %}