From 6c991de262aa0eb29a5608e57f376cdb3d0679ad Mon Sep 17 00:00:00 2001
From: Norm Rasmussen <norman.rasmussen@me.com>
Date: Tue, 19 Apr 2022 12:55:05 -0400
Subject: [PATCH] JNJ Updates

---
 .../JnJVision/_cards_categories.html.liquid   | 101 ++++++++++++++++++
 .../JnJVision/_cards_course.html.liquid       |  61 +++++++++--
 .../_cards_featured_course.html.liquid        |   7 +-
 .../JnJVision/_course_details.html.liquid     |   9 +-
 .../JnJVision/_course_outline.html.liquid     |   3 +-
 .../JnJVision/_header.html.liquid             |   2 +-
 .../JnJVision/_homepage_events.html.liquid    |  14 +--
 .../JnJVision/homepage.html.liquid            |   2 +-
 .../JnJVision/styles.css.liquid               |   2 +-
 9 files changed, 179 insertions(+), 22 deletions(-)
 create mode 100644 NP_Custom_Templates/customer_templates/JnJVision/_cards_categories.html.liquid

diff --git a/NP_Custom_Templates/customer_templates/JnJVision/_cards_categories.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/_cards_categories.html.liquid
new file mode 100644
index 00000000..a64d32d9
--- /dev/null
+++ b/NP_Custom_Templates/customer_templates/JnJVision/_cards_categories.html.liquid
@@ -0,0 +1,101 @@
+  <div class="row row-with-thumbnails">
+      <div class="{{ class }}">
+
+        <div class="np-card" >
+          <div class="np-card-container">
+            <div class="np-categories-image-content-top"> </div>
+            <img
+              class="np-categories-image"
+              alt="Podcasts"
+              src="https://s3.amazonaws.com/static.northpass.com/J%26J/conference-audience.jpg"
+            >
+          </div>
+        <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
+            <p class="course-title-vision">
+                Professional Webinars
+            </p>
+        <div class="np-categories-content-footer">
+        </div>
+    </div>
+  </div>
+
+        <div class="np-card" >
+          <div class="np-card-container">
+            <div class="np-categories-image-content-top"> </div>
+            <img
+              class="np-categories-image"
+              alt="Product"
+              src="https://s3.amazonaws.com/static.northpass.com/J%26J/JNJ4.png"
+            >
+        </div>
+      <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
+            <p class="course-title-vision">
+                Johnson & Johnson Product Education
+            </p>
+        <div class="np-categories-content-footer">
+        </div>
+    </div>
+  </div>
+</div>
+      
+      <div class="{{ class }}">
+        
+        <div class="np-card" >
+          <div class="np-card-container">
+          <div class="np-categories-image-content-top"> </div>
+          <img
+            class="np-categories-image"
+            alt="Product"
+            src="https://s3.amazonaws.com/static.northpass.com/J%26J/couple_ipad_podcast.jpg"
+          >
+        </div>
+      <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
+            <p class="course-title-vision">
+                Fine-Tuned Podcast Series
+            </p>
+        <div class="np-categories-content-footer">
+        </div>
+    </div>
+  </div>
+
+    <div class="np-card" >
+    <div class="np-card-container">
+        <div class="np-categories-image-content-top"> </div>
+        <img
+          class="np-categories-image"
+          alt="Product"
+          src="https://s3.amazonaws.com/static.northpass.com/J%26J/white_beard_eye_exam.jpg"
+        >
+      </div>
+      <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
+            <p class="course-title-vision">
+                Challenging Cases Video Series
+            </p>
+        <div class="np-categories-content-footer">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+.col-xs-12.col-sm-6 {
+  height: 450px;
+}
+.np-categories-image {
+  object-fit: cover;
+  align: center;
+  width:250px;
+  height:230px;
+}
+.np-categories-content {
+  width: 250px;
+  height: 125px;
+  color: black;
+  opacity: 50%;
+  background: #F4F4F4;
+}
+.course-title-vision {
+  color: black;
+}
+</style>
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/_cards_course.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/_cards_course.html.liquid
index 9d6ecb28..9f49a099 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/_cards_course.html.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/_cards_course.html.liquid
@@ -38,7 +38,7 @@
 </div> {% endcomment %}
 
 {% comment %} - This was Kaitlyn's original code, I'm commenting it out to keep it incase
