Merge pull request #308 from pateljannat/css-cleanup

This commit is contained in:
Jannat Patel
2022-02-23 16:33:46 +05:30
committed by GitHub
3 changed files with 34 additions and 329 deletions

View File

@@ -3,26 +3,26 @@
<div class="carousel-inner">
{% for testimonial_row in testimonials_table %}
{% set review = frappe.db.get_value("LMS Course Review", testimonial_row.testimonials, ["owner", "review"], as_dict=True) %}
{% set member = frappe.db.get_value("User", review.owner, ["name", "username", "full_name", "user_image", "headline"], as_dict=True) %}
{% if loop.index % 3 == 1 %}
<div class="carousel-item {% if loop.index == 1 %} active {% endif %}"> <div class="cards-parent">
{% endif %}
<div class="common-card-style testimonial-card">
{% set member = frappe.get_doc("User", review.owner) %}
<div class="d-flex align-items-center mb-4">
<div>
{{ widgets.Avatar(member=member, avatar_class="avatar-testimonial") }}
</div>
<div class="ml-3">
<div class="testimonial-author" >{{ member.full_name }}</div>
{% if member.profession %}<div class="testimonial-profession">{{ member.profession }}</div> {% endif %}
</div>
</div>
<div class="testimonial-review">
{% if loop.index % 3 == 1 %}
<div class="carousel-item {% if loop.index == 1 %} active {% endif %}"> <div class="cards-parent">
{% endif %}
<div class="common-card-style testimonial-card">
<div class="testimonial-review">
{{ review.review }}
</div>
<div class="d-flex align-items-center">
<div>
{{ widgets.Avatar(member=member, avatar_class="avatar-small") }}
</div>
<div class="ml-3">
<div class="testimonial-author" >{{ member.full_name }}</div>
{% if member.headline %}<div class="testimonial-profession">{{ member.headline }}</div> {% endif %}
</div>
</div>
{% if loop.index % 3 == 0 or loop.index == testimonials_table | length %} </div> </div> {% endif %}
</div>
{% if loop.index % 3 == 0 or loop.index == testimonials_table | length %} </div> </div> {% endif %}
{% endfor %}
</div>

View File

