Downloaded DE's templates (old templates). Worked on pandas and customer data with a good amount of success.

This commit is contained in:
Norm Rasmussen
2023-04-13 17:05:51 -04:00
parent 1a2c86d665
commit c88ffb4004
30 changed files with 10121 additions and 158 deletions

Binary file not shown.

View File

@ -0,0 +1,19 @@
<div class="search-box uk-float-right">
<form class="uk-form search" action="{{ routes.school_website_catalog_search_path }}" accept-charset="UTF-8" method="get">
<input name="utf8" type="hidden" value="✓">
<input type="search" name="q" id="q" placeholder="Search"
class="search__input" autofocus="autofocus" pattern=".{3,}"
required title="{% t .search_title %}" value="{{ query_parameter_value }}"
data-test="search-input">
<input type="hidden" name="filter[categories_name]" id="filter" value="{{ filter_parameter_value }}">
<div id="search_results_count" class="search__results">
{% if search_result %}
{{ search_result.count }} {% pluralize search_result.count, .results %}
{% endif %}
</div>
<div class="search__submit">
<i class="uk-icon-search search__icon"></i>
<input type="submit" name="commit" value="" class="search__button">
</div>
</form>
</div>

View File

@ -0,0 +1,78 @@
{% comment %} Logic to traverse courses and find total number of sections {% endcomment %}
{% assign total_activities = 0 %}
{%- for sections in course.published_sections -%}
{%- for activity in sections.activities -%}
{% capture total_activities %}{{ total_activities | plus:1 }}{% endcapture %}
{%- endfor -%}
{%- endfor -%}
{% comment %}
There's no way to access a course's UID. We will obtain this by using string
manipulation on the cover_path URL which has a UID.
course.cover_path ~> /outline/{{id}}/cover
{% endcomment %}
{% assign course_path = course.cover_path | split: '/' %}
{% assign current_course_id = course_path[2] %}
{% assign course_date = course.created_at | date: "%s" %}
{% assign number_date = course_date | times: 1%}
<div data-order = "{{number_date}}" class="course-details__item grid__item grid__item--tablet-up-half grid__item--desktop-up-third" data-test="{{ course.name }}">
{% if course.ribbon %}
<div class="uk-panel-badge uk-badge">
{{ course.ribbon }}
</div>
{% endif %}
<a href="{{ course.cover_path }}" class="main-link">
<img src="{{ course.list_image_url }}" class="course-details__image" alt="">
</a>
<div class="gutter-bottom">
<h4 class="text-dark-blue euclid-circular-bold heading--3 course-details__name">{{ course.name }}</h4>
<p class="text-grey euclid-circular-light course-details__desc">
{{ course.short_description }}
<!-- <a class="body-link">Learn&nbsp;More</a> -->
</p>
</div>
<div class="grid">
<div class="text-dark-blue euclid-circular-semibold grid__item grid__item--mobile-up-half">
<p>Total modules</p>
</div>
<div class="text-dark-blue euclid-circular-semibold grid__item grid__item--mobile-up-half text-right">
<p>{{ course.published_sections.count }}</p>
</div>
</div>
<hr class="course-details__seperator">
<div class="grid">
<div class="text-dark-blue euclid-circular-semibold grid__item grid__item--mobile-up-half">
<span>Total lessons</span>
</div>
<div class="text-dark-blue euclid-circular-semibold grid__item grid__item--mobile-up-half text-right">
<span>{{ total_activities }}</span>
</div>
</div>
<hr class="course-details__seperator">
<div class="grid">
<div class="grid__item text-center--tablet-down">
{%- if current_person.enrolled_in_course? -%}
{%- if course.progress_text == '0% Complete'-%}
<a href="{{ course.cover_path }}" class="sainte-colombe-regular marketing-button marketing-button--small" style="color: white !important; background-color: #009CBD !important; border-radius: 0px !important; font-size: 12px;">
Start Course
</a>
{%- else -%}
<a href="{{ course.cover_path }}" class="sainte-colombe-regular marketing-button marketing-button--small" style="color: white !important; background-color: #009CBD !important; border-radius: 0px !important; font-size: 12px;">
Continue Course
</a>
{%- endif -%}
{%- else -%}
<a href="{{ course.details_path }}" class="sainte-colombe-regular marketing-button marketing-button--small" style="color: white !important; background-color: #009CBD !important; border-radius: 0px !important; font-size: 12px;">
View Course
</a>
{%- endif -%}
</div>
</div>
</div>

View File

@ -0,0 +1,71 @@
{% comment %} Logic to traverse courses and find total number of sections {% endcomment %}
{% assign total_activities = 0 %}
{%- for sections in course.published_sections -%}
{%- for activity in sections.activities -%}
{% capture total_activities %}{{ total_activities | plus:1 }}{% endcapture %}
{%- endfor -%}
{%- endfor -%}
{% comment %}
There's no way to access a course's UID. We will obtain this by using string
manipulation on the cover_path URL which has a UID.
course.cover_path ~> /outline/{{id}}/cover
{% endcomment %}
{% assign course_path = course.cover_path | split: '/' %}
{% assign current_course_id = course_path[2] %}
<div class="course-details__item grid__item grid__item--tablet-up-half grid__item--desktop-up-third" data-test="{{ course.name }}">
{% if course.ribbon %}
<div class="uk-panel-badge uk-badge">
{{ course.ribbon }}
</div>
{% endif %}
<a href="{{ course.cover_path }}" class="main-link">
<img src="{{ course.list_image_url }}" class="course-details__image" alt="">
</a>
<div class="gutter-bottom">
<p class="text-dark-blue euclid-circular-light myriad-pro-light">{{ course.progress_text }}</p>
<h4 class="text-dark-blue euclid-circular-bold heading--3 course-details__name">{{ course.name }}</h4>
<p class="text-grey euclid-circular-light course-details__desc">
{{ course.short_description }}
<!-- <a class="body-link">Learn&nbsp;More</a> -->
</p>
</div>
<div class="grid">
<div class="text-dark-blue euclid-circular-semibold grid__item grid__item--mobile-up-half">
<p>Total modules</p>
</div>
<div class="text-dark-blue euclid-circular-semibold grid__item grid__item--mobile-up-half text-right">
<p>{{ course.published_sections.count }}</p>
</div>
</div>
<hr class="course-details__seperator">
<div class="grid">
<div class="text-dark-blue euclid-circular-semibold grid__item grid__item--mobile-up-half">
<span>Total lessons</span>
</div>
<div class="text-dark-blue euclid-circular-semibold grid__item grid__item--mobile-up-half text-right">
<span>{{ total_activities }}</span>
</div>
</div>
<hr class="course-details__seperator">
<div class="grid">
<div class="grid__item text-center--tablet-down">
{%- if course.progress_text == '0% Complete'-%}
<a href="{{ course.cover_path }}" class="sainte-colombe-regular marketing-button marketing-button--small" style="color: white !important; background-color: #009CBD !important; border-radius: 0px !important; font-size: 12px;">
Start Course
</a>
{%- else -%}
<a href="{{ course.cover_path }}" class="sainte-colombe-regular marketing-button marketing-button--small" style="color: white !important; background-color: #009CBD !important; border-radius: 0px !important; font-size: 12px;">
Continue Course
</a>
<!-- <span class="course-details__progress-text">{{ course.progress_text }}</span> -->
{%- endif -%}
</div>
</div>
</div>

View File

@ -0,0 +1,22 @@
<div class="uk-width-1-1 uk-padding-large-vertical uk-padding-horizontal uk-border-bottom">
<h2 class="text-dark-blue sainte-colombe-medium color-indigo-dark hunt-padding-b" style="font-size: 1.9em;">{% t .my_events %}</h2>
<ul class="uk-list event-list">
{% for event in current_person.upcoming_registered_events.sessions.head %}
{% include "events_list_item" event = event %}
{% endfor %}
{% for event in current_person.upcoming_registered_events.sessions.tail %}
<div class="uk-hidden hideable">
{% include "events_list_item" event = event %}
</div>
{% endfor %}
</ul>
{% if current_person.upcoming_registered_events.additional_sessions? %}
<div class="uk-width-1-1 uk-text-center">
<a href="#" data-uk-toggle="{target: '.hideable'}">
<span class="hideable">{% t .show_all_events %}</span>
<span class="hideable uk-hidden">{% t .show_fewer_events %}</span>
</a>
</div>
{% endif %}
</div>

View File

