Merge pull request #331 from pateljannat/cleanup

fix: UI Cleanup

lms/lms/doctype/course_lesson/course_lesson.json

@@ -24,6 +24,7 @@
    "fieldname": "chapter",
    "fieldtype": "Link",
    "in_list_view": 1,
+   "in_standard_filter": 1,
    "label": "Course Chapter",
    "options": "Course Chapter",
    "reqd": 1
@@ -75,6 +76,8 @@
    "fetch_from": "chapter.course",
    "fieldname": "course",
    "fieldtype": "Link",
+   "in_list_view": 1,
+   "in_standard_filter": 1,
    "label": "Course",
    "options": "LMS Course",
    "read_only": 1
@@ -82,7 +85,7 @@
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2022-04-22 12:59:23.641915",
+ "modified": "2022-05-02 17:16:12.450460",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "Course Lesson",

lms/lms/doctype/lms_course/lms_course.json

@@ -34,10 +34,11 @@
   "related_courses",
   "certification_section",
   "enable_certification",
+  "expiry",
+  "section_break_23",
   "grant_certificate_after",
   "evaluator",
-  "column_break_22",
-  "expiry",
+  "column_break_26",
   "max_attempts",
   "duration",
   "pricing_section",
@@ -177,10 +178,6 @@
    "fieldtype": "Check",
    "label": "Paid Certificate"
   },
-  {
-   "fieldname": "column_break_22",
-   "fieldtype": "Column Break"
-  },
   {
    "depends_on": "enable_certification",
    "fieldname": "grant_certificate_after",
@@ -228,6 +225,14 @@
    "fieldtype": "Select",
    "label": "Duration for Attempts",
    "options": "1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12"
+  },
+  {
+   "fieldname": "section_break_23",
+   "fieldtype": "Section Break"
+  },
+  {
+   "fieldname": "column_break_26",
+   "fieldtype": "Column Break"
   }
  ],
  "is_published_field": "published",
@@ -253,7 +258,7 @@
    "link_fieldname": "course"
   }
  ],
- "modified": "2022-04-28 16:15:10.047183",
+ "modified": "2022-05-04 11:03:24.001015",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Course",

lms/lms/widgets/CourseOutline.html

@@ -30,7 +30,7 @@
           <a class="lesson-links" href="{{ get_lesson_url(course.name, lesson.number) }}{{course.query_parameter}}"
             data-course="{{ course.name }}">
             <svg class="icon icon-md mr-2">
-              <use class="" href="#{{ lesson.icon }}{% if active %}-blue{% endif %}">
+              <use class="" href="#{{ lesson.icon }}">
             </svg>
             {{ lesson.title }}
 
@@ -148,8 +148,6 @@ const expand_the_active_chapter = () => {
     })
 
     selector.addClass("active-lesson");
-    let href = selector.find("use").attr("href");
-    !href.endsWith("blue") && selector.find("use").attr("href", `${href}-blue`);
 
     show_section(selector.parent().parent());
   }

lms/public/css/style.css

@@ -275,11 +275,7 @@ input[type=checkbox] {
 }
 
 .course-card-wide {
-  background-color: white;
-  padding: 0 1.25rem 1.25rem;
-  border-radius: var(--border-radius);
   width: 50%;
-  box-shadow: var(--shadow-base);
   font-size: var(--text-base);
 }
 