-the client wants to revert back. My categories boxes are below.
+the client wants to revert back. My categories boxes are below. {% endcomment %}
 <a class="np-card" href="{% route course_enrollment, code: course.enrollment_code %}" >
     <div class="np-card-container">
         <div class="np-card-image-content-top"> </div>
@@ -60,26 +60,73 @@ the client wants to revert back. My categories boxes are below.
             {% endif %}
         </div>
     </div>
-</a> {% endcomment %}
+</a>
+
+{% comment%}
+<a class="np-card" >
+    <div class="np-card-container">
+        <div class="np-card-image-content-top"> </div>
+        <img
+          class="np-card-image"
+          src="https://s3.amazonaws.com/static.northpass.com/J%26J/white_beard_eye_exam.jpg"
+        >
+      </div>
+      <div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
+            <p class="course-title-vision">
+              Challenging Cases Video Series
+            </p>
+        </div>
+    </div>
+</a>
 
 <a class="np-card" >
     <div class="np-card-container">
         <div class="np-card-image-content-top"> </div>
         <img
           class="np-card-image"
-          src="https://s3.amazonaws.com/static.northpass.com/Gusto/gusto2.png"
+          src="https://s3.amazonaws.com/static.northpass.com/J%26J/couple_ipad_podcast.jpg"
         >
       </div>
-  
       <div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
             <p class="course-title-vision">
-                {% for category in course.categories %}
-                  {{course.categories.first.name }}
-                {% endfor %}
+              Fine-Tuned Podcast Series
             </p>
+        </div>
     </div>
 </a>
 
