Team: mobile layout

app/features/team/queries/findByIdentifier.server.ts

@@ -2,7 +2,7 @@ import type { DetailedTeam } from "../team-types";
 
 export function findByIdentifier(/*customUrl: string*/): DetailedTeam | null {
   return {
-    countries: ["FR"],
+    countries: ["FR", "US"],
     name: "Alliance Rogue",
     lutiDiv: "X",
     teamXp: "2981.2",
@@ -16,7 +16,7 @@ export function findByIdentifier(/*customUrl: string*/): DetailedTeam | null {
         discordAvatar: "2ce2f7e4fe6cd2aeceec940ecebcb22c",
         discordId: "92909500100513792",
         role: "FRONTLINE",
-        weapons: [40, 20, 210, 1000],
+        weapons: [40, 20, 210, 1000, 1010],
       },
       {
         discordName: "Scar",

app/features/team/routes/t.$customUrl.tsx

@@ -20,6 +20,7 @@ import { Avatar } from "~/components/Avatar";
 import { useTranslation } from "~/hooks/useTranslation";
 import { Flag } from "~/components/Flag";
 import clsx from "clsx";
+import React from "react";
 
 export const meta: MetaFunction = ({
   data,
@@ -64,10 +65,14 @@ export default function TeamPage() {
         <TeamBanner />
         <InfoBadges />
       </div>
+      <MobileTeamNameCountry />
       {team.results ? <ResultsBanner results={team.results} /> : null}
       <div className="stack lg">
         {team.members.map((member) => (
-          <MemberRow key={member.discordId} member={member} />
+          <React.Fragment key={member.discordId}>
+            <MemberRow member={member} />
+            <MobileMemberCard member={member} />
+          </React.Fragment>
         ))}
       </div>
     </Main>
@@ -128,6 +133,21 @@ function InfoBadges() {
   );
 }
 
+function MobileTeamNameCountry() {
+  const { team } = useLoaderData<typeof loader>();
+
+  return (
+    <div className="team__mobile-name-country">
+      <div className="stack horizontal sm">
+        {team.countries.map((country) => {
+          return <Flag key={country} countryCode={country} tiny />;
+        })}
+      </div>
+      {team.name}
+    </div>
+  );
+}
+
 function ResultsBanner({ results }: { results: TeamResultPeek }) {
   return (
     <Link className="team__results" to="results">
@@ -180,3 +200,34 @@ function MemberRow({ member }: { member: DetailedTeamMember }) {
     </div>
   );
 }
+
+function MobileMemberCard({ member }: { member: DetailedTeamMember }) {
+  const { t } = useTranslation(["team"]);
+
+  return (
+    <div className="team__member-card__container">
+      <div className="team__member-card">
+        <Link to={userPage(member)}>
+          <Avatar user={member} size="md" />
+          <div className="team__member-card__name">{member.discordName}</div>
+        </Link>
+        <div className="stack horizontal md">
+          {member.weapons.map((weapon) => (
+            <WeaponImage
+              key={weapon}
+              variant="badge"
+              weaponSplId={weapon}
+              width={32}
+              height={32}
+            />
+          ))}
+        </div>
+      </div>
+      {member.role ? (
+        <span className="team__member__role__mobile">
+          {t(`team:roles.${member.role}`)}
+        </span>
+      ) : null}
+    </div>
+  );
+}

app/features/team/team.css

@@ -9,10 +9,10 @@
   background-size: cover;
   width: 100%;
   aspect-ratio: 2 / 1;
-  border-radius: var(--rounded);
   display: grid;
   grid-template-areas: "flags ." "avatar name";
   padding: var(--s-5);
+  border-radius: var(--rounded);
 }
 
 .team__banner__placeholder {
@@ -23,7 +23,7 @@
 .team__banner__flags {
   grid-area: flags;
   margin-top: -5px;
-  display: flex;
+  display: none;
   column-gap: var(--s-4);
 }
 
@@ -35,13 +35,13 @@
   line-height: 1;
   font-weight: var(--bold);
   color: #fff;
+  display: none;
 }
 
 .team__banner__avatar {
   grid-area: avatar;
   align-self: flex-end;
-  margin-bottom: -90px;
-  margin-left: var(--s-2);
+  margin-bottom: -110px;
 }
 
 .team__banner__avatar > div {
@@ -51,7 +51,17 @@
   aspect-ratio: 1 / 1;
   display: grid;
   place-items: center;
-  width: 10rem;
+  width: 7rem;
+}
+
+.team__mobile-name-country {
+  display: flex;
+  margin-top: var(--s-12);
+  font-size: var(--fonts-xl);
+  align-items: center;
+  font-weight: var(--bold);
+  flex-direction: column;
+  line-height: 1.5;
 }
 
 .team__banner__avatar img {
@@ -74,6 +84,7 @@
   display: flex;
   align-items: center;
   gap: var(--s-1-5);
+  height: 1.5rem;
 }
 
 .team__results {
@@ -88,7 +99,6 @@
   justify-content: space-between;
   width: min(100%, 48rem);
   color: var(--text);
-  margin-block-start: var(--s-10);
 }
 
 .team__results__placements {
@@ -104,7 +114,7 @@
 }
 
 .team__member {
-  display: flex;
+  display: none;
   flex-direction: column;
 }
 
@@ -141,3 +151,68 @@
   margin-inline-end: var(--s-2-5);
   font-weight: var(--bold);
 }
+
+.team__member__role__mobile {
+  color: var(--text-lighter);
+  font-weight: var(--bold);
+}
+
+.team__member-card__container {
+  width: 16rem;
+  margin: 0 auto;
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+}
+
+.team__member-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-3);
+  background-color: var(--bg-lighter);
+  border-radius: var(--rounded);
+  font-size: var(--fonts-lg);
+  font-weight: var(--bold);
+}
+
+.team__member-card__name {
+  color: var(--text);
+  font-weight: var(--bold);
+  margin-block-start: var(--s-2);
+}
+
+@media screen and (min-width: 640px) {
+  .team__banner__flags {
+    display: flex;
+  }
+  .team__banner__name {
+    display: block;
+  }
+
+  .team__banner__avatar > div {
+    width: 10rem;
+  }
+
+  .team__banner__avatar {
+    margin-left: var(--s-2);
+    margin-bottom: -90px;
+  }
+
+  .team__mobile-name-country {
+    display: none;
+  }
+
+  .team__results {
+    margin-block-start: var(--s-10);
+  }
+
+  .team__member {
+    display: flex;
+  }
+
+  .team__member-card__container {
+    display: none;
+  }
+}