From daaa2d2fe271d5262db0600551a49caf7fab1673 Mon Sep 17 00:00:00 2001 From: pateljannat Date: Fri, 9 Jul 2021 13:03:42 +0530 Subject: [PATCH] responsive fixes --- community/lms/widgets/BreadCrumb.html | 4 +- community/lms/widgets/ChapterTeaser.html | 24 ++--- community/public/css/style.css | 113 +++++++++++++++++++---- community/public/css/style.less | 4 - community/public/icons/check.svg | 3 + community/public/icons/chevron-right.svg | 3 + community/public/icons/chevron.svg | 3 + community/public/icons/lock.svg | 4 +- community/public/icons/side-arrow.svg | 3 - community/www/courses/course.html | 46 +++++---- community/www/profiles/profile.html | 5 +- 11 files changed, 151 insertions(+), 61 deletions(-) create mode 100644 community/public/icons/check.svg create mode 100644 community/public/icons/chevron-right.svg create mode 100644 community/public/icons/chevron.svg delete mode 100644 community/public/icons/side-arrow.svg diff --git a/community/lms/widgets/BreadCrumb.html b/community/lms/widgets/BreadCrumb.html index 7a5807ef..750ca9ef 100644 --- a/community/lms/widgets/BreadCrumb.html +++ b/community/lms/widgets/BreadCrumb.html @@ -1,11 +1,11 @@
All Courses - + {% if course %} {% if lesson %} {{ course.title }} - + {{ lesson.title }} {% else %} {{ course.title }} diff --git a/community/lms/widgets/ChapterTeaser.html b/community/lms/widgets/ChapterTeaser.html index 6a93e249..526e92fb 100644 --- a/community/lms/widgets/ChapterTeaser.html +++ b/community/lms/widgets/ChapterTeaser.html @@ -2,7 +2,7 @@ @@ -19,22 +19,24 @@
{% if membership or lesson.include_in_preview %} - - {{ lesson.title }} + {{ lesson.title }} - {% if membership %} - - {% endif %} + {% if membership %} + + {% endif %} + + {% else %}
- +
{{ lesson.title }} - - + +
{% 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) { diff --git a/community/public/css/style.css b/community/public/css/style.css index a110ae8c..aed87f30 100644 --- 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; } diff --git a/community/public/css/style.less b/community/public/css/style.less index b768f6da..329f14f3 100644 --- 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; } diff --git a/community/public/icons/check.svg b/community/public/icons/check.svg new file mode 100644 index 00000000..2abf9cf8 --- /dev/null +++ b/community/public/icons/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/community/public/icons/chevron-right.svg b/community/public/icons/chevron-right.svg new file mode 100644 index 00000000..28890edf --- /dev/null +++ b/community/public/icons/chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/community/public/icons/chevron.svg b/community/public/icons/chevron.svg new file mode 100644 index 00000000..f9878ac3 --- /dev/null +++ b/community/public/icons/chevron.svg @@ -0,0 +1,3 @@ + + + diff --git a/community/public/icons/lock.svg b/community/public/icons/lock.svg index cf3518e1..897e8187 100644 --- a/community/public/icons/lock.svg +++ b/community/public/icons/lock.svg @@ -1,3 +1,3 @@ - - + + diff --git a/community/public/icons/side-arrow.svg b/community/public/icons/side-arrow.svg deleted file mode 100644 index aee8d7f0..00000000 --- a/community/public/icons/side-arrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/community/www/courses/course.html b/community/www/courses/course.html index b896eb9c..6ca9bad9 100644 --- a/community/www/courses/course.html +++ b/community/www/courses/course.html @@ -92,23 +92,31 @@ {{ widgets.CourseOutline(course=course, membership=membership) }}
-
- Creator +
+
+ Creator +
+ {{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }}
- {{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }} {% if course.get_course_progress() %} -
- Your Progress -
-
-

- Great work so far! -

-

- Challenge yourself to complete the lesson and grow professionally. -

-
-
+
+
+ Your Progress +
+
+

+ Great work so far! +

+

+ Challenge yourself to complete the lessons and grow professionally. +

+
+ {{ frappe.utils.rounded(course.get_course_progress()) }}% +
+
+
+
{% endif %} @@ -129,10 +137,10 @@ {{ widgets.MemberCard(member=mentor, show_course_count=False, dimension_class="member-card-medium") }} {% endfor %}
- + View all mentors - +
@@ -143,7 +151,7 @@ {% macro CourseDescriptionAndOverview(course) %}
-
+
Course Description
@@ -153,7 +161,7 @@
{% set avg_rating = course.get_average_rating() %} {% if course.get_students() | length or avg_rating %} -
+
Overview
diff --git a/community/www/profiles/profile.html b/community/www/profiles/profile.html index 1fbc021e..325565c6 100644 --- a/community/www/profiles/profile.html +++ b/community/www/profiles/profile.html @@ -7,7 +7,6 @@ {% block content %}
- {{ widgets.BreadCrumb(member_name = member.full_name)}} {{ widgets.MemberCard(member=member, show_course_count=True, dimension_class="member-card-xl") }} {{ AboutOverviewSection(member) }}
@@ -23,7 +22,7 @@ {% macro AboutOverviewSection(member) %}
{% if member.bio %} -
+
About
@@ -32,7 +31,7 @@
{% endif %} -
+
Overview