@ -0,0 +1,246 @@
{% if current_person.signed_in? %}
<footer role="contentinfo" class="footer--main section-margin">
<div class="footer-bottom">
<div class="grid">
<div class="grid__inner">
<div
id="contact-us"
class="
grid__item grid__item--tablet-up-4
footer-bottom__links
text-center--mobile
"
style="padding-top: 10px"
>
<small
>Need help? Email
<a
class="side-navbar-item"
href="mailto:detraining@elliman.com"
style="font-size: 100% !important"
>detraining@elliman.com</a
></small
>
<!-- <a href="/">Courses</a>
<a href="#">Workshops</a>
<a href="/resources">Quick Links & Resources</a> -->
</div>
<div class="grid__item grid__item--tablet-up-2 text-center--mobile">
<div
class="responsive-svg footer-bottom__academy-logo--light"
style="padding-top: 10px"
>
<small
class="ui-inline-svg text-white"
aria-labelledby="inline-academy-logo--light-title"
>
&copy Douglas Elliman all rights reserved.
</small>
</div>
</div>
</div>
</div>
</div>
</footer>
{% else %}
<footer class="uk-padding-large-vertical uk-border-top">
<div class="uk-container uk-container-center">
<div class="uk-grid uk-padding-large-left uk-padding-large-right">
<div class="uk-width-small-1-1 uk-width-medium-7-10 uk-margin-bottom">
{% if website_footer.show_navigation_links? %}
<nav>
<ul class="uk-margin-bottom-remove uk-text-center-small">
{% for website_navigation in footer_navigations %}
<li>
<a
href="{{ website_navigation.path }}"
{%
if
website_navigation.external?
%}
target="_blank"
{%
endif
%}
>
{{ website_navigation.name }}
</a>
</li>
{% endfor %}
</ul>
</nav>
{% endif %} {% if website_footer.show_customer_service_email? and
website_footer.school_customer_service_email %}
<p class="uk-text-center-small">
{% t .need_help %} {% t .email %}
<a href="mailto:{{ website_footer.school_customer_service_email }}">
{{ website_footer.school_customer_service_email }}
</a>
</p>
{% endif %}
</div>
<div
class="
{%
if
website_footer.show_customer_service_email?
or
website_footer.show_navigation_links?
%}uk-width-medium-3-10{%
else
%}uk-width-medium-1-1{%
endif
%}
"
>
{% if website_footer.show_social_media_links? %}
<nav class="social-links">
<ul
class="
uk-margin-bottom-remove
{%
if
website_footer.show_customer_service_email?
or
website_footer.show_navigation_links?
%}uk-text-right
{%
else
%}uk-text-center
{%
endif
%}
uk-text-center-small
"
>
{% for social_media_link in website_footer.social_media_links %}
<li>
<a
href="{{ social_media_link.link }}"
class="{{ social_media_link.name }}"
target="_blank"
title="{{ social_media_link.name }}"
>
<i class="uk-icon-{{ social_media_link.name }}"></i>
</a>
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
</div>
</div>
</div>
</footer>
{% endif %}
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
></script>
<script>
function hideCarouselIfEmpty() {
$(".slick-track").each(function () {
anyCourse = false;
$(this)
.children()
.each(function () {
if ($(this).css("display") == "block") {
anyCourse = true;
}
});
if (!anyCourse) {
$(this)
.parents()
.each(function () {
var parent = $(this);
if (parent.hasClass("single-carousel")) {
parent.css("display", "none");
parent.find(".show-more").css("display", "none");
}
if (parent.hasClass("test-carousel")) {
parent.find(".slick-dots").css("display", "none");
// parent.append("<p class='sainte-colombe-medium' style='padding-left: 20px;'>No courses in the category yet.");
}
});
}
});
}
window.onload = function () {
var openButton = document.getElementsByClassName(
"marketing-nav__hamburger"
)[0];
var closeButton = document.getElementsByClassName(
"drawer__close-button"
)[0];
var mobileNavOverlay = document.getElementsByClassName(
"mobile-nav__overlay"
)[0];
if (typeof openButton != "undefined" && openButton != null) {
openButton.addEventListener("click", function () {
document.body.classList.add("js-drawer-open");
});
closeButton.addEventListener("click", function () {
document.body.classList.remove("js-drawer-open");
});
mobileNavOverlay.addEventListener("click", function () {
document.body.classList.remove("js-drawer-open");
});
}
hideCarouselIfEmpty()
addSideMenuBar()
};
</script>
<style>
.arrow {
font-size: 10px;
}
.breadcrumbs {
font-size: 16px;
}
.breadcrumbs a {
color: #0061df;
}
.breadcrumbs p {
margin: 40px 0;
}
</style>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
></script>
<script>
function addSideMenuBar() {
var path = window.location.pathname;
var sideBar = '<div class="sidenav"> <a href="/" class="side-navbar-item euclid-circular-regular">Home</a> <a href="/my_courses" class="side-navbar-item euclid-circular-regular">My Courses</a> <a href="/training_events" class="side-navbar-item euclid-circular-regular">Training Calendar</a> <a href="/catalog?filter%5Bcategories_name%5D=Mandatory+Courses" class="side-navbar-item euclid-circular-regular">Mandatory Courses</a> <a href="/catalog" class="side-navbar-item euclid-circular-regular">Categories</a> <a href="/catalog" class="side-navbar-item euclid-circular-regular">All Courses</a> <a href="/catalog?filter%5Bcategories_name%5D=StudioPro" class="side-navbar-item euclid-circular-regular">StudioPro</a> <a href="/catalog?filter%5Bcategories_name%5D=On+Boarding" class="side-navbar-item euclid-circular-regular">On Boarding</a> <a href="#" class="side-navbar-item euclid-circular-regular">Quick Links<br> & Resources</a> <a href="#" class="side-navbar-item euclid-circular-regular">Contact Us</a> </div>'
if (path === "/my_courses" &&
document.body.innerHTML.search("Looks like you haven't signed up for any courses yet") > -1) {
$(".main-content").addClass("section-margin")
$(".main-content").after(sideBar)
$("#search_results_count").remove()
}
if (path.includes("search")) {
$(".main-content").addClass("section-margin")
$(".search").addClass("section-margin")
$("header").remove()
$(".main-content").after(sideBar)
}
}
</script>

View File

@ -0,0 +1,11 @@
<link rel="stylesheet" media="all" href="{{ routes.schoolkeep_v3_styles_url }}">
<link rel="stylesheet" media="all" href="{{ routes.color_scheme_path }}">
{% if current_school.has_custom_styles? %}
<link rel="stylesheet" media="all" href="{{ routes.custom_styles_path }}">
{% endif %}
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>

View File

@ -0,0 +1,212 @@
{% if current_person.signed_in? %}
{% if current_person.properties.show_banner? %}
{% if current_person.properties.is_primary_account == false %}
{% include "info_banner" %}
{% endif %}
{% endif %}
{% endif %}
<header class="section-margin">
<div class="marketing-nav-wrapper">
<nav
class="marketing-nav marketing-nav__primary hunt-margin-t"
id="ShopifyMainNav"
itemscope="itemscope"
itemtype="https://schema.org/SiteNavigationElement"
role="navigation"
aria-label="Main Navigation"
style="background-color: white !important;"
>
<a href="{{ current_school.logo_navigation_url }}" class="uk-brand">
{% if current_school.logo_url %}
<div class="marketing-nav__logo" style="margin-right: 0;">
<a href="/">
<img src="{{ current_school.logo_url }}" alt="{{ current_school.name }}">
</a>
</div>
{% else %}
<span class="uk-text-large uk-text-bold">{{ current_school.name }}</span>
{% endif %}
</a>
<div class="uk-navbar-flip">
<!-- uk-hidden-small -->
<ul class="euclid-circular-regular hunt-desktop-nav marketing-nav__items marketing-nav__user" style="margin-top: -5px;">
<li>
<a href="#" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
Courses
</a>
</li>
<!-- <li class="">
<a href="#" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
Resources
</a>
</li> -->
<li>
<a href="/training_events" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
Training Calendar
</a>
</li>
<li>
<a href="/resources" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
Quick Links & Resources
</a>
</li>
<li data-uk-dropdown="{mode:'click'}">
<a href="#" class="learner-name marketing-nav__item marketing-nav__item--user">{{ current_person.name }}</a>
<div class="uk-dropdown uk-dropdown-flip uk-dropdown-navbar">
<ul class="uk-nav uk-nav-navbar">
<li class="dropdown-item"><a href="{{ routes.my_content_path }}">My Courses</a></li>
<li class="uk-nav-divider"></li>
<li class="dropdown-item"><a href="{{ routes.log_out_path }}" data-method="delete" rel="nofollow">{% t .log_out %}</a></li>
</ul>
</div>
</li>
<li class="hunt-search">
<div class="marketing-nav__item marketing-nav__item--user">
{% include "catalog_search_form" with "" %}
</div>
</li>
</ul>
<!-- uk-visible-small -->
<div class="hunt-mobile-nav ">
<button class="uk-button uk-button-link uk-navbar-toggle mobile-search-toggle mobile-navbar-toggle" data-uk-toggle="{target:'#mobile-search'}">
</button>
<a href="#mobile-nav" class="mobile-navbar-toggle uk-navbar-toggle" data-uk-offcanvas></a>
</div>
</div>
</nav>
</div>
</header>
<div id="mobile-search" class="school-website-header uk-position-top uk-padding uk-block-default uk-flex uk-border-bottom {% if hide_search_box %}uk-hidden {% endif %}">
{% include "search_form" with "" %}
<a class="uk-button uk-button-link" href="{{ routes.my_content_path }}">Back</a>
</div>
<div id="mobile-nav" class="uk-offcanvas">
<div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
<ul class="uk-nav uk-nav-offcanvas" data-uk-nav>
<li>
<a href="/" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
Home
</a>
</li>
<li>
<a href="/my_courses" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
My Courses
</a>
</li>
<li>
<a href="/training_events" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
Training Calendar
</a>
</li>
<li>
<a href="/training_events" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
Orientation
</a>
</li>
<li>
<a href="/catalog?filter%5Bcategories_name%5D=Mandatory+Courses" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
Mandatory Courses
</a>
</li>
<li>
<a href="/catalog" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
Categories
</a>
</li>
<li>
<a href="/catalog"" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
All Courses
</a>
</li>
<li>
<a href="/catalog?filter%5Bcategories_name%5D=On+Boarding" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
On Boarding
</a>
</li>
<li>
<a href="/catalog?filter%5Bcategories_name%5D=StudioPro" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
StudioPro
</a>
</li>
<li>
<a href="/resources" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
Quick Links<br> & Resources</a>
</a>
</li>
<li>
<a href="mailto:detraining@elliman.com" target="_blank" class="marketing-nav__item marketing-nav__item--user" itemprop="name">
Contact Us
</a>
</li>
<li class="uk-nav-divider"></li>
<li>
<a href="{{ routes.log_out_path }}" class="marketing-nav__item marketing-nav__item--user" itemprop="name" data-method="delete" rel="nofollow">{% t .log_out %}</a>
</li>
</ul>
</div>
</div>
<style>
.yellow-label {
width: 100%;
background-color: #FFC425;
color: #FFC425;
}
.school-website-header {
box-shadow: none !important;
}
.survey-tooltip {
visibility: hidden;
width: 300px;
position: absolute;
line-height: 3.5;
min-height: 110px;
font-size: 15px;
border-radius: 3px;
box-shadow: 3px 3px 11px rgba(0,0,0,0.08);
transition: 0.1s;
z-index: 10;
}
.live-workshops:hover .survey-tooltip {
visibility: visible;
}
.survey-tooltip:hover {
visibility: visible;
}
.grey-background {
background-color: rgb(249, 250, 252);
padding: 0 20px;
}
.white-background {
line-height: 2;
padding: 10px 20px;
background: #fff;
}
.dropdown-item {
line-height: 1.5 !important;
}
.dropdown-item > a:hover {
background-color: #009CBD !important;
}
</style>
<script>
if(window.location.pathname == "/") {
document.querySelector("#mobile-search > a").setAttribute("href", "/");
}
</script>

