Skip to content

Commit

Permalink
Make challenges list work on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
SheepTester committed May 10, 2024
1 parent 88b8d95 commit 2416726
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 17 deletions.
22 changes: 9 additions & 13 deletions src/GZCTF/ClientApp/src/components/ChallengePanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import ChallengeDetailModal from '@Components/ChallengeDetailModal'
import Empty from '@Components/Empty'
import WriteupSubmitModal from '@Components/WriteupSubmitModal'
import { useChallengeTagLabelMap, SubmissionTypeIconMap } from '@Utils/Shared'
import { useIsMobile } from '@Utils/ThemeOverride'
import { useGame, useGameTeamInfo } from '@Utils/useGame'
import { ChallengeInfo, ChallengeTag, SubmissionType } from '@Api'

Expand Down Expand Up @@ -63,16 +64,12 @@ const ChallengePanel: FC = () => {
const challengeTagLabelMap = useChallengeTagLabelMap()
const { t } = useTranslation()

const isMobile = useIsMobile(1300)

// skeleton for loading
if (!challenges) {
return (
<Group
gap="sm"
wrap="nowrap"
justify="space-between"
align="flex-start"
maw="calc(100% - 20rem)"
>
<Group gap="sm" wrap="nowrap" justify="space-between" align="flex-start">
<Stack miw="10rem" gap={6}>
{Array(10)
.fill(null)
Expand All @@ -88,7 +85,6 @@ const ChallengePanel: FC = () => {
pt={0}
spacing="sm"
pos="relative"
w="calc(100% - 9rem)"
cols={{ base: 3, w18: 4, w24: 6, w30: 8, w36: 10, w42: 12, w48: 14 }}
>
{Array(8)
Expand Down Expand Up @@ -139,9 +135,9 @@ const ChallengePanel: FC = () => {
wrap="nowrap"
justify="space-between"
align="flex-start"
miw="calc(100% - 20rem)"
style={{ flex: '100% 1' }}
>
<Stack miw="10rem">
<Stack miw="10rem" style={{ position: isMobile ? 'sticky' : undefined, top: '2rem' }}>
{game?.writeupRequired && (
<>
<Button
Expand Down Expand Up @@ -218,18 +214,18 @@ const ChallengePanel: FC = () => {
</Tabs>
</Stack>
<ScrollArea
w="calc(100% - 9rem)"
h="calc(100vh - 7rem)"
h={isMobile ? undefined : 'calc(100vh - 7rem)'}
pos="relative"
offsetScrollbars
scrollbarSize={4}
style={{ flex: 'auto' }}
>
{currentChallenges && currentChallenges.length ? (
<SimpleGrid
p="xs"
pt={0}
spacing="sm"
cols={{ base: 3, w18: 4, w24: 6, w30: 8, w36: 10, w42: 12, w48: 14 }}
style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))' }}
>
{currentChallenges?.map((chal) => (
<ChallengeCard
Expand Down
4 changes: 2 additions & 2 deletions src/GZCTF/ClientApp/src/components/GameNoticePanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ const GameNoticePanel: FC = () => {
)

return (
<Card shadow="sm" w="20rem">
<Card shadow="sm">
<Stack gap="xs">
<SegmentedControl
value={filter}
Expand All @@ -193,7 +193,7 @@ const GameNoticePanel: FC = () => {
]}
/>
{filteredNotices.length ? (
<ScrollArea offsetScrollbars scrollbarSize={0} h="calc(100vh - 25rem)">
<ScrollArea offsetScrollbars scrollbarSize={0}>
<List size="sm" spacing={3}>
{filteredNotices.map((notice) => (
<List.Item
Expand Down
13 changes: 11 additions & 2 deletions src/GZCTF/ClientApp/src/pages/games/[id]/Challenges.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,25 @@ import TeamRank from '@Components/TeamRank'
import WithGameTab from '@Components/WithGameTab'
import WithNavBar from '@Components/WithNavbar'
import WithRole from '@Components/WithRole'
import { useIsMobile } from '@Utils/ThemeOverride'
import { Role } from '@Api'

const Challenges: FC = () => {
const isMobile = useIsMobile(1300)

return (
<WithNavBar width="90%">
<WithRole requiredRole={Role.User}>
<WithGameTab>
<Group gap="sm" justify="space-between" align="flex-start" grow wrap="nowrap">
<Group
gap="sm"
justify="space-between"
align="flex-start"
wrap={isMobile ? 'wrap' : 'nowrap'}
style={{ marginBottom: '2rem' }}
>
<ChallengePanel />
<Stack maw="20rem">
<Stack style={{ flexBasis: '20rem', flexGrow: 1 }}>
<TeamRank />
<GameNoticePanel />
</Stack>
Expand Down

0 comments on commit 2416726

Please sign in to comment.