fix: new design for testimonial cards

lms/lms/web_template/course_cards/course_cards.html

@@ -1,6 +1,6 @@
 <div>
     {% include "public/icons/symbol-defs.svg" %}
-    <h2 class="section-title">{{ _(title) }}</h2>
+    <h3 class="section-title">{{ _(title) }}</h3>
     {% if subtitle %}
     <p> {{ _(subtitle) }} </p>
     {% endif %}

lms/lms/web_template/multiple_testimonials/multiple_testimonials.html

@@ -11,25 +11,40 @@
         {% for testimonial_row in testimonials_table %}
         {% set review = frappe.db.get_value("LMS Course Review", testimonial_row.testimonials, ["owner", "review"], as_dict=True) %}
         {% set member = frappe.db.get_value("User", review.owner, ["name", "username", "full_name", "user_image", "headline"], as_dict=True) %}
-        <div class="testimonial carousel-item {% if loop.index == 1 %} active {% endif %} ">
-            <div class="common-card-style p-10" style="width: 70%; margin: 0 auto;">
-                {{ widgets.Avatar(member=member, avatar_class="avatar-large") }}
-                <div class="ml-10">
-                    <div class="">“{{ review.review }}”</div>
-                    <div class="mt-2">
-                        - {{ member.full_name }}
-                    </div>
-                </div>
+        {% if loop.index % 3 == 1 %}
+        <div class="carousel-item {% if loop.index == 1 %} active {% endif %}"> <div class="cards-parent">
+        {% endif %}
+        <div class="common-card-style testimonial-card">
+            <svg class="icon icon-xl">
+                <use href="#icon-quote"></use>
+            </svg>
+            <div class="testimonial-review">
+                {{ review.review }}
             </div>
+            <div class="testimonial-footer">
+                <div>
+                  {{ widgets.Avatar(member=member, avatar_class="avatar-medium") }}
+                </div>
+                <div class="ml-3">
+                  <div class="testimonial-author-name" >{{ member.full_name }}</div>
+                  {% if member.headline %}<div class="testimonial-profession">{{ member.headline }}</div> {% endif %}
+                </div>
+              </div>
         </div>
+        {% if loop.index % 3 == 0 or loop.index == testimonials_table | length %} </div> </div> {% endif %}
         {% endfor %}
+        </div>
+
+        {% if testimonials_table | length > 3 %}
+            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="sr-only">Previous</span>
+              </a>
+              <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="sr-only">Next</span>
+              </a>
+        {% endif %}
     </div>
-    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
-      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-      <span class="sr-only">Previous</span>
-    </a>
-    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
-      <span class="carousel-control-next-icon" aria-hidden="true"></span>
-      <span class="sr-only">Next</span>
-    </a>
+
 </div>

lms/public/css/style.css

@@ -945,8 +945,7 @@ pre {
 
 .testimonial-card {
   flex-direction: column;
-  justify-content: space-between;
-  padding: 1rem;
+  padding: 2rem;
   height: 100%;
 }
 
@@ -961,6 +960,14 @@ pre {
   margin-bottom: 2rem;
 }
 
+.testimonial-footer {
+    display: flex;
+    align-items: center;
+    border-top: 1px solid var(--gray-200);
+    padding-top: 2rem;
+    margin-top: auto;
+}
+
 .testimonial-profession {
   font-size: 0.625rem;
 }
@@ -986,7 +993,7 @@ pre {
 
 .carousel-control-prev, .carousel-control-next {
   width: auto;
-  top: 30%;
+  top: 40%;
   height: fit-content;
   background: white;
   border-radius: 50%;

lms/public/icons/symbol-defs.svg

@@ -60,4 +60,8 @@
         <circle cx="12" cy="8" r="7"></circle>
         <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline>
     </svg>
+    <svg width="40" height="40" id="icon-quote" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M27.8837 15.1677V15.6677H28.3837H34.6997V29.4519H22.3877V13.7919C22.3877 7.77141 27.1738 2.82244 33.1317 2.55889V8.06527C30.1784 8.31947 27.8837 10.8044 27.8837 13.7919V15.1677Z" stroke="#1F272E"/>
+        <path d="M10.7958 15.1677V15.6677H11.2958H17.6118V29.4517L5.2998 29.4518V13.7919C5.2998 7.77141 10.0859 2.82244 16.0438 2.55889V8.06527C13.0905 8.31947 10.7958 10.8044 10.7958 13.7919V15.1677Z" stroke="#1F272E"/>
+    </svg>
 </svg>