480 lines
14 KiB
Plaintext
480 lines
14 KiB
Plaintext
<header class="header-mobile">
|
|
<a href="{% route home %}">
|
|
<img
|
|
alt="{{ current_school.name }}"
|
|
class="header-mobile-logo"
|
|
src="{{ current_school.logo_url }}"
|
|
/>
|
|
</a>
|
|
<div class="header-mobile-icons">
|
|
<i class="fal fa-search header-mobile-search-icon"></i>
|
|
<i class="fal fa-bars header-mobile-menu-icon"></i>
|
|
<img class="header-mobile-avatar" src="{{ current_person.avatar_url }}" />
|
|
</div>
|
|
<div class="header-mobile-search-bar np-hidden">
|
|
<form
|
|
class="header-mobile-search-form"
|
|
method="get"
|
|
action="{% route search %}"
|
|
>
|
|
<button class="header-mobile-search-bar-button">
|
|
<i class="fal fa-search"></i>
|
|
</button>
|
|
<input
|
|
aria-label="Search"
|
|
class="header-mobile-search-form-input"
|
|
type="text"
|
|
name="q"
|
|
placeholder="Search"
|
|
/>
|
|
</form>
|
|
<i class="fal fa-times header-mobile-search-bar-close"></i>
|
|
</div>
|
|
<div class="header-mobile-menu np-hidden">
|
|
<div class="header-mobile-menu-header">
|
|
<a href="{% route home %}">
|
|
<img
|
|
alt="{{ current_school.name }}"
|
|
class="header-mobile-logo"
|
|
src="{{ current_school.logo_url }}"
|
|
/>
|
|
</a>
|
|
<i class="fal fa-times header-mobile-menu-header-close"></i>
|
|
</div>
|
|
<div class="header-mobile-menu-content">
|
|
<div class="header-mobile-menu-content-section">
|
|
<div class="header-mobile-menu-content-title">
|
|
CATEGORY <i class="fa-solid fa-angle-down menu-arrow"></i> <i class="fa-solid fa-angle-up menu-arrow np-hidden "></i>
|
|
</div>
|
|
<ul class="header-mobile-menu-content-list np-hidden">
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="/app/catalog#category-businessfoundations"
|
|
>
|
|
Business Foundations
|
|
</a>
|
|
</li>
|
|
<li class="header-content-menu-element">
|
|
<a
|
|
class="header-content-dropdown-link"
|
|
href="/app/catalog#category-emailmarketingfundamentals"
|
|
>
|
|
Email Marketing Fundamentals
|
|
</a>
|
|
</li>
|
|
<li class="header-content-menu-element">
|
|
<a
|
|
class="header-content-dropdown-link"
|
|
href="/app/catalog#category-expert-ledtutorials"
|
|
>
|
|
Expert-led Tutorials
|
|
</a>
|
|
</li>
|
|
<li class="header-content-menu-element">
|
|
<a
|
|
class="header-content-dropdown-link"
|
|
href="/app/catalog#category-omnisendbasics"
|
|
>
|
|
Omnisend Basics
|
|
</a>
|
|
</li>
|
|
<li class="header-content-menu-element">
|
|
<a
|
|
class="header-content-dropdown-link"
|
|
href="/app/catalog#category-productupdates"
|
|
>
|
|
Product Updates
|
|
<li class="header-content-menu-element">
|
|
<a
|
|
class="header-content-dropdown-link"
|
|
href="/app/catalog#category-webinars"
|
|
>
|
|
Webinars
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="header-mobile-menu-content-section">
|
|
<div class="header-mobile-menu-content-title">
|
|
DIFFICULTY <i class="fa-solid fa-angle-down menu-arrow"></i> <i class="fa-solid fa-angle-up menu-arrow np-hidden"></i>
|
|
</div>
|
|
<ul class="header-mobile-menu-content-list np-hidden">
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="/app/catalog#diff-1"
|
|
>
|
|
Beginner
|
|
</a>
|
|
</li>
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="/app/catalog#diff-2"
|
|
>
|
|
Advanced
|
|
</a>
|
|
</li>
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="/app/catalog#diff-3"
|
|
>
|
|
Expert
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="header-mobile-menu-content-section">
|
|
<div class="header-mobile-menu-content-title">
|
|
DURATION <i class="fa-solid fa-angle-down menu-arrow"></i> <i class="fa-solid fa-angle-up menu-arrow np-hidden"></i>
|
|
</div>
|
|
<ul class="header-mobile-menu-content-list np-hidden">
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="/app/catalog#time-1"
|
|
>
|
|
< 10 mins
|
|
</a>
|
|
</li>
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="/app/catalog#time-2"
|
|
>
|
|
10-30 mins
|
|
</a>
|
|
</li>
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="/app/catalog#time-3"
|
|
>
|
|
30-60 mins
|
|
</a>
|
|
</li>
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="/app/catalog#time-4"
|
|
>
|
|
1-2 hours
|
|
</a>
|
|
</li>
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="/app/catalog#time-5"
|
|
>
|
|
> 2 hours
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="header-mobile-menu-content-section">
|
|
<div class="header-mobile-menu-content-title">
|
|
RESOURCES <i class="fa-solid fa-angle-down menu-arrow"></i> <i class="fa-solid fa-angle-up menu-arrow np-hidden"></i>
|
|
</div>
|
|
<ul class="header-mobile-menu-content-list np-hidden">
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="https://www.omnisend.com/resources/blog/"
|
|
>
|
|
Blog
|
|
</a>
|
|
</li>
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="https://www.omnisend.com/resources/library/"
|
|
>
|
|
Library
|
|
</a>
|
|
</li>
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="https://www.omnisend.com/resources/reports/"
|
|
>
|
|
Reports
|
|
</a>
|
|
</li>
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="https://www.omnisend.com/resources/podcast/"
|
|
>
|
|
Podcast
|
|
</a>
|
|
</li>
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="https://www.omnisend.com/resources/interviews/"
|
|
>
|
|
Interviews
|
|
</a>
|
|
</li>
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="https://support.omnisend.com/en/"
|
|
>
|
|
Knowledge Base
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="header-mobile-menu-divider"></div>
|
|
<div class="header-mobile-menu-content-section">
|
|
<ul class="header-mobile-menu-content-list">
|
|
{% if current_person.signed_in? %}
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="https://app.omnisend.com/registrationv2?utm_source=academy&utm_medium=startfree&utm_campaign=academy"
|
|
>
|
|
Sign up for Omnisend
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="/app/faq"
|
|
>
|
|
FAQ
|
|
</a>
|
|
</li>
|
|
{% if current_person.signed_in? %}
|
|
{% unless current_school.sso_active? %}
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="{% route account %}"
|
|
>
|
|
Profile settings
|
|
</a>
|
|
</li>
|
|
{% endunless %}
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="{% route logout %}"
|
|
>
|
|
Logout
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="header-mobile-menu-content-item">
|
|
<a
|
|
class="header-mobile-menu-content-link"
|
|
href="{% route login %}"
|
|
>
|
|
Login
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="greyed np-hidden"></div>
|
|
|
|
<style>
|
|
.header-mobile {
|
|
display: none;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
padding: 16px 5%;
|
|
border-bottom: 1px solid #b6b6b6;
|
|
margin-bottom: 20px;
|
|
}
|
|
.header-mobile-logo {
|
|
height: 32px;
|
|
}
|
|
.header-mobile-icons {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
width: 50%;
|
|
}
|
|
.header-mobile-search-icon {
|
|
font-size: 32px;
|
|
cursor: pointer;
|
|
}
|
|
.header-mobile-menu-icon {
|
|
font-size: 32px;
|
|
cursor: pointer;
|
|
}
|
|
.header-mobile-avatar {
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
.header-mobile-search-bar {
|
|
height: 64px;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
background-color: white;
|
|
width: 100%;
|
|
}
|
|
.header-mobile-search-form {
|
|
width: 85%;
|
|
margin: auto;
|
|
border: 1px solid black;
|
|
display: flex;
|
|
border-radius: 5px;
|
|
}
|
|
.header-mobile-search-form-input {
|
|
width: 90%;
|
|
height: 40px;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 20px;
|
|
}
|
|
.header-mobile-search-bar-close {
|
|
font-size: 32px;
|
|
align-self: center;
|
|
right: 20px;
|
|
position: relative;
|
|
}
|
|
.header-mobile-search-bar-button {
|
|
align-self: center;
|
|
padding: 0 10px;
|
|
font-size: 20px;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
.header-mobile-menu-header {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 64px;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
z-index: 10;
|
|
background-color: white;
|
|
justify-content: space-between;
|
|
height: 64px;
|
|
padding: 16px 5%;
|
|
border-bottom: 1px solid #b6b6b6;
|
|
}
|
|
.header-mobile-menu-header-close {
|
|
font-size: 32px;
|
|
align-self: center;
|
|
right: 20px;
|
|
position: relative;
|
|
}
|
|
.header-mobile-menu-content {
|
|
position: fixed;
|
|
width: 300px;
|
|
height: calc(100vh - 64px);
|
|
top: 64px;
|
|
right: 0;
|
|
display: block;
|
|
z-index: 10;
|
|
background-color: white;
|
|
overflow-y: auto !important;
|
|
padding-top: 32px;
|
|
}
|
|
.header-mobile-menu-content-section {
|
|
width: 80%;
|
|
margin-left: 8%;
|
|
}
|
|
.header-mobile-menu-content-title {
|
|
font-weight: 500;
|
|
letter-spacing: 3px;
|
|
opacity: 0.4;
|
|
margin-bottom: 16px;
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
}
|
|
.menu-arrow {
|
|
float: right;
|
|
}
|
|
.header-mobile-menu-content-list {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
.header-mobile-menu-content-item {
|
|
margin: 8px 0;
|
|
}
|
|
.header-mobile-menu-content-link {
|
|
text-decoration: none;
|
|
color: #1E2423;
|
|
font-size: 1.1rem;
|
|
}
|
|
.header-mobile-menu-content-link:hover {
|
|
color: #1E2423;
|
|
}
|
|
.header-mobile-menu-divider {
|
|
width: 84%;
|
|
left: 8%;
|
|
position: relative;
|
|
border-bottom: 1px solid #b6b6b6;
|
|
opacity: 0.6;
|
|
}
|
|
.greyed {
|
|
opacity: 0.5;
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #000000;
|
|
z-index: 5;
|
|
display: block;
|
|
content: "";
|
|
}
|
|
@media only screen and (max-width: 350px) {
|
|
.header-mobile-menu-content {
|
|
width: 100vw;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
$('[id^="BackToAdminBanner-react-component-"]').remove();
|
|
$(".header-mobile-search-icon").click(function () {
|
|
$(".greyed").removeClass("np-hidden");
|
|
$(".header-mobile-search-bar").removeClass("np-hidden");
|
|
document.body.style.overflow = "hidden";
|
|
});
|
|
$(".header-mobile-search-bar-close").click(function () {
|
|
document.body.style.overflow = "scroll";
|
|
$(".header-mobile-search-bar").addClass("np-hidden");
|
|
$(".greyed").addClass("np-hidden");
|
|
});
|
|
$(".greyed").click(function () {
|
|
document.body.style.overflow = "scroll";
|
|
if(! $(".header-mobile-search-bar").hasClass('np-hidden')){
|
|
$(".header-mobile-search-bar").addClass("np-hidden");
|
|
}
|
|
if(! $(".header-mobile-menu").hasClass('np-hidden')){
|
|
$(".header-mobile-menu").addClass("np-hidden");
|
|
}
|
|
$(".greyed").addClass("np-hidden");
|
|
});
|
|
$(".header-mobile-menu-icon").click(function () {
|
|
$(".header-mobile-menu").removeClass("np-hidden");
|
|
document.body.style.overflow = "hidden";
|
|
$(".greyed").removeClass("np-hidden");
|
|
});
|
|
$(".header-mobile-menu-header-close").click(function () {
|
|
$(".header-mobile-menu").addClass("np-hidden");
|
|
document.body.style.overflow = "scroll";
|
|
$(".greyed").addClass("np-hidden");
|
|
});
|
|
$('.header-mobile-menu-content-title').click(function() {
|
|
$(this).children('.menu-arrow').toggleClass('np-hidden');
|
|
$(this).next().toggleClass('np-hidden');
|
|
})
|
|
</script>
|