Commit c2166638 authored by Danilo Woznica's avatar Danilo Woznica

feat(Team/map): Add countries

g
parent 5d250fd8
......@@ -180,7 +180,7 @@
photo: yes
country: Brazil
- name: Filipe Alvarenga
- name: Filipe Alvarenga
role: iOS Engineer
github_username: filipealva
department: Mobile
......
......@@ -56,8 +56,8 @@
}
&.brazil {
top: 84%;
left: 37%;
top: 81%;
left: 38%;
animation: 1s 0.4s appears forwards;
.team-map__profile {
......@@ -65,33 +65,72 @@
}
}
&.unitedkingdom {
top: 51.3%;
left: 49.2%;
animation: 1s 0.7s appears forwards;
&.peru {
top: 78%;
left: 29%;
animation: 1s 0.5s appears forwards;
.team-map__profile {
animation: 1s 1.3s appearsBox forwards;
animation: 1s 1.1s appearsBox forwards;
}
}
&.usa {
top: 60%;
left: 19%;
&.germany {
top: 53.3%;
left: 52.2%;
animation: 1s 0.6s appears forwards;
.team-map__profile {
animation: 1s 1.2s appearsBox forwards;
transform: translate(calc(-50% + 0.25em), 1.5em);
&:after {
border-top: 0.3em solid transparent;
border-bottom: 0.3em solid rgba(56,74,102,0.55);
bottom: auto;
top: -0.6em;
left: calc(50% - 0.3em);
}
}
}
&.india {
top: 68%;
left: 70%;
animation: 1s 0.5s appears forwards;
animation: 1s 0.7s appears forwards;
.team-map__profile {
animation: 1s 1.1s appearsBox forwards;
animation: 1s 1.3s appearsBox forwards;
}
}
&.usa {
top: 60%;
left: 19%;
animation: 1s 0.8s appears forwards;
.team-map__profile {
animation: 1s 1.4s appearsBox forwards;
}
}
&.canada {
top: 52%;
left: 29%;
animation: 1s 0.9s appears forwards;
.team-map__profile {
animation: 1s 1.5s appearsBox forwards;
}
}
&.unitedkingdom {
top: 51.3%;
left: 49.2%;
animation: 1s 1s appears forwards;
.team-map__profile {
animation: 1s 1.6s appearsBox forwards;
}
}
}
......
......@@ -13,17 +13,32 @@ theme: dark
{% assign teamList = site.data.team %}
{% assign BrazilTeam = "" | split: "" %}
{% assign CanadaTeam = "" | split: "" %}
{% assign PeruTeam = "" | split: "" %}
{% assign UnitedkingdomTeam = "" | split: "" %}
{% assign USATeam = "" | split: "" %}
{% assign IndiaTeam = "" | split: "" %}
{% assign GermanyTeam = "" | split: "" %}
{% for member in teamList %}
{% if member.country == "Brazil" %}
{% assign BrazilTeam = BrazilTeam | push: member %}
{% elsif member.country == "Unitedkingdom" %}
{% elsif member.country == "Canada" %}
{% assign CanadaTeam = CanadaTeam | push: member %}
{% elsif member.country == "Peru" %}
{% assign PeruTeam = PeruTeam | push: member %}
{% elsif member.country == "United Kingdom" %}
{% assign UnitedkingdomTeam = UnitedkingdomTeam | push: member %}
{% elsif member.country == "USA" %}
{% assign USATeam = USATeam | push: member %}
{% elsif member.country == "Germany" %}
{% assign GermanyTeam = GermanyTeam | push: member %}
{% elsif member.country == "India" %}
{% assign IndiaTeam = IndiaTeam | push: member %}
{% endif %}
......@@ -38,10 +53,10 @@ theme: dark
<img class="team-map__map" src="/images/team/world-map.svg" alt="World map" />
<div>
<div class="team-map__pin brazil">
<div class="team-map__pin canada">
<div class="team-map__profile">
<div class="flags">
{% for member in BrazilTeam %}
{% for member in CanadaTeam %}
{% if forloop.index <= 5 %}
{% if member.photo %}
<span><img src="/images/team/member/{{ member.username | replace: '.', '-' }}-01.jpg" alt=""></span>
......@@ -55,6 +70,30 @@ theme: dark
{% endif %}
{% endfor %}
</div>
<p>
<strong>Canada</strong>
<span><img src="/images/flags/Canada.png" alt="Canada" /></span>
</p>
</div>
</div>
<div class="team-map__pin brazil">
<div class="team-map__profile">
<div class="flags">
{% for member in BrazilTeam %}
{% if forloop.index <= 3 %}
{% if member.photo %}
<span><img src="/images/team/member/{{ member.username | replace: '.', '-' }}-01.jpg" alt=""></span>
{% else %}
<span><img src="https://avatars0.githubusercontent.com/u/{{ member.github_uid }}?v=4&s=140" alt=""></span>
{% endif %}
{% endif %}
{% if forloop.length > 3 and forloop.last %}
<span class="count">+{{ forloop.length | minus:3 }}</span>
{% endif %}
{% endfor %}
</div>
<p>
<strong>Brazil</strong>
<span><img src="/images/flags/Brazil.png" alt="Brazil" /></span>
......@@ -62,6 +101,30 @@ theme: dark
</div>
</div>
<div class="team-map__pin peru">
<div class="team-map__profile">
<div class="flags">
{% for member in PeruTeam %}
{% if forloop.index <= 5 %}
{% if member.photo %}
<span><img src="/images/team/member/{{ member.username | replace: '.', '-' }}-01.jpg" alt=""></span>
{% else %}
<span><img src="https://avatars0.githubusercontent.com/u/{{ member.github_uid }}?v=4&s=140" alt=""></span>
{% endif %}
{% endif %}
{% if forloop.length > 5 and forloop.last %}
<span class="count">+{{ forloop.length | minus:5 }}</span>
{% endif %}
{% endfor %}
</div>
<p>
<strong>Peru</strong>
<span><img src="/images/flags/Peru.png" alt="Peru" /></span>
</p>
</div>
</div>
<div class="team-map__pin unitedkingdom">
<div class="team-map__profile">
<div class="flags">
......@@ -81,7 +144,31 @@ theme: dark
</div>
<p>
<strong>United kingdom</strong>
<span><img src="/images/flags/Unitedkingdom.png" alt="Unitedkingdom" /></span>
<span><img src="/images/flags/United-Kingdom.png" alt="Unitedkingdom" /></span>
</p>
</div>
</div>
<div class="team-map__pin germany">
<div class="team-map__profile">
<div class="flags">
{% for member in GermanyTeam %}
{% if forloop.index <= 5 %}
{% if member.photo %}
<span><img src="/images/team/member/{{ member.username | replace: '.', '-' }}-01.jpg" alt=""></span>
{% else %}
<span><img src="https://avatars0.githubusercontent.com/u/{{ member.github_uid }}?v=4&s=140" alt=""></span>
{% endif %}
{% endif %}
{% if forloop.length > 5 and forloop.last %}
<span class="count">+{{ forloop.length | minus:5 }}</span>
{% endif %}
{% endfor %}
</div>
<p>
<strong>Germany</strong>
<span><img src="/images/flags/Germany.png" alt="Germany" /></span>
</p>
</div>
</div>
......@@ -154,7 +241,7 @@ theme: dark
<div class="team-item__wrap">
<h3 class="team-item__name theme_type--dark">
<strong>{{ member.name }}</strong>
<span><img src="/images/flags/{{ member.country }}.png" alt="{{ member.country }}" /></span>
<span><img src="/images/flags/{{ member.country | replace: ' ', '-' }}.png" alt="{{ member.country }}" /></span>
</h3>
<p class="team-item__role label--small theme_type--grey">{{ member.role }}</p>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment