Merge pull request #348 from pateljannat/web-templates

fix: web template ui

lms/lms/web_template/course_cards/course_cards.html

@@ -1,6 +1,9 @@
 <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 %}
     <div class="cards-parent mt-10">
         {% for course_row in courses %}
         {% set course = frappe.db.get_value("LMS Course", course_row.course,

lms/lms/web_template/course_cards/course_cards.json

@@ -5,21 +5,25 @@
  "doctype": "Web Template",
  "fields": [
   {
-   "__unsaved": 1,
    "fieldname": "title",
    "fieldtype": "Data",
    "label": "Title",
-   "reqd": 0
+   "reqd": 1
   },
   {
    "__unsaved": 1,
+   "fieldname": "subtitle",
+   "fieldtype": "Small Text",
+   "label": "Subtitle",
+   "reqd": 0
+  },
+  {
    "fieldname": "courses",
    "fieldtype": "Table Break",
    "label": "Courses",
    "reqd": 0
   },
   {
-   "__unsaved": 1,
    "fieldname": "course",
    "fieldtype": "Link",
    "label": "Course",
@@ -27,8 +31,8 @@
    "reqd": 0
   }
  ],
- "idx": 0,
+ "idx": 2,
- "modified": "2021-08-26 10:35:35.903834",
+ "modified": "2022-06-28 17:15:55.981008",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "Course Cards",

lms/lms/web_template/multiple_testimonials/multiple_testimonials.html

@@ -1,27 +1,50 @@
-<h3 class="section-title text-center mb-10">{{ _(title) }}</h3>
+<div class="text-center mb-10">
-<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="5000">
+    <h3 class="section-title">{{ _(title) }}</h3>
+    {% if subtitle %}
+    <p class="section-subtitle"> {{ _(subtitle) }} </p>
+    {% endif %}
+</div>
+<!-- data-ride="carousel" data-interval="5000" -->
+<div id="carouselExampleControls" class="carousel slide">
     <div class="carousel-inner">
 
         {% 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 %} ">
+        {% if loop.index % 3 == 1 %}
-            {{ widgets.Avatar(member=member, avatar_class="avatar-large") }}
+        <div class="carousel-item {% if loop.index == 1 %} active {% endif %}"> <div class="cards-parent">
-            <div class="testimonial-content">
+        {% endif %}
-                “{{ review.review }}”
+        <div class="common-card-style testimonial-card">
-            </div>
+            <svg class="icon icon-xl">
-            <div class="testimonial-by">
+                <use href="#icon-quote"></use>
-                {{ member.full_name }}
+            </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/lms/web_template/multiple_testimonials/multiple_testimonials.json

@@ -8,6 +8,12 @@
    "fieldname": "title",
    "fieldtype": "Data",
    "label": "Title",
+   "reqd": 1
+  },
+  {
+   "fieldname": "subtitle",
+   "fieldtype": "Small Text",
+   "label": "Subtitle",
    "reqd": 0
   },
   {
@@ -25,7 +31,7 @@
   }
  ],
  "idx": 1,
- "modified": "2022-03-21 11:52:27.728610",
+ "modified": "2022-06-28 17:16:39.614879",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "Multiple Testimonials",

lms/public/css/style.css

@@ -945,8 +945,7 @@ pre {
 
 .testimonial-card {
   flex-direction: column;
-  justify-content: space-between;
+  padding: 2rem;
-  padding: 1rem;
   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>