338 lines
8.2 KiB
Plaintext
338 lines
8.2 KiB
Plaintext
{% include "header" %}
|
|
<main class="np-main np-homepage">
|
|
<div class="np-homepage-hero">
|
|
<div class="np-homepage-hero-container">
|
|
<div class="np-homepage-hero-content">
|
|
<div class="np-homepage-headline">
|
|
{{ homepage.headline }}
|
|
</div>
|
|
<div class="hero-search-wrapper">
|
|
<div class="np-homepage-subheadline">
|
|
{{ homepage.subheadline }}
|
|
</div>
|
|
<form class="np-header-search np-hero-search" data-test="mobile-search" method="get" action="{% route search %}">
|
|
<input aria-label="What are you looking for?" class="hero-search-input" type="text" name="q" placeholder="What are you looking for?" />
|
|
<i class="np-header-search-icon hero-search-icon far fa-search"></i>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<img class="np-homepage-hero-image" src="{{ homepage.artwork_url }}" alt="{{ homepage.headline }}" />
|
|
</div>
|
|
</div>
|
|
{% include "sub_navigation" %}
|
|
|
|
{% assign catalog_courses = courses.in_catalog %}
|
|
<div class="np-homepage-featured np-max-width">
|
|
|
|
<div class="row np-flex-center">
|
|
<div class="col-xs-12 col-sm-8">
|
|
{% include "homepage_featured_courses" items: catalog_courses %}
|
|
{% include "homepage_quicklearn_courses" items: catalog_courses %}
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-12 col-md-12" style="display:flex; flex-direction:column;">
|
|
<div class="np-section-header">Progress Tracker</div>
|
|
<div class="learning-path-progress-container">
|
|
<div class="row">
|
|
{% assign lps_in_progress = 0 %}
|
|
{% assign enrolled_learning_paths = learning_paths.enrolled | sort: "progress" | reverse %}
|
|
{% for learning_path in enrolled_learning_paths %}
|
|
{% if learning_path.progress > 0 %}
|
|
{% assign lps_in_progress = lps_in_progress | plus: 1 %}
|
|
|
|
{% if lps_in_progress < 4 %}
|
|
<div class="col-xs-12 col-md-6">
|
|
{% include "cards_learning_path_progress" %}
|
|
</div>
|
|
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if lps_in_progress > 0 %}
|
|
<div class="see-more-wrapper">
|
|
<a href="/app/dashboard" style="margin-top:24px;">See more</a>
|
|
</div>
|
|
{% endif %}
|
|
{% if lps_in_progress == 0 %}
|
|
<div class="col-xs-12">
|
|
<div class="np-learning-paths-resources-container">
|
|
<div class="np-zero-state-text">
|
|
Yikes! You don't have any learning Paths in progress.
|
|
</div>
|
|
<img class="np-zero-state-learning-paths" alt="" />
|
|
</div>
|
|
</div>
|
|
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-3">
|
|
<div id="divContentbyProduct" class="content-by-product">
|
|
<div class="left-content-title">
|
|
Content By Topic
|
|
</div>
|
|
{% include "topic_maincategory_leftnav" %}
|
|
</div>
|
|
<div style="display: flex;flex-direction: row-reverse;">
|
|
<a id="seemore" >See more..</a>
|
|
</div>
|
|
<div id="divCalender" class="upcomongevents">
|
|
<div class="left-content-title">
|
|
Upcoming Events
|
|
</div>
|
|
{% include "calendar" %}
|
|
</div>
|
|
<div id="divGetCertified" class="content-by-product">
|
|
<div class="left-content-title">
|
|
Get Certified
|
|
</div>
|
|
{% include "content_by_certificates" %}
|
|
</div>
|
|
<div style="display: flex;flex-direction: row-reverse;">
|
|
<a id="seemorecertificates" >See more..</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.left-content-title {
|
|
font-size: 25px;
|
|
font-weight: 900;
|
|
line-height: 15px;
|
|
margin: 20px 0;
|
|
|
|
}
|
|
.content-by-product {
|
|
height: auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.upcomongevents {
|
|
height: 350px;
|
|
}
|
|
|
|
#seemore:hover, #seemorecertificates:hover {
|
|
cursor: pointer;
|
|
}
|
|
.np-homepage-hero {
|
|
background-color:#3C228A;
|
|
padding: 40px 24px 24px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.np-homepage-hero-image {
|
|
object-fit: unset;
|
|
width: 115px;
|
|
height: auto;
|
|
min-height: unset;
|
|
margin-top:24px;
|
|
}
|
|
|
|
.np-homepage-hero-content {
|
|
position:relative;
|
|
padding:0;
|
|
color:#fff;
|
|
}
|
|
|
|
.np-homepage-hero .np-homepage-headline {
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
line-height: 33px;
|
|
margin-bottom:24px;
|
|
}
|
|
|
|
.np-homepage-subheadline {
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
margin-bottom:8px;
|
|
opacity:1;
|
|
}
|
|
|
|
.np-hero-search {
|
|
width:100%;
|
|
}
|
|
|
|
.hero-search-input {
|
|
background-color:#F1F3F4;
|
|
border-radius:4px;
|
|
padding: 14px 19px 14px 44px;
|
|
border:none;
|
|
font-size:14px;
|
|
line-height:19px;
|
|
width: 100%;
|
|
background:#fff;
|
|
}
|
|
|
|
.hero-search-icon {
|
|
right:unset;
|
|
left:16px;
|
|
color:#6C6C6C;
|
|
}
|
|
|
|
.np-homepage-row-wrapper {
|
|
padding: 0 16px;
|
|
margin-bottom:56px;
|
|
}
|
|
|
|
.np-homepage-featured-empty {
|
|
margin: 0;
|
|
border: 2px solid #dadce0;
|
|
border-radius: 8px;
|
|
padding: 60px 32px;
|
|
}
|
|
|
|
.learning-path-progress-container,
|
|
.learning-path-progress-container > .row {
|
|
height:100%;
|
|
}
|
|
|
|
.popup-trigger,
|
|
.survey-popup-trigger {
|
|
visibility:hidden;
|
|
opacity:0;
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.np-homepage-hero-container {
|
|
display:flex;
|
|
align-items:center;
|
|
}
|
|
|
|
.np-homepage-hero .np-homepage-headline {
|
|
font-size: 40px;
|
|
line-height: 50px;
|
|
margin-bottom:20px;
|
|
text-align:left;
|
|
}
|
|
|
|
.np-homepage-hero-image {
|
|
width: 200px;
|
|
height: auto;
|
|
margin: 0 0 0 64px;
|
|
}
|
|
|
|
.hero-search-wrapper {
|
|
display:flex;
|
|
}
|
|
|
|
.np-hero-search {
|
|
margin-left:32px;
|
|
flex:2;
|
|
}
|
|
}
|
|
|
|
@media (min-width:768px) and (max-width:1365px) {
|
|
.np-homepage-hero .np-homepage-headline {
|
|
font-size: 3.516vw;
|
|
line-height: 4.249vw;
|
|
}
|
|
}
|
|
|
|
@media (min-width:1200px) {
|
|
.np-homepage-hero-image {
|
|
width: 300px;
|
|
margin: 0 0 0 100px;
|
|
}
|
|
}
|
|
|
|
@media (min-width:1366px) {
|
|
|
|
.np-homepage-hero .np-homepage-headline {
|
|
font-size: 48px;
|
|
line-height: 58px;
|
|
}
|
|
}
|
|
|
|
|
|
.np-homepage-featured-text {
|
|
align-items: start;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
.np-dashboard-resources-title {
|
|
/* margin-bottom: 8px; */
|
|
color: #333;
|
|
text-transform: unset;
|
|
margin-left: 15px;
|
|
}
|
|
</style>
|
|
<script>
|
|
$(document).ready(function(){
|
|
|
|
if ($("#divContentbyProduct").height() < "300") {
|
|
|
|
$("#seemore").css("dispaly","none")
|
|
}
|
|
else
|
|
{
|
|
$("#divContentbyProduct").height("300");
|
|
$("#seemore").css("dispaly","none")
|
|
}
|
|
|
|
console.log($("#divGetCertified").height())
|
|
if ($("#divGetCertified").height() < 300) {
|
|
|
|
$("#seemorecertificates").css("display","none")
|
|
}
|
|
else
|
|
{
|
|
$("#divGetCertified").height("300");
|
|
$("#seemorecertificates").html("See more..");
|
|
}
|
|
|
|
|
|
|
|
$("#seemore").click(function () {
|
|
if ($("#divContentbyProduct").height() == "300")
|
|
{
|
|
$("#divContentbyProduct").height("auto");
|
|
$("#seemore").html("Show less..");
|
|
}
|
|
else
|
|
{
|
|
$("#divContentbyProduct").height("300");
|
|
$("#seemore").html("See more..");
|
|
}
|
|
|
|
$("#divContentbyProduct").overflow("hidden");
|
|
|
|
});
|
|
|
|
|
|
$("#seemorecertificates").click(function () {
|
|
if ($("#divGetCertified").height() == "300")
|
|
{
|
|
$("#divGetCertified").height("auto");
|
|
$("#seemorecertificates").html("Show less..");
|
|
}
|
|
else
|
|
{
|
|
$("#divGetCertified").height("300");
|
|
$("#seemorecertificates").html("See more..");
|
|
}
|
|
|
|
$("#divGetCertified").overflow("hidden");
|
|
|
|
|
|
});
|
|
});
|
|
</script> |