From 125b8d61d9dfbc82303c64d3909ca127822f7bdb Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Mon, 1 Nov 2021 13:33:42 +0530
Subject: [PATCH] style: course cards, card dividers, breadcrumbs

---
 school/lms/widgets/CourseCard.html | 16 ++++++++--------
 school/public/css/style.css        | 12 ++++++++----
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/school/lms/widgets/CourseCard.html b/school/lms/widgets/CourseCard.html
index 9ef7e1ac..669afd0c 100644
--- a/school/lms/widgets/CourseCard.html
+++ b/school/lms/widgets/CourseCard.html
@@ -51,13 +51,13 @@
     </span>
     <span class="course-student-count">
       {% if course.get_students() | length %}
-      <span class="mr-4">
+      <span class="vertically-center  mr-4">
         <img class="icon-background" src="/assets/school/icons/user.svg" />
         {{ course.get_students() | length }}
       </span> {% endif %}
       {% set avg_rating = course.get_average_rating() %}
       {% if avg_rating %}
-      <span class="">
+      <span class="vertically-center ">
         <img class="icon-background" src="/assets/school/icons/rating.svg" />
         {{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }}
       </span>
@@ -77,36 +77,36 @@
 
   {% if certificate %}
   <div class="view-course-link is-default">
-    _("Get Certificate") <img class="ml-3" src="/assets/school/icons/black-arrow.svg" />
+    _("Get Certificate") <img class="ml-1" src="/assets/school/icons/black-arrow.svg" />
   </div>
   <a class="stretched-link" href="/courses/{{ course.name }}/{{ certificate }}"></a>
 
   {% elif course.enable_certification and progress == 100 %}
   <div class="view-course-link is-default" id="certification" data-course="{{ course.name }}">
-    {{ _("Get Certificate") }} <img class="ml-3" src="/assets/school/icons/black-arrow.svg" />
+    {{ _("Get Certificate") }} <img class="ml-1" src="/assets/school/icons/black-arrow.svg" />
   </div>
 
   {% elif progress == 100 %}
   <div class="view-course-link is-default">
-    {{ _("Course Completed") }} <img class="ml-3" src="/assets/school/icons/black-arrow.svg" />
+    {{ _("Course Completed") }} <img class="ml-1" src="/assets/school/icons/black-arrow.svg" />
   </div>
   <a class="stretched-link" href="/courses/{{ course.name }}"></a>
 
   {% elif course.upcoming %}
   <div class="view-course-link is-secondary border">
-    {{ _("Upcoming Course") }} <img class="ml-3" src="/assets/school/icons/black-arrow.svg" />
+    {{ _("Upcoming Course") }} <img class="ml-1" src="/assets/school/icons/black-arrow.svg" />
   </div>
   <a class="stretched-link" href="/courses/{{ course.name }}"></a>
 
   {% elif membership %}
   <div class="view-course-link is-primary">
-    {{ _("Continue Course") }} <img class="ml-3" src="/assets/school/icons/white-arrow.svg" />
+    {{ _("Continue Course") }} <img class="ml-1" src="/assets/school/icons/white-arrow.svg" />
   </div>
   <a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
 
   {% else %}
   <div class="view-course-link is-default">
-    {{ _("View Course") }} <img class="ml-3" src="/assets/school/icons/black-arrow.svg" />
+    {{ _("View Course") }} <img class="ml-1" src="/assets/school/icons/black-arrow.svg" />
   </div>
   <a class="stretched-link" href="/courses/{{ course.name }}"></a>
 
diff --git a/school/public/css/style.css b/school/public/css/style.css
index 3c78f8cc..a63db3b7 100644
--- a/school/public/css/style.css
+++ b/school/public/css/style.css
@@ -151,12 +151,12 @@ input[type=checkbox] {
 }
 
 .card-divider {
-  border: 1px solid #EEF0F2;
+  border-top: 1px solid #EEF0F2;
   margin-bottom: 1rem;
 }
 
 .card-divider-dark {
-  border: 1px solid #C8CFD5;
+  border-top: 1px solid #C8CFD5;
   margin-bottom: 16px;
 }
 
@@ -168,8 +168,8 @@ input[type=checkbox] {
 }
 
 .course-student-count {
+  display: flex;
   font-size: 12px;
-  line-height: 135%;
   float: right;
 }
 
@@ -907,7 +907,6 @@ input[type=checkbox] {
 }
 
 .breadcrumb {
-  padding: 0 1rem;
   display: flex;
   align-items: center;
   font-size: 12px;
@@ -1376,3 +1375,8 @@ pre {
   border-radius: 8px;
   padding: 2.5rem;
 }
+
+.vertically-center {
+  display: flex;
+  align-items: center;
+}