View File

@ -0,0 +1,39 @@
<div class="info-banner">
<div class="banner-content">
Please log in with your primary Douglas Elliman account. If logged in under your secondary account, courses will not be counted toward your mandatory training. Need help identifying your primary account? Contact the Help Desk.
</div>
</div>
<style>
.info-banner {
background: #009cbd;
padding: 16px;
color: #fff;
text-align:center;
margin-bottom:16px;
font-size:12px;
}
@media (min-width:799px) {
.info-banner {
margin-left:160px;
font-size:16px;
padding: 24px 16px;
}
}
@media (min-width:1600px) {
.info-banner {
position:absolute;
top:0;
left:0;
right:0;
font-size:18px;
}
header.section-margin {
margin-top:120px;
}
}
</style>

View File

@ -0,0 +1,16 @@
<div class="course-details__item grid__item grid__item--tablet-up-half grid__item--desktop-up-third">
<a href="{{ learning_path.cover_path }}" class="main-link">
<img src="{{ learning_path.list_image_url }}" class="course-details__image">
</a>
<div class="gutter-bottom">
<h4 class="myriad-pro-bold heading--3 course-details__name">{{ learning_path.name }}</h4>
<!-- <p class="myriad-pro-light course-details__desc"> -->
{{ learning_path.description }}
<!-- </p> -->
</div>
</div>

View File

@ -0,0 +1,110 @@
{% include "side_navigation_bar" %}
<div class="section-margin mandatory-courses-carousel" style="margin-bottom:75px;">
<div class="grid">
<div class="grid__item grid__item--tablet-up-half cat-header" style="width: 100%; padding-bottom: 10px">
<h2 class="text-dark-blue sainte-colombe-medium heading--1 color-indigo-dark hunt-padding-b">
Mandatory Courses</h2>
</div>
<p class="carousel-change-mandatory show-more">See More</p>
</div>
<div class="grid grid--equal-height slider1 mandatory-carousel">
{%- for course in my_content.courses -%}
{% if course.course_category_names contains "Mandatory Courses" %}
{% include 'course' %}
{%- endif -%}
{%- endfor -%}
</div>
<div class="grid no-mandatory-courses" style="display:none">
No assigned courses
</div>
</div>
<style>
.no-mandatory-courses {
font-size: 20px;
margin-left: 20px;
margin-top: 16px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.mandatory-carousel').on('init', function(event, slick){
if (slick.slideCount == 0) {
$(".mandatory-carousel").hide()
$(".carousel-change-mandatory").hide()
$(".no-mandatory-courses").show()
}
});
$('.mandatory-carousel').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
})
});
</script>
<script>
$('.carousel-change-mandatory').click(function() {
if($('.carousel-change-mandatory').hasClass('show-more')) {
$('.slider1').slick('unslick');
$('.show-more').text('Show Less');
$('.show-more').addClass('show-less');
$('.show-more').removeClass('show-more');
} else if($('.carousel-change-mandatory').hasClass('show-less')) {
$('.show-less').text('Show More');
$('.show-less').addClass('show-more');
$('.show-less').removeClass('show-less');
$('.slider1').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}
});
</script>

View File

@ -0,0 +1,14 @@
<div class="grid">
<div class="grid__item grid__item--tablet-up-half hunt-margin-b" style="width: 100%;">
<h2 class="text-dark-blue euclid-circular-regular heading--1 color-indigo-dark" style="margin-bottom: 0;">Live & Virtual Sessions</h2>
<p class="text-grey euclid-circular-light text-major text-grey" style="margin-bottom: 30px; font-size: 20px; margin-top: 2px;">
We take pride in being ahead of the curve and keeping ourselves in the forefront of knowledge.
Elliman's Live & Virtual Sessions are designed to deliver timely topics that will enrich your skills,
knowledge and help you grow your business.
</p>
<p class="text-grey euclid-circular-light text-major text-grey" style="margin-bottom: 30px; font-size: 20px; margin-top: 2px;">
Click <b><a href="/training_events" class="euclid-circular-regular">here</a></b> to access our live training page and schedule.</br>
Click <b><a href="/catalog" class="euclid-circular-regular click-here">here</a></b> to access all courses.
</p>
</div>
</div>

View File

@ -0,0 +1,204 @@
{% include "side_navigation_bar" %}
<div class="section-margin section-category-carousels" style="opacity: 0.0;">
{% assign categories_by_name = current_school.filterable_categories | sort: "name" %}
{%- for category in categories_by_name -%}
{% capture _ %}{% increment carousels_counter %}{% endcapture %}
<div class="single-carousel">
<div class="grid">
<div class="grid__item grid__item--tablet-up-half cat-header" style="width: 100%; padding-bottom: 10px">
<h2 class="text-dark-blue sainte-colombe-medium heading--1 color-indigo-dark hunt-padding-b">
{{category.name}}</h2>
</div>
{% assign category_name = category.name | split: " " %}
<p class="carousel-change{{carousels_counter}} show-more">See More</p>
</div>
<div class="grid grid--equal-height slider{{carousels_counter}} test-carousel" >
{%- for course in my_content.courses -%}
{% if course.course_category_names contains category.name %}
{% include 'course' %}
{% endif %}
{%- endfor -%}
</div>
</div>
{%- endfor -%}
</div>
<div class="section-margin section-coming-soon" style="display:none;">
<section id="Main" class="section" style="padding-top: 0; padding-bottom: 33px;">
<div class="section-heading hunt-hero-header" style="margin-top: 1em; margin-bottom: 2em;">
<h1 class="text-dark-blue sainte-colombe-regular section-heading__heading heading--1 decorative-font hunt-margin-t" style="font-size: 60px;">
Coming Soon.
</h1>
</div>
</section>
</div>
<script type="text/javascript">
function initializeCarousel() {
$('.test-carousel').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
})
}
function orderSlidesForCarousel(sliderClass) {
$("." + sliderClass + " .course-details__item").each(function() {
var currentSlideDataOrder = $(this).attr("data-order")
var firstSlideDataOrder = $(".course-details__item").first().attr("data-order")
if (currentSlideDataOrder > firstSlideDataOrder) {
$($(this)).prependTo("." + sliderClass)
}
})
}
function changeCategoryNameToId(categoryName) {
return categoryName.replace(/\s+/g, '-').toLowerCase()
}
function setIdsToCarousels() {
$("h2").each(function(){
var categoryName = $(this).text().trim()
var id = changeCategoryNameToId(categoryName)
$(this).attr('id', id);
$(this).closest('.single-carousel').attr('id', "slider-" + id);
})
}
function scrollToCarouselIfHashExists() {
var hash = window.location.hash
if(hash) {
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 500);
}
}
$(document).ready(function () {
orderSlidesForAllCarousels()
initializeCarousel()
addSeeMoreForAllCarousels()
setIdsToCarousels()
$(".section-margin").css('opacity','1')
setTimeout(function(){ scrollToCarouselIfHashExists() }, 1000);
if (window.location.search != "") {
let params = new URL(location.href).searchParams.get('filter[categories_name]')
const filteredCategory = params.replace(" ", "-").toLowerCase();
displaySingleCatagory(filteredCategory);
}
});
function displaySingleCatagory(category) {
$(".single-carousel").each(function(index, value) {
if ($(this).attr("id") == "slider-" + category) {
if ($(this).find(".slick-track").children().length > 0) {
$(this).css("display", "block")
} else {
$(document).find(".section-coming-soon").css("display", "block")
}
} else {
$(this).css("display", "none");
}
})
}
function addSeeMoreForCarousel(carouselNumber) {
$(".carousel-change" + carouselNumber).click(function() {
if($(".carousel-change" + carouselNumber).hasClass('show-more')) {
$(".slider" + carouselNumber).slick('unslick');
$('.show-more').text('Show Less');
$('.show-more').addClass('show-less');
$('.show-more').removeClass('show-more');
} else if($(".carousel-change" + carouselNumber).hasClass('show-less')) {
$('.show-less').text('Show More');
$('.show-less').addClass('show-more');
$('.show-less').removeClass('show-less');
$(".slider" + carouselNumber).slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}
});
}
// function addCssToChangeCarousel
function addSeeMoreForAllCarousels() {
var sliders = $(".test-carousel")
sliders.each(function() {
var classList = this.className.split(/\s+/)
for (var i = 0; i < classList.length; i++) {
if (classList[i].startsWith("slider")) {
var sliderClass = classList[i]
var suffixNumber = sliderClass.match(/\d+/).toString()
addSeeMoreForCarousel(suffixNumber)
}
}
})
}
</script>
<script>
function orderSlidesForAllCarousels() {
var sliders = $(".test-carousel")
sliders.each(function() {
var classList = this.className.split(/\s+/)
var sliderClass = ''
for (var i = 0; i < classList.length; i++) {
if (classList[i].startsWith("slider")) {
sliderClass = classList[i]
orderSlidesForCarousel(sliderClass)
}
}
})
}
</script>

