Modal Design Update

mitodl · May 9, 2019 · 8a5792d · 8a5792d
1 parent c7f2a22
commit 8a5792d
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 13 deletions.
diff --git a/courses/templates/partials/metadata-tiles.html b/courses/templates/partials/metadata-tiles.html
@@ -27,7 +27,7 @@
       {% if course.current_price %}
         <li>
           <span class="title">PRICE</span>
-          <span class="text">${{ course.current_price }}</span>
+          <span class="text">${{ course.current_price|floatformat:"0" }}</span>
         </li>
       {% endif %}
     </ul>

diff --git a/courses/templates/partials/testimonial-carousel.html b/courses/templates/partials/testimonial-carousel.html
@@ -21,18 +21,28 @@ <h2>{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
     </div>
   </div>
   {% for testimonial in testimonials.items %}
-  <div class="modal fade" id="testimonial-{{ forloop.counter }}" role="dialog">
+    <div class="modal fade" id="testimonial-{{ forloop.counter }}" role="dialog">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
-          <div class="modal-header">
-            {% image testimonial.value.image fill-150x150 class="rounded-circle align-self-center" %}
-            <h2 class="p-3 align-self-center">{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
-          </div>
           <div class="modal-body">
-            <p>{{ testimonial.value.quote }}</p>
+            <div class="container no-gutters px-0">
+              <div class="d-flex flex-row-reverse">
+                <a class="text-dark" href="testimonial-{{ forloop.counter }}" data-dismiss="modal"><span class="icon-close-outline" aria-hidden="true"></span></a>
+              </div>
+            </div>
+            <div class="container px-4">
+              <div class="row py-2">
+                {% image testimonial.value.image fill-100x100 class="border rounded-circle headshot-image" %}
+              </div>
+              <div class="row mb-4">
+                <h2 class="modal-title text-uppercase">{{ testimonial.value.name }}, {{ testimonial.value.title }}</h2>
+              </div>
+              <div class="row quote-container">
+                <p>{{ testimonial.value.quote }}</p>        
+              </div>
+            </div>
           </div>
         </div>
-
       </div>
     </div>
   {% endfor %}

diff --git a/static/fonts/icomoon.eot b/static/fonts/icomoon.eot
diff --git a/static/fonts/icomoon.svg b/static/fonts/icomoon.svg
diff --git a/static/fonts/icomoon.ttf b/static/fonts/icomoon.ttf
diff --git a/static/fonts/icomoon.woff b/static/fonts/icomoon.woff
diff --git a/static/scss/detail/testimonial-carousel.scss b/static/scss/detail/testimonial-carousel.scss
@@ -1,8 +1,7 @@
 // sass-lint:disable mixins-before-declarations
 .learners-block {
-  width: 100%;
   padding: 100px 0 50px;
-  background: #fff url("#{$static-path}/images/testimonial-carousel-bg.jpg") no-repeat 50% 0;
+  background: white url("#{$static-path}/images/testimonial-carousel-bg.jpg") no-repeat 50% 0;
   min-height: 400px;
   overflow: hidden;
   position: relative;
@@ -33,7 +32,7 @@
   }
 
   h1 {
-    color: $red;
+    color: $primary;
     margin: 0 0 10px;
     text-transform: uppercase;
 
@@ -95,7 +94,7 @@
     font-size: 18px;
     line-height: 25px;
     font-weight: 600;
-    color: #8a8b8c;
+    color: $light-gray;
     min-height: 50px;
   }
 
@@ -130,3 +129,19 @@
     }
   }
 }
+
+.headshot-image {
+  box-shadow: 0em 0.05em 0.5em rgba(0, 0, 0, 0.35);
+  border-width: 3px !important;
+}
+
+.modal-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: $light-gray;
+}
+
+.quote-container {
+  max-height: 50vh;
+  overflow: auto;
+}
diff --git a/static/scss/icomoon.scss b/static/scss/icomoon.scss
@@ -24,6 +24,10 @@
 
 }
 
+.icon-close-outline:before {
+  content: "\e906";
+}
+
 .icon-arrow-circle-down:before {
   content: "\e904";
 }