From acdc4c9d2720b2d27875fa4cfc192448be5008b3 Mon Sep 17 00:00:00 2001
From: Tommy Ip <hkmp7tommy@gmail.com>
Date: Mon, 13 Nov 2017 21:48:06 +0000
Subject: [PATCH] /team: Improve the responsiveness of the team profiles.

Fixes #7349
---
 static/styles/portico.css  | 131 +++++++++++++++++--------------------
 templates/zerver/team.html |  64 +++++++++---------
 2 files changed, 95 insertions(+), 100 deletions(-)

diff --git a/static/styles/portico.css b/static/styles/portico.css
index a5c3d13f11..0ab84d6151 100644
--- a/static/styles/portico.css
+++ b/static/styles/portico.css
@@ -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 {
diff --git a/templates/zerver/team.html b/templates/zerver/team.html
index 3676c5e94a..0a2c37a2a8 100644
--- a/templates/zerver/team.html
+++ b/templates/zerver/team.html
@@ -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>