View File

@ -0,0 +1,184 @@
{% include "side_navigation_bar" %}
{% comment %} <div class="section-margin coming-soon-section">
<section id="Main" class="section" style="padding-top: 0; padding-bottom: 33px;">
<div class="section-heading hunt-hero-header" style="margin-top: 1em; margin-bottom: 2em;">
<h1 class="text-dark-blue sainte-colombe-regular section-heading__heading heading--1 decorative-font hunt-margin-t" style="font-size: 60px;">
Coming Soon.
</h1>
</div>
</section>
</div> {% endcomment %}
<div class="section-margin resources-section">
<section id="Main" class="section" style="padding-top: 0; padding-bottom: 33px;">
<div class="section-heading hunt-hero-header" style="margin-top: 1em; margin-bottom: 2em;">
<img class="podcast-logo" src="https://s3.amazonaws.com/static.northpass.com/douglas-elliman/de_podcast_logo.png" alt="Douglas Elliman Podcast Logo" />
<h1 class="text-dark-blue sainte-colombe-regular section-heading__heading heading--1 decorative-font hunt-margin-t" style="margin-top:0!important;">
Weekly Podcast 
</h1>
<p class="text-grey euclid-circular-light text-major text-grey section-heading--left" style="margin-bottom: 56px; font-size: 20px; margin-top: 16px; line-height: 2.1rem;text-align:left;">
You can join these calls live, along with the daily Role Play call, via Zoom using the links provided in the weekly Virtual Training Sessions email sent from <a href="mailto:DETraining@elliman.com" target="_blank">DETraining@elliman.com</a>
</p>
</div>
<hr />
<h3 class="daily-calls-header heading--1">
Live Daily Calls / Podcasts
</h3>
<div class="daily-call-group">
<div class="daily-call-header">Mondays</div>
<div class="daily-call-info">
<strong>Role Play with Brad Feldman</strong>
<br>
11:30AM - 12:00PM (EST)
<br>
Click to Join: <a href="https://elliman.zoom.us/j/95961064397" target="_blank">https://elliman.zoom.us/j/95961064397</a>
</div>
<div class="daily-call-info">
<strong>Monday Morning Mojo</strong>
<br>
12:00PM - 12:30PM (EST)
<br>
Click to Join: <a href="https://elliman.zoom.us/j/96514389168?pwd=MGd2OTU2KzkvSm9RdnFIalloY25pUT09" target="_blank">https://elliman.zoom.us/j/96514389168?pwd=MGd2OTU2KzkvSm9RdnFIalloY25pUT09</a>
</div>
</div>
<div class="daily-call-group">
<div class="daily-call-header">Tuesdays</div>
<div class="daily-call-info">
<strong>Role Play with Brad Feldman</strong>
<br>
11:30AM - 12:00PM (EST)
<br>
Click to Join: <a href="https://elliman.zoom.us/j/95961064397" target="_blank">https://elliman.zoom.us/j/95961064397</a>
</div>
<div class="daily-call-info">
<strong>The Masters Lab | Dave Werth & Peter Hernandez</strong>
<br>
12:00PM - 12:30PM (EST)
<br>
Click to Join: <a href="https://elliman.zoom.us/j/94755592160?pwd=bFUyQ3dXaDBVZGhwejF1a1pvRzZRZz09" target="_blank">https://elliman.zoom.us/j/94755592160?pwd=bFUyQ3dXaDBVZGhwejF1a1pvRzZRZz09</a>
</div>
</div>
<div class="daily-call-group">
<div class="daily-call-header">Wednesdays</div>
<div class="daily-call-info">
<strong>Role Play with Brad Feldman</strong>
<br>
11:30AM - 12:00PM (EST)
<br>
Click to Join: <a href="https://elliman.zoom.us/j/95961064397" target="_blank">https://elliman.zoom.us/j/95961064397</a>
</div>
<div class="daily-call-info">
<strong>Real Estate Deconstructed with Jeffrey Stanton & Peter Hernandez</strong>
<br>
12:00PM - 12:30PM (EST)
<br>
Click to Join: <a href="https://elliman.zoom.us/j/96775586444?pwd=UzFxbkVsZk9DUStCLzVoQUluU1BaUT09" target="_blank">https://elliman.zoom.us/j/96775586444?pwd=UzFxbkVsZk9DUStCLzVoQUluU1BaUT09</a>
</div>
</div>
<div class="daily-call-group">
<div class="daily-call-header">Thursdays</div>
<div class="daily-call-info">
<strong>Role Play with Brad Feldman</strong>
<br>
11:30AM - 12:00PM (EST)
<br>
Click to Join: <a href="https://elliman.zoom.us/j/95961064397" target="_blank">https://elliman.zoom.us/j/95961064397</a>
</div>
<div class="daily-call-info">
<strong>California: Broker Brilliance with Jon Butler & Fred Coleman</strong>
<br>
12:00PM - 12:30PM (EST)
<br>
Click to Join: <a href="https://elliman.zoom.us/j/95506857401?pwd=L0UxbFQrZk9rWG5ISUNiVDRSTno2QT09" target="_blank">https://elliman.zoom.us/j/95506857401?pwd=L0UxbFQrZk9rWG5ISUNiVDRSTno2QT09</a>
</div>
</div>
<div class="daily-call-group">
<div class="daily-call-header">Fridays</div>
<div class="daily-call-info">
<strong>Role Play with Brad Feldman</strong>
<br>
11:30AM - 12:00PM (EST)
<br>
Click to Join: <a href="https://elliman.zoom.us/j/95961064397" target="_blank">https://elliman.zoom.us/j/95961064397</a>
</div>
<div class="daily-call-info">
<strong>Friday Morning Drive with Peter Hernandez</strong>
<br>
12:00PM - 12:30PM (EST)
<br>
Click to Join: <a href="https://elliman.zoom.us/j/91637174704?pwd=RFg5K05JRzJDVjN4LzQ1aVlPd0U0dz09" target="_blank">https://elliman.zoom.us/j/91637174704?pwd=RFg5K05JRzJDVjN4LzQ1aVlPd0U0dz09</a>
</div>
</div>
<hr style="margin-top:48px;margin-bottom:48px;" />
<div class="resource-info">
<div class="gray-block">
Please visit <a href="https://zoom.us/test" target="_blank">https://zoom.us/test</a> to test your system prior to joining the classes. If you are receiving an error for the test please visit <a href="https://support.zoom.us/hc/enus/articles/115002262083-Joining-a-test-meeting" target="_blank">https://support.zoom.us/hc/enus/articles/115002262083-Joining-a-test-meeting</a> for more information. 
</div>
<div>
You can participate via computer or smartphone. If you have any questions please email <a href="mailto:DETraining@elliman.com" target="_blank">DETraining@elliman.com</a>
</div>
</div>
</section>
</div>
<style>
.resources-section .section {
display: block;
max-width: 1170px;
margin: auto!important;
padding-left:16px;
padding-right:16px;
}
.resources-section .section a { font-weight:500; }
.podcast-logo { width:250px;}
.daily-calls-header {
text-decoration:underline!important;
margin-top: 32px;
text-align:center;
}
.resources-section .heading--1 { font-family: "Times Bold" !important; }
.daily-call-group { margin-bottom:32px; }
.daily-call-header {
font-size: 20px;
font-weight:500;
text-decoration:underline;
margin-bottom:4px;
}
.daily-call-info { margin-bottom:22px; }
.gray-block {
padding:16px;
background:#ebebeb;
margin-bottom:32px;
text-align:center;
word-break: break-word;
}
@media (min-width:1350px) {
.resources-section .section {
padding-left:0;
padding-right:0;
}
.daily-call-header { font-size: 20px; }
.podcast-logo { width:auto; }
.gray-block { padding:32px; }
.resource-info {
width:90%;
margin:auto auto 32px;
}
}
</style>

View File

@ -0,0 +1,19 @@
<div class="search-box uk-float-right">
<form class="uk-form search" action="{{ routes.school_website_search_path }}" accept-charset="UTF-8" method="get">
<input name="utf8" type="hidden" value="✓">
<input type="search" name="q" id="q" placeholder="Search"
class="search__input" autofocus="autofocus" pattern=".{3,}"
required title="{% t .search_title %}" value="{{ query_parameter_value }}"
data-test="search-input">
<input type="hidden" name="filter[categories_name]" id="filter" value="{{ filter_parameter_value }}">
<div id="search_results_count" class="search__results">
{% if search_result %}
{{ search_result.count }} {% pluralize search_result.count, .results %}
{% endif %}
</div>
<div class="search__submit">
<i class="uk-icon-search search__icon"></i>
<input type="submit" name="commit" value="" class="search__button">
</div>
</form>
</div>

View File

