responsive fixes

2021-07-09 13:03:42 +05:30
parent 6dd7cb19df
commit daaa2d2fe2
11 changed files with 151 additions and 61 deletions
--- a/community/lms/widgets/BreadCrumb.html
+++ b/community/lms/widgets/BreadCrumb.html
@@ -1,11 +1,11 @@
 <div class="course-instructor breadcrumb">
  <a class="dark-links" href="/courses">All Courses</a>
-  <img class="ml-1 mr-1" src="/assets/community/icons/side-arrow.svg">
+  <img class="ml-1 mr-1" src="/assets/community/icons/chevron-right.svg">

  {% if course %}
  {% if lesson %}
  <a class="dark-links" href="/courses/{{ course.name }}">{{ course.title }}</a>
-  <img class="ml-1 mr-1" src="/assets/community/icons/side-arrow.svg">
+  <img class="ml-1 mr-1" src="/assets/community/icons/chevron-right.svg">
  <span class="muted-text"> {{ lesson.title }}</span>
  {% else %}
  <span class="muted-text">{{ course.title }}</span>
--- a/community/lms/widgets/ChapterTeaser.html
+++ b/community/lms/widgets/ChapterTeaser.html
@@ -2,7 +2,7 @@

  <div class="small-title chapter-title" data-target="#{{ chapter.get_slugified_chapter_title() }}"
    data-toggle="collapse" aria-expanded="false">
-    <img class="chapter-icon" src="/assets/community/icons/side-arrow.svg">
+    <img class="chapter-icon" src="/assets/community/icons/chevron-right.svg">
    {{ index }}. {{ chapter.title }}
  </div>

@@ -19,22 +19,24 @@
      <div class="lesson-info {% if membership.current_lesson == lesson.name %} active-lesson {% endif %}">

        {% if membership or lesson.include_in_preview %}
-        <a class="dark-links"
+        <a class="lesson-links"
          href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}"
          data-course="{{ course.name }}">
-          {{ lesson.title }}</a>
+          {{ lesson.title }}

-        {% if membership %}
-        <img class="lesson-progress-tick {{ course.get_progress(lesson.name) != 'Complete' and 'hide' }}"
-          src="/assets/community/icons/white-tick.svg">
-        {% endif %}
+          {% if membership %}
+          <img class="{{ course.get_progress(lesson.name) != 'Complete' and 'hide' }}"
+            src="/assets/community/icons/check.svg">
+          {% endif %}
+
+        </a>

        {% else %}
        <div class="no-preview" title="This lesson is not available for preview">
-          <span class="dark-links">
+          <div class="lesson-links">
            {{ lesson.title }}
-          </span>
-          <img class="ml-2" src="/assets/community/icons/lock.svg">
+            <img class="ml-2" src="/assets/community/icons/lock.svg">
+          </div>
        </div>
        {% endif %}

@@ -67,7 +69,7 @@

    /* Find anchor matching the URL for course details page */
    var selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
