Updated Harri Script from Charlie, a bunch of notes and todos for clients.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,393 @@
|
||||
{% assign isAuthenticatedUser = false %}
|
||||
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == "All Users" or group.id == "6331d115-ea74-418a-99b2-af5c81208fe1" or group.name == "Internal
|
||||
Zenjob Testing" or group.id == "940a5d24-32af-45f1-8ed4-8a6b4689d9c9" %}
|
||||
{% assign isAuthenticatedUser = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if current_person.email contains "+preview" %}
|
||||
{% assign isAuthenticatedUser = true %}
|
||||
{% endif %}
|
||||
|
||||
{% unless isAuthenticatedUser %}
|
||||
<main class="np-main np-homepage unauthorized">
|
||||
<div class="np-homepage-content">
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline" style="color: #fff">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline">
|
||||
Entschuldigung! Es scheint, dass deine E-Mail-Adresse {{current_person.email}} nicht den richtigen Zugang erhalten hat. Es kann nach der Registrierung bis zu 24h dauern, bis du freigeschalten wirst. Sollte das Problem danach weiterhin bestehen, wende dich an talents@zenjob.com, um den Zugang zu den vollständigen Lerninhalten anzufragen.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% endunless %}
|
||||
|
||||
{% if isAuthenticatedUser %}
|
||||
{% assign catalog_courses = courses.in_catalog %}
|
||||
{% include "header", current_page_orgin: "false" %}
|
||||
|
||||
<main class="np-main np-homepage">
|
||||
<div class="np-homepage-content">
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline" style="color: #fff">
|
||||
<span data-lang="DE">{{ homepage.headline }}</span>
|
||||
<span data-lang="EN">Welcome to our Zenjob Online Campus!</span>
|
||||
</div>
|
||||
<div class="np-homepage-subheadline">
|
||||
<span data-lang="DE">Hallo {{ current_person.first_name }}, hier bereiten wir dich auf alles vor, was du für deine erste Schicht als
|
||||
<div class="dropdown homepage-content-dropdown">
|
||||
<button class="dropbtn">Job auswählen</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="#kassierer-in" data-category-name="Kassierer/in">Kassierer*in</a>
|
||||
<a href="#kellner-in" data-category-name="Kellner/in">Kellner*in</a>
|
||||
<a href="#warenverräumer-in" data-category-name="Warenverräumer/in">Warenverräumer*in</a>
|
||||
</div>
|
||||
</div>
|
||||
wissen musst.
|
||||
</span>
|
||||
<span data-lang="EN">Hello {{ current_person.first_name }}, here we prepare you for everything you need to know for your first shift as a
|
||||
<div class="dropdown homepage-content-dropdown">
|
||||
<button class="dropbtn">select job</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="#kassierer-in" data-category-name="Kassierer/in">Cashier</a>
|
||||
<a href="#kellner-in" data-category-name="Kellner/in">Waitress</a>
|
||||
<a href="#warenverräumer-in" data-category-name="Warenverräumer/in">Goods mover</a>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-cards-section row np-max-width">
|
||||
{% for course in catalog_courses %}
|
||||
{% if course.properties.homepage_course %}
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.id == "087ea56d-888b-4e0f-af1f-68627318c841" or cat.id == "9be55234-19c5-4df4-bd1d-03e93f0faf83" or cat.id == "6580e10e-eacf-402d-a330-51d202721cce" or cat.id == "a63019c7-0a46-40bd-bc1b-935c887a4380" or cat.name == "Warenverräumer/in" or cat.name == "Kellner/in" or cat.name == "Kassierer/in" %}
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 homepage-card-column" style="display:none;" data-category="{{cat.id}}" data-category-name="{{cat.name}}" data-lang="{{course.properties.course_language}}">
|
||||
<a href="{% route course, id: course.id %}" class="homepage-card">
|
||||
<div class="homepage-card-content">
|
||||
<div class="homepage-card-img">
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/zenjob/FINAL+-+Zenjob+(Purple+Cashier).png" alt="">
|
||||
</div>
|
||||
<div class="homepage-card-title-wrapper">
|
||||
<div>{{course.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% assign learning_path_lang = "DE" %}
|
||||
{% for learning_path_cat in learning_path.categories %}
|
||||
{% if learning_path_cat.name == "English" %}
|
||||
{% assign learning_path_lang = "EN" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for learning_path_cat in learning_path.categories %}
|
||||
{% if learning_path_cat.id == "087ea56d-888b-4e0f-af1f-68627318c841" or learning_path_cat.id == "9be55234-19c5-4df4-bd1d-03e93f0faf83" or learning_path_cat.id == "6580e10e-eacf-402d-a330-51d202721cce" or learning_path_cat.id == "a63019c7-0a46-40bd-bc1b-935c887a4380" or learning_path_cat.name == "Warenverräumer/in" or learning_path_cat.name == "Kellner/in" or learning_path_cat.name == "Kassierer/in" %}
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 homepage-card-column" style="display:none;" data-category="{{learning_path_cat.id}}" data-category-name="{{learning_path_cat.name}}" data-lang="{{learning_path_lang}}">
|
||||
<a href="{% route learning_path, id: learning_path.id %}" class="homepage-card">
|
||||
<div class="homepage-card-content">
|
||||
<div class="homepage-card-img">
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/zenjob/opened-book.png" alt="">
|
||||
</div>
|
||||
<div class="homepage-card-title-wrapper">
|
||||
<div>{{learning_path.name}} <span>(optional)</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
|
||||
.np-header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
main.np-homepage {
|
||||
background-color: rgba(118,37,247,1);
|
||||
background: linear-gradient(90deg, rgba(62,17,145,1) 0%, rgba(118,37,247,1) 50%, rgba(139,120,250,1) 100%);
|
||||
background-size: cover;
|
||||
animation: gradient 15s ease-in-out infinite;
|
||||
height: 100%;
|
||||
padding-top: 100px;
|
||||
margin-bottom:0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
main.np-homepage.unauthorized {
|
||||
padding-top:0;
|
||||
}
|
||||
|
||||
.np-homepage-content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.unauthorized .np-homepage-content {
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.np-homepage-hero-content {
|
||||
position: unset;
|
||||
padding-bottom: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.np-homepage-content .np-homepage-headline {
|
||||
font-size: 1.75rem;
|
||||
color: #fff;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.np-homepage-content .np-homepage-subheadline {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.1;
|
||||
color: #fff;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 79%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 22%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 79%;
|
||||
}
|
||||
}
|
||||
|
||||
.homepage-content-dropdown {
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
border: black;
|
||||
text-decoration: underline;
|
||||
font-weight: 700;
|
||||
position:relative;
|
||||
cursor:pointer;
|
||||
padding: 0 4px 0 0;
|
||||
}
|
||||
|
||||
.dropbtn:after {
|
||||
content:"▼";
|
||||
position:absolute;
|
||||
right: -13px;
|
||||
top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #E1E2E5;
|
||||
color:#707483;
|
||||
min-width: 100%;
|
||||
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {display: block;}
|
||||
|
||||
.dropdown:hover .dropbtn {background-color: #635bff60;}
|
||||
|
||||
|
||||
/* CARDS SECTION */
|
||||
.homepage-cards-section {
|
||||
padding: 0 24px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.homepage-card {
|
||||
margin: 0 auto 24px;
|
||||
max-width: 350px;
|
||||
text-decoration:none;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.homepage-card-content {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: rgb(141 148 158 / 30%) 0px 4px 12px;
|
||||
}
|
||||
|
||||
.homepage-card-title-wrapper {
|
||||
width:65%;
|
||||
color: #3E1191;
|
||||
font-weight:700;
|
||||
text-align:center;
|
||||
padding:16px;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.homepage-card:hover .homepage-card-title-wrapper {
|
||||
color:#7625F7;
|
||||
}
|
||||
|
||||
.homepage-card-img {
|
||||
width:45%;
|
||||
border-right: 1px solid #e0f3ff;
|
||||
padding:24px 16px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.homepage-card-img img {
|
||||
max-width: 90px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-homepage-hero-content {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 3rem;
|
||||
max-width:1170px;
|
||||
}
|
||||
.np-homepage-content .np-homepage-headline {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.np-homepage-content .np-homepage-subheadline {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.homepage-content-dropdown {
|
||||
margin-right: 22px;
|
||||
}
|
||||
|
||||
.dropbtn:after {
|
||||
right: -21px;
|
||||
top: 12px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.homepage-cards-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.homepage-card {
|
||||
max-width: 275px;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.homepage-card-content {
|
||||
flex-direction: column-reverse;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.homepage-card-title-wrapper {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
width:100%;
|
||||
border-bottom:1px solid #e0f3ff;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.homepage-card-img {
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
||||
.homepage-card-img img {
|
||||
width: 120px;
|
||||
height:120px;
|
||||
max-width:120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$("document").ready(function() {
|
||||
if (window.location.hash) {
|
||||
filterCoursesByHash(window.location.hash)
|
||||
} else {
|
||||
//$(".homepage-card-column[data-category='087ea56d-888b-4e0f-af1f-68627318c841']").show()
|
||||
if ($("body").attr("data-lang") == "DE") {
|
||||
$(".homepage-card-column[data-category-name='Kassierer/in'][data-lang='DE']").show()
|
||||
} else if ($("body").attr("data-lang") == "EN") {
|
||||
$(".homepage-card-column[data-category-name='Kassierer/in'][data-lang='EN']").show()
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
$(".dropdown-content a").click(function() {
|
||||
$(".dropbtn").text($(this).text())
|
||||
filterCoursesBySelectedJob($(this))
|
||||
})
|
||||
|
||||
function filterCoursesBySelectedJob(selection) {
|
||||
const selectedCategory = $(selection).data("category-name")
|
||||
|
||||
$(".homepage-card-column").hide()
|
||||
|
||||
if ($("body").attr("data-lang") == "DE") {
|
||||
$(`.homepage-card-column[data-category-name='${selectedCategory}'][data-lang='DE']`).show()
|
||||
} else if ($("body").attr("data-lang") == "EN") {
|
||||
$(`.homepage-card-column[data-category-name='${selectedCategory}'][data-lang='EN']`).show()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function filterCoursesByHash(urlHash) {
|
||||
if ($("body").attr("data-lang") == "DE") {
|
||||
$("span[data-lang='DE'] .dropdown-content a").each(function() {
|
||||
if ($(this).attr('href') == urlHash) {
|
||||
$("span[data-lang='DE'] .dropbtn").text($(this).text())
|
||||
filterCoursesBySelectedJob($(this))
|
||||
}
|
||||
})
|
||||
} else if ($("body").attr("data-lang") == "EN") {
|
||||
$("span[data-lang='EN'] .dropdown-content a").each(function() {
|
||||
if ($(this).attr('href') == urlHash) {
|
||||
$("span[data-lang='EN'] .dropbtn").text($(this).text())
|
||||
filterCoursesBySelectedJob($(this))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user