@ -0,0 +1,14 @@
<div class="sidenav">
<a href="/" class="side-navbar-item euclid-circular-regular">Home</a>
<a href="/my_courses" class="side-navbar-item euclid-circular-regular">My Courses</a>
<a href="/training_events" class="side-navbar-item euclid-circular-regular">Training Calendar</a>
{%comment%}<a href="/training_events" class="side-navbar-item euclid-circular-regular">Orientation</a>{%endcomment%}
<a href={{current_school.properties.orientation_link}} class="side-navbar-item euclid-circular-regular">Orientation</a>
<a href="/mandatory-courses" class="side-navbar-item euclid-circular-regular">Mandatory Courses</a>
<a href="/catalog" class="side-navbar-item euclid-circular-regular">Categories</a>
<a href="/catalog" class="side-navbar-item euclid-circular-regular">All Courses</a>
<a href="/catalog?filter%5Bcategories_name%5D=StudioPro" class="side-navbar-item euclid-circular-regular">StudioPro</a>
<a href="/catalog?filter%5Bcategories_name%5D=On+Boarding" class="side-navbar-item euclid-circular-regular">On Boarding</a>
<a href="/resources" class="side-navbar-item euclid-circular-regular">Quick Links<br> & Resources</a>
<a href="mailto:detraining@elliman.com" target="_blank" class="side-navbar-item euclid-circular-regular">Contact Us</a>
</div>

View File

@ -0,0 +1,275 @@
<header class="uk-navbar uk-navbar-attached uk-border-bottom learning-header slide">
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
<li>
<a href="{{ routes.my_content_path }}" class="uk-border-left uk-button-small">{% t .exit %}</a>
</li>
{% if course.has_forum? %}
<li>
<a href="{{ course.forum_path }}" class="uk-border-left uk-button-small">
<i class="uk-icon-comments-o"></i>
</a>
</li>
{% endif %}
</ul>
</div>
<div class="uk-navbar-content uk-text-center sk-float-remove">
{% if current_school.logo_url %}
<img src="{{ current_school.logo_url }}" class="uk-responsive-height">
{% else %}
{{ current_school.name }}
{% endif %}
</div>
</header>
{% include "side_navigation_bar" %}
{% if preview_banner %}
{{ preview_banner }}
{% endif %}
<div class="uk-container uk-container-center uk-padding-large uk-margin-large-top">
<h4 class="uk-text-muted uk-margin-remove">{{ course.superscript }}</h4>
{% if course.learner_can_retake? %}
<form action="{{ course.course_attempts_path }}" method="POST" onsubmit="retakeButton.disabled = true;">
<button type="submit" class="uk-button uk-float-right completion-button" data-test="retake-course-button" name="retakeButton">{{ course.retake_course }}</button>
</form>
{% else %}
<a href="{{ course.outline_path }}" class="uk-button uk-float-right completion-button" data-test="start-course-button">{{ course.start_or_continue }}</a>
{% endif %}
{% if current_school.filtering_enabled? %}
<h3 class="uk-margin-remove">{{ course.course_category_names }}</h3>
{% endif %}
<h1 data-test="course-name" class="uk-margin-remove">{{ course.name }}</h1>
<hr class="uk-article-divider uk-margin-top">
<div{% if course.has_outline? %} class="uk-grid uk-grid-large"{% endif %}>
<div class="uk-width-medium-1-2 uk-margin-bottom{% unless course.has_outline? %} uk-container-center{% endunless %}">
<article class="uk-article">
<img src="{{ course.featured_image_url }}" />
<h3>{{ course.about_label }}</h3>
<p>{{ course.full_description }}</p>
</article>
{% if course.instructors.count > 0 %}
<article class="uk-article">
<h3>{{ course.instructors_title }}</h3>
{% for instructor in course.instructors %}
<div>
<div class="uk-comment-header">
<img
src="{{ instructor.image_url }}"
alt="{{ instructor.name }}"
class="uk-comment-avatar"
width="80">
<h4 class="uk-comment-title">{{ instructor.name }}</h4>
<div class="uk-comment-meta">{{ instructor.title }}</div>
</div>
<div class="wysiwyg">{{ instructor.bio }}</div>
</div>
{% endfor %}
</article>
{% endif %}
<article class="uk-article">
{{ upcoming_events }}
</article>
{% if course.discover_events_path %}
<a href="{{ course.discover_events_path }}" class="uk-padding-left-remove">{% t .see_all_events %}</a>
{% endif %}
</div>
{% if course.has_outline? %}
<div class="uk-width-medium-1-2">
<h3>{{ course.progress_title }}</h3>
{{ course.progress_bar }}
<h3>{{ course.outline_label }}</h3>
<ol class="uk-list cover-outline">
{% for section in learner_syllabus.sections %}
<li class="uk-margin-large-bottom">
<h3><strong>{{ section.name }}</strong></h3>
{% if section.will_be_published? %}
<div class="uk-margin-top">
{% t .scheduled_info %} {{ section.published_at }}
</div>
{% else %}
<ol class="uk-list cover-outline-section-activities">
{% for activity in section.activities %}
<li class="{% if activity.completed? %}completed {% endif %}{% if activity.locked? %}locked{% endif %}" >
{% if activity.locked? %}
<span>
{% if activity.milestone? %}
<i class="uk-icon-flag"></i>
{% endif %}
{{ activity.title }}
</span>
{% else %}
<a href="{{ activity.path }}">
{% if activity.milestone? %}
<i class="uk-icon-flag"></i>
{% endif %}
{{ activity.title }}
</a>
{% endif %}
</li>
{% endfor %}
</ol>
{% endif %}
</li>
{% endfor %}
</ol>
</div>
{% endif %}
</div>
</div>
<style>
img.uk-responsive-height {
max-height: 95% !important;
}
#learning {
margin-left: 160px;
}
@media only screen and (max-width: 798px) {
#learning {
margin-left: 0px;
}
}
@media only screen and (max-width: 1024px) {
.uk-panel-badge {
right: 10px !important;
}
}
@media only screen and (max-width: 600px) {
.uk-panel-badge {
right: 4px !important;
}
}
.sainte-colombe-regular {
font-family: "Sainte Colombe Regular" !important;
}
.sainte-colombe-medium {
font-family: "Sainte Colombe Medium" !important;
}
.myriad-pro-light {
font-family: "Myriad Pro Regular" !important;
font-weight: lighter !important;
}
.euclid-circular-regular {
font-family: "Euclid Circular Regular" !important;
}
.euclid-circular-light {
font-family: "Euclid Circular Light" !important;
}
.euclid-circular-semibold {
font-family: "Euclid Circular Semibold" !important;
}
.euclid-circular-bold {
font-family: "Euclid Circular Bold" !important;
}
@font-face {
font-family: "Sainte Colombe Regular";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/saintecolombe-regular.otf) format('opentype');
font-style: normal;
}
@font-face {
font-family: "Sainte Colombe Medium";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/saintecolombe-medium.otf) format("opentype");
font-style: normal;
}
@font-face {
font-family: "Euclid Circular Regular";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Regular.otf) format("opentype");
font-style: normal;
}
@font-face {
font-family: "Euclid Circular Light";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Light.otf) format("opentype");
font-style: normal;
}
@font-face {
font-family: "Euclid Circular Semibold";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Semibold.otf) format("opentype");
font-style: normal;
}
@font-face {
font-family: "Euclid Circular Bold";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Bold.otf) format("opentype");
font-style: normal;
}
/* side navigation bar */
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #100B28;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
display: block;
}
.side-navbar-item {
font-size: 18px !important;
color: white !important;
}
.side-navbar-item:hover {
color: rgba(255, 255, 255, 0.434) !important;
}
.sidenav a:hover {
color: #f1f1f1;
}
@media screen and (max-width: 798px) {
.sidenav {
display: none ;
}
.section-margin {
margin-left: 0px !important;
}
}
/* side navigation bar */
#elliman-dropdown {
margin-bottom: 30px;
height: 40px;
font-size: 20px;
width: 100%;
max-width: 250px;
}
</style>

View File

