From 230fab3bb2a238dc25ad3f4740ec75dbb5e96ffa Mon Sep 17 00:00:00 2001
From: pateljannat <pateljannat2308@gmail.com>
Date: Tue, 13 Jul 2021 15:15:23 +0530
Subject: [PATCH] fix: responsive design

---
 .../lms/doctype/lms_course/lms_course.py      |   2 +
 community/lms/md.py                           |   9 +-
 community/lms/widgets/MemberCard.html         |   2 +-
 community/lms/widgets/Reviews.html            |   8 +-
 community/plugins.py                          |   2 +-
 community/public/css/style.css                | 293 +++++++++---------
 community/www/courses/course.html             |  24 +-
 community/www/courses/course.js               |   2 +-
 community/www/courses/index.html              |   2 +-
 9 files changed, 167 insertions(+), 177 deletions(-)

diff --git a/community/lms/doctype/lms_course/lms_course.py b/community/lms/doctype/lms_course/lms_course.py
index ac93ac86..73b1d5e3 100644
--- a/community/lms/doctype/lms_course/lms_course.py
+++ b/community/lms/doctype/lms_course/lms_course.py
@@ -133,6 +133,8 @@ class LMSCourse(Document):
                                     "status": "Complete"
                                 })
         precision = cint(frappe.db.get_default("float_precision")) or 3
+        if not lesson_count:
+            return 0
         return flt(((completed_lessons/lesson_count) * 100), precision)
 
     def get_batch(self, batch_name):
diff --git a/community/lms/md.py b/community/lms/md.py
index 0658ca82..73be75d9 100644
--- a/community/lms/md.py
+++ b/community/lms/md.py
@@ -93,11 +93,11 @@ class MacroInlineProcessor(InlineProcessor):
         macro = m.group(1)
         arg = m.group(2)
         html = render_macro(macro, arg)
-        html = sanitize_html(str(html))
+        html = sanitize_html(str(html), macro)
         e = etree.fromstring(html)
         return e, m.start(0), m.end(0)
 
-def sanitize_html(html):
+def sanitize_html(html, macro):
     """Sanotize the html using BeautifulSoup.
 
     The markdown processor request the correct markup and crashes on
@@ -106,4 +106,7 @@ def sanitize_html(html):
     """
     soup = BeautifulSoup(html, features="lxml")
     nodes = soup.body.children
-    return "<div>" + "\n".join(str(node) for node in nodes) + "</div>"
+    classname = ""
+    if macro == "YouTubeVideo":
+        classname = "lesson-video"
+    return "<div class='" + classname + "'>" + "\n".join(str(node) for node in nodes) + "</div>"
diff --git a/community/lms/widgets/MemberCard.html b/community/lms/widgets/MemberCard.html
index 72f8fee3..0ecc2d72 100644
--- a/community/lms/widgets/MemberCard.html
+++ b/community/lms/widgets/MemberCard.html
@@ -1,5 +1,5 @@
 <div class="common-card-style member-card {{dimension_class}} ">
-  {% set avatar_class = "avatar-large" if dimension_class == "member-card-medium" else "avatar-xl"%}
+  {% set avatar_class = "avatar-large" if not dimension_class else "avatar-xl"%}
   {{ widgets.Avatar(member=member, avatar_class=avatar_class) }}
   <div class="small-title member-card-title">
     {{ member.full_name }}
diff --git a/community/lms/widgets/Reviews.html b/community/lms/widgets/Reviews.html
index 0b365ef0..aa46d7c1 100644
--- a/community/lms/widgets/Reviews.html
+++ b/community/lms/widgets/Reviews.html
@@ -1,14 +1,14 @@
 {% if course.get_reviews() | length %}
-<div class="reviews-parent">
+<div class="reviews-parent col">
   <div class="reviews-heading">
-    <div class="course-home-headings">Review</div>
+    <div class="course-home-headings">Student Review</div>
     {% if course.is_eligible_to_review(membership) %}
     <a class="review-link" href="">
       Provide your Feedback
     </a>
     {% endif %}
   </div>
