Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

/team: Improve the responsiveness of the team profiles. 

Fixes #7349
This commit is contained in:
Tommy Ip 2017-11-13 21:48:06 +00:00 committed by Tim Abbott
parent 94a14f9796
commit acdc4c9d27
2 changed files with 95 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
static/styles/portico.css
View File

@ -838,87 +838,78 @@ a.bottom-signup-button {
box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
}
.team .team-profiles {
text-align: center;
margin: 20px 0px;
}
.team {
margin: 50px 0px;
}
.team .profile {
display: inline-block;
text-align: center;
margin: 10px 0px;
}
.team .profile .profile-picture {
display: block;
width: 130px;
height: 130px;
margin: 5px 5px;
border-radius: 50%;
background-color: #444;
pointer-events: none;
box-shadow: 1px 2px 2px hsla(217, 47%, 17%, 0.03), 2px 2px 12px hsla(217, 47%, 17%, 0.09);
}
.team .profile:not(.bdfl) .profile-picture {
margin: 5px 13px;
}
.team .profile.bdfl {
display: block;
}
.team .profile.bdfl .profile-information {
display: inline-block;
vertical-align: top;
text-align: left;
font-size: 1.4em;
width: calc(100% - 215px - 10px);
margin-left: 10px;
}
.team .profile.bdfl .profile-description {
margin-top: 20px;
font-weight: 400;
font-size: 0.8em;
opacity: 0.8;
}
.team .profile.bdfl .profile-description p {
font-size: 1em;
line-height: inherit;
}
.team .profile.bdfl .profile-picture {
display: inline-block;
width: 200px;
height: auto;
border-radius: 4px;
.team-profiles {
/* Compensate for gutter width */
margin: -10px;
margin-bottom: 20px;
}
.team .profile .profile-name {
font-weight: 600;
text-align: center;
}
.team .profile .profile-role {
opacity: 0.5;
text-transform: uppercase;
font-size: 0.8em;
font-weight: 400;
text-align: center;
}
.team .bdfl {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.team .bdfl .profile-picture {
width: 200px;
margin: 10px;
}
.team .bdfl .profile-picture>img {
height: auto;
border-radius: 5px;
}
.team .bdfl .profile-information {
flex: 1;
/* Wrap when screen is small to prevent very short line */
min-width: 300px;
font-size: 1.4em;
margin: 10px 10px 0 10px;
}
.team .bdfl .profile-description {
margin-top: 20px;
font-weight: 400;
font-size: 0.8em;
opacity: 0.8;
}
.team .core-team {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.team .core-team .profile {
flex: 1;
min-width: 130px;
text-align: center;
align-content: center;
margin-bottom: 20px;
margin: 10px;
}
.team .core-team .profile .profile-picture {
width: 130px;
height: 130px;
border-radius: 50%;
pointer-events: none;
box-shadow: 1px 2px 2px hsla(217, 47%, 17%, 0.03), 2px 2px 12px hsla(217, 47%, 17%, 0.09);
margin-bottom: 10px;
}
.contributors {

64
templates/zerver/team.html
View File

@ -47,7 +47,9 @@
<div class="team-profiles">
<!-- Tim -->
<div class="profile bdfl">
<img class="profile-picture" src="/static/images/team/tim.png" alt="" />
<div class="profile-picture">
<img src="/static/images/team/tim.png" alt="" />
</div>
<div class="profile-information">
<div class="profile-name">Tim Abbott</div>
<div class="profile-role">Founder and project leader</div>
@ -69,35 +71,37 @@
</div>
</div>
</div>
<!-- Rishi -->
<div class="profile">
<img class="profile-picture" src="/static/images/team/rishi.png" alt="" />
<div class="profile-name">Rishi Gupta</div>
<div class="profile-role">Product</div>
</div>
<!-- Brock -->
<div class="profile">
<img class="profile-picture" src="/static/images/team/brock.jpg" alt="" />
<div class="profile-name">Brock Whittaker</div>
<div class="profile-role">Web</div>
</div>
<!-- Steve -->
<div class="profile">
<img class="profile-picture" src="/static/images/team/steve.png" alt="" />
<div class="profile-name">Steve Howell</div>
<div class="profile-role">Full Stack</div>
</div>
<!-- Greg -->
<div class="profile">
<img class="profile-picture" src="/static/images/team/greg.png" alt="" />
<div class="profile-name">Greg Price</div>
<div class="profile-role">Infrastructure</div>
</div>
<!-- Boris -->
<div class="profile">
<img class="profile-picture" src="/static/images/team/boris.jpg" alt="" />
<div class="profile-name">Boris Yankov</div>
<div class="profile-role">Mobile</div>
<div class="core-team">
<!-- Rishi -->
<div class="profile">
<img class="profile-picture" src="/static/images/team/rishi.png" alt="" />
<div class="profile-name">Rishi Gupta</div>
<div class="profile-role">Product</div>
</div>
<!-- Brock -->
<div class="profile">
<img class="profile-picture" src="/static/images/team/brock.jpg" alt="" />
<div class="profile-name">Brock Whittaker</div>
<div class="profile-role">Web</div>
</div>
<!-- Steve -->
<div class="profile">
<img class="profile-picture" src="/static/images/team/steve.png" alt="" />
<div class="profile-name">Steve Howell</div>
<div class="profile-role">Full Stack</div>
</div>
<!-- Greg -->
<div class="profile">
<img class="profile-picture" src="/static/images/team/greg.png" alt="" />
<div class="profile-name">Greg Price</div>
<div class="profile-role">Infrastructure</div>
</div>
<!-- Boris -->
<div class="profile">
<img class="profile-picture" src="/static/images/team/boris.jpg" alt="" />
<div class="profile-name">Boris Yankov</div>
<div class="profile-role">Mobile</div>
</div>
</div>
</div>