Lots of template work - Luminate, G2, Crayon. Added Mizuno Running's script. Small changes to notes.

2023-06-15 19:50:44 -04:00
parent 73ae8fe55b
commit 807739cae6
13 changed files with 523 additions and 38 deletions
--- a/Custom_Templates/customer_templates/Norm_sandbox_1/_modal_popup.html.liquid
+++ b/Custom_Templates/customer_templates/Norm_sandbox_1/_modal_popup.html.liquid
@ -0,0 +1,162 @@
+
+<script>
+  function showPopup() {
+    setTimeout(function() {
+      document.querySelector(".popup-trigger").click()
+      console.log("showing popup")
+    }, 500)}
+</script>
+
+
+    <button
+      type="button"
+      class="popup-trigger"
+      data-toggle-class-on-target
+      data-toggle-target="#firstTimeUsers"
+      data-toggle-escape
+      data-toggle-modal>
+      Click
+    </button>
+    </main>
+
+<div
+	class="first-time-user-popup"
+	id="firstTimeUsers"
+	role="dialog"
+	aria-labelledby="dialogTitle"
+	aria-describedby="dialogContent"
+	aria-hidden="true">
+	<section class="first-time-user-popup-container">
+		<div id="dialogContent" class="first-time-user-popup-content">
+      <div class="modal-headline">Welcome to G2 University, {{ current_person.first_name }}! Have you become
+	#G2Certified yet?</div>
+      <div class="modal-links">
+      	<a href="javascript:setPopupSeenProperty('/app')" class="secondary" data-toggle-trigger-off>
+	  I'm just looking around.</a>
+        <a href="javascript:setPopupSeenProperty('/app/learning_paths')" data-redirect="/app">Let's get
+	  #G2Certified!</a>
+      </div>
+		</div>
+	</section>
+</div>
+
+{% if current_person.signed_in? %}
+  {% unless current_person.email contains "+preview" %}
+    <script>
+      window.addEventListener("load", function() {
+            showPopup()
+      })
+    </script>
+  {% endunless %}
+{% endif %}
+
+
+<script>
+  function setPopupSeenProperty(redirectUrl) {
+    localStorage.setItem("modal_clicked", true);
+
+    const data = { learner_uuid: '{{current_person.id}}' }
+
+    window.location.href = redirectUrl;
+
+  }
+</script>
+<style>
+/* MODAL POPUP  */
+.first-time-user-popup {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  padding: 1em;
+  background-color: rgba(0, 0, 0, 0.75);
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: 0.25s ease-out;
+}
+.first-time-user-popup.is-active {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.first-time-user-popup-container {
+  width: 100%;
+  max-width: 600px;
+  margin: auto;
+  transform: translateY(-1em) scale(0.95);
+  background-color: white;
+  transition: transform 0.25s ease-out;
+  border-radius: 8px;
+}
+
+.first-time-user-popup.is-active .first-time-user-popup-container {
+  transform: translateY(0) scale(1);
+}
+
+.modal-headline {
+  font-size: 20px;
+  line-height: normal;
+  font-weight: 500;
+  margin-bottom: 32px;
+  text-align: center;
+  color: #F7492D;
+}
+
+.modal-links {
+  display: flex;
+}
+
+.modal-links a {
+  border: 2px solid #3c228a;
+  background: #F7492D;
+  padding: 8px 16px;
+  text-align: center;
+  width: calc(50% - 8px);
+  margin: 0 8px;
+  border-radius: 30px;
+  color: #fff;
+  text-decoration: none;
+  font-weight: 700;
+  transition: all 0.2s;
+}
+
+.modal-links a.secondary {
+  background: transparent;
+  color: #3c228a;
+}
+
+.modal-links a:hover {
+  border: 2px solid #13014a;
+  background: #13014a;
+}
+
+.modal-links a.secondary:hover {
+  border: 2px solid #13014a;
+  background: #ebe8f3;
+  color: #13014a;
+}
+
+.first-time-user-popup-content {
+  padding: 32px 16px;
+}
+
+@media (min-width: 768px) {
+  .first-time-user-popup-content {
+    padding: 32px;
+  }
+
+  .modal-headline {
+    font-size: 24px;
+  }
+
+  .modal-links a {
+    min-height: 40px;
+    line-height: 40px;
+  }
+}
+</style>
--- a/Custom_Templates/customer_templates/Norm_sandbox_1/homepage.html.liquid
+++ b/Custom_Templates/customer_templates/Norm_sandbox_1/homepage.html.liquid
@ -10,7 +10,7 @@
 </div>
 <div class="np-homepage-hero-content">
    <div class="np-homepage-headline np-header-font-color">
-    <img src="https://i.imgur.com/TayoEHg.png" style="width: 500px">   
+    <img src="https://i.imgur.com/TayoEHg.png" style="width: 500px">
    </div>
    <div class="np-homepage-subheadline np-header-font-color">
    {{ homepage.subheadline }}
@ -57,7 +57,6 @@
 {% include "section_faqs" %}

 {% include "section_instructors" %}
-
 </main>
 {% include "footer" %}

--- a/Custom_Templates/customer_templates/Norm_sandbox_1/styles.css.liquid
+++ b/Custom_Templates/customer_templates/Norm_sandbox_1/styles.css.liquid
@ -30,22 +30,22 @@
    3.6 - COURSE CARD
    3.7 - LEARNING PATH CARD
    3.8 - TRAINING EVENT CARD
-    3.9 - COURSE BANNER  
+    3.9 - COURSE BANNER
    3.10 - COURSE DETAILS
    3.11 - COURSE OUTLINE
    3.12 - FILTER DROPDOWN
    3.13 - CAROUSEL - GLOBAL STYLES
    3.14 - CAROUSEL - EVENTS
    3.15 - CAROUSEL - COURSES
-    3.16 - CAROUSEL - INSTRUCTORS    
-    3.17 - HOMEPAGE SECTION - FEATURED PHOTOGRAPHY 
+    3.16 - CAROUSEL - INSTRUCTORS
+    3.17 - HOMEPAGE SECTION - FEATURED PHOTOGRAPHY
    3.18 - HOMEPAGE SECTION - TIPS & TRICKS
    3.19 - HOMEPAGE SECTION - FAQS
    3.20 - HOMEPAGE SECTION - FEATURED COURSES
 */

 /*
-    1.0 GLOBAL SYLING  
+    1.0 GLOBAL SYLING
 */
 body {
  background: #1d1f21;
@ -183,12 +183,12 @@ div {
  }
 }

-/* 
-    2.0 - PAGE SPECIFIC STYLING  
+/*
+    2.0 - PAGE SPECIFIC STYLING
 */

-/* 
-    2.1 - HOMEPAGE  
+/*
+    2.1 - HOMEPAGE
 */
 .np-homepage-hero-image {
  height: 250px;
@ -321,8 +321,8 @@ div {
  }
 }

-/* 
-    2.2 - DASHBOARD PAGE  
+/*
+    2.2 - DASHBOARD PAGE
 */

 .np-dashboard {
@ -367,8 +367,8 @@ div {
  }
 }

-/* 
-    2.3 - CATALOG  
+/*
+    2.3 - CATALOG
 */

 .np-catalog .np-progress-filter-wrapper,
@ -391,8 +391,8 @@ div {
  }
 }