-  <div class="mentors-section">
+  <div class="reviews-section">
     {% for review in course.get_reviews() %}
     <div class="review-card">
       <div class="common-card-style review-content small-title"> {{ review.review }} </div>
@@ -77,7 +77,7 @@
         </form>
       </div>
       <div class="modal-footer">
-        <div class="button wide-button submit-review is-primary" data-course="{{ course.name | urlencode}}" id="submit-review">Submit</div>
+        <div class="button submit-review is-primary" data-course="{{ course.name | urlencode}}" id="submit-review">Submit</div>
       </div>
     </div>
   </div>
diff --git a/community/plugins.py b/community/plugins.py
index eb9b74fc..4c3066fb 100644
--- a/community/plugins.py
+++ b/community/plugins.py
@@ -98,7 +98,7 @@ def exercise_renderer(argument):
 
 def youtube_video_renderer(video_id):
     return f"""
-    <iframe width="560" height="315"
+    <iframe width="100%" height="315"
         src="https://www.youtube.com/embed/{video_id}"
         title="YouTube video player"
         frameborder="0"
diff --git a/community/public/css/style.css b/community/public/css/style.css
index 600d51aa..fe5af14c 100644
--- a/community/public/css/style.css
+++ b/community/public/css/style.css
@@ -226,24 +226,12 @@ input[type=checkbox] {
 
 .course-image {
   height: 168px;
-  width: 352px;
+  width: 100%;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
-  background-size: 352px 168px;
-}
-
-@media (max-width: 768px) {
-  .course-image {
-    width: 336px;
-  }
-}
-
-@media (max-width: 375px) {
-  .course-image {
-    width: 312px;
-    background-size: cover;
-    background-repeat: no-repeat;
-  }
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 .course-tags {
@@ -285,23 +273,7 @@ input[type=checkbox] {
 
 .course-card {
   flex-direction: column;
-  width: 352px;
   height: 380px;
-  margin: 0px 20px 32px 0px;
-}
-
-@media (max-width: 768px) {
-  .course-card {
-    margin: 0px 8px 32px 0px;
-    width: 336px;
-  }
-}
-
-@media (max-width: 375px) {
-  .course-card {
-    margin: 0px 0px 32px;
-    width: 312px;
-  }
 }
 
 .muted-text {
@@ -371,13 +343,29 @@ input[type=checkbox] {
 }
 
 .cards-parent {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  -moz-column-gap: 32px;
+  column-gap: 32px;
+  row-gap: 32px;
+  align-items: center;
+}
+
+@media (max-width: 767px) {
+  .cards-parent {
+    grid-template-columns: repeat(auto-fill, minmax(300px, 336px));
+    -moz-column-gap: 16px;
+    column-gap: 16px;
+    row-gap: 16px;
+  }
 }
 
 @media (max-width: 375px) {
   .cards-parent {
-    justify-content: center;
+    grid-template-columns: repeat(auto-fill, minmax(100%, 312px));
+    -moz-column-gap: 24px;
+    column-gap: 24px;
+    row-gap: 24px;
   }
 }
 
@@ -391,18 +379,21 @@ input[type=checkbox] {
 }
 
 .course-top-section {
-  margin: 0px 120px 0px;
+  float: none;
+  margin: 0 auto;
+  max-width: 1150px;
+  padding-bottom: 2rem;
 }
 
 @media (max-width: 768px) {
   .course-top-section {
-    margin: 0px 30px 0px;
+    max-width: 720px;
   }
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .course-top-section {
-    margin: 0px 24px 0px;
+    max-width: 342px;
   }
 }
 
@@ -421,30 +412,44 @@ input[type=checkbox] {
   margin-left: 10px;
 }
 
+.reviews-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  -moz-column-gap: 32px;
+  column-gap: 32px;
+  row-gap: 32px;
+}
+
+@media (max-width: 768px) {
+  .reviews-section {
+    -moz-column-gap: 16px;
+    column-gap: 16px;
+    row-gap: 16px;
+  }
+}
+
+@media (max-width: 600px) {
+  .reviews-section {
+    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+  }
+}
+
 .reviews-heading {
   display: flex;
   justify-content: space-between;
 }
 
+@media (max-width: 375px) {
+  .reviews-heading {
+    flex-direction: column;
+    margin-bottom: 1rem;
+  }
+}
+
 .review-card {
-  width: 352px;
-  margin: 0px 20px 32px 0px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-}
-
-@media (max-width: 768px) {
-  .review-card {
-    width: 336px;
-    margin: 0px 8px 32px 0px;
-  }
-}
-
-@media (max-width: 375px) {
-  .review-card {
-    width: 312px;
-  }
+  height: 100%;
 }
 
 .review-card-footer {
@@ -486,7 +491,7 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .course-card-wide {
-  height: 248px;
+  height: fit-content;
   display: flex;
   flex-direction: row;
   padding: 24px;
@@ -497,14 +502,12 @@ div.custom-checkbox>label>input:checked+img {
 
 @media (max-width: 768px) {
   .course-card-wide {
-    height: 535px;
     flex-direction: column;
   }
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .course-card-wide {
-    height: 572px;
     padding: 40px 24px 40px;
     border-radius: 0px;
     align-items: center;
@@ -512,55 +515,69 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .course-image-wide {
-  width: 100%;
+  width: 352px;
   height: 200px;
-  background-size: 352px 200px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   margin-right: 32px;
   border-radius: 5px;
+  flex: 1;
 }
 
 @media (max-width: 768px) {
   .course-image-wide {
-    width: 640px;
+    width: 100%;
     height: 320px;
     flex-direction: column;
-    background-size: 640px 320px;
     margin: 0px;
+    flex: none;
   }
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .course-image-wide {
-    width: 312px;
     height: 216px;
-    background-size: 312px 216px;
   }
 }
 
 .course-home-page {
-  padding: 0px 0px 80px;
-  display: flex;
-  flex-direction: column;
-  max-width: 1120px;
+  max-width: 1150px;
   margin: 0 auto;
+  padding-bottom: 2rem;
 }
 
 @media (max-width: 768px) {
   .course-home-page {
-    padding: 0px 0px 30px;
     max-width: 688px;
   }
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .course-home-page {
     width: 100%;
+    padding-left: 0px;
+    padding-right: 0px;
   }
 }
 
 .course-card-wide-content {
   display: flex;
   flex-direction: column;
+  flex: 2;
+}
+
+@media (max-width: 768px) {
+  .course-card-wide-content {
+    width: 100%;
+  }
+}
+
+@media (max-width: 600px) {
+  .course-card-wide-content {
+    width: 90%;
+    align-items: center;
+  }
 }
 
 .course-card-wide-title {
@@ -574,15 +591,13 @@ div.custom-checkbox>label>input:checked+img {
 
 @media (max-width: 768px) {
   .course-card-wide-title {
-    width: 632px;
     margin-top: 24px;
     font-size: 36px;
   }
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .course-card-wide-title {
-    width: 264px;
     margin-top: 16px;
     font-size: 28px;
   }
@@ -592,21 +607,9 @@ div.custom-checkbox>label>input:checked+img {
   font-size: 16px;
   line-height: 172%;
   letter-spacing: -0.011em;
-  width: 688px;
-  height: 80px;
   margin-bottom: 16px;
-}
-
-@media (max-width: 768px) {
-  .course-card-wide-intro {
-    width: 632px;
-  }
-}
-
-@media (max-width: 375px) {
-  .course-card-wide-intro {
-    width: 264px;
-  }
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .button {
@@ -631,7 +634,7 @@ div.custom-checkbox>label>input:checked+img {
   line-height: 150%;
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .wide-button {
     width: 264px;
   }
@@ -646,7 +649,7 @@ div.custom-checkbox>label>input:checked+img {
   color: inherit;
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .video-preview {
     margin-top: 16px;
   }
@@ -663,22 +666,9 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .course-home-outline {
-  width: 832px;
   margin-top: 3rem;
 }
 
-@media (max-width: 768px) {
-  .course-home-outline {
-    width: 424px;
-  }
-}
-
-@media (max-width: 375px) {
-  .course-home-outline {
-    width: 312px;
-  }
-}
-
 .small-title {
   letter-spacing: -0.011em;
 }
@@ -705,10 +695,10 @@ div.custom-checkbox>label>input:checked+img {
   justify-content: space-between;
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .course-outline-instructor-parent {
     flex-direction: column;
-    padding: 0px 24px 0px;
+    padding: 0px 9px 0px;
   }
 }
 
@@ -716,7 +706,7 @@ div.custom-checkbox>label>input:checked+img {
   margin-top: 3rem;
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .course-home-mentors {
     padding: 0px 24px 0px;
   }
@@ -726,7 +716,7 @@ div.custom-checkbox>label>input:checked+img {
   margin-top: 3rem;
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .reviews-parent {
     padding: 0px 24px 0px;
   }
@@ -780,7 +770,7 @@ div.custom-checkbox>label>input:checked+img {
   display: flex;
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .course-buttons {
     flex-direction: column;
   }
@@ -804,9 +794,9 @@ div.custom-checkbox>label>input:checked+img {
   }
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .member-card-large {
-    width: 312px;
+    width: 100%;
   }
 }
 
@@ -879,22 +869,9 @@ div.custom-checkbox>label>input:checked+img {
 
 .description-card {
   padding: 24px;
-  width: 832px;
   flex-direction: column;
 }
 
-@media (max-width: 768px) {
-  .description-card {
-    width: 424px;
-  }
-}
-
-@media (max-width: 375px) {
-  .description-card {
-    width: 312px;
-  }
-}
-
 .overview-card {
   padding: 8px 24px 8px;
   width: 256px;
@@ -907,15 +884,28 @@ div.custom-checkbox>label>input:checked+img {
   }
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .overview-card {
-    width: 312px;
+    padding: 8px 9px 8px;
+    width: 100%;
   }
 }
 
 .mentors-section {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  -moz-column-gap: 32px;
+  column-gap: 32px;
+  row-gap: 32px;
+}
+
+@media (max-width: 600px) {
+  .mentors-section {
+    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
+    -moz-column-gap: 24px;
+    column-gap: 24px;
+    row-gap: 24px;
+  }
 }
 
 .overtime-item {
@@ -958,6 +948,12 @@ div.custom-checkbox>label>input:checked+img {
   height: 70%;
 }
 
+@media (max-width: 600px) {
+  .review-modl .modal-dialog {
+    width: auto;
+  }
+}
+
 .error-field {
   color: red;
 }
@@ -975,7 +971,7 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .breadcrumb {
-  margin: 1rem 0.5rem 0;
+  padding: 1rem 0.5rem 0;
   display: flex;
   align-items: center;
 }
@@ -985,15 +981,9 @@ div.custom-checkbox>label>input:checked+img {
   margin-top: 16px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1025px) {
   .course-details-outline {
-    width: 688px;
-  }
-}
-
-@media (max-width: 375px) {
-  .course-details-outline {
-    width: 312px;
+    width: 100%;
   }
 }
 
@@ -1029,26 +1019,31 @@ div.custom-checkbox>label>input:checked+img {
   margin-top: 16px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1025px) {
   .lesson-pagination-parent {
-    width: 690px;
+    width: 100%;
   }
 }
 
-@media (max-width: 375px) {
-  .lesson-pagination-parent {
-    width: 312px;
-  }
+.lesson-video {
+  width: 100%;
 }
 
 .course-details-page {
   padding: 0px 0px 80px;
   display: flex;
   flex-direction: column;
-  width: 1120px;
+  max-width: 1120px;
   margin: 0 auto;
 }
 
+@media (max-width: 1025px) {
+  .course-details-page {
+    padding: 24px 0px 24px;
+    width: 80%;
+  }
+}
+
 @media (max-width: 768px) {
   .course-details-page {
     padding: 24px 0px 24px;
@@ -1056,12 +1051,6 @@ div.custom-checkbox>label>input:checked+img {
   }
 }
 
-@media (max-width: 375px) {
-  .course-details-page {
-    width: 100%;
-  }
-}
-
 .active-lesson {
   background-color: #EBF5FF;
   border-radius: 4px;
@@ -1096,10 +1085,6 @@ div.custom-checkbox>label>input:checked+img {
   }
 }
 
-.no-preview {
-  display: flex;
-}
-
 .progress-text {
   font-size: 12px;
   line-height: 165%;
diff --git a/community/www/courses/course.html b/community/www/courses/course.html
index 6ca9bad9..7b7b84f7 100644
--- a/community/www/courses/course.html
+++ b/community/www/courses/course.html
@@ -9,7 +9,7 @@
 {% endblock %}
 {% block content %}
 <div class="common-page-style">
-  <div class="course-home-page">
+  <div class="col course-home-page">
     {{ widgets.BreadCrumb(course=course) }}
     {{ CourseCardWide(course) }}
     {{ CourseOutlineAndCreator(course) }}
@@ -88,10 +88,10 @@
 
 {% macro CourseOutlineAndCreator(course) %}
 <div class="course-outline-instructor-parent">
-  <div class="course-home-outline">
+  <div class="course-home-outline col">
     {{ widgets.CourseOutline(course=course, membership=membership) }}
   </div>
-  <div class="course-creator-progress-parent">
+  <div class="course-creator-progress-parent col-sm-auto">
     <div class="course-creator-section">
       <div class="course-home-headings">
         Creator
@@ -134,14 +134,14 @@
   </div>
   <div class="mentors-section">
     {% for mentor in course.get_mentors() %}
-    {{ widgets.MemberCard(member=mentor, show_course_count=False, dimension_class="member-card-medium") }}
+    {{ widgets.MemberCard(member=mentor, show_course_count=False, dimension_class="") }}
     {% endfor %}
-    <div class="view-all-mentors">
-      <span class="card-divider-dark flex-one"></span>
-      <span class="course-instructor"><span class="all-mentors-text">View all mentors</span> <img class="mentor-icon"
-          src="/assets/community/icons/down-arrow.svg" /></span>
-      <span class="card-divider-dark flex-one"></span>
-    </div>
+  </div>
+  <div class="view-all-mentors">
+    <span class="card-divider-dark flex-one"></span>
+    <span class="course-instructor"><span class="all-mentors-text">View all mentors</span> <img class="mentor-icon"
+        src="/assets/community/icons/down-arrow.svg" /></span>
+    <span class="card-divider-dark flex-one"></span>
   </div>
 </div>
 {% endif %}
@@ -151,7 +151,7 @@
 
 {% macro CourseDescriptionAndOverview(course) %}
 <div class="course-outline-instructor-parent">
-  <div class="course-description-section">
+  <div class="course-description-section col">
     <div class="course-home-headings">
       Course Description
     </div>
@@ -161,7 +161,7 @@
   </div>
   {% set avg_rating = course.get_average_rating() %}
   {% if course.get_students() | length or avg_rating %}
-  <div class="course-overview-section">
+  <div class="course-overview-section col-sm-auto">
     <div class="course-home-headings">
       Overview
     </div>
diff --git a/community/www/courses/course.js b/community/www/courses/course.js
index 5ce00524..e73b3b70 100644
--- a/community/www/courses/course.js
+++ b/community/www/courses/course.js
@@ -61,7 +61,7 @@ var check_mentor_request = () => {
 var hide_wrapped_mentor_cards = () => {
   var offset_top_prev;
 
-  $('.member-card-medium').each(function () {
+  $(".mentors-section .member-card").each(function () {
     var offset_top = $(this).offset().top;
     if (offset_top > offset_top_prev) {
       $(this).addClass('wrapped').slideUp("fast");
diff --git a/community/www/courses/index.html b/community/www/courses/index.html
index 4c50a012..871bb6c4 100644
--- a/community/www/courses/index.html
+++ b/community/www/courses/index.html
@@ -10,7 +10,7 @@
 
 {% block content %}
 <div class="common-page-style">
-  <div class="course-top-section">
+  <div class="col course-top-section">
     <div class="courses-header">
       {{ 'All Courses' }}
     </div>