@@ -393,7 +389,7 @@ input[type=checkbox] {
 }
 
 .course-content-parent .chapter-description {
-  font-size: 0.7rem;
+  font-size: 0.75rem;
 }
 
 .chapter-icon {
@@ -611,7 +607,7 @@ input[type=checkbox] {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: 24px 0px 0px;
+  margin: 2rem 0 4rem;
 }
 
 .lesson-pagination-parent {
@@ -629,9 +625,8 @@ input[type=checkbox] {
 }
 
 .active-lesson {
-  background-color: var(--blue-100);
+  background-color: var(--gray-200);
   border-radius: var(--border-radius-md);
-  color: var(--blue-500);
 }
 
 .lesson-title {
@@ -854,7 +849,7 @@ pre {
 
 .certificate-price {
     font-weight: bold;
-    margin-bottom: 0.5rem;
+    margin-bottom: 1rem;
 }
 
 .certificate-ribbon {
@@ -1119,7 +1114,7 @@ pre {
 
 .job-card {
   display: flex;
-  position: relative;
+  align-items: center;
 }
 
 .company-logo {
@@ -1158,10 +1153,12 @@ pre {
 .job-card-heading {
   font-weight: 600;
   color: var(--gray-900);
+  margin-bottom: 0.4rem;
 }
 
 .course-head-container {
   color: var(--gray-900);
+  background-color: var(--gray-200);
 }
 
 .seperator {
@@ -1178,8 +1175,8 @@ pre {
   box-shadow: var(--shadow-sm);
   overflow: auto;
   width: fit-content;
-  position: fixed;
-  top: 50%;
+  position: absolute;
+  top: 10%;
   right: 7%;
   max-width: 400px;
   z-index: 4;
@@ -1196,10 +1193,6 @@ pre {
   }
 }
 
-.video-in-overlay {
-  top: 40%;
-}
-
 .course-overlay-content {
   padding: 1.25rem;
   font-size: var(--text-base);

lms/www/courses/course.html

@@ -27,12 +27,7 @@
 {% endblock %}
 
 {% macro CourseHomeHeader(course) %}
-<div class="course-head-container"
-  style=" {% if course.image %}
-  background-position: center;
-  background-size: cover;
-  background-image:  url({{ course.image }});
-  {% else %} background-color: var(--gray-200) {% endif %}">
+<div class="course-head-container">
   <div class="container pt-5 pb-5">
     <div class="course-card-wide" style="">
       {{ BreadCrumb(course) }}
@@ -92,7 +87,7 @@
 {% endmacro%}
 
 {% macro CourseHeaderOverlay(course) %}
-<div class="course-overlay-card {% if course.video_link %} video-in-overlay {% endif %}">
+<div class="course-overlay-card">
 
   {% if course.video_link %}
   <iframe class="preview-video" src="{{ course.video_link }}"></iframe>
@@ -201,19 +196,18 @@
     {{ _("Continue Learning") }} <img class="ml-2" src="/assets/lms/icons/white-arrow.svg" />
     </a>
     {% endif %}
-
     {% set progress = frappe.utils.cint(membership.progress) %}
     {% if membership and course.enable_certification %}
     {% if certificate %}
-    <a class="button wide-button is-secondary mt-2" href="/courses/{{ course.name }}/{{ certificate }}">
+    <a class="button wide-button is-secondary mt-3" href="/courses/{{ course.name }}/{{ certificate }}">
       {{ _("Get Certificate") }}
     </a>
-    {% elif eligible %}
-    <a class="button wide-button is-secondary mt-2" id="apply-certificate" data-course="{{ course.name }}">
+    {% elif eligible_for_evaluation %}
+    <a class="button wide-button is-secondary mt-3" id="apply-certificate" data-course="{{ course.name }}">
         {{ _("Apply for Certificate") }}
       </a>
     {% elif course.grant_certificate_after == "Completion" and progress == 100 %}
-    <div class="button wide-button is-secondary mt-4" id="certification" data-course="{{ course.name }}">
+    <div class="button wide-button is-secondary mt-3" id="certification" data-course="{{ course.name }}">
       {{ _("Get Certificate") }}
     </div>
     {% endif %}

lms/www/courses/course.js

@@ -50,12 +50,6 @@ frappe.ready(() => {
         select_slot(e);
     });
 
-    $(document).scroll(function() {
-        let timer;
-        clearTimeout(timer);
-        timer = setTimeout(() => { handle_overlay_display.apply(this, arguments); }, 500);
-    });
-
 });
 
 var hide_wrapped_mentor_cards = () => {
@@ -127,8 +121,8 @@ var submit_review = (e) => {
   e.preventDefault();
   var rating = $(".rating-field").children(".star-click").length;
   var review = $(".review-field").val();
-  if (!review || !rating) {
-    $(".error-field").text("Both Rating and Review are required.");
+  if (!rating) {
+    $(".error-field").text("Please provide a rating.");
     return;
   }
   frappe.call({
@@ -166,24 +160,6 @@ const element_not_in_viewport = (el) => {
   return rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight;
 };
 
-const handle_overlay_display = () => {
-  const element = $(".related-courses").length && $(".related-courses")[0];
-  if (element && element_not_in_viewport(element)) {
-    $(".course-overlay-card").css({
-      "position": "fixed",
-      "top": "30%",
-      "bottom": "inherit"
-    });
-  }
-  else if (element && !element_not_in_viewport(element)) {
-    $(".course-overlay-card").css({
-        "position": "absolute",
-        "top": "inherit",
-        "bottom": "5%"
-      });
-  }
-};
-
 const submit_for_review = (e) => {
   let course = $(e.currentTarget).data("course");
   frappe.call({

lms/www/jobs/index.html

@@ -26,7 +26,7 @@
         <div class="job-card-info">
           <div class="job-card-heading">{{ _(job.job_title) }}</div>
           <div class="vertically-center course-meta">
-            <div class="mr-3">{{ job.company_name }}</div>
+            <div class="mr-5">{{ job.company_name }}</div>
             <div class="vertically-center">
               <svg class="icon icon-sm">
                 <use class="" href="#icon-location">
@@ -38,7 +38,7 @@
 
         <div class="job-card-logo-section course-meta">
           <div class="indicator-pill green ml-3"> {{ job.type }} </div>
-          <div class="">{{ frappe.utils.format_date(job.creation, "medium") }}</div>
+          <div class="mt-2 text-muted">{{ frappe.utils.format_date(job.creation, "medium") }}</div>
         </div>
         <a class="stretched-link" href="/jobs/{{ job.name }}"></a>
       </div>

lms/www/jobs/job.html

@@ -22,7 +22,7 @@
               <div class="course-home-headings mb-0">{{ _(job.job_title) }}</div>
               <div class="indicator-pill green ml-5"> {{ job.type }} </div>
             </div>
-            <div class="d-flex align-items-center mb-2">
+            <div class="d-flex align-items-center mt-2">
               <a class="dark-links course-meta mr-5" href="{{ job.company_website }}">{{ job.company_name }}</a>
               <div class="vertically-center course-meta mr-5">
                 <svg class="icon icon-sm">