Commit d8a73929 authored by Danilo Woznica's avatar Danilo Woznica

feat(Team): Add world map

parent 5a386241
- name: Gabriel Engel
- name: Gabriel Engel
role: Founder & CEO
github_username: engelgabriel
twitter: engelgabriel
......@@ -72,7 +72,7 @@
github_uid: 51996
department: Cloud
username: aaron.ogle
country: EUA
country: USA
- name: Bradley Hilton
role: Interconnectivity Specialist
......@@ -123,7 +123,7 @@
github_uid: 3830791
department: Marketing
username: sean.packham
country: GreatBritain
country: Unitedkingdom
- name: Filipe Brito
role: Android Engineer
......
.team-map {
position: relative;
height: 65vw;
max-height: 48em;
&:after {
content: "";
position: absolute;
right: 0;
left: 0;
top: 0;
height: 40%;
background-image: linear-gradient(0deg, transparent 0%, #030c1a 40%);
}
}
.team-map__wrap {
position: relative;
z-index: 2;
}
.team-map__map {
position: absolute;
top: 10%;
width: 100%;
left: 0;
right: 0;
}
.team-map__pin {
position: absolute;
opacity: 0;
&:after {
content: "";
display: block;
width: 0.5em;
height: 0.5em;
border-radius: 100%;
background: $brand;
}
&.brazil {
top: 84%;
left: 37%;
animation: 1s 0.4s appears forwards;
.team-map__profile {
animation: 1s 1s appearsBox forwards;
}
}
&.unitedkingdom {
top: 51.3%;
left: 49.2%;
animation: 1s 0.7s appears forwards;
.team-map__profile {
animation: 1s 1.3s appearsBox forwards;
}
}
&.usa {
top: 60%;
left: 19%;
animation: 1s 0.6s appears forwards;
.team-map__profile {
animation: 1s 1.2s appearsBox forwards;
}
}
&.india {
top: 68%;
left: 70%;
animation: 1s 0.5s appears forwards;
.team-map__profile {
animation: 1s 1.1s appearsBox forwards;
}
}
}
@keyframes appears {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes appearsBox {
0% {
opacity: 0;
margin-bottom: -3em;
}
100% {
opacity: 1;
margin-bottom: 0;
}
}
.team-map__profile {
background: rgba($grey-dark, 0.55);
position: absolute;
transform: translate(calc(-50% + 0.25em), -5.5em);
border-radius: 2px;
padding: 0.7em 1em 0.6em 2em;
max-width: 12em;
white-space: nowrap;
text-align: center;
line-height: 1;
opacity: 0;
transform-origin: 50% 100%;
display: none;
@media screen and (min-width: $tablet) {
display: block;
}
&:after {
content: "";
display: block;
border: 0.3em solid transparent;
border-top: 0.3em solid rgba($grey-dark, 0.55);
position: absolute;
bottom: -0.6em;
left: calc(50% - 0.3em);
}
.flags {
margin-bottom: 0.3em;
span {
margin-left: -1rem;
width: 2rem;
height: 2rem;
display: inline-block;
border-radius: 100%;
overflow: hidden;
&.count {
background: $grey;
color: #fff;
line-height: 2rem;
font-size: 0.6em;
font-weight: bold;
text-align: center;
}
}
span:not(:only-of-type) {
border: 1px solid $grey-dark;
}
}
p {
display: inline-flex;
font-size: 0.6em;
text-transform: uppercase;
letter-spacing: 0.6px;
color: #fff;
margin: 0;
line-height: 1;
margin-left: -2em;
img {
width: 1.5em;
margin-left: 0.7em;
}
}
}
.team-grid {
display: flex;
justify-content: space-between;
......@@ -6,10 +182,19 @@
.team-item {
position: relative;
width: calc(100% / 3 - 1.5em);
margin-bottom: 3em;
border-radius: 2px;
overflow: hidden;
width: 100%;
margin-bottom: 1em;
@media screen and (min-width: 33em) {
width: calc(100% / 2 - 0.5em);
}
@media screen and (min-width: 60em) {
margin-bottom: 3em;
width: calc(100% / 3 - 1.5em);
}
}
.team-item__image {
......@@ -37,20 +222,29 @@
.team-item__name {
display: flex;
align-items: center;
margin-bottom: 0.3em;
height: 1.5em;
overflow: hidden;
strong {
max-width: 75%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
img {
margin-left: 0.5em;
width: 1.5em;
position: relative;
top: 0.2em;
}
}
.team-item__role {
height: 1.5em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.team-item__social {
......@@ -61,11 +255,16 @@
left: 0;
right: 0;
padding: 1em;
transition: all 0.7s ease;
border-top: 1px solid transparent;
transition: all 0.7s ease;
a {
transition: all 0.7s ease;
margin-right: 0.2em;
&:hover {
opacity: 0.9;
}
}
}
......@@ -129,10 +328,15 @@
height: calc(100% - 8em);
p {
animation: slide 0.5s 0.2s ease forwards;
animation: slide 0.7s 0.1s ease forwards;
}
p + p {
animation: slide 0.5s 0.3s ease forwards;
p:nth-child(2) {
animation: slide 0.7s 0.2s ease forwards;
}
p:nth-child(3) {
animation: slide 0.7s 0.3s ease forwards;
}
}
......@@ -144,12 +348,10 @@
@keyframes slide {
0% {
transform: translateY(1.3em);
line-height: 2;
opacity: 0;
}
100% {
transform: translateY(0);
line-height: 1.5;
opacity: 1;
}
}
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -11,63 +11,115 @@ theme: dark
---
{% assign teamList = site.data.team %}
<!--
<div class="brazil">
{% for member in teamList %}
{% if member.country %}
{% if member.country == "Brazil" %}
{% if member.photo %}
<img src="/images/team/member/{{ member.username | replace: '.', '-' }}-01.jpg" alt="">
{% else %}
<img src="https://avatars0.githubusercontent.com/u/{{ member.github_uid }}?v=4&s=140" alt="">
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</div>
<div class="england">
{% for member in teamList %}
{% if member.country %}
{% if member.country == "GreatBritain" %}
{% if member.photo %}
<img src="/images/team/member/{{ member.username | replace: '.', '-' }}-01.jpg" alt="">
{% else %}
<img src="https://avatars0.githubusercontent.com/u/{{ member.github_uid }}?v=4&s=140" alt="">
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</div>
<div class="eua">
{% for member in teamList %}
{% if member.country %}
{% if member.country == "EUA" %}
{% if member.photo %}
<img src="/images/team/member/{{ member.username | replace: '.', '-' }}-01.jpg" alt="">
{% else %}
<img src="https://avatars0.githubusercontent.com/u/{{ member.github_uid }}?v=4&s=140" alt="">
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</div>
<div class="india">
{% for member in teamList %}
{% if member.country %}
{% if member.country == "India" %}
{% if member.photo %}
<img src="/images/team/member/{{ member.username | replace: '.', '-' }}-01.jpg" alt="">
{% else %}
<img src="https://avatars0.githubusercontent.com/u/{{ member.github_uid }}?v=4&s=140" alt="">
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</div>
-->
{% assign BrazilTeam = "" | split: "" %}
{% assign UnitedkingdomTeam = "" | split: "" %}
{% assign USATeam = "" | split: "" %}
{% assign IndiaTeam = "" | split: "" %}
{% for member in teamList %}
{% if member.country == "Brazil" %}
{% assign BrazilTeam = BrazilTeam | push: member %}
{% elsif member.country == "Unitedkingdom" %}
{% assign UnitedkingdomTeam = UnitedkingdomTeam | push: member %}
{% elsif member.country == "USA" %}
{% assign USATeam = USATeam | push: member %}
{% elsif member.country == "India" %}
{% assign IndiaTeam = IndiaTeam | push: member %}
{% endif %}
{% endfor %}
<section class="container hero team-map">
<div class="team-map__wrap">
<h1 class="display--big theme_type--dark">Team Rocket.Chat</h1>
<p class="display--small theme_type--grey">A global team to keep the rockets firing</p>
</div>
<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__profile">
<div class="flags">
{% for member in BrazilTeam %}
{% 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.last %}
<span class="count">+{{forloop.length | minus:5 }}</span>
{% endif %}
{% endfor %}
</div>
<p>
<strong>Brazil</strong>
<span><img src="/images/flags/Brazil.png" alt="Brazil" /></span>
</p>
</div>
</div>
<div class="team-map__pin unitedkingdom">
<div class="team-map__profile">
<div class="flags">
{% for member in UnitedkingdomTeam %}
{% 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 %}
{% endfor %}
</div>
<p>
<strong>United kingdom</strong>
<span><img src="/images/flags/Unitedkingdom.png" alt="Unitedkingdom" /></span>
</p>
</div>
</div>
<div class="team-map__pin usa">
<div class="team-map__profile">
<div class="flags">
{% for member in USATeam %}
{% 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 %}
<!-- {{forloop.index}} -->
{% endfor %}
</div>
<p>
<strong>USA</strong>
<span><img src="/images/flags/USA.png" alt="USA" /></span>
</p>
</div>
</div>
<div class="team-map__pin india">
<div class="team-map__profile">
<div class="flags">
{% for member in IndiaTeam %}
{% 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 %}
<!-- {{forloop.index}} -->
{% endfor %}
</div>
<p>
<strong>India</strong>
<span><img src="/images/flags/India.png" alt="India" /></span>
</p>
</div>
</div>
</div>
</section>
<section class="container">
<ul class="team-grid">
......
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