Files
Gainsight/Custom_Templates/customer_templates/LJ Hooker Lighthouse/training_events.html.liquid
Norm Rasmussen 0ba43545f1 LJ Hooker backup
2024-11-07 14:51:31 -05:00

279 lines
7.4 KiB
Plaintext

{% include "header" %}
{% include "sub_navigation" %}
<main class="np-main np-training-events np-subpage-container np-max-width">
<div class="row">
<div class="col-xs-12 col-sm-10" style="margin:auto;">
<div class="np-resource-title">
Events
</div>
<div class="np-resource-subtitle">
Discover and register for all in-person online training events to maximise your learning
</div>
</div>
{% comment %} <div class="col-xs-12 col-sm-2">
{% include "training_events_filter" %}
</div> {% endcomment %}
</div>
<div class="row">
<div class="col-xs-12 events-filter-container ">
<select class="event-filter-select">
<option value="all" selected>Search events by State</option>
{% comment %} <option value="national">National</option> {% endcomment %}
<option value=" ACT">ACT</option>
<option value=" NSW">NSW</option>
<option value=" QLD">QLD</option>
<option value=" SA">SA</option>
<option value=" TAS">TAS</option>
<option value=" VIC">VIC</option>
<option value=" WA">WA</option>
<option value=" NZ">NZ</option>
{% comment %} <option value="auction training">Auction Training</option>
<option value="commercial">Commercial</option>
<option value="ebu training">EBU Training</option>
<option value="influencern training">Influencer Training</option>
<option value="leadership">Leadership</option>
<option value="momentum">Momentum</option>
<option value="pinnacle">Pinnacle</option>
<option value="property management">Property Management</option>
<option value="sales">Sales</option>
<option value="shine pm">Shine PM</option>
<option value="state sales training">State Sales Training</option>
<option value="succes path">Success Path</option> {% endcomment %}
</select>
</div>
{% comment %} <div class="col-xs-12 events-filter-container np-hidden-mobile np-hidden-desktop">
<div class="event-filter active" data-filter="all">
All Upcoming Events
</div>
<div class="event-filter" data-filter="auction training">
Auction Training
</div>
<div class="event-filter" data-filter="commercial">
Commercial
</div>
<div class="event-filter" data-filter="ebu Training">
EBU Training
</div>
<div class="event-filter" data-filter="influencer training">
Influencer Training
</div>
<div class="event-filter" data-filter="leadership">
Leadership
</div>
<div class="event-filter" data-filter="momentum">
Momentum
</div>
<div class="event-filter" data-filter="pinnacle">
Pinnacle
</div>
<div class="event-filter" data-filter="property management">
Property Management
</div>
<div class="event-filter" data-filter="sales">
Sales
</div>
<div class="event-filter" data-filter="shine pm">
Shine PM
</div>
<div class="event-filter" data-filter="state sales training">
State Sales Training
</div>
<div class="event-filter" data-filter="success path">
Success Path
</div>
</div>
</div> {% endcomment %}
{% include "training_events_index" %}
<div class="filtered-events-zero-state np-dashboard-resources" style="display:none;">
{% include "training_events_zero_state" %}
</div>
{% comment %} <div class="heading">
<div class="np-resource-title">Events</div>
<div class="resource-subtitle">Discover and register for all in-person online training events to maximize your learning </div>
<a class="np-top-button np-button-font-color np-button np-button-big" href="https://ljhookergroup.eventsair.com/lj-hooker-training-events-website/calendar ">
Visit our Events Website
</a>
</div> {% endcomment %}
</main>
{% include "footer" %}
{% comment %} <style>
.heading {
display: flex;
flex-direction: column;
align-items: center;
}
.np-resource-title {
font-weight: 500;
font-size: 55px;
}
.resource-subtitle {
margin: 2rem 0;
color: #7c9ac0;
font-weight: 800;
width: 50%;
text-align: center;
}
</style> {% endcomment %}
<style>
.np-main.np-training-events.np-subpage-container {
padding: 32px 16px 50px;
}
.events-filter-container {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
.np-resource-title {
font-size: 32px;
text-align: center;
font-weight: 400;
line-height: normal;
}
.np-resource-subtitle {
text-align: center;
margin-bottom:16px;
}
.events-filter-container.np-hidden-desktop {
text-align: center;
margin-bottom: 32px;
}
select.event-filter-select {
border: 2px solid #000;
color: #000;
padding: 4px 12px;
font-weight: 700;
border-radius: 4px;
font-size: 14px;
}
.events-filter-container.np-hidden-mobile {
display: flex;
justify-content: center;
margin-bottom: 32px;
margin-top: 16px;
flex-wrap: wrap;
}
.event-filter {
background-color: transparent;
border: 2px solid #000;
color: #000;
text-decoration: none;
padding: 4px 12px;
font-weight: 700;
border-radius: 4px;
margin: 0 12px 16px;
font-size: 14px;
transition: all 0.1s;
cursor:pointer;
}
.event-filter:hover,
.event-filter.active {
color: #fff;
background: #000;
}
@media (min-width: 768px) {
.np-resource-title {
font-size: 55px;
}
.event-filter {
font-size: 16px;
padding: 6px 16px;
margin: 0 16px 16px;
}
}
</style>
<script>
$(".event-filter").click(function() {
$(".event-filter").removeClass("active")
$(this).addClass("active")
filterEvents($(this).data("filter"))
})
$(".event-filter-select").change(function() {
filterEvents(this.value)
})
function filterEvents(selectedFilterValue) {
hideZeroState()
if (selectedFilterValue == "all") {
showAllEvents()
} else {
showFilteredEvents(selectedFilterValue)
}
}
function hideZeroState() {
$(".filtered-events-zero-state").hide()
}
function showAllEvents() {
$(".training-event-card-column").show()
}
function showFilteredEvents(selectedFilterValue) {
let numOfEventsToShow = 0;
hideAllEvents()
numOfEventsToShow += showAndCountEvents(selectedFilterValue)
numOfEventsToShow += showAndCountWebinars()
showZeroState(numOfEventsToShow)
}
function hideAllEvents() {
$(".training-event-card-column").hide()
}
function showAndCountEvents(selectedFilterValue) {
let numberOfEvents = 0
$(".training-event-card-column").each(function() {
const eventTitle = $(this).find(".np-card-content-title").text().trim();
if(eventTitle.includes(selectedFilterValue)){
$(this).show()
numberOfEvents++
}
})
return numberOfEvents
}
function showAndCountWebinars() {
let numberOfWebinars = 0
$(".training-event-card-column").each(function() {
const eventTitle = $(this).find(".np-card-content-title").text().trim();
if(eventTitle.includes("Webinar")){
$(this).show()
numberOfWebinars++
}
})
return numberOfWebinars
}
function showZeroState(numOfEventsToShow) {
if (numOfEventsToShow == 0) {
$(".filtered-events-zero-state").show()
}
}
</script>