diff --git a/app/features/team/queries/findByIdentifier.server.ts b/app/features/team/queries/findByIdentifier.server.ts
index fa0043b9a..14db11fc8 100644
--- a/app/features/team/queries/findByIdentifier.server.ts
+++ b/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",
diff --git a/app/features/team/routes/t.$customUrl.tsx b/app/features/team/routes/t.$customUrl.tsx
index 14fdf1e44..575e27270 100644
--- a/app/features/team/routes/t.$customUrl.tsx
+++ b/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() {
+
{team.results ? : null}
{team.members.map((member) => (
-
+
+
+
+
))}
@@ -128,6 +133,21 @@ function InfoBadges() {
);
}
+function MobileTeamNameCountry() {
+ const { team } = useLoaderData();
+
+ return (
+
+
+ {team.countries.map((country) => {
+ return ;
+ })}
+
+ {team.name}
+
+ );
+}
+
function ResultsBanner({ results }: { results: TeamResultPeek }) {
return (
@@ -180,3 +200,34 @@ function MemberRow({ member }: { member: DetailedTeamMember }) {
);
}
+
+function MobileMemberCard({ member }: { member: DetailedTeamMember }) {
+ const { t } = useTranslation(["team"]);
+
+ return (
+
+
+
+
+
{member.discordName}
+
+
+ {member.weapons.map((weapon) => (
+
+ ))}
+
+
+ {member.role ? (
+
+ {t(`team:roles.${member.role}`)}
+
+ ) : null}
+
+ );
+}
diff --git a/app/features/team/team.css b/app/features/team/team.css
index 227edbb21..b7c5757e1 100644
--- a/app/features/team/team.css
+++ b/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;
+ }
+}