317 lines
9.3 KiB
Plaintext
317 lines
9.3 KiB
Plaintext
<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
|
||
data-toggle-class="np-hidden"
|
||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||
></button>
|
||
<button
|
||
data-test="open-mobile-menu"
|
||
data-toggle-class="np-hidden"
|
||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||
>
|
||
<img
|
||
alt="{{ current_person.name }}"
|
||
class="np-header-avatar-image"
|
||
src="{{ current_person.avatar_url }}"
|
||
/>
|
||
</button>
|
||
{% endif %}
|
||
</div>
|
||
{% if current_school.logo_url %}
|
||
<h1 class="np-header-logo">
|
||
<a href="{% route home %}">
|
||
<img
|
||
alt="{{ current_school.name }}"
|
||
class="np-header-logo-image"
|
||
src="{{ current_school.logo_url }}"
|
||
/>
|
||
</a>
|
||
</h1>
|
||
{% else %}
|
||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||
{{ current_school.name }}
|
||
</a>
|
||
{% endif %}
|
||
|
||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||
<ul class="np-header-desktop-nav-list">
|
||
{% for website_navigation in navigations.header_navigations_external %}
|
||
<li class= "np-header-desktop-nav-item">
|
||
<a
|
||
href="{{ website_navigation.path }}"
|
||
class="np-header-desktop-nav-link np-header-font-color"
|
||
target="_blank"
|
||
>
|
||
{{ website_navigation.name }}
|
||
</a>
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
</div>
|
||
|
||
{% if current_person.signed_in? %}
|
||
{% assign current_language = "English" %}
|
||
{% if current_person.properties.language == "en" %}
|
||
{% assign current_language = "English" %}
|
||
{% elsif current_person.properties.language == "ru" %}
|
||
{% assign current_language = "Pусский" %}
|
||
{% elsif current_person.properties.language == "ar" %}
|
||
{% assign current_language = "عربي" %}
|
||
{% elsif current_person.properties.language == "fr" %}
|
||
{% assign current_language = "Français" %}
|
||
{% elsif current_person.properties.language == "es" %}
|
||
{% assign current_language = "Español" %}
|
||
{% endif %}
|
||
|
||
<div class="dropdown">
|
||
<button onclick="myFunction()" class="dropbtn">{{current_language | upcase}}<i class="fas fa-arrow-alt-down" style="padding-left:5px"></i></button>
|
||
<div id="myDropdown" class="dropdown-content">
|
||
<a onclick="setLang('es')">Español</a>
|
||
<hr class="divider">
|
||
<a onclick="setLang('en')">English</a>
|
||
<!--<hr class="divider">
|
||
<a onclick="setLang('fr')">Français</a>
|
||
<hr class="divider">
|
||
<a onclick="setLang('ru')">Pусский</a>
|
||
<hr class="divider">
|
||
<a onclick="setLang('ar')">عربي</a>-->
|
||
</div>
|
||
</div>
|
||
|
||
{% endif %}
|
||
|
||
{% 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">
|
||
<input
|
||
aria-label="{% t .search %}"
|
||
class="np-header-search-input np-header-font-background-color"
|
||
type="text"
|
||
name="q"
|
||
placeholder="{% t .search %}"
|
||
/>
|
||
<i class="np-header-search-icon far fa-search"></i>
|
||
</form>
|
||
</div>
|
||
<div class="np-hidden-mobile np-header-avatar">
|
||
<button
|
||
class="np-header-avatar-button"
|
||
data-test="open-desktop-menu"
|
||
data-toggle-class-on-target="np-hidden"
|
||
data-toggle-target=".np-header-avatar-tooltip"
|
||
data-toggle-outside
|
||
>
|
||
<img
|
||
alt="{{ current_person.name }}"
|
||
class="np-header-avatar-image"
|
||
src="{{ current_person.avatar_url }}"
|
||
>
|
||
</button>
|
||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||
<div class="np-header-avatar-tooltip-learner">
|
||
<div class="np-header-avatar-tooltip-learner-name">
|
||
{{ current_person.name }}
|
||
</div>
|
||
<div class="np-header-avatar-tooltip-learner-email">
|
||
{{ current_person.email }}
|
||
</div>
|
||
</div>
|
||
<nav class="np-header-avatar-tooltip-navigation">
|
||
{% unless current_school.sso_active? %}
|
||
<a
|
||
class="np-header-avatar-tooltip-navigation-link"
|
||
href="{% route account %}"
|
||
>
|
||
{% t .profile_settings %}
|
||
</a>
|
||
{% endunless %}
|
||
<a
|
||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||
href="{% route logout %}"
|
||
>
|
||
{% t .sign_out %}
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
<a
|
||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||
href="{% route login %}"
|
||
>
|
||
{% t shared.sign_in %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</header>
|
||
|
||
<div class="np-hidden-desktop">
|
||
<div class="np-header-mobile-menu-content np-hidden">
|
||
{% if current_person.signed_in? %}
|
||
<img
|
||
alt="{{ current_person.name }}"
|
||
class="np-header-mobile-menu-content-avatar"
|
||
src="{{ current_person.avatar_url }}"
|
||
/>
|
||
<div class="np-header-mobile-menu-content-name">
|
||
{{ current_person.name }}
|
||
</div>
|
||
{% endif %}
|
||
<div class="np-header-mobile-menu-content-nav">
|
||
<form
|
||
class="np-header-search"
|
||
data-test="mobile-search"
|
||
method="get"
|
||
action="{% route search %}"
|
||
>
|
||
<input
|
||
aria-label="{% t .search %}"
|
||
class="np-header-search-input"
|
||
type="text"
|
||
name="q"
|
||
placeholder="{% t .search %}"
|
||
/>
|
||
<i class="np-header-search-icon far fa-search"></i>
|
||
</form>
|
||
{% for website_navigation in navigations.header_navigations %}
|
||
<a
|
||
href="{{ website_navigation.path }}"
|
||
class="np-header-mobile-menu-content-button"
|
||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||
>
|
||
{{ website_navigation.name }}
|
||
</a>
|
||
{% endfor %}
|
||
<div class="np-header-mobile-menu-content-line"></div>
|
||
{% unless current_school.sso_active? %}
|
||
<a
|
||
class="np-header-mobile-menu-content-button"
|
||
href="{% route account %}"
|
||
>
|
||
{% t .profile_settings %}
|
||
</a>
|
||
{% endunless %}
|
||
<a
|
||
class="np-header-mobile-menu-content-button np-danger"
|
||
href="{% route logout %}"
|
||
>
|
||
{% t .sign_out %}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% include "messages" %}
|
||
{% if current_person.signed_in? %}
|
||
{% assign lang = current_person.properties.language %}
|
||
|
||
{% case lang %}
|
||
{% when "Spanish" %}
|
||
{% include "spanish_lang" %}
|
||
{% endcase %}
|
||
|
||
|
||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||
|
||
<script>
|
||
function setLang(lang) {
|
||
var data = {
|
||
uuid : '{{current_person.id}}',
|
||
language : lang
|
||
};
|
||
$.ajax({
|
||
type : 'POST',
|
||
url : 'https://hooks.zapier.com/hooks/catch/9725311/bt60dir/', //zapier link
|
||
data: JSON.stringify(data),
|
||
success:function (data) {
|
||
console.log(data);
|
||
setTimeout(location.reload.bind(location), 700);
|
||
},
|
||
error: function(xhr, status, error) {
|
||
console.log(error)
|
||
}
|
||
});
|
||
}
|
||
|
||
/* When the user clicks on the button,
|
||
toggle between hiding and showing the dropdown content */
|
||
function myFunction() {
|
||
document.getElementById("myDropdown").classList.toggle("show");
|
||
}
|
||
|
||
// Close the dropdown if the user clicks outside of it
|
||
window.onclick = function(event) {
|
||
if (!event.target.matches('.dropbtn')) {
|
||
var dropdowns = document.getElementsByClassName("dropdown-content");
|
||
var i;
|
||
for (i = 0; i < dropdowns.length; i++) {
|
||
var openDropdown = dropdowns[i];
|
||
if (openDropdown.classList.contains('show')) {
|
||
openDropdown.classList.remove('show');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
{% endif %}
|
||
<style>
|
||
.hr.divider {
|
||
border-top: 4px solid black;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.dropbtn {
|
||
background-color: white;
|
||
color: #0088dd;
|
||
padding: 13px;
|
||
font-size: 16px;
|
||
min-width: 160px;
|
||
border: none;
|
||
cursor: pointer;
|
||
margin-right: 20px;
|
||
border-radius: 5px;
|
||
max-height: 44px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.dropdown {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
|
||
.dropdown-content {
|
||
text-align: center;
|
||
display: none;
|
||
position: absolute;
|
||
background-color: white;
|
||
min-width: 160px;
|
||
overflow: auto;
|
||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||
z-index: 1000;
|
||
border-radius: 4px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.dropdown-content a {
|
||
color: black;
|
||
padding: 12px 16px;
|
||
text-decoration: none;
|
||
display: block;
|
||
}
|
||
|
||
.dropdown a:hover {
|
||
color: #0088dd;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.show {display: block;}
|
||
</style>
|
||
|