@@ -1,6 +1,7 @@
:root {
--text-3-5xl: 24px;
--text-3-8xl: 34px;
--text-4xl: 36px;
}
body {
@@ -236,48 +237,6 @@ input[type=checkbox] {
height: 24px;
}
.small-margin {
margin-left: 10px;
}
.overview-item {
display: flex;
}
.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 {
display: flex;
flex-direction: column;
@@ -341,34 +300,6 @@ input[type=checkbox] {
}
}
.course-image-wide {
width: 352px;
height: 200px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-right: 32px;
border-radius: var(--border-radius-md);
flex: 1;
align-self: center;
}
@media (max-width: 768px) {
.course-image-wide {
width: 100%;
height: 320px;
flex-direction: column;
margin: 0px;
flex: none;
}
}
@media (max-width: 600px) {
.course-image-wide {
height: 216px;
}
}
.course-card-wide-content {
display: flex;
flex-direction: column;
@@ -469,53 +400,6 @@ input[type=checkbox] {
margin-right: 1.25rem;
}
.course-outline-instructor-parent {
display: grid;
grid-gap: 2rem;
grid-template-columns: 4fr 1fr;
}
@media (max-width: 768px) {
.course-outline-instructor-parent {
grid-gap: 1rem;
}
}
@media (max-width: 600px) {
.course-outline-instructor-parent {
padding: 0px 24px 0px;
grid-template-columns: none;
}
}
.profile-parent-section {
display: grid;
grid-gap: 2rem;
grid-template-columns: 5fr 1.5fr;
}
@media (max-width: 768px) {
.profile-parent-section {
grid-gap: 1rem;
}
}
@media (max-width: 600px) {
.profile-parent-section {
grid-template-columns: none;
}
}
.course-home-mentors {
margin-top: 3rem;
}
@media (max-width: 600px) {
.course-home-mentors {
padding: 0px 24px 0px;
}
}
.reviews-parent {
margin: 5rem 0;
}
@@ -524,10 +408,6 @@ input[type=checkbox] {
margin-top: 3.75rem;
}
.course-overview-section {
margin-top: 3rem;
}
.lesson-info {
font-size: 16px;
letter-spacing: -0.011em;
@@ -565,16 +445,6 @@ input[type=checkbox] {
margin-left: 2.5rem;
}
.course-buttons {
display: flex;
}
@media (max-width: 600px) {
.course-buttons {
flex-direction: column;
}
}
.member-card {
display: flex;
flex-direction: column;
@@ -586,50 +456,6 @@ input[type=checkbox] {
font-weight: bold;
}
.member-card-large {
width: 256px;
height: 188px;
}
@media (max-width: 768px) {
.member-card-large {
width: 248px;
}
}
@media (max-width: 600px) {
.member-card-large {
width: 100%;
}
}
.member-card-medium {
width: 160px;
height: 140px;
margin: 0 20px 32px 0;
}
@media (max-width: 768px) {
.member-card-medium {
width: 216px;
height: 140px;
margin: 0px 12px 16px 0px;
}
}
@media (max-width: 375px) {
.member-card-medium {
width: 144px;
height: 140px;
}
}
.member-card-xl {
height: 188px;
margin-top: 16px;
background: #E2E6E9;
}
.break {
flex-basis: 100%;
flex-grow: 1;
@@ -644,10 +470,6 @@ input[type=checkbox] {
margin-bottom: 1rem;
}
.course-detail-headings {
margin: 0px;
}
.modal-headings {
margin: 0;
}
@@ -671,62 +493,18 @@ input[type=checkbox] {
height: 68px;
}
.member-card .avatar-xl {
width: 150px;
height: 150px;
}
.avatar-xl {
width: 112px;
height: 112px;
}
@media (max-width: 500px) {
.avatar-xl {
width: 88px;
height: 88px;
}
.avatar-square {
width: 75px;
height: 75px;
}
}
@media (max-width: 375px) {
.avatar-xl {
width: 50px;
height: 50px;
}
}
.avatar-testimonial {
width: 48px;
height: 48px;
}
.overview-card {
padding: 1.5rem;
flex-direction: column;
display: grid;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 1rem;
}
@media (max-width: 768px) {
.overview-card {
width: 248px;
}
}
@media (max-width: 600px) {
.overview-card {
padding: 24px 26px 24px;
width: 100%;
}
}
.member-parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@@ -752,10 +530,6 @@ input[type=checkbox] {
margin-top: 1rem;
}
.flex-one {
flex: 1;
}
.review-modal .modal-dialog {
width: 50%;
height: 70%;
@@ -900,10 +674,6 @@ input[type=checkbox] {
}
}
.profile-about-section {
margin-top: 3rem;
}
.profile-info {
height: 68px;
background: #ffffff;
@@ -1015,33 +785,6 @@ input[type=checkbox] {
font-weight: 500;
}
.profile-card-row span::before {
content: "\00B7";
margin: 0 4px;
}
.education-work-details {
display: grid;
grid-template-columns: 4fr 1fr;
grid-gap: 2rem;
}
.social-icons {
margin: 0.5rem;
}
@media (max-width: 500px) {
.social-icons {
margin: 10px;
}
}
@media (max-width: 375px) {
.social-icons {
margin: 5px;
}
}
.education-details {
margin-top: 3rem;
}
@@ -1055,43 +798,6 @@ input[type=checkbox] {
margin-top: 3rem;
}
.progress-text {
font-size: 12px;
line-height: 165%;
}
.course-creator-progress-parent {
display: flex;
flex-direction: column;
}
.course-creator-section {
margin-top: 3rem;
}
.course-progress-section {
margin-top: 3rem;
}
.progress-card {
width: 256px;
display: flex;
flex-direction: column;
padding: 24px;
}
@media (max-width: 768px) {
.progress-card {
width: 248px;
}
}
@media (max-width: 600px) {
.progress-card {
width: 100%;
}
}
.zindex {
position: relative;
z-index: 2;
@@ -1274,25 +980,20 @@ pre {
.testimonial-card {
flex-direction: column;
justify-content: space-between;
padding: 1rem;
height: 100%;
margin-right: 0.25rem;
margin-bottom: 0.5rem;
}
.testimonial-author {
font-weight: 500;
font-size: 18px;
line-height: 150%;
color: var(--gray-800);
font-size: var(--text-lg);
color: var(--gray-900);
}
.testimonial-review {
color: var(--gray-800);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--gray-900);
margin-bottom: 2rem;
}
.testimonial-profession {
@@ -1345,7 +1046,7 @@ pre {
}
.carousel {
padding: 0 1rem;
padding: 0 1.5rem;
}
@media (max-width: 500px) {
@@ -1458,6 +1159,11 @@ pre {
flex-direction: column;
}
.job-detail-card span::before {
content: "\00B7";
margin: 0 8px;
}
.job-subtitle {
font-size: var(--text-base);
margin-bottom: 1.875rem;
@@ -1501,11 +1207,6 @@ pre {
margin-top: 3.75rem;
}
.job-detail-card span::before {
content: "\00B7";
margin: 0 8px;
}
.course-head-container {
color: var(--gray-900);
}
@@ -1713,7 +1414,7 @@ pre {
.profile-page-body {
background-color: var(--gray-50);
padding: 2rem 0;
padding: 2.5rem 0;
}
.profile-column-grid {
@@ -1730,3 +1431,7 @@ pre {
display: flex;
align-items: center;
}
.carousel-inner {
overflow: inherit;
}

View File

@@ -141,7 +141,7 @@
{% macro About(member) %}
{% if member.bio %}
<div class="profile-about-section">
<div class="">
<div class="common-card-style profile-card">
<div class="course-home-headings"> {{ _("About") }} </div>
<div class="description">{{ member.bio }}</div>