Updated Pipedrive's templates, mostly.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,171 @@
|
||||
<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">
|
||||
<span class="lang-en">Hi {{ current_person.first_name }}!</span>
|
||||
<span class="lang-de">Hallo {{ current_person.first_name }}!</span>
|
||||
<span class="lang-es">¡Hola {{ current_person.first_name }}!</span>
|
||||
<span class="lang-fr">Bonjour {{ current_person.first_name }}!</span>
|
||||
<span class="lang-br">Oi {{ current_person.first_name }}!</span>
|
||||
</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">Willkommen! Wir haben Ihren Fortschritt bei den <strong>Kursen</strong> gespeichert</span>
|
||||
<span class="lang-es">Bienvenido Hemos guardado su progreso sobre los <strong>cursos</strong></span>
|
||||
<span class="lang-fr">Bienvenue ! Nous avons enregistré votre progression dans les <strong>cours</strong>.</span>
|
||||
<span class="lang-br">Seja bem-vindo(a)! Salvamos o seu progresso nos cursos</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">In Arbeit</span>
|
||||
<span class="lang-es">En curso</span>
|
||||
<span class="lang-fr">En cours</span>
|
||||
<span class="lang-br">Em andamento</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">Nicht gestartet</span>
|
||||
<span class="lang-es">No iniciado</span>
|
||||
<span class="lang-fr">Pas encore commencé</span>
|
||||
<span class="lang-br">Não iniciado</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">Abgeschlossen</span>
|
||||
<span class="lang-es">Completado</span>
|
||||
<span class="lang-fr">Complété</span>
|
||||
<span class="lang-br">Concluído</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>
|
||||
Reference in New Issue
Block a user