@ -0,0 +1,246 @@
{% include "side_navigation_bar" %}
<div id="learning">
<div class="uk-container uk-container-center uk-margin-top uk-margin-bottom uk-padding-large-top">
<h1 class="uk-text-center page-header uk-padding-horizontal">{{ course.name }}</h1>
</div>
<div class="uk-block uk-block-muted uk-margin-large-bottom uk-border-top uk-border-bottom">
<div class="uk-container uk-container-center">
<div class="uk-grid uk-padding-horizontal">
<div class="uk-width-medium-6-10 uk-margin-bottom">
{% if course.promo_video_embed %}
<div class="video-container course-promo-video" data-behavior="scaleEmbed">
{{ course.promo_video_embed }}
</div>
{% else %}
<img src="{{ course.featured_image_url }}" alt="{{ course.name }}" class="course-image uk-responsive-width uk-width-1-1">
{% endif %}
</div>
<div class="uk-width-medium-4-10">
<div class="uk-margin-large-bottom uk-text-large uk-text-muted">
{{ course.short_description }}
</div>
{% if current_person.enrolled_in_course? %}
<a href="{{ course.cover_path }}" class="uk-button uk-button-primary uk-button-large">{{ course.go_to_label }}</a>
{% elsif course.payment_required? %}
<a href="{{ course.new_order_path }}" class="uk-button uk-button-primary uk-button-large">
{{ course.buy_label }} - {{ course.formatted_price }}
</a>
{% else %}
<form action="{{ course.enrollment_url }}" method="POST">
<button class="enroll-button uk-button uk-button-primary uk-button-large">
{% if current_school.apps.commerce.active? %}
{{ course.buy_label }} - {{ course.formatted_price }}
{% else %}
{% t .enroll %}
{% endif %}
</button>
</form>
{% endif %}
{% comment %} {% unless current_school.disable_social_share? %}
<div class="uk-padding-large-top uk-margin-top">
{{ course.social_links }}
</div>
{% endunless %} {% endcomment %}
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-center uk-padding-large-bottom uk-pargin-large-bottom">
<div class="uk-grid uk-grid-reverse uk-padding-horizontal">
<div class="uk-width-medium-4-10 uk-push-6-10 school-website-course-meta">
<h2>{{ course.outline_label }}</h2>
<div class="course-syllabus uk-panel uk-panel-box uk-border uk-margin-large-bottom">
{% for section in course.published_sections %}
<div class="uk-margin-bottom">
<h4 class="uk-margin-small-bottom"><strong>{{ section.name }}</strong></h4>
<ol class="uk-list uk-margin-small-top">
{% for activity in section.activities %}
<li>
<i class="uk-icon-{{ activity.list_class }} uk-margin-small-right"></i> {{ activity.title }}
</li>
{% endfor %}
</ol>
</div>
{% endfor %}
</div>
</div>
<div class="uk-width-medium-6-10 uk-pull-4-10">
<h2>{{ course.about_label }}</h2>
<div class="school-website-course-description uk-margin-large-bottom uk-padding-large-right">
{{ course.full_description }}
</div>
{% if course.instructors.count > 0 %}
<h2>{% pluralize course.instructors.count, .instructor_bio_title %}</h2>
{% for instructor in course.instructors %}
<div class="uk-grid uk-grid-small uk-margin-large-bottom">
<div class="uk-width-medium-1-6 uk-width-1-3">
<figure class="uk-thumbnail">
<img src="{{ instructor.image_url }}" alt="{{ instructor.name }}">
</figure>
</div>
<div class="uk-width-medium-5-6 uk-width-2-3">
<div class="uk-padding-left">
{% if instructor.name or instructor.title %}
<h4 class="uk-margin-top-remove uk-margin-small-bottom">{% if instructor.name %}<strong>{{ instructor.name }}</strong>{% endif %}{% if instructor.title %}, <span class="uk-text-muted">{{ instructor.title }}</span>{% endif %}</h4>
{% endif %}
{{ instructor.bio }}
</div>
</div>
</div>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
<style>
#learning {
margin-left: 160px;
}
@media only screen and (max-width: 798px) {
#learning {
margin-left: 0px;
}
}
@media only screen and (max-width: 1024px) {
.uk-panel-badge {
right: 10px !important;
}
}
@media only screen and (max-width: 600px) {
.uk-panel-badge {
right: 4px !important;
}
}
.sainte-colombe-regular {
font-family: "Sainte Colombe Regular" !important;
}
.sainte-colombe-medium {
font-family: "Sainte Colombe Medium" !important;
}
.myriad-pro-light {
font-family: "Myriad Pro Regular" !important;
font-weight: lighter !important;
}
.euclid-circular-regular {
font-family: "Euclid Circular Regular" !important;
}
.euclid-circular-light {
font-family: "Euclid Circular Light" !important;
}
.euclid-circular-semibold {
font-family: "Euclid Circular Semibold" !important;
}
.euclid-circular-bold {
font-family: "Euclid Circular Bold" !important;
}
@font-face {
font-family: "Sainte Colombe Regular";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/saintecolombe-regular.otf) format('opentype');
font-style: normal;
}
@font-face {
font-family: "Sainte Colombe Medium";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/saintecolombe-medium.otf) format("opentype");
font-style: normal;
}
@font-face {
font-family: "Euclid Circular Regular";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Regular.otf) format("opentype");
font-style: normal;
}
@font-face {
font-family: "Euclid Circular Light";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Light.otf) format("opentype");
font-style: normal;
}
@font-face {
font-family: "Euclid Circular Semibold";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Semibold.otf) format("opentype");
font-style: normal;
}
@font-face {
font-family: "Euclid Circular Bold";
src: url(https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/fonts/EuclidCircularA-Bold.otf) format("opentype");
font-style: normal;
}
/* side navigation bar */
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #100B28;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
display: block;
}
.side-navbar-item {
font-size: 18px !important;
color: white !important;
}
.side-navbar-item:hover {
color: rgba(255, 255, 255, 0.434) !important;
}
.sidenav a:hover {
color: #f1f1f1;
}
@media screen and (max-width: 798px) {
.sidenav {
display: none ;
}
.section-margin {
margin-left: 0px !important;
}
}
/* side navigation bar */
#elliman-dropdown {
margin-bottom: 30px;
height: 40px;
font-size: 20px;
width: 100%;
max-width: 250px;
}
</style>

View File

@ -0,0 +1,209 @@
{% include "side_navigation_bar" %}
<div class="section-margin section-category-carousels" style="opacity: 0.0;">
{% assign categories_by_name = current_school.filterable_categories | sort: "name" %}
{%- for category in categories_by_name -%}
{% capture _ %}{% increment carousels_counter %}{% endcapture %}
<div class="single-carousel">
<div class="grid">
<div class="grid__item grid__item--tablet-up-half cat-header" style="width: 100%; padding-bottom: 10px">
<h2 class="text-dark-blue sainte-colombe-medium heading--1 color-indigo-dark hunt-padding-b">
{{category.name}}</h2>
</div>
{% assign category_name = category.name | split: " " %}
<p class="carousel-change{{carousels_counter}} show-more">See More</p>
</div>
<div class="grid grid--equal-height slider{{carousels_counter}} test-carousel" >
{%- for course in courses -%}
{% assign category_names = course.course_category_names | split: "&#8729" %}
{% for category_name in category_names %}
{% assign stripped_category_name = category_name | strip %}
{% if stripped_category_name == category.name %}
{% include 'course' %}
{% endif %}
{% endfor %}
{%- endfor -%}
</div>
</div>
{%- endfor -%}
</div>
<div class="section-margin section-coming-soon" style="display:none;">
<section id="Main" class="section" style="padding-top: 0; padding-bottom: 33px;">
<div class="section-heading hunt-hero-header" style="margin-top: 1em; margin-bottom: 2em;">
<h1 class="text-dark-blue sainte-colombe-regular section-heading__heading heading--1 decorative-font hunt-margin-t" style="font-size: 60px;">
Coming Soon.
</h1>
</div>
</section>
</div>
<script type="text/javascript">
function initializeCarousel() {
$('.test-carousel').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
})
}
function orderSlidesForCarousel(sliderClass) {
$("." + sliderClass + " .course-details__item").each(function() {
var currentSlideDataOrder = $(this).attr("data-order")
var firstSlideDataOrder = $(".course-details__item").first().attr("data-order")
if (currentSlideDataOrder > firstSlideDataOrder) {
$($(this)).prependTo("." + sliderClass)
}
})
}
function changeCategoryNameToId(categoryName) {
return categoryName.replace(/\s+/g, '-').toLowerCase()
}
function setIdsToCarousels() {
$("h2").each(function(){
var categoryName = $(this).text().trim()
var id = changeCategoryNameToId(categoryName)
$(this).attr('id', id);
$(this).closest('.single-carousel').attr('id', "slider-" + id);
})
}
function scrollToCarouselIfHashExists() {
var hash = window.location.hash
if(hash) {
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 500);
}
}
$(document).ready(function () {
orderSlidesForAllCarousels()
initializeCarousel()
addSeeMoreForAllCarousels()
setIdsToCarousels()
$(".section-margin").css('opacity','1')
setTimeout(function(){ scrollToCarouselIfHashExists() }, 1000);
if (window.location.search != "") {
let params = new URL(location.href).searchParams.get('filter[categories_name]')
const filteredCategory = params.replace(" ", "-").toLowerCase();
displaySingleCatagory(filteredCategory);
}
});
function displaySingleCatagory(category) {
$(".single-carousel").each(function(index, value) {
if ($(this).attr("id") == "slider-" + category) {
if ($(this).find(".slick-track").children().length > 0) {
$(this).css("display", "block")
} else {
$(document).find(".section-coming-soon").css("display", "block")
}
} else {
$(this).css("display", "none");
}
})
}
function addSeeMoreForCarousel(carouselNumber) {
$(".carousel-change" + carouselNumber).click(function() {
if($(".carousel-change" + carouselNumber).hasClass('show-more')) {
$(".slider" + carouselNumber).slick('unslick');
$('.show-more').text('Show Less');
$('.show-more').addClass('show-less');
$('.show-more').removeClass('show-more');
} else if($(".carousel-change" + carouselNumber).hasClass('show-less')) {
$('.show-less').text('Show More');
$('.show-less').addClass('show-more');
$('.show-less').removeClass('show-less');
$(".slider" + carouselNumber).slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}
});
}
// function addCssToChangeCarousel
function addSeeMoreForAllCarousels() {
var sliders = $(".test-carousel")
sliders.each(function() {
var classList = this.className.split(/\s+/)
for (var i = 0; i < classList.length; i++) {
if (classList[i].startsWith("slider")) {
var sliderClass = classList[i]
var suffixNumber = sliderClass.match(/\d+/).toString()
addSeeMoreForCarousel(suffixNumber)
}
}
})
}
</script>
<script>
function orderSlidesForAllCarousels() {
var sliders = $(".test-carousel")
sliders.each(function() {
var classList = this.className.split(/\s+/)
var sliderClass = ''
for (var i = 0; i < classList.length; i++) {
if (classList[i].startsWith("slider")) {
sliderClass = classList[i]
orderSlidesForCarousel(sliderClass)
}
}
})
}
</script>

View File

@ -0,0 +1,7 @@
{% if custom_page.headline == "All Courses" %}
{% include "all_courses" %}
{% elsif custom_page.headline == "Quick Links & Resources" %}
{% include "quick_links_resources" %}
{% elsif custom_page.headline == "Mandatory Courses" %}
{% include "mandatory_courses" %}
{% endif %}

View File

