From 8cfb3569fe682240298ee17873c3e4c26c62437b Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Wed, 23 Feb 2022 13:14:22 +0530
Subject: [PATCH] fix: css cleanup and testimonials redesign

---
 .../multiple_testimonials.html                |  32 +-
 school/public/css/style.css                   | 329 +-----------------
 school/www/profiles/profile.html              |   2 +-
 3 files changed, 29 insertions(+), 334 deletions(-)

diff --git a/school/community/web_template/multiple_testimonials/multiple_testimonials.html b/school/community/web_template/multiple_testimonials/multiple_testimonials.html
index c51e0a9c..1d5c2cd2 100644
--- a/school/community/web_template/multiple_testimonials/multiple_testimonials.html
+++ b/school/community/web_template/multiple_testimonials/multiple_testimonials.html
@@ -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>
 
diff --git a/school/public/css/style.css b/school/public/css/style.css
index 134f723e..acb5969c 100644
--- a/school/public/css/style.css
+++ b/school/public/css/style.css
@@ -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) {
@@ -1453,11 +1154,6 @@ pre {
   justify-content: space-between;
 }
 
-.job-detail-card {
-  padding: 1.5rem;
-  flex-direction: column;
-}
-
 .job-subtitle {
   font-size: var(--text-base);
   margin-bottom: 1.875rem;
@@ -1501,11 +1197,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 +1404,7 @@ pre {
 
 .profile-page-body {
   background-color: var(--gray-50);
-  padding: 2rem 0;
+  padding: 2.5rem 0;
 }
 
 .profile-column-grid {
@@ -1730,3 +1421,7 @@ pre {
   display: flex;
   align-items: center;
 }
+
+.carousel-inner {
+  overflow: inherit;
+}
diff --git a/school/www/profiles/profile.html b/school/www/profiles/profile.html
index f0a40f68..55a5d935 100644
--- a/school/www/profiles/profile.html
+++ b/school/www/profiles/profile.html
@@ -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>