fix: course banner spaces

lms/public/css/style.css

@@ -305,6 +305,7 @@ input[type=checkbox] {
   font-size: var(--text-3xl);
   line-height: 44px;
   color: var(--gray-900);
+  margin: 0.25rem 0;
 }
 
 .button {
@@ -567,7 +568,7 @@ input[type=checkbox] {
   font-size: var(--text-base);
   line-height: 20px;
   color: var(--gray-900);
-  padding: 1rem 0;
+  padding: 0;
 }
 
 .course-details-outline {
@@ -1166,10 +1167,6 @@ pre {
   margin: 0 1rem;
 }
 
-.course-head-container .progress {
-  margin-top: 1rem;
-}
-
 .course-overlay-card {
   background-color: white;
   border-radius: var(--border-radius-lg);
@@ -1271,7 +1268,7 @@ pre {
     }
 
     .vertical-divider {
-    margin: 1rem 0;
+        margin: 1rem;
     }
 }
 
@@ -1292,6 +1289,7 @@ pre {
 
 .vertical-divider {
     border: 1px solid var(--gray-300);
+    margin: 0 1rem;
 }
 
 .avg-rating-stars {
@@ -1432,3 +1430,8 @@ pre {
     float: right;
     font-size: var(--text-sm);
 }
+
+li {
+    line-height: 1.7;
+}
+

lms/www/courses/course.html

@@ -28,8 +28,8 @@
 
 {% macro CourseHomeHeader(course) %}
 <div class="course-head-container">
-  <div class="container pt-5 pb-5">
-    <div class="course-card-wide" style="">
+  <div class="container pt-10 pb-10">
+    <div class="course-card-wide">
       {{ BreadCrumb(course) }}
       {{ CourseCardWide(course) }}
     </div>
@@ -49,7 +49,7 @@
 
 {% macro CourseCardWide(course) %}
 <div class="">
-  <div class="d-flex align-items-center mt-2">
+    <div class="d-flex align-items-center mt-10">
         {% for tag in get_tags(course.name) %}
         <div class="course-card-pills">{{ tag }}</div>
         {% endfor %}
@@ -61,16 +61,7 @@
         {{ course.short_introduction }}
     </div>
 
-  {% if membership %}
-  {% set progress = frappe.utils.cint(membership.progress) %}
-  <div class="progress" title="{{ progress }}% Completed">
-    <div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
-    aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
-    </div>
-  </div>
-  {% endif %}
-
-  <div class="mt-6">
+    <div class="mt-10">
         <div class="bold-heading">Instructors:</div>
         {% for instructor in get_instructors(course.name) %}
         <div class="mt-1">
@@ -82,6 +73,18 @@
         {% endfor %}
     </div>
 
+    {% if membership %}
+    {% set progress = frappe.utils.cint(membership.progress) %}
+    <div class="mt-10">
+        <div class="progress-percent m-0">{{ progress }}% Completed</div>
+        <div class="progress" title="{{ progress }}% Completed">
+            <div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
+            aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
+            </div>
+        </div>
+    </div>
+    {% endif %}
+
 </div>
 
 {% endmacro%}