card animation shadow and before - refs #2681

assets/css/scss/_base.scss

@@ -261,6 +261,35 @@ footer {
 
 .card{
   border: none;
+  transform: perspective(1px) translateZ(0);
+  transition-property: box-shadow;
+  transition-duration: 0.3s;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  &:hover,
+  &:focus{
+    box-shadow: 0 18px 10px -10px rgba(0, 0, 0, 0.3);
+  }
+  &.card-line{
+    &:hover{
+      &:before{
+        transition: all .3s;
+        width: 100%;
+        left: 0;
+      }
+    }
+    &:before {
+      content: "";
+      margin: 0 auto;
+      width: 0;
+      height: 4px;
+      background: $default-link;
+      display: block;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      transition: all .3s;
+    }
+  }
   .category{
     position: absolute;
     border-radius: 10px;
@@ -280,6 +309,13 @@ footer {
         line-height: 22px;
       }
     }
+    .card-author{
+      .details{
+        .name{
+          font-size: 12px;
+        }
+      }
+    }
   }
 }
 

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

@@ -5,17 +5,15 @@
     <div class="col-md-3">
         {% if item.title %}
             {% set tools %}
-                {% if item.categoryName != '' %}
-                    <span class="category">{{ item.categoryName }}</span>
-                    <div class="cribbon"></div>
-                {% endif %}
                 <div class="user-actions">{{ item.description_button }}</div>
             {% endset %}
 
             {% set image %}
-                <div class="category">
-                    {{ item.categoryName }}
-                </div>
+                {% if item.categoryName != '' %}
+                    <div class="category">
+                        {{ item.categoryName }}
+                    </div>
+                {% endif %}
                 <a title="{{ item.title}}" href="{{ item.course_public_url }}">
                     <img src="{{ item.course_image_large }}" class="card-img-top" alt="{{ item.title }}">
                 </a>
@@ -32,28 +30,26 @@
                     {{ item.rating_html }}
                 </div>
 
-                <div class="block-author">
+                <div class="card-author d-flex flex-row bd-highlight mb-3">
                     {% for teacher in item.teachers %}
                         {% if item.teachers | length > 2 %}
                             <a href="{{ teacher.url }}" class="ajax" data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
                                 <img src="{{ teacher.avatar }}" alt="{{ 'TeacherPicture' | get_lang }}" />
                             </a>
                         {% else %}
-                            <a href="{{ teacher.url }}" class="ajax" data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
+                            <a href="{{ teacher.url }}" class="ajax p-2 bd-highlight" data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
                                 <img src="{{ teacher.avatar }}" alt="{{ 'TeacherPicture' | get_lang }}" />
                             </a>
-                            <div class="teachers-details">
-                                <h5>
-                                    <a href="{{ teacher.url }}" class="ajax" data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
+                            <div class="details p-2 bd-highlight">
+                                <a href="{{ teacher.url }}" class="ajax" data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
                                         {{ teacher.firstname }} {{ teacher.lastname }}
-                                    </a>
-                                </h5>
-                                <p>{{ 'Teacher' | get_lang }}</p>
+                                </a>
+                                <div class="name">{{ 'Teacher' | get_lang }}</div>
                             </div>
                         {% endif %}
                     {% endfor %}
                 </div>
-
+                <!--
                 <div class="toolbar row">
                     <div class="col-sm-4">
                         {#{% if item.price %}#}
@@ -62,11 +58,11 @@
                     </div>
                     <div class="col-sm-8">
                         <div class="btn-group" role="group">
-                            {{ item.register_button }}
+                            {# item.register_button #}
                             {#{{ item.unsubscribe_button }}#}
                         </div>
                     </div>
-                </div>
+                </div> -->
             {% endset %}
             {{ macro.panel('', content, '', '', '', image) }}
     {% endif %}

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

@@ -154,7 +154,7 @@
 
 {% macro panel(header, content, title, footer, subtitle, top_image) %}
     {% autoescape false %}
-        <div class="card" >
+        <div class="card card-line mt-3 mb-3">
             {% if header %}
                 <div class="card-header"> {{ header }} </div>
             {% endif %}