@ -0,0 +1,68 @@
{% include "side_navigation_bar" %}
<div class="section-margin">
<div class="uk-padding-horizontal uk-container uk-container-center">
<div class="uk-padding-large-vertical uk-padding-horizontal uk-border-bottom">
<h2>{% t .title %}</h2>
</div>
{% if training_events.empty? %}
<div class="sk-margin-xlarge-top">
<h1 class="uk-text-center">{% t .no_events %}</h1>
<h1 class="uk-text-center uk-margin-top-remove">{% t .check_later %}</h1>
</div>
{% else %}
<div class="uk-grid uk-grid-flex uk-margin-left-remove uk-margin-large-top">
<div class="uk-width-1-1 uk-padding">
<ul class="uk-grid uk-grid-medium school-website-course-list uk-grid-match">
{% for training_event in training_events %}
{% include "training_event" training_event = training_event %}
{% endfor %}
</ul>
</div>
</div>
{% endif %}
</div>
</div>
<style>
.events-carousel .slick-track {
margin-left:0;
}
</style>
<script>
$(document).ready(function () {
$(".section-margin").css('opacity','1')
});
function initializeCarousel() {
$('.events-carousel').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
})
}
</script>

View File

@ -0,0 +1,470 @@
<!-- NOT USED FOR NOW -->
{% assign number_of_featured_courses_of_current_user = 0 %}
{% for course in my_content.courses %}
{% if current_person.properties.featured contains course.id %}
{% assign number_of_featured_courses_of_current_user = number_of_featured_courses_of_current_user | plus: 1 %}
{% endif %}
{% endfor %}
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
{% include "side_navigation_bar" %}
<a id="back-to-top-button"></a>
<div class="section-margin">
{% comment %} Hero {% endcomment %}
<section id="Main" class="section" style="padding-top: 0; padding-bottom: 33px;">
<div class="section-heading hunt-hero-header" style="margin-top: 1em; margin-bottom: 2em;">
<h1 class="text-dark-blue sainte-colombe-regular section-heading__heading heading--1 decorative-font hunt-margin-t" style="font-size: 60px;">
Elevate Your Knowledge
</h1>
<p class="text-grey euclid-circular-regular section-heading__subhead heading--3 hero__subhead">
Curated Courses Inspired By Our Agents To Help Grow Your Business
</p>
</div>
<div class="homepage-images-container">
<div>
<img class="homepage-image" src="https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/DouglasElliman/BFA_27163_3360923_RT+(2).jpg" style="filter: contrast(80%);">
</div>
<div>
<img class="homepage-image" src="https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/DouglasElliman/0B2V0376-1024x683.jpeg">
</div>
<div>
<img class="homepage-image" src="https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/DouglasElliman/BFA_27177_3362525.jpeg">
</div>
</div>
</section>
{% comment %} Courses {% endcomment %}
<section id="Courses" class="section background-white section--padding-top-only" style="padding-top: 0;">
{% include 'my_content_header' %}
{%- assign courses = my_content.courses -%}
<div id="categories" class="grid">
<div class="grid__item grid__item--tablet-up-half hunt-margin-b" style="width: 100%;">
<h2 class="text-dark-blue euclid-circular-bold heading--1 color-indigo-dark" style="margin-bottom: 0;">My Courses</h2>
</div>
</div>
{% comment %} Recommendations {% endcomment %}
{% if number_of_featured_courses_of_current_user > 0 %}
<div id="recommendations" class="section background-white section--padding-top-only" style="padding-top: 0;">
<!-- Featured -->
<div class="single-carousel">
<div class="grid">
<div class="grid__item grid__item--tablet-up-half cat-header" style="width: 100%; padding-bottom: 10px">
<h2 class="text-dark-blue euclid-circular-light heading--1 color-indigo-dark hunt-padding-b">
Featured Courses</h2>
</div>
<p class="euclid-circular-regular carousel-change1 show-more">See More</p>
</div>
<div class="grid grid--equal-height slider1 test-carousel">
{%- for course in courses -%}
{% if current_person.properties.featured contains course.id %}
{% include 'course' %}
{%- endif -%}
{%- endfor -%}
</div>
</div>
<!-- Featured -->
</div>
{% endif %}
<!-- All Enrolled Courses -->
<div class="single-carousel">
<div class="grid">
<div class="grid__item grid__item--tablet-up-half cat-header" style="width: 100%; padding-bottom: 10px">
<h2 class="text-dark-blue euclid-circular-light heading--1 color-indigo-dark hunt-padding-b">
All Enrolled Courses</h2>
</div>
<p class="euclid-circular-regular carousel-change3 show-more">See More</p>
</div>
<div class="grid grid--equal-height slider3">
{%- for course in courses -%}
{% include 'course' %}
{%- endfor -%}
</div>
<p class="text-grey euclid-circular-light text-major text-grey" style="margin-bottom: 30px; font-size: 20px; margin-top: 2px; padding-left: 100px;">
Click <b><a href="/catalog" class="euclid-circular-regular click-here">here</a></b> to access the full course catalog.
</p>
</div>
<!-- All Enrolled Courses -->
<!-- DE Tools & Technology -->
<div class="single-carousel">
<div class="grid">
<div class="grid__item grid__item--tablet-up-half cat-header" style="width: 100%; padding-bottom: 10px">
<h2 class="text-dark-blue euclid-circular-light heading--1 color-indigo-dark hunt-padding-b">
DE Tools & Technology</h2>
</div>
<p class="euclid-circular-regular carousel-change2 show-more">See More</p>
</div>
<div class="grid grid--equal-height slider2 test-carousel">
{%- for course in courses -%}
{% if course.course_category_names == "DE Tools & Technology" %}
{% include 'course' %}
{%- endif -%}
{%- endfor -%}
</div>
</div>
<!-- DE Tools & Technology -->
</section>
</div>
<!--
<section id="resources" class="section-margin">
<div class="templates-header hunt-margin-b" style="margin-top: 100px;">
<div class="grid">
<div class="grid__item grid__item--tablet-up-third grid__item--desktop-up-5" style="background: white; width: 100% !important;">
<h2 class="text-dark-blue sainte-colombe-medium heading--1 color-indigo-dark hunt-margin-b">Quick Links & Resources</h2>
</div>
</div>
</div>
<div class="grid">
<div class="grid__item">
<span class="euclid-circular-regular" style="font-size: 20px;">Filter: </span>
<select id="elliman-dropdown">
<option value="c-all">All</option>
</select>
</div>
</div>
</section> -->
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
width: 100%;
position: relative;
}
.homepage-images-container {
justify-content: center;
display: -webkit-flex;
display: flex;
}
.homepage-image {
max-height: 220px;
object-fit: cover;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 5.3px;
width: 5.3px;
margin: 0 2px;
background-color: #c7c7c7;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #009CBD;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
</script>
<script>
var btn = $('#back-to-top-button');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});
</script>
<script type="text/javascript">
</script>
<script>
$('.carousel-change1').click(function() {
if($('.carousel-change1').hasClass('show-more')) {
$('.slider1').slick('unslick');
$('.show-more').text('Show Less');
$('.show-more').addClass('show-less');
$('.show-more').removeClass('show-more');
} else if($('.carousel-change1').hasClass('show-less')) {
$('.show-less').text('Show More');
$('.show-less').addClass('show-more');
$('.show-less').removeClass('show-less');
$('.slider1').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}
});
</script>
<script>
$('.carousel-change2').click(function() {
if($('.carousel-change2').hasClass('show-more')) {
$('.slider2').slick('unslick');
$('.show-more').text('Show Less');
$('.show-more').addClass('show-less');
$('.show-more').removeClass('show-more');
} else if($('.carousel-change2').hasClass('show-less')) {
$('.show-less').text('Show More');
$('.show-less').addClass('show-more');
$('.show-less').removeClass('show-less');
$('.slider2').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}
});
</script>
<script>
$('.carousel-change3').click(function() {
if($('.carousel-change3').hasClass('show-more')) {
$('.slider3').slick('unslick');
$('.show-more').text('Show Less');
$('.show-more').addClass('show-less');
$('.show-more').removeClass('show-more');
} else if($('.carousel-change3').hasClass('show-less')) {
$('.show-less').text('Show More');
$('.show-less').addClass('show-more');
$('.show-less').removeClass('show-less');
$('.slider3').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}
});
</script>
<script>
function orderSlides() {
$(".slider3 .course-details__item").each(function() {
var currentSlideDataOrder = $(this).attr("data-order")
var firstSlideDataOrder = $(".course-details__item").first().attr("data-order")
if (currentSlideDataOrder > firstSlideDataOrder) {
$($(this)).prependTo(".slider3")
}
})
}
$(document).ready(function () {
$('.test-carousel').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
})
orderSlides()
initializeCarousel()
});
function initializeCarousel() {
$('.slider3').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
})
}
</script>

View File

