Templates changes for a few clients.

2023-05-01 17:07:21 -04:00
parent 3e6a6e5266
commit 26c55d54f6
27 changed files with 1128 additions and 9 deletions
--- a/Custom_Templates/customer_templates/Glassdoor/homepage.html.liquid
+++ b/Custom_Templates/customer_templates/Glassdoor/homepage.html.liquid
@ -0,0 +1,187 @@
+{% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.featured %}
+<main class="np-main np-homepage">
+  <div class="np-homepage-hero">
+    <img class="np-homepage-hero-image"
+      src="{{ homepage.artwork_url }}"
+      alt="{{ homepage.headline }}"
+    />
+    <div class="np-homepage-hero-overlay"></div>
+    <div class="np-homepage-hero-content">
+      <div class="np-homepage-headline">
+        {{ homepage.headline }}
+      </div>
+      <div class="np-homepage-subheadline">
+        {{ homepage.subheadline }}
+      </div>
+      <a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
+        {% t .discover %}
+      </a>
+    </div>
+  </div>
+  {% include "search_bar" %}
+  <div class="np-homepage-featured np-max-width">
+    <div class="np-homepage-featured-text">
+      <div class="np-homepage-headline">
+        {{ homepage.featured_courses_headline }}
+      </div>
+      <div class="np-homepage-subheadline">
+        {{ homepage.featured_courses_subheadline }}
+      </div>
+    </div>
+    {% if courses.featured.any? %}
+      <div class="np-homepage-featured-courses row">
+        {% for course in courses.featured %}
+          <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
+            {% include "cards_course" with course %}
+          </div>
+        {% endfor %}
+      </div>
+    {% else %}
+      <div class="np-homepage-featured-empty">
+        <div class="np-zero-state-text">
+          {% t .empty, key: current_school.course_vocabulary %}
+        </div>
+        <img
+          class="np-zero-state-courses"
+          alt="{% t .empty, key: current_school.course_vocabulary %}"
+        />
+      </div>
+    {% endif %}
+  </div>
+
+  {% include "popular_topics" %}
+
+  {% include "catalog_category_carousels" %}
+  
+</main>
+{% include "footer" %}
+
+<style>
+  .np-homepage-hero-overlay {
+    background: rgb(18,102,102);
+    background: linear-gradient(43deg, rgba(18,102,102,1) 0%, rgba(12,170,65,1) 100%);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 85%;
+  }
+
+  .np-homepage-headline,
+  .np-homepage-subheadline {
+    color: #fff;
+  }
+
+  .np-homepage-headline {
+    font-weight: 900;
+  }
+
+  .np-homepage-hero-cta {
+    color: #126666;
+    padding: 8px 1pc;
+    margin-top: 36px;
+    background-color:#fff;
+  }
+
+  .np-homepage-hero-cta:hover {
+    background-color:rgba(255, 255, 255, 0.8);
+  }
+
+  @media (min-width:768px) {
+    .np-homepage-headline {
+      font-size: 52px;
+      line-height: 60px;
+    }
+  }
+
+</style>
+
+<script>
+  $(document).ready(function() {
+      $(".category-section").each(function() {
+        let carousel = $(this).find(".category-carousel")
+        let carouselSize = $(carousel).attr("data-slider-size")
+
+        carousel.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
+          if(!slick.$dots){ return; }
+
+          (slick.$dots[0].children.length > 1) ? null : hideDotsAndShowMore()
+
+          function hideDotsAndShowMore() {
+            slick.$dots[0].classList.add("np-hidden")
+            carousel.closest(".category-section").find(".show-more").addClass("np-hidden")
+          }
+        });
+
+        if (carouselSize > 0) {
+          initSlickCarousel(carousel)
+          $(this).css("display", "block")
+          setTimeout(() => { $(this).css("opacity", "1") }, 300)
+        }
+
+      })
+    })
+
+    function initSlickCarousel(carousel) {
+      $(carousel).slick({
+        slidesToShow: 3,
+        slidesToScroll: 3,
+        cssEase: 'linear',
+        prevArrow: '<i class="fal fa-chevron-left"></i>',
+        nextArrow: '<i class="fal fa-chevron-right"></i>',
+        infinite: false,
+        dots: true,
+        arrows: true,
+        responsive: [
+          {
+            breakpoint: 1170,
+            settings: {
+              slidesToShow: 2,
+              slidesToScroll: 2,
+              arrows: true,
+              dots: true,
+            }
+          },
+          {
+            breakpoint: 768,
+            settings: {
+              slidesToShow: 1,
+              slidesToScroll: 1,
+              dots: true,
+              arrows: false,
+            }
+          }
+        ]
+      });  
+    }
+
+  $('.show-more').click(function(e) {
+    e.preventDefault();
+
+    let currentCarousel = $(this).closest(".category-section").find(".category-carousel");
+
+    if ($(this).attr("data-carousel-state") == "initialized") {
+      $(this).text("Show Less")
+      currentCarousel.slick('unslick');
+      $(this).attr("data-carousel-state", "destroyed")
+    } else if ($(this).attr("data-carousel-state") == "destroyed" ) {
+      $(this).text("Show More")
+      initSlickCarousel(currentCarousel);
+      $(this).attr("data-carousel-state", "initialized")
+    }
+  });
+
+  $(".topics-btn").click(function() {
+    const selectedFilter = $(this).data("filter")
+    $(".topics-btn").removeClass("active")
+    $(this).addClass("active")
+
+    $(".category-section").hide()
+    
+    $(".category-section").each(function() {
+      if (selectedFilter == $(this).data("filter")) {
+        $(this).show()
+      }
+    })
+  })
+</script>