update macro panel box.html.twig - refs #2681

assets/css/scss/_base.scss

@@ -260,7 +260,6 @@ footer {
 }
 
 .card{
-  border: none;
   transform: perspective(1px) translateZ(0);
   transition-property: box-shadow;
   transition-duration: 0.3s;
@@ -269,6 +268,11 @@ footer {
   &:focus{
     box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.20);
   }
+  &.card-category{
+    .card-subtitle{
+      font-size: 12px;
+    }
+  }
   /*&.card-line{
     &:hover{
       &:before{

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

@@ -11,7 +11,7 @@
             {% 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">
+                         alt="{{ category.name }}" class="img-fluid mb-1">
                 </a>
             {% endset %}
 
@@ -36,7 +36,7 @@
                 </div>
             {% endset %}
 
-            {{ macro.rowpanel('category', title, subtitle, content, image) }}
+            {{ macro.panel_row('category', title, subtitle, content, image) }}
 
         {% endif %}
     </div>

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

@@ -65,7 +65,7 @@
                         <div class="notifications">{{ item.notifications }}</div>
                     {% endif %}
                 {% endset %}
-                {{ macro.panel('', content, '', '', '', image) }}
+                {{ macro.panel_course('course', '', content, '', '', '', image) }}
             {% endif %}
             </div>
         {% endfor %}

src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig

@@ -67,7 +67,7 @@
                     </div>
                 </div> -->
             {% endset %}
-            {{ macro.panel('', content, '', '', '', image) }}
+            {{ macro.panel_course('course', '', content, '', '', '', image) }}
     {% endif %}
     </div>
 {% endfor %}

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

@@ -154,14 +154,43 @@
 
 {% macro panel(header, content, title, footer, subtitle, top_image) %}
     {% autoescape false %}
-        <div class="card card-line mt-3 mb-3">
+        <div class="card mt-3 mb-3">
             {% if header %}
                 <div class="card-header"> {{ header }} </div>
             {% endif %}
             {% if top_image %}
                 {{ top_image }}
             {% endif %}
-            <div class="card-body pb-3">
+            <div class="card-body p-3">
+                {% if title %}
+                    <h5 class="card-title">{{ title }}</h5>
+                {% endif %}
+                {% if subtitle %}
+                    <h5 class="card-subtitle mb-2 text-muted">{{ subtitle }}</h5>
+                {% endif %}
+
+                {{ content }}
+
+            </div>
+            {% if footer %}
+                <div class="card-footer">
+                    {{ footer }}
+                </div>
+            {% endif %}
+        </div>
+    {% endautoescape %}
+{% endmacro %}
+
+{% macro panel_course(id, header, content, title, footer, subtitle, top_image) %}
+    {% autoescape false %}
+        <div class="card card-{{ id }} mt-3 mb-3">
+            {% if header %}
+                <div class="card-header"> {{ header }} </div>
+            {% endif %}
+            {% if top_image %}
+                {{ top_image }}
+            {% endif %}
+            <div class="card-body p-3">
                 {% if title %}
                     <h5 class="card-title">{{ title }}</h5>
                 {% endif %}
@@ -181,9 +210,9 @@
     {% endautoescape %}
 {% endmacro %}
 
-{% macro rowpanel(id, title, subtitle, content, image) %}
+{% macro panel_row(id, title, subtitle, content, image) %}
     {% autoescape false %}
-        <div class="card card-line card-{{ id }} mt-3 mb-3">
+        <div class="card card-{{ id }} p-3 mt-3 mb-3">
             <div class="card-body pb-3">
                 <div class="row">
                     <div class="col-sm-3">
@@ -196,7 +225,10 @@
                             <h5 class="card-title">{{ title }}</h5>
                         {% endif %}
                         {% if subtitle %}
-                            <p class="card-subtitle mb-2 text-muted">{{ subtitle }}</p>
+                            <p class="card-subtitle mb-2 text-muted">
+                                <strong>{{ 'Code'|get_lang }} :</strong>
+                                {{ subtitle }}
+                            </p>
                         {% endif %}
                         {% if content %}
                             <div class="description">