norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

A few notes and template changes.

Browse Source
This commit is contained in:
Norm Rasmussen
2023-07-07 15:51:41 -04:00
parent 58dd40bf99
commit c6b0c5682f
27 changed files with 692 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
Custom_Templates/customer_templates/Zenjob/_header.html.liquid
View File

@ -4,7 +4,7 @@
{% if group.name == "All Users" or group.id == "6331d115-ea74-418a-99b2-af5c81208fe1" %}
{% assign is_in_authenticated_group = true %}
{% endif %}
{% endfor %}
{% endfor %}
{% if current_person.email contains "+preview" %}
{% assign is_in_authenticated_group = true %}
@ -21,6 +21,7 @@
<header class="np-header np-header-color">
<div class="np-header-content">
<div class="np-hidden-desktop np-header-mobile-menu-nav">
{% if current_person.signed_in? %}
<button
@ -39,6 +40,15 @@
</button>
{% endif %}
</div>
<div class="language-dropdown-wrapper np-hidden-desktop">
<div class="header-language-selection">
{{current_person.properties.user_language}}
</div>
<ul class="languages-dropdown">
<li data-lang="DE" onclick="changeLanguage(this.getAttribute('data-lang'))">Deutsch</li>
<li data-lang="EN" onclick="changeLanguage(this.getAttribute('data-lang'))">English</li>
</ul>
</div>
{% if current_school.logo_url %}
<h1 class="np-header-logo">
<a href="/app/catalog">
@ -58,22 +68,29 @@
<div class="np-hidden-mobile np-header-desktop-nav">
<ul class="np-header-desktop-nav-list">
<li class="np-header-desktop-nav-item">
<a href="/app/catalog" class="np-header-desktop-nav-link trainings-link">Trainings</a>
<a href="/app/catalog" class="np-header-desktop-nav-link trainings-link">
<span data-lang="DE">Trainings</span>
<span data-lang="EN">Trainings</span>
</a>
</li>
<li class="np-header-desktop-nav-item">
<a href="/app/learning_paths" class="np-header-desktop-nav-link learning-paths-link">Lernwege</a>
<a href="/app/learning_paths" class="np-header-desktop-nav-link learning-paths-link">
<span data-lang="DE">Lernwege</span>
<span data-lang="EN">Learning Paths</span>
</a>
</li>
<li class="np-header-desktop-nav-item">
<a href="/app/zertifikate" class="np-header-desktop-nav-link certs-link">Auszeichnungen</a>
<a href="/app/zertifikate" class="np-header-desktop-nav-link certs-link">
<span data-lang="DE">Auszeichnungen</span>
<span data-lang="EN">Awards</span>
</a>
</li>
<li class="np-header-desktop-nav-item">
<a href="/app/on-the-job" class="np-header-desktop-nav-link videos-link">On-The-Job Videos</a>
<a href="/app/on-the-job" class="np-header-desktop-nav-link videos-link">
<span data-lang="DE">On-The-Job Videos</span>
<span data-lang="EN">On-The-Job Videos</span>
</a>
</li>
{% comment %}
<li class="np-header-desktop-nav-item">
<a href="/app/training_events" class="np-header-desktop-nav-link events-link">
Veranstaltungen</a>
</li> {% endcomment %}
{% for website_navigation in navigations.header_navigations_external %}
<li class= "np-header-desktop-nav-item">
<a
@ -87,7 +104,15 @@
{% endfor %}
</ul>
</div>
<div class="language-dropdown-wrapper np-hidden-mobile">
<div class="header-language-selection">
{{current_person.properties.user_language}}
</div>
<ul class="languages-dropdown">
<li data-lang="DE" onclick="changeLanguage(this.getAttribute('data-lang'))">Deutsch</li>
<li data-lang="EN" onclick="changeLanguage(this.getAttribute('data-lang'))">English</li>
</ul>
</div>
{% if current_person.signed_in? %}
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
<form action="{% route search %}" method="get" data-test="desktop-search">
@ -138,7 +163,8 @@
class="np-header-avatar-tooltip-navigation-link np-danger"
href="{% route logout %}"
>
{% t .sign_out %}
<span data-lang="DE">{% t .sign_out %}</span>
<span data-lang="DE">Logout</span>
</a>
</nav>
</div>
@ -158,12 +184,15 @@
<div class="np-header-mobile-menu-content np-hidden">
<div class="np-header-mobile-menu-content-nav">
<a href="/app/catalog" class="np-header-mobile-menu-content-button">Trainings</a>
<a href="/app/learning_paths" class="np-header-mobile-menu-content-button">Lernwege</a>
<a href="/app/zertifikate" class="np-header-mobile-menu-content-button">Auszeichnungen</a>
<a href="/app/learning_paths" class="np-header-mobile-menu-content-button">
<span data-lang="DE">Lernwege</span>
<span data-lang="EN">Learning Paths</span>
</a>
<a href="/app/zertifikate" class="np-header-mobile-menu-content-button">
<span data-lang="DE">Auszeichnungen</span>
<span data-lang="EN">Awards</span>
</a>
<a href="/app/on-the-job" class="np-header-mobile-menu-content-button">On-The-Job Videos</a>
{% comment %}
<a href="/app/training_events" class="np-header-mobile-menu-content-button">Veranstaltungen</a>
{% endcomment %}
<form
class="np-header-search"
data-test="mobile-search"
@ -228,6 +257,10 @@ body.mobile-menu-open .np-header {
color: #fff;
}
.np-header-mobile-menu-nav {
position:relative;
}
.np-header-mobile-menu-content {
background-color: #3e1191;
top:66px;
@ -337,6 +370,73 @@ body.mobile-menu-open .np-header {
color: #E52242;
}
/* LANGUAGE DROPDOWN */
.language-dropdown-wrapper {
position:relative;
}
.header-language-selection {
display: flex;
gap: 8px;
padding:20px;
font-size:20px;
cursor:pointer;
color:#fff;
align-items:center;
position:relative;
margin-right:8px;
}
.header-language-selection:after {
content: "\f078";
font-family: "Font Awesome 5 Pro";
position: absolute;
font-size: 14px;
top: 50%;
right: 4px;
color: #fff;
transition: transform 0.2s;
transform: translateY(-50%) rotate(0deg);
}
.header-language-selection.active:after {
transform: translateY(-50%) rotate(180deg);
}
.languages-dropdown {
position:absolute;
top: 66px;
left:50%;
transform: translateX(-50%);
background-color: #3e1191;
color:#fff;
margin:0;
height:0;
opacity:0;
min-width:170px;
list-style:none;
transition: opacity 0.2s;
z-index: 1;
}
.languages-dropdown:not(.show) {
visibility: hidden;
}
.languages-dropdown.show {
height:auto;
opacity:1;
padding:12px;
}
.languages-dropdown li {
cursor: pointer;
width:100%;
padding: 3px;
font-size:16px;
border-radius:3px;
text-align:center;
border: 1px solid #fff;
margin-bottom:10px;
}
/* END LANGUAGE DROPDOWN */
@media (min-width:768px) {
.np-header-search-input {
opacity: unset;
@ -348,6 +448,10 @@ body.mobile-menu-open .np-header {
right: unset;
left: 0.75rem;
}
.header-language-selection {
margin-right:20px;
}
}
</style>
@ -404,4 +508,95 @@ function detectScroll() {
}
}
</script>
// Languages dropdown hover effect
$(".header-language-selection").click((e) => {
if ($(e.target).hasClass("active")) {
$(".languages-dropdown").removeClass('show');
$(e.target).removeClass('active');
} else {
$(".languages-dropdown").addClass('show');
$(e.target).addClass('active');
}
})
function changeLanguage(lang) {
const userPropertyLang = '{{current_person.properties.user_language}}'
const localStorageLang = localStorage.getItem('lang', lang)
console.log(`Selected language: ${lang} | language set in property: ${userPropertyLang} | language in local storage: ${localStorageLang}`)
// hide dropdown
$(".languages-dropdown").removeClass('show');
$(".header-language-selection").removeClass("active")
// if no local storage,
if (localStorageLang == null) {
localStorage.setItem('lang', lang);
}
if (userPropertyLang != lang) {
$(".header-language-selection").text(lang);
$("body").attr("data-lang", lang)
// make workato call here
setLanguageWorkflow(lang)
} else {
$(".header-language-selection").text(lang);
$("body").attr("data-lang", lang)
}
}
$(document).ready(function() {
console.log('Property {{current_person.properties.user_language}}')
console.log(localStorage.getItem('lang'))
const userPropertyLang = '{{current_person.properties.user_language}}'
const localStorageLang = localStorage.getItem('lang')
if (localStorageLang == null) {
console.log("no local storage, use property to set lang")
$("body").attr("data-lang", userPropertyLang)
$(".header-language-selection").text(userPropertyLang );
} else {
if (localStorageLang == userPropertyLang) {
console.log("delete local storage and use property lang")
$("body").attr("data-lang", userPropertyLang)
$(".header-language-selection").text(userPropertyLang );
localStorage.removeItem('lang');
} else {
console.log("use local storage lang")
$("body").attr("data-lang", localStorageLang)
$(".header-language-selection").text(localStorageLang );
}
}
})
function setLanguageWorkflow(lang) {
console.log("calling workato workflow")
var data = {
learner_uuid : '{{current_person.id}}',
language : lang
};
const schoolID = '{{current_school.id}}'
let workatoEndpoint = ""
if (schoolID == "d4f9d06b-bbe9-4e0a-85ee-eadc10f17914") {
workatoEndpoint = 'https://webhooks.workato.com/webhooks/rest/ccd1cbb2-59bc-4590-852a-a0d217d198b1/user-changes-language'
} else if (schoolID == "6e96bbdd-7818-4920-b79c-e46132939929") {
workatoEndpoint = 'https://webhooks.workato.com/webhooks/rest/0cb722cd-39ae-4754-9c37-380e6672cdbf/user-changes-language'
}
$.ajax({
type : 'POST',
url : workatoEndpoint,
data: JSON.stringify(data),
success:function (data) {
console.log(data);
},
error: function(xhr, status, error) {
console.log(error)
}
});
}
</script>