+<a class="np-card" >
+    <div class="np-card-container">
+        <div class="np-card-image-content-top"> </div>
+        <img
+          class="np-card-image"
+          src="https://s3.amazonaws.com/static.northpass.com/J%26J/JNJ4.png"
+        >
+      </div>
+      <div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
+            <p class="course-title-vision">
+              Johnson & Johnson Product Education
+            </p>
+            </div>
+    </div>
+</a>
+
+<a class="np-card" >
+    <div class="np-card-container">
+        <div class="np-card-image-content-top"> </div>
+        <img
+          class="np-card-image"
+          src="https://s3.amazonaws.com/static.northpass.com/J%26J/conference-audience.jpg"
+        >
+      </div>
+      <div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
+            <p class="course-title-vision">
+              Professional Webinars
+            </p>
+        </div>
+    </div>
+</a>
+{% endcomment %}
 
 <style>
   .np-card {
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/_cards_featured_course.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/_cards_featured_course.html.liquid
index 9b3a0db3..8d0627a4 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/_cards_featured_course.html.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/_cards_featured_course.html.liquid
@@ -3,7 +3,6 @@
     <div class="np-learning-path np-featured-course">
       <div class="np-featured-course-img-container">
           <div class="np-card-image-content-top">           
-              {% include "course_details" %}
           </div>
           <img
           class="np-card-image"
@@ -40,6 +39,10 @@
               <div class="np-card-progress np-button-color" style='color: #006161; font-weight: 700; font-size: 12px; align-self: center; text-transform: uppercase;'>
                 {% t shared.progress, count: course.progress %}
               </div> 
+              </div>
+            <div class= "np-card-course-details" style='float: right; align-text: center; color: #cc0033; font-weight: 700; font-size: 10px;'>
+              {% include "course_details" %}
+              </div>
             </div>
           </div>
         </div>
@@ -61,6 +64,6 @@
 
 <script>
   $(".np-card-content-description").css('font-size','16px !important')
-  $(".np-card-content-description").css('color','white !important')
+  $(".np-card-content-description").css('color','black !important')
   $(".np-card-content-description").css('font-family', 'Lexend !important')
 </script>
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/_course_details.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/_course_details.html.liquid
index 1a977070..34b7db4e 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/_course_details.html.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/_course_details.html.liquid
@@ -20,7 +20,7 @@
       {% else %}
         {% if course.properties.course_length %}
           {% if course.properties.course_length > 0 %}
-              <strong>{{course.properties.course_length}}</strong> mins<span class="np-details-label">Duration</span>
+              {{course.properties.course_length}} mins<span class="np-details-label">Duration</span>
           {% else %}
               <div>&nbsp;&nbsp;&nbsp;</div>
           {% endif %}
@@ -31,6 +31,11 @@
 
 <style>
   .np-course-details {
-    text-shadow: 1px 1px black;
+    text-shadow: none;
+    float: right; 
+    align: center; 
+    color: #cc0033; 
+    font-weight: 700; 
+    font-size: 10px;'
   }
 </style>
\ No newline at end of file
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/_course_outline.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/_course_outline.html.liquid
index 98d70aff..fad76691 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/_course_outline.html.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/_course_outline.html.liquid
@@ -1,6 +1,7 @@
 <div class="np-course-outline">
   <div class="np-text-title np-course-outline-title">
-    {% t .header, key: current_school.course_vocabulary %}
+    Included Resources
+    {% comment %} {% t .header, key: current_school.course_vocabulary %} {% endcomment %}
   </div>
   <div class="np-course-outline-content">
     <ol class="np-course-outline-content-section">
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/_header.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/_header.html.liquid
index 9ae161d5..9a1cf0ad 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/_header.html.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/_header.html.liquid
@@ -124,7 +124,7 @@
             </div>
           </div>
           <nav class="np-header-avatar-tooltip-navigation">
-             <a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
+            <a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
               Default
             </a>
           {% unless current_school.sso_active? %}
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/_homepage_events.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/_homepage_events.html.liquid
index cfc515d0..4e4efe67 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/_homepage_events.html.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/_homepage_events.html.liquid
@@ -1,17 +1,17 @@
 <div class='events-wrapper' id="webinars">
     <div class='events'>
         <div class='events-header'>
-            <div class='events-header-title'>
-               Professional Webinar Series
+            <div class='events-header-title' style='color: black'>
+                Professional Webinar Series
             </div>
         </div>
         <div class='events-event'>
             <div class='events-event-left'>
                 <div class='events-event-left-title'>
-                    New Technology in Cataracts Treatment
+                    Choosing the Right Lens for Managing Patient Expectations and Visual Outcomes
                 </div>
                 <div class='events-event-left-subtitle'>
-                    Join our professional surgeons who are pushing the limits of cataracts treatment technology.
+                    Join our professional surgeons who guide you through patient lens choices.
                 </div>
                 <div class='events-event-left-date'>
                     June 12, 2022 @ 2PM EST
@@ -52,10 +52,10 @@
         <div class='events-event'>
             <div class='events-event-left'>
                 <div class='events-event-left-title'>
-                    General Surgery Video Series
+                    ASCRS:The TECNIS® Story
                 </div>
                 <div class='events-event-left-subtitle'>
-                   Meet Dr. George Crawford during this interactive program, as you will be able to ask questions as he narrates recorded procedures, hear tips to minimize and manage surgical complications, and learn about his technique of utilizing the latest medical devices.
+                
                 </div>
                 <div class='events-event-left-date'>
                     July 17th, 2022
@@ -87,7 +87,7 @@
 <style>
     .events-wrapper {
       background-color:#f4f4f4;
-      background: url(https://s3.amazonaws.com/static.northpass.com/J%26J/jnj_webinar.jpg) no-repeat;
+      background: url(https://s3.amazonaws.com/static.northpass.com/J%26J/conference-audience.jpg) no-repeat;
       background-size: auto;
       background-position: center;
     }
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/homepage.html.liquid b/NP_Custom_Templates/customer_templates/JnJVision/homepage.html.liquid
index fba99350..3103d505 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/homepage.html.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/homepage.html.liquid
@@ -6,7 +6,7 @@
 <div class="np-subpage-container" id="featured">
   <div class="row">
     <div class="col-12 col-lg-4 courses-left-small">
-      {% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
+      {% include "cards_categories", class: "col-xs-12 col-sm-6" %}
     </div>
     <div class="col-12 col-lg-8">
       <div class="np-homepage-featured np-max-width">
diff --git a/NP_Custom_Templates/customer_templates/JnJVision/styles.css.liquid b/NP_Custom_Templates/customer_templates/JnJVision/styles.css.liquid
index 6d57b0cd..49cd61fb 100644
--- a/NP_Custom_Templates/customer_templates/JnJVision/styles.css.liquid
+++ b/NP_Custom_Templates/customer_templates/JnJVision/styles.css.liquid
@@ -1023,7 +1023,7 @@ button.jryxug {
 
 .np-course-detail {
 	font-size: 1.125rem;
-	color: #fff;
+	color: #00000;
 	flex: 0 1 calc(33.33%);
 }