-/* 
-    2.4 - COURSE COVER PAGE  
+/*
+    2.4 - COURSE COVER PAGE
 */
 #course-desktop .np-course-content {
  background: #1d1f21;
@ -501,8 +501,8 @@ div {
  text-transform: uppercase;
 }

-/* 
-    2.7 - LEARNING PATH COVER PAGE  
+/*
+    2.7 - LEARNING PATH COVER PAGE
 */

 .np-learning-path-outline-inactive-item {
@ -520,11 +520,11 @@ div {
  border-radius: 0;
 }

-/* 
-    3.0 - COMPONENT SPECIFIC STYLING  
+/*
+    3.0 - COMPONENT SPECIFIC STYLING
 */

-/* 
+/*
    3.1 - HEADER
 */
 .np-header {
@ -552,8 +552,8 @@ div {
  }
 }

-/* 
-    3.2 - SUB NAV  
+/*
+    3.2 - SUB NAV
 */

 .np-sub-navigation {
@ -591,7 +591,7 @@ div {
  height: 0.2rem;
 }

-/* 
+/*
    3.3 - FOOTER
 */
 .np-footer + .np-powered-by {
@ -609,8 +609,8 @@ div {
  color: #1d1f21;
 }

-/* 
-    3.4 - BUTTONS  
+/*
+    3.4 - BUTTONS
 */

 .np-button {
@ -673,7 +673,7 @@ button.jryxug {
  }
 }

-/* 
+/*
    3.6 - COURSE CARD
 */
 .np-card-container {
@ -787,8 +787,8 @@ button.jryxug {
  }
 }

-/* 
-    3.7 - LEARNING PATH CARD  
+/*
+    3.7 - LEARNING PATH CARD
 */

 .np-learning-path .np-card-text-wrapper {
@ -848,7 +848,7 @@ button.jryxug {
  }
 }

-/* 
+/*
    3.8 - TRAINING EVENTS CARD
 */

@ -977,8 +977,8 @@ button.jryxug {
  }
 }

-/* 
-    3.9 - COURSE BANNER  
+/*
+    3.9 - COURSE BANNER
 */
 .np-course-banner {
  position: relative;
@ -1091,7 +1091,7 @@ button.jryxug {
 }

 /*
-    3.11 - COURSE PROGRESS & CTA 
+    3.11 - COURSE PROGRESS & CTA
 */
 .np-card-progress-bar-container,
 .np-progress-bar-container {