Merge pull request #253 from pateljannat/courses-enrolled-template-empty-state

school/lms/web_template/courses_enrolled/courses_enrolled.html

@@ -13,15 +13,18 @@
     </div>
   </div>
   {% else %}
-  <div class="common-card-style thread-card">
+  {% set site_name = frappe.db.get_single_value("System Settings", "app_name") %}
-    <div class="w-25 text-center" style="margin: 0 auto;">
+  <div class="empty-state">
-      <span class="font-weight-bold"> No Enrolled Courses </span>
+    <div class="course-home-headings text-center mb-0" style="color: inherit;">You haven't enrolled for any courses</div>
-      <div class="small">
+    <p class="text-center mb-8">Here are a few courses we recommend for you to get started with {{ site_name }}</p>
-        You have not enrolled in any course yet.
+    {% set recommended_courses = [course1, course2, course3] %}
-      </div>
+    <div class="cards-parent">
-      <a class="button is-primary ml-auto mr-auto mt-3" href="/courses">
+    {% for recommended_course in recommended_courses %}
-        Explore Courses
+    {% if recommended_course %}
-      </a>
+    {% set course_details = frappe.get_doc("LMS Course", recommended_course) %}
+    {{ widgets.CourseCard(course=course_details) }}
+    {% endif %}
+    {% endfor %}
     </div>
   </div>
   {% endif %}

school/lms/web_template/courses_enrolled/courses_enrolled.json

@@ -3,9 +3,41 @@
  "creation": "2021-10-21 11:29:50.424865",
  "docstatus": 0,
  "doctype": "Web Template",
- "fields": [],
+ "fields": [
+  {
+   "__unsaved": 1,
+   "fieldname": "recommended_courses",
+   "fieldtype": "Section Break",
+   "label": "Recommended Courses for new users",
+   "reqd": 0
+  },
+  {
+   "__unsaved": 1,
+   "fieldname": "course1",
+   "fieldtype": "Link",
+   "label": "Course 1",
+   "options": "LMS Course",
+   "reqd": 1
+  },
+  {
+   "__unsaved": 1,
+   "fieldname": "course2",
+   "fieldtype": "Link",
+   "label": "Course 2",
+   "options": "LMS Course",
+   "reqd": 1
+  },
+  {
+   "__unsaved": 1,
+   "fieldname": "course3",
+   "fieldtype": "Link",
+   "label": "Course 3",
+   "options": "LMS Course",
+   "reqd": 1
+  }
+ ],
  "idx": 0,
- "modified": "2021-10-21 12:02:23.837501",
+ "modified": "2021-10-28 19:36:11.372396",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "Courses Enrolled",

school/public/css/style.css

@@ -214,8 +214,7 @@ input[type=checkbox] {
   margin-bottom: 1.5rem;
   color: var(--text-color);
   font-weight: 600;
-  font-size: 22px;
+  font-size: var(--text-3xl);
-  line-height: 145%;
   letter-spacing: -0.0175em
 }
 
@@ -737,8 +736,7 @@ input[type=checkbox] {
 
 .course-home-headings {
   font-weight: 600;
-  font-size: 22px;
+  font-size: var(--text-3xl);
-  line-height: 146%;
   letter-spacing: -0.0175em;
   color: #192734;
   margin-bottom: 1rem;
@@ -1370,3 +1368,11 @@ pre {
   flex-direction: column;
   padding: 1rem;
 }
+
+.empty-state {
+  background: #EBEEF0;
+  border: 1px dashed #C8CFD5;
+  box-sizing: border-box;
+  border-radius: 8px;
+  padding: 2.5rem;
+}