@ -0,0 +1,231 @@
{% include "side_navigation_bar" %}
<div class="">
{% comment %} Events {% endcomment %}
{% if current_school.apps.instructor_led_training.active? %}
<div class="grid">
{% if current_person.upcoming_registered_events.any? %}
{% include "events" %}
{% else %}
{% include "events_empty" %}
{% endif %}
</div>
{% endif %}
{% comment %} Courses {% endcomment %}
<!-- Started Courses -->
<div class="single-carousel" style="margin-top: 15px;">
<div class="grid">
<div class="grid__item grid__item--tablet-up-half cat-header" style="width: 100%; padding-bottom: 10px">
<h2 class="text-dark-blue sainte-colombe-medium heading--1 color-indigo-dark hunt-padding-b">
In-progress Courses</h2>
</div>
<p class="carousel-change1 show-more">See More</p>
</div>
<div class="grid grid--equal-height slider1 test-carousel">
{%- for course in courses -%}
{% if course.progress > 0 and course.progress < 100 %}
{% include 'course_with_progress' %}
{%- endif -%}
{%- endfor -%}
</div>
</div>
<!-- Started Courses -->
<!-- Completed Courses -->
<div class="single-carousel">
<div class="grid">
<div class="grid__item grid__item--tablet-up-half cat-header" style="width: 100%; padding-bottom: 10px">
<h2 class="text-dark-blue sainte-colombe-medium heading--1 color-indigo-dark hunt-padding-b">
Completed Courses</h2>
</div>
<p class="carousel-change2 show-more">See More</p>
</div>
<div class="grid grid--equal-height slider2 test-carousel">
{%- for course in courses -%}
{% if course.progress == 100 %}
{% include 'course_with_progress' %}
{%- endif -%}
{%- endfor -%}
</div>
</div>
<!-- Completed Courses -->
</div>
<style>
.uk-panel-badge {
right: 18px !important;
}
@media only screen and (max-width: 1024px) {
.uk-panel-badge {
right: 10px !important;
}
}
@media only screen and (max-width: 600px) {
.uk-panel-badge {
right: 4px !important;
}
}
._1ycOA{
-webkit-font-smoothing: antialiased;
text-size-adjust: 100%;
--polaris-version-number: "4.27.0";
--polaris-animation-skeleton-shimmer: polaris-SkeletonShimmerAnimation;
--toast-translate-y-out: 15rem;
--toast-translate-y-in: 0;
--global-ribbon-height: 0px;
--p-text-subdued: #6d7175;
--p-card-shadow: 0 .2rem .4rem #dfe3e8;
--top-bar-background: #00848e;
--top-bar-background-lighter: #1d9ba4;
--top-bar-color: #f9fafb;
--p-frame-offset: 0px;
font-family: -apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
cursor: pointer;
box-sizing: border-box;
fill: #292824;
vertical-align: middle;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 1px rgba(66,71,76,.45), 0 2px 1px rgba(0,0,0,.05);
}
</style>
<script>
window.history.pushState('page2', 'Title', '/my_courses');
</script>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.test-carousel').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
})
});
</script>
<script>
$('.carousel-change1').click(function() {
if($('.carousel-change1').hasClass('show-more')) {
$('.slider1').slick('unslick');
$('.show-more').text('Show Less');
$('.show-more').addClass('show-less');
$('.show-more').removeClass('show-more');
} else if($('.carousel-change1').hasClass('show-less')) {
$('.show-less').text('Show More');
$('.show-less').addClass('show-more');
$('.show-less').removeClass('show-less');
$('.slider1').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}
});
</script>
<script>
$('.carousel-change2').click(function() {
if($('.carousel-change2').hasClass('show-more')) {
$('.slider2').slick('unslick');
$('.show-more').text('Show Less');
$('.show-more').addClass('show-less');
$('.show-more').removeClass('show-more');
} else if($('.carousel-change2').hasClass('show-less')) {
$('.show-less').text('Show More');
$('.show-less').addClass('show-more');
$('.show-less').removeClass('show-less');
$('.slider2').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}
});
</script>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,223 @@
{% include "side_navigation_bar" %}
<div class="section-margin">
<div class="top-bar">
<div class="top-bar__container uk-container uk-container-center uk-padding-horizontal">
<div class="top-bar__col">
<h2 class="top-bar__headline" data-test="session-name">{{ training_session.session_name }}</h2>
<div class="top-bar__attributes">
<div class="top-bar__attribute" data-test="event-title">
<div class="top-bar__attribute-label">
{% t .belongs_to %}
</div>
<div class="top-bar__attribute-value">
{{ training_session.title }}
</div>
</div>
<div class="top-bar__attribute">
<div class="top-bar__attribute-label">
{% t .type %}
</div>
<div class="top-bar__attribute-value">
{{ training_session.event_type_title }}
</div>
</div>
</div>
</div>
{% if training_session.instructor_assigned? %}
<div class="top-bar__col uk-hidden-small">
<div class="person" data-test="instructor-panel">
<div class="person__avatar">
<img src="{{ training_session.instructor_image_url }}" alt="avatar" />
</div>
<div class="person__details">
<div class="person__name">
{{ training_session.instructor_name }}
</div>
<div class="person__title">
{{ training_session.instructor_title }}
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
<div class="uk-container uk-container-center uk-padding-horizontal">
<div class="uk-flex uk-flex-wrap">
<div class="uk-width-large-6-10 uk-visible-large">
<div class="session-description">
{{ training_session.description }}
</div>
</div>
<div class="uk-width-large-4-10">
<div class="session-sidebar">
<div class="session-sidebar__content">
<div class="session-dialog dialog">
<div class="dialog__body">
<div class="uk-flex">
<div class="uk-width-1-4">
<div class="calendar-card">
<div class="calendar-card__day">
{{ training_session.session_day }}
</div>
<div class="calendar-card__month">
{{ training_session.session_month }}
</div>
</div>
</div>
<div class="uk-width-3-4">
<h4 class="session-dialog__headline">
{{ training_session.title }}
</h4>
<p class="session-dialog__detail">
<i class="uk-icon-clock-o"></i>
{{ training_session.session_time }}
</p>
<p class="session-dialog__detail">
{% if training_session.location %}
<i class="uk-icon-map-marker"></i>
{{ training_session.location }}
{% endif %}
{% if training_session.session_url %}
<i class="uk-icon-globe"></i>
<a class="session-link" href="{{ training_session.session_url }}">{{ training_session.session_url }}</a>
{% endif %}
</p>
</div>
</div>
</div>
<div class="dialog__footer">
{{ training_session.registration_actions }}
</div>
</div>
</div>
<div class="session-description uk-hidden-large">
{{ training_session.description }}
</div>
<section class="other-sessions">
<header class="other-sessions__header">
<h4 class="other-sessions__headline">
{% t .other_sessions_headline %}
</h4>
</header>
<div class="other-sessions__body">
<ul class="other-sessions__list">
{% for other_session in training_session.other_sessions %}
<li class="other-session">
<div class="other-session__calendar-card-wrapper">
<div class="calendar-card calendar-card--small">
<div class="calendar-card__day">
{{ other_session.session_day }}
</div>
<div class="calendar-card__month">
{{ other_session.session_month }}
</div>
</div>
</div>
<div class="other-session__details">
<h5 class="other-session__name">
{{ other_session.session_name }}
</h5>
<div class="other-session__time">
<i class="uk-icon-clock-o"></i>
{{ other_session.session_time }}
</div>
</div>
<div class="other-session__buttons">
<a class="uk-button" href="{{ other_session.self_url }}">
{% t .attend %}
</a>
</div>
</li>
{% endfor %}
</ul>
</div>
<footer class="other-sessions__footer">
{% if training_session.other_sessions_count > 3 %}
<button class="other-sessions__more-button" onclick="findOutMore();">
{% t .find_out_more %}
</button>
{% endif %}
</footer>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.main-content {
width: 100%;
}
.session-link {
display: none;
}
.uk-icon-globe {
display: none;
}
</style>
<script>
var container = document.querySelector(".other-sessions__body");
var items = document.querySelectorAll(".other-session");
var containerHeight = 0;
for (var i = 0; i < Math.min(3, items.length); i++) {
containerHeight += items[i].offsetHeight;
}
container.style.height = containerHeight + "px";
function findOutMore() {
var button = document.querySelector(".other-sessions__more-button");
var list = document.querySelector(".other-sessions__list");
container.style.height = list.offsetHeight + "px";
button.style.display = "none";
}
function adjustLink() {
var buttonText = returnRegisterButtonText()
if (buttonText === "Unregister") {
$(".session-link").text("Join Here")
$(".session-link").css('display', 'inline-block')
$(".uk-icon-globe").css('display', 'inline-block')
} else {
$(".session-link").css('display', 'none')
$(".uk-icon-globe").css('display', 'none')
}
}
function returnRegisterButtonText() {
if ($("button[data-test='unregister-button']").length) {
return $("button[data-test='unregister-button']").text()
} else if ($("button[data-test='register-button']").length) {
return $("button[data-test='register-button']").text()
}
}
function setEventListenerToRegisterOrUnregisterButton() {
var buttonText = returnRegisterButtonText()
if (buttonText === "Unregister") {
$("button[data-test='unregister-button']")[0].addEventListener("click", function() {
setTimeout(adjustLink, 500);
})
} else {
$("button[data-test='register-button']")[0].addEventListener("click", function() {
setTimeout(adjustLink, 500);
})
}
}
$( document ).ready(function() {
adjustLink()
setEventListenerToRegisterOrUnregisterButton()
$(".dialog__footer")[0].addEventListener("click", function() {
setTimeout(function() {
setEventListenerToRegisterOrUnregisterButton()
}, 500);
})
})
</script>

View File

@ -183,3 +183,25 @@ format and enable them.
Any interruptions? No. Alexa will not see any difference. Well, MOST won't see any changes. By early next week, the old emails will disappear and the new ones will become the standard. They will say "NEW" next to them.
## 04/13/2024
### Alexa Notes
Search Deploy Lightning in Skuid Skool not showing up exactly.
Wants more dynamic search. Another Enterprise client asking about better searches.
Rollercoaster for finding certification project. Looked at 26 exam tools.
YouTestMe was the only one they liked.
Claimed that they fixed the pentest issue. Alexa working with tech team to get them approved again.
Increasingly difficult to find what message is what. On the main comms page, there needs to be:
* Date Sent
* Groups Sent
For incomplete groups, the ppl change each month. She needs to run a report of everyone it was sent to each month.
TODO: Research what comms metrics are exposed in Looker.
TODO: Ask Marek why the duplicate message/email wasn't there.
TODO: 2023 March HW Reminder is the template she is using.

View File

@ -416,3 +416,5 @@ TODO: Work with Charlie to find examples of badging for the team.
For the first iteration, this will live solely in Northpass.
Dev work from Walmart: they will need to pass/insert info into the webview.
FEAT: Cassie out 22nd - 28th

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long