fix: layout cleanup

community/lms/widgets/BreadCrumb.html

@@ -1,4 +1,4 @@
-<div class="course-instructor breadcrumb">
+<div class="breadcrumb">
   <a class="dark-links" href="/courses">All Courses</a>
   <img class="ml-1 mr-1" src="/assets/community/icons/chevron-right.svg">
 

community/lms/widgets/Reviews.html

@@ -1,5 +1,5 @@
 {% if course.get_reviews() | length %}
-<div class="reviews-parent col">
+<div class="reviews-parent">
   <div class="reviews-heading">
     <div class="course-home-headings">Student Review</div>
     {% if course.is_eligible_to_review(membership) %}

community/public/css/style.css

@@ -264,7 +264,6 @@ input[type=checkbox] {
 
 .common-card-style {
   display: flex;
-  align-items: flex-start;
   background: #FFFFFF;
   border-radius: 8px;
   position: relative;
@@ -293,6 +292,12 @@ input[type=checkbox] {
   padding: 0px 24px 20px;
 }
 
+@media (max-width: 350px) {
+  .course-card-content {
+    padding: 0px 10px 20px;
+  }
+}
+
 .course-card-title {
   font-weight: 600;
   font-size: 18px;
@@ -309,6 +314,7 @@ input[type=checkbox] {
     font-size: 14px;
   }
 }
+
 .card-divider {
   border: 1px solid #F4F5F6;
   margin-bottom: 16px;
@@ -376,7 +382,7 @@ input[type=checkbox] {
 }
 
 .courses-header {
-  padding: 50px 30px 20px;
+  padding: 50px 20px 20px;
   color: var(--text-color);
   font-weight: 600;
   font-size: 22px;
@@ -384,6 +390,13 @@ input[type=checkbox] {
   letter-spacing: -0.0175em
 }
 
+@media (min-width: 576px) {
+  .container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
 .course-top-section {
   float: none;
   margin: 0 auto;
@@ -497,7 +510,6 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .course-card-wide {
-  height: fit-content;
   display: flex;
   flex-direction: row;
   padding: 24px;
@@ -529,6 +541,7 @@ div.custom-checkbox>label>input:checked+img {
   margin-right: 32px;
   border-radius: 5px;
   flex: 1;
+  align-self: center;
 }
 
 @media (max-width: 768px) {
@@ -547,23 +560,10 @@ div.custom-checkbox>label>input:checked+img {
   }
 }
 
-.course-home-page {
-  max-width: 1150px;
-  margin: 0 auto;
-  padding-bottom: 2rem;
-}
-
-@media (max-width: 768px) {
+@media (max-width: 500px) {
   .course-home-page {
-    max-width: 688px;
-  }
-}
-
-@media (max-width: 600px) {
-  .course-home-page {
-    width: 100%;
-    padding-left: 0px;
-    padding-right: 0px;
+    padding-right: 0;
+    padding-left: 0;
   }
 }
 
@@ -571,6 +571,7 @@ div.custom-checkbox>label>input:checked+img {
   display: flex;
   flex-direction: column;
   flex: 2;
+  justify-content: space-between;
 }
 
 @media (max-width: 768px) {
@@ -673,6 +674,7 @@ div.custom-checkbox>label>input:checked+img {
 
 .course-home-outline {
   margin-top: 3rem;
+  flex: 1;
 }
 
 .small-title {
@@ -704,7 +706,19 @@ div.custom-checkbox>label>input:checked+img {
 @media (max-width: 600px) {
   .course-outline-instructor-parent {
     flex-direction: column;
-    padding: 0px 9px 0px;
+    padding: 0px 24px 0px;
+  }
+}
+
+
+.profile-parent-section {
+  display: flex;
+  justify-content: space-between;
+}
+
+@media (max-width: 600px) {
+  .profile-parent-section {
+    flex-direction: column;
   }
 }
 
@@ -736,6 +750,18 @@ div.custom-checkbox>label>input:checked+img {
   margin-top: 3rem;
 }
 
+@media (min-width: 1024px) {
+  .course-overview-section {
+    margin-left: 2rem;
+  }
+}
+
+@media (min-width: 600px) {
+  .course-overview-section {
+    margin-left: 1rem;
+  }
+}
+
 .lesson-info {
   font-size: 16px;
   line-height: 250%;
@@ -898,7 +924,7 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .overview-card {
-  padding: 8px 24px 8px;
+  padding: 24px 26px 24px;
   width: 256px;
   flex-direction: column;
 }
@@ -911,7 +937,7 @@ div.custom-checkbox>label>input:checked+img {
 
 @media (max-width: 600px) {
   .overview-card {
-    padding: 8px 9px 8px;
+    padding: 24px 26px 24px;
     width: 100%;
   }
 }
@@ -996,20 +1022,17 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .breadcrumb {
-  padding: 1rem 0.5rem 0;
+  padding: 1rem 0 0;
   display: flex;
   align-items: center;
+  font-size: 12px;
+  line-height: 135%;
+  color: var(--text-color);
 }
 
 .course-details-outline {
-  width: 352px;
   margin-top: 16px;
-}
-
-@media (max-width: 1025px) {
-  .course-details-outline {
-    width: 100%;
-  }
+  flex: 1;
 }
 
 .lesson-content-card {
@@ -1020,11 +1043,11 @@ div.custom-checkbox>label>input:checked+img {
 .course-content-parent {
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap-reverse;
 }
 
-@media (max-width: 375px) {
+@media (max-width: 768px) {
   .course-content-parent {
+    flex-direction: column-reverse;
     justify-content: center;
   }
 }
@@ -1040,13 +1063,13 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .lesson-pagination-parent {
-  width: 736px;
-  margin-top: 16px;
+  margin: 1rem 0px 0px 2rem;
+  flex: 3;
 }
 
-@media (max-width: 1025px) {
+@media (max-width: 768px) {
   .lesson-pagination-parent {
-    width: 100%;
+    margin-left: 0px;
   }
 }
 
@@ -1092,16 +1115,14 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .profile-page {
-  max-width: 1150px;
-  margin: 0 auto;
   padding-top: 1rem;
-  padding-bottom: 1rem;
 }
 
 .profile-banner {
-  width: 100%;
   height: 248px;
   border-radius: 12px 12px 0px 0px;
+  background-size: cover;
+  background-position: center;
 }
 
 @media (max-width: 500px) {
@@ -1110,6 +1131,11 @@ div.custom-checkbox>label>input:checked+img {
   }
 }
 
+.profile-about-section {
+  flex: 1;
+  margin-top: 3rem;
+}
+
 .profile-info {
   height: 68px;
   background: #ffffff;
@@ -1221,18 +1247,6 @@ div.custom-checkbox>label>input:checked+img {
   margin-top: 3rem;
 }
 
-@media (max-width: 500px) {
-  .profile-courses {
-    padding: 0px 24px 0px;
-  }
-}
-
-@media (max-width: 360px) {
-  .profile-courses {
-    padding: 0px 10px 0px;
-  }
-}
-
 .progress-text {
   font-size: 12px;
   line-height: 165%;
@@ -1243,6 +1257,12 @@ div.custom-checkbox>label>input:checked+img {
   flex-direction: column;
 }
 
+@media (min-width: 600px) {
+  .course-creator-progress-parent {
+    margin-left: 2rem;
+  }
+}
+
 .course-creator-section {
   margin-top: 3rem;
 }

community/www/batch/learn.html

@@ -21,7 +21,7 @@
 
 {% block content %}
 <div class="common-page-style">
-  <div class="course-details-page">
+  <div class="container">
     {{ widgets.BreadCrumb(course=course, lesson=lesson) }}
     <div class="course-content-parent">
       <div class="course-details-outline">
@@ -47,7 +47,7 @@
   </div>
 
   {% if membership or lesson.include_in_preview %}
-  <div class="common-card-style lesson-content-card">{{ lesson.render_html() }}</div>
+  <div class="common-card-style lesson-content-card from-markdown">{{ lesson.render_html() }}</div>
   {% else %}
   <div class="no-preview-message">
     <span>This lesson is not available for Preview. Please join the course to access this lesson.</span>

community/www/courses/course.html

@@ -9,7 +9,7 @@
 {% endblock %}
 {% block content %}
 <div class="common-page-style">
-  <div class="col course-home-page">
+  <div class="container course-home-page">
     {{ widgets.BreadCrumb(course=course) }}
     {{ CourseCardWide(course) }}
     {{ CourseOutlineAndCreator(course) }}
@@ -32,11 +32,13 @@
     </div>
   </div>
   <div class="course-card-wide-content">
-    <div class="course-card-wide-title">
-      {{ course.title }}
-    </div>
-    <div class="course-card-wide-intro">
-      {{ course.short_introduction }}
+    <div class="course-info">
+      <div class="course-card-wide-title">
+        {{ course.title }}
+      </div>
+      <div class="course-card-wide-intro">
+        {{ course.short_introduction }}
+      </div>
     </div>
     <div class="course-buttons">
       {% if not course.disable_self_learning and not membership %}
@@ -88,10 +90,10 @@
 
 {% macro CourseOutlineAndCreator(course) %}
 <div class="course-outline-instructor-parent">
-  <div class="course-home-outline col">
+  <div class="course-home-outline">
     {{ widgets.CourseOutline(course=course, membership=membership) }}
   </div>
-  <div class="course-creator-progress-parent col-sm-auto">
+  <div class="course-creator-progress-parent">
     <div class="course-creator-section">
       <div class="course-home-headings">
         Creator
@@ -151,7 +153,7 @@
 
 {% macro CourseDescriptionAndOverview(course) %}
 <div class="course-outline-instructor-parent">
-  <div class="course-description-section col">
+  <div class="course-description-section">
     <div class="course-home-headings">
       Course Description
     </div>
@@ -161,7 +163,7 @@
   </div>
   {% set avg_rating = course.get_average_rating() %}
   {% if course.get_students() | length or avg_rating %}
-  <div class="course-overview-section col-sm-auto">
+  <div class="course-overview-section">
     <div class="course-home-headings">
       Overview
     </div>

community/www/profiles/profile.html

@@ -6,7 +6,7 @@
 
 {% block content %}
 <div class="common-page-style">
-  <div class="col profile-page">
+  <div class="container profile-page">
     {{ ProfileBanner(member) }}
     {{ AboutOverviewSection(member) }}
     {{ CoursesCreated(member) }}
@@ -18,8 +18,8 @@
 {% endblock %}
 
 {% macro ProfileBanner(member) %}
-<div class="col">
-  <div class="profile-banner" style="background: url(/assets/community/images/profile-banner.png)">
+<div class="">
+  <div class="profile-banner" style="background-image: url(/assets/community/images/profile-banner.png)">
   <div class="profile-avatar">
     {{ widgets.Avatar(member=member, avatar_class="avatar-xl") }}
     <div class="profile-name"> {{ member.full_name }} </div>
@@ -54,9 +54,9 @@
 {% endmacro %}
 
 {% macro AboutOverviewSection(member) %}
-<div class="course-outline-instructor-parent">
+<div class="profile-parent-section">
   {% if member.bio %}
-  <div class="course-overview-section col">
+  <div class="profile-about-section">
     <div class="course-home-headings">
       About
     </div>
@@ -65,7 +65,7 @@
     </div>
   </div>
   {% endif %}
-  <div class="course-overview-section col-sm-auto">
+  <div class="course-overview-section">
     <div class="course-home-headings">
       Overview
     </div>