From dfc1dc0ec132d36e02b7c80ffa4878202e47d7b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20Arag=C3=B3n?= <aragcar@gmail.com>
Date: Tue, 2 Oct 2018 17:30:46 -0500
Subject: [PATCH] update macro panel box.html.twig - refs #2681

---
 assets/css/scss/_base.scss                    |  6 ++-
 .../user_portal/course_categories.html.twig   |  4 +-
 .../grid_courses_without_category.html.twig   |  2 +-
 .../default/layout/hot_course_item.html.twig  |  2 +-
 .../Resources/views/Macros/box.html.twig      | 42 ++++++++++++++++---
 5 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/assets/css/scss/_base.scss b/assets/css/scss/_base.scss
index ca2927fe07..066d24d307 100644
--- a/assets/css/scss/_base.scss
+++ b/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{
diff --git a/main/template/default/user_portal/course_categories.html.twig b/main/template/default/user_portal/course_categories.html.twig
index 724fd7de20..bc3ffbd762 100644
--- a/main/template/default/user_portal/course_categories.html.twig
+++ b/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>
diff --git a/main/template/default/user_portal/grid_courses_without_category.html.twig b/main/template/default/user_portal/grid_courses_without_category.html.twig
index 95dd7053c9..53bb6c499b 100644
--- a/main/template/default/user_portal/grid_courses_without_category.html.twig
+++ b/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 %}
diff --git a/src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig b/src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig
index 0c63010828..a8773fe7ac 100644
--- a/src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig
+++ b/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 %}
diff --git a/src/ThemeBundle/Resources/views/Macros/box.html.twig b/src/ThemeBundle/Resources/views/Macros/box.html.twig
index 1c8af67390..0950a63dc0 100644
--- a/src/ThemeBundle/Resources/views/Macros/box.html.twig
+++ b/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">