168 lines
4.6 KiB
Plaintext
168 lines
4.6 KiB
Plaintext
<div class="green-banner-wrapper homepage-banner">
|
|
<div class="green-banner width-limit">
|
|
<img class="homepage-banner-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage_banner.svg" alt="banner">
|
|
<div class="green-banner-content">
|
|
<h1 class="green-banner-title">
|
|
Hi {{ current_person.first_name }}!
|
|
</h1>
|
|
<div class="green-banner-text">
|
|
<span class="lang-en">Welcome! We have saved your progress about <strong>courses</strong></span>
|
|
<span class="lang-de"></span>
|
|
<span class="lang-es"></span>
|
|
<span class="lang-fr"></span>
|
|
<span class="lang-br"></span>
|
|
</div>
|
|
<div class="homepage-banner-stats">
|
|
{% assign in_progress = 0 %}
|
|
{% assign not_started = 0 %}
|
|
{% assign completed = 0 %}
|
|
|
|
{% for course in courses.in_catalog %}
|
|
{% if course.ribbon != 'VIDEO' %}
|
|
{% if course.completed? %}
|
|
{% assign completed = completed | plus: 1 %}
|
|
{% elsif course.started? == false %}
|
|
{% assign not_started = not_started | plus: 1 %}
|
|
{% else %}
|
|
{% assign in_progress = in_progress | plus: 1 %}
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
<div class="homepage-banner-stat">
|
|
<div class="stat-dot" style="color: #FFCC00;">
|
|
<i class="fas fa-circle"></i>
|
|
</div>
|
|
<div class="stat-number strong">
|
|
{{ in_progress }}
|
|
</div>
|
|
<div class="stat-text body-s">
|
|
<span class="lang-en">In progress</span>
|
|
<span class="lang-de"></span>
|
|
<span class="lang-es"></span>
|
|
<span class="lang-fr"></span>
|
|
<span class="lang-br"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="homepage-banner-stat">
|
|
<div class="stat-dot" style="color: var(--purple);">
|
|
<i class="fas fa-circle"></i>
|
|
</div>
|
|
<div class="stat-number strong">
|
|
{{ not_started }}
|
|
</div>
|
|
<div class="stat-text body-s">
|
|
<span class="lang-en">Not started</span>
|
|
<span class="lang-de"></span>
|
|
<span class="lang-es"></span>
|
|
<span class="lang-fr"></span>
|
|
<span class="lang-br"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="homepage-banner-stat">
|
|
<div class="stat-dot" style="color: var(--green);">
|
|
<i class="fas fa-circle"></i>
|
|
</div>
|
|
<div class="stat-number strong">
|
|
{{ completed }}
|
|
</div>
|
|
<div class="stat-text body-s">
|
|
<span class="lang-en">Completed</span>
|
|
<span class="lang-de"></span>
|
|
<span class="lang-es"></span>
|
|
<span class="lang-fr"></span>
|
|
<span class="lang-br"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.homepage-banner-image {
|
|
width: 100%;
|
|
}
|
|
.homepage-banner-stat {
|
|
background: #FFF;
|
|
margin-bottom: 10px;
|
|
padding: 12px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
width:100%;
|
|
}
|
|
.homepage-banner-stat > div {
|
|
text-align: center;
|
|
margin-right: 8px;
|
|
}
|
|
.stat-dot {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.homepage-banner-stat .stat-number {
|
|
font-size: 18px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.homepage-banner-stat .stat-text {
|
|
font-size: 14px;
|
|
line-height: 25px;
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.homepage-banner .green-banner {
|
|
padding-bottom: 0;
|
|
overflow: clip;
|
|
}
|
|
.homepage-banner .green-banner-title {
|
|
word-break: break-word;
|
|
}
|
|
.homepage-banner .green-banner {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
}
|
|
.homepage-banner .green-banner-content {
|
|
padding-bottom: 40px;
|
|
align-self: center;
|
|
}
|
|
.homepage-banner-image {
|
|
height: 250px;
|
|
align-self: end;
|
|
object-fit: contain;
|
|
width: auto;
|
|
margin-right: -10%;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 880px) {
|
|
.homepage-banner-image {
|
|
height: 300px;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1200px) {
|
|
.homepage-banner-image {
|
|
margin-right: -5%;
|
|
height: 350px;
|
|
}
|
|
.homepage-banner .green-banner-content {
|
|
flex: 1 1 0px;
|
|
width: 0;
|
|
}
|
|
.homepage-banner-stats {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
.homepage-banner-stat {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1400px) {
|
|
.homepage-banner-image {
|
|
margin-right: 0;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|