From d2f435016c83f461df88ad93d1f7a99bf3cb2279 Mon Sep 17 00:00:00 2001 From: pateljannat Date: Fri, 16 Jul 2021 20:24:35 +0530 Subject: [PATCH] fix: layout cleanup --- community/lms/widgets/BreadCrumb.html | 2 +- community/lms/widgets/Reviews.html | 2 +- community/public/css/style.css | 124 +++++++++++++++----------- community/www/batch/learn.html | 4 +- community/www/courses/course.html | 22 ++--- community/www/profiles/profile.html | 12 +-- 6 files changed, 94 insertions(+), 72 deletions(-) diff --git a/community/lms/widgets/BreadCrumb.html b/community/lms/widgets/BreadCrumb.html index 750ca9ef..ae68a30d 100644 --- a/community/lms/widgets/BreadCrumb.html +++ b/community/lms/widgets/BreadCrumb.html @@ -1,4 +1,4 @@ -
+
All Courses diff --git a/community/lms/widgets/Reviews.html b/community/lms/widgets/Reviews.html index aa46d7c1..59f57fe3 100644 --- a/community/lms/widgets/Reviews.html +++ b/community/lms/widgets/Reviews.html @@ -1,5 +1,5 @@ {% if course.get_reviews() | length %} -
+
Student Review
{% if course.is_eligible_to_review(membership) %} diff --git a/community/public/css/style.css b/community/public/css/style.css index 77664d71..d55eb27d 100644 --- a/community/public/css/style.css +++ b/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; } diff --git a/community/www/batch/learn.html b/community/www/batch/learn.html index 9daaac0a..d4493cdc 100644 --- a/community/www/batch/learn.html +++ b/community/www/batch/learn.html @@ -21,7 +21,7 @@ {% block content %}
-
+
{{ widgets.BreadCrumb(course=course, lesson=lesson) }}
@@ -47,7 +47,7 @@
{% if membership or lesson.include_in_preview %} -
{{ lesson.render_html() }}
+
{{ lesson.render_html() }}
{% else %}
This lesson is not available for Preview. Please join the course to access this lesson. diff --git a/community/www/courses/course.html b/community/www/courses/course.html index 7b7b84f7..78391792 100644 --- a/community/www/courses/course.html +++ b/community/www/courses/course.html @@ -9,7 +9,7 @@ {% endblock %} {% block content %}
-
+
{{ widgets.BreadCrumb(course=course) }} {{ CourseCardWide(course) }} {{ CourseOutlineAndCreator(course) }} @@ -32,11 +32,13 @@
-
- {{ course.title }} -
-
- {{ course.short_introduction }} +
+
+ {{ course.title }} +
+
+ {{ course.short_introduction }} +
{% if not course.disable_self_learning and not membership %} @@ -88,10 +90,10 @@ {% macro CourseOutlineAndCreator(course) %}
-
+
{{ widgets.CourseOutline(course=course, membership=membership) }}
-
+
Creator @@ -151,7 +153,7 @@ {% macro CourseDescriptionAndOverview(course) %}
-
+
Course Description
@@ -161,7 +163,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 29caa1c8..c6e448c7 100644 --- a/community/www/profiles/profile.html +++ b/community/www/profiles/profile.html @@ -6,7 +6,7 @@ {% block content %}
-
+
{{ ProfileBanner(member) }} {{ AboutOverviewSection(member) }} {{ CoursesCreated(member) }} @@ -18,8 +18,8 @@ {% endblock %} {% macro ProfileBanner(member) %} -
-
+
+
{{ widgets.Avatar(member=member, avatar_class="avatar-xl") }}
{{ member.full_name }}
@@ -54,9 +54,9 @@ {% endmacro %} {% macro AboutOverviewSection(member) %} -
+
{% if member.bio %} -
+
About
@@ -65,7 +65,7 @@
{% endif %} -
+
Overview