-    if (! selector.length) {
+    if (!selector.length) {
      selector = $(`a[href^="${decodeURIComponent(window.location.pathname)}"]`).parent();
    }
    if (selector.length && $(".course-details-page").length) {
--- a/community/public/css/style.css
+++ b/community/public/css/style.css
@@ -249,14 +249,14 @@ input[type=checkbox] {
 .course-tags {
  display: flex;
  position: relative;
-  top: 12px;
-  left: 12px;
-  height: 20px;
+  top: 0.75rem;
+  left: 0.75rem;
 }

 .course-card-pills {
  background: #ffffff;
-  margin: 0px 10px;
+  margin-left: 0;
+  margin-right: .5rem;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 10px;
@@ -279,6 +279,8 @@ input[type=checkbox] {
  background: #FFFFFF;
  border-radius: 8px;
  position: relative;
+  border: 1px solid #EEF0F2;
+  box-shadow: 0 1px 4px 4px rgb(25, 39, 52, 0.02);
 }

 .course-card {
@@ -330,6 +332,11 @@ input[type=checkbox] {
 }

 .card-divider {
+  border: 1px solid #F4F5F6;
+  margin-bottom: 16px;
+}
+
+.card-divider-dark {
  border: 1px solid #E2E6E9;
  margin-bottom: 16px;
 }
@@ -451,10 +458,6 @@ input[type=checkbox] {
  flex: 1;
 }

-.review-link {
-  margin: 48px 0px 16px;
-}
-
 .submit-review {
  width: 100px;
 }
@@ -509,7 +512,7 @@ div.custom-checkbox>label>input:checked+img {
 }

 .course-image-wide {
-  width: 352px;
+  width: 100%;
  height: 200px;
  background-size: 352px 200px;
  margin-right: 32px;
@@ -661,6 +664,7 @@ div.custom-checkbox>label>input:checked+img {

 .course-home-outline {
  width: 832px;
+  margin-top: 3rem;
 }

@media (max-width: 768px) {
@@ -681,16 +685,19 @@ div.custom-checkbox>label>input:checked+img {

 .chapter-title {
  font-weight: bold;
-  margin: 0px 5px 16px;
+  margin: 0 .25rem .5rem;
  cursor: pointer;
+  display: flex;
+  align-items: center;
 }

 .chapter-description {
  height: fit-content;
+  padding-left: 1rem;
 }

 .chapter-icon {
-  margin-right: 12px;
+  margin-right: .25rem;
 }

 .course-outline-instructor-parent {
@@ -705,28 +712,58 @@ div.custom-checkbox>label>input:checked+img {
  }
 }

+.course-home-mentors {
+  margin-top: 3rem;
+}
+
@media (max-width: 375px) {
  .course-home-mentors {
    padding: 0px 24px 0px;
  }
 }

+.reviews-parent {
+  margin-top: 3rem;
+}
+
@media (max-width: 375px) {
  .reviews-parent {
    padding: 0px 24px 0px;
  }
 }

+.course-description-section {
+  margin-top: 3rem;
+}
+
+.course-overview-section {
+  margin-top: 3rem;
+}
+
 .lesson-info {
  font-size: 16px;
  line-height: 250%;
  letter-spacing: -0.011em;
-  margin-bottom: 2px;
-  padding-left: 10px;
+}
+
+.lesson-links {
+  display: block;
+  padding: 0 1rem;
+  margin-bottom: .25rem;
+  color: inherit;
+}
+
+.lesson-links:hover {
+  cursor: pointer;
+  text-decoration: none;
+  background: #F4F5F6;
+  color: inherit;
+  border-radius: .25rem;
 }

 .chapter-content {
-  margin: 4px 0px 0px 28px;
+  margin: 0;
+  margin-left: .875rem;
 }

 .coure-outline {
@@ -788,7 +825,7 @@ div.custom-checkbox>label>input:checked+img {
 .member-card-medium {
  width: 160px;
  height: 140px;
-  margin: 0px 20px 32px 0px;
+  margin: 0 20px 32px 0;
 }

@media (max-width: 768px) {
@@ -812,13 +849,19 @@ div.custom-checkbox>label>input:checked+img {
  background: #E2E6E9;
 }

+.break {
+  flex-basis: 100%;
+  flex-grow: 1;
+  margin: .5rem 0;
+}
+
 .course-home-headings {
  font-weight: 600;
  font-size: 22px;
  line-height: 146%;
  letter-spacing: -0.0175em;
  color: #192734;
-  margin: 48px 0px 16px;
+  margin-bottom: 1rem;
 }

 .course-detail-headings {
@@ -884,6 +927,7 @@ div.custom-checkbox>label>input:checked+img {
  display: flex;
  align-items: baseline;
  cursor: pointer;
+  margin-top: 1rem;
 }

 .flex-one {
@@ -931,7 +975,9 @@ div.custom-checkbox>label>input:checked+img {
 }

 .breadcrumb {
-  margin: 16px 10px 0px;
+  margin: 1rem 0.5rem 0;
+  display: flex;
+  align-items: center;
 }

 .course-details-outline {
@@ -1040,6 +1086,10 @@ div.custom-checkbox>label>input:checked+img {
  margin: 0px 4px 4px;
 }

+.profile-courses {
+  margin-top: 3rem;
+}
+
@media (max-width: 375px) {
  .profile-courses {
    padding: 0px 24px 0px;
@@ -1060,6 +1110,14 @@ div.custom-checkbox>label>input:checked+img {
  flex-direction: column;
 }

+.course-creator-section {
+  margin-top: 3rem;
+}
+
+.course-progress-section {
+  margin-top: 3rem;
+}
+
 .progress-card {
  width: 256px;
  display: flex;
@@ -1067,6 +1125,18 @@ div.custom-checkbox>label>input:checked+img {
  padding: 24px;
 }

+@media (max-width: 768px) {
+  .progress-card {
+    width: 248px;
+  }
+}
+
+@media (max-width: 375px) {
+  .progress-card {
+    width: 312px;
+  }
+}
+
 .progress {
  width: 100%;
  height: 8px;
@@ -1076,6 +1146,15 @@ div.custom-checkbox>label>input:checked+img {
  background-color: #318AD8;
 }

+.progress-percentage {
+  width: 100%;
+  font-size: 12px;
+  line-height: 165%;
+  letter-spacing: 0.02em;
+  color: #000000;
+  text-align: center;
+}
+
 .hljs {
  white-space: pre-wrap;
 }
--- a/community/public/css/style.less
+++ b/community/public/css/style.less
@@ -256,10 +256,6 @@ section.lightgray {
  }
 }

-.chapter-description {
-  margin-bottom: 10px;
-}
-
 .lesson-teaser {
  line-height: 40px;
 }
--- a/community/public/icons/check.svg
+++ b/community/public/icons/check.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.8734 10.1402C17.264 9.74969 17.264 9.11652 16.8734 8.726C16.4829 8.33547 15.8498 8.33547 15.4592 8.726L14.6259 9.55933L12.9592 11.226L10.333 13.8522L9.37345 12.8927L8.54011 12.0593C8.14959 11.6688 7.51643 11.6688 7.1259 12.0593C6.73538 12.4499 6.73538 13.083 7.1259 13.4735L7.95923 14.3069L9.6259 15.9735C9.81344 16.1611 10.0678 16.2664 10.333 16.2664C10.5982 16.2664 10.8526 16.1611 11.0401 15.9735L14.3734 12.6402L16.0401 10.9735L16.8734 10.1402Z" fill="#68D391"/>
+</svg>
--- a/community/public/icons/chevron-right.svg
+++ b/community/public/icons/chevron-right.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 16L14 12L10 8" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/community/public/icons/chevron.svg
+++ b/community/public/icons/chevron.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 10L12 14L16 10" stroke="#4C5A67" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/community/public/icons/lock.svg
+++ b/community/public/icons/lock.svg
@@ -1,3 +1,3 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.21372 1.32458C4.68749 0.842346 5.33007 0.571429 6.00009 0.571429C6.67011 0.571429 7.31269 0.842346 7.78647 1.32458C8.26024 1.80682 8.52641 2.46087 8.52641 3.14286V5.14286H3.47378V3.14286C3.47378 2.46087 3.73994 1.80682 4.21372 1.32458ZM2.91237 5.14286V3.14286C2.91237 2.30932 3.23769 1.50992 3.81675 0.920521C4.39581 0.331122 5.18118 0 6.00009 0C6.81901 0 7.60438 0.331122 8.18344 0.920521C8.7625 1.50992 9.08781 2.30932 9.08781 3.14286V5.14286H9.9299C10.705 5.14286 11.3334 5.78245 11.3334 6.57143V10.5714C11.3334 11.3604 10.705 12 9.9299 12H2.07026C1.29512 12 0.666748 11.3604 0.666748 10.5714V6.57143C0.666748 5.78245 1.29512 5.14286 2.07026 5.14286H2.91237ZM8.80711 5.71429H3.19308L2.07026 5.71429C1.60517 5.71429 1.22815 6.09804 1.22815 6.57143V10.5714C1.22815 11.0448 1.60517 11.4286 2.07026 11.4286H9.9299C10.395 11.4286 10.772 11.0448 10.772 10.5714V6.57143C10.772 6.09804 10.395 5.71429 9.9299 5.71429L8.80711 5.71429Z" fill="#192734"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7114 3.0002H11.6325C10.4336 2.98895 9.27915 3.45397 8.42278 4.29322C7.5658 5.13306 7.07747 6.27888 7.06517 7.47871L7.06514 7.47871V7.48384V8.17399H5C3.89543 8.17399 3 9.06943 3 10.174V18.9996C3 20.1041 3.89543 20.9996 5 20.9996H18.2602C19.3647 20.9996 20.2602 20.1041 20.2602 18.9996V10.174C20.2602 9.06942 19.3647 8.17399 18.2602 8.17399H16.195V7.56755C16.2063 6.36863 15.7412 5.21421 14.902 4.35784C14.0622 3.50086 12.9163 3.01253 11.7165 3.00023V3.0002H11.7114ZM15.195 8.17399V7.56514V7.56016H15.195C15.2043 6.62548 14.842 5.72537 14.1878 5.05777C13.5341 4.39076 12.6425 4.01043 11.7087 4.0002H11.6301H11.6251V4.00017C10.6904 3.99087 9.79031 4.35318 9.12271 5.00743C8.4557 5.6611 8.07537 6.55271 8.06514 7.48649V8.17399H15.195ZM5 9.17399C4.44772 9.17399 4 9.62171 4 10.174V18.9996C4 19.5518 4.44772 19.9996 5 19.9996H18.2602C18.8124 19.9996 19.2602 19.5518 19.2602 18.9996V10.174C19.2602 9.62171 18.8124 9.17399 18.2602 9.17399H5ZM11.6303 15.804C12.3026 15.804 12.8476 15.259 12.8476 14.5867C12.8476 13.9145 12.3026 13.3694 11.6303 13.3694C10.958 13.3694 10.413 13.9145 10.413 14.5867C10.413 15.259 10.958 15.804 11.6303 15.804ZM13.8476 14.5867C13.8476 15.8113 12.8549 16.804 11.6303 16.804C10.4057 16.804 9.413 15.8113 9.413 14.5867C9.413 13.3622 10.4057 12.3694 11.6303 12.3694C12.8549 12.3694 13.8476 13.3622 13.8476 14.5867Z" fill="#4C5A67"/>
 </svg>
--- a/community/public/icons/side-arrow.svg
+++ b/community/public/icons/side-arrow.svg
@@ -1,3 +0,0 @@
-<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 9L5 5L1 1" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/community/www/courses/course.html
+++ b/community/www/courses/course.html
@@ -92,23 +92,31 @@
    {{ widgets.CourseOutline(course=course, membership=membership) }}
  </div>
  <div class="course-creator-progress-parent">
-    <div class="course-home-headings">
-      Creator
+    <div class="course-creator-section">
+      <div class="course-home-headings">
+        Creator
+      </div>
+      {{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }}
    </div>
-    {{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }}
    {% if course.get_course_progress() %}
-    <div class="course-home-headings">
-      Your Progress
-    </div>
-    <div class="common-card-style progress-card">
-      <p class="small-title">
-        Great work so far!
-      </p>
-      <p class="progress-text">
-        Challenge yourself to complete the lesson and grow professionally.
-      </p>
-      <div class="progress">
-        <div class="progress-bar" role="progressbar" style="width: {{ course.get_course_progress() }}%" aria-valuenow="{{ course.get_course_progress() }}" aria-valuemin="0" aria-valuemax="100"></div>
+    <div class="course-progress-section">
+      <div class="course-home-headings">
+        Your Progress
+      </div>
+      <div class="common-card-style progress-card">
+        <p class="small-title">
+          Great work so far!
+        </p>
+        <p class="progress-text">
+          Challenge yourself to complete the lessons and grow professionally.
+        </p>
+        <div class="progress-percentage">
+          {{ frappe.utils.rounded(course.get_course_progress()) }}%
+        </div>
+        <div class="progress">
+          <div class="progress-bar" role="progressbar" style="width: {{ course.get_course_progress() }}%"
+            aria-valuenow="{{ course.get_course_progress() }}" aria-valuemin="0" aria-valuemax="100"></div>
+        </div>
      </div>
    </div>
    {% endif %}
@@ -129,10 +137,10 @@
    {{ widgets.MemberCard(member=mentor, show_course_count=False, dimension_class="member-card-medium") }}
    {% endfor %}
    <div class="view-all-mentors">
-      <span class="card-divider flex-one"></span>
+      <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 flex-one"></span>
+      <span class="card-divider-dark flex-one"></span>
    </div>
  </div>
 </div>
@@ -143,7 +151,7 @@

 {% macro CourseDescriptionAndOverview(course) %}
 <div class="course-outline-instructor-parent">
-  <div>
+  <div class="course-description-section">
    <div class="course-home-headings">
      Course Description
    </div>
@@ -153,7 +161,7 @@
  </div>
  {% set avg_rating = course.get_average_rating() %}
  {% if course.get_students() | length or avg_rating %}
-  <div>
+  <div class="course-overview-section">
    <div class="course-home-headings">
      Overview
    </div>
--- a/community/www/profiles/profile.html
+++ b/community/www/profiles/profile.html
@@ -7,7 +7,6 @@
 {% block content %}
 <div class="common-page-style">
  <div class="course-home-page">
-    {{ widgets.BreadCrumb(member_name = member.full_name)}}
    {{ widgets.MemberCard(member=member, show_course_count=True, dimension_class="member-card-xl") }}
    {{ AboutOverviewSection(member) }}
    <div class="profile-courses">
@@ -23,7 +22,7 @@
 {% macro AboutOverviewSection(member) %}
 <div class="course-outline-instructor-parent">
  {% if member.bio %}
-  <div>
+  <div class="course-overview-section">
    <div class="course-home-headings">
      About
    </div>
@@ -32,7 +31,7 @@
    </div>
  </div>
  {% endif %}
-  <div>
+  <div class="course-overview-section">
    <div class="course-home-headings">
      Overview
    </div>