Skip to content

Commit 68a0529

Browse files
fu050409fu050409
authored
feat(contest): fix contest mobile (#112)
1 parent 4aac4a3 commit 68a0529

File tree

2 files changed

+101
-91
lines changed

2 files changed

+101
-91
lines changed

‎.changes/fix-contest.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"algohub": patch:feat
3+
---
4+
5+
Fix long content in contest will stretch the outer box of the card.

‎src/views/contest/[id].vue

+96-91
Original file line numberDiff line numberDiff line change
@@ -119,108 +119,113 @@ onUnmounted(() => {
119119
text></Button>
120120
</div>
121121
</div>
122-
<div v-if="selectedPanel === 'contest'" class="flex flex-col w-full h-full p-10 gap-8">
123-
<Message v-if="contest?.announcement" severity="info">{{ contest?.announcement }}</Message>
124-
<div class="flex flex-row flex-wrap gap-4">
125-
<Panel class="hidden sm:flex" pt:header:class="!hidden" pt:content:class="!p-0">
126-
<Image :src="themeStore.logo" imageClass="w-[10em] h-[10em] md:w-[16em] md:h-[16em]">
127-
</Image>
128-
</Panel>
129-
<Panel class="flex-grow">
122+
<div class="flex flex-1 w-full h-full overflow-hidden">
123+
<div v-if="selectedPanel === 'contest'" class="flex flex-col sm:p-6 md:p-10 gap-8">
124+
<Message v-if="contest?.announcement" severity="info">{{ contest?.announcement }}</Message>
125+
<div class="flex flex-row flex-wrap gap-4">
126+
<Panel class="hidden sm:flex" pt:header:class="!hidden" pt:content:class="!p-0">
127+
<Image :src="themeStore.logo" imageClass="w-[10em] h-[10em] md:w-[16em] md:h-[16em]">
128+
</Image>
129+
</Panel>
130+
<Panel class="flex-grow">
131+
<template #header>
132+
<div class="flex justify-center items-center w-full">
133+
<span class="text-2xl font-bold">Time to start</span>
134+
</div>
135+
</template>
136+
<template #default>
137+
<div class="h-full flex items-center justify-center">
138+
<span class="text-center text-3xl md:text-5xl lg:text-6xl font-bold">{{ timeDiff
139+
}}</span>
140+
</div>
141+
</template>
142+
</Panel>
143+
<Panel class="flex-grow">
144+
<template #header>
145+
<div
146+
class="flex flex-wrap justify-between px-4 md:flex-row md:px-8 items-center w-full">
147+
<span class="text-xl md:text-2xl font-bold text-center">Contest
148+
Details</span>
149+
<Badge v-if="!hasStarted()" severity="warn" size="large">Not Started</Badge>
150+
<Badge v-else-if="hasStarted() && notEnded()" severity="success" size="large">
151+
Ongoing
152+
</Badge>
153+
<Badge v-else-if="!notEnded()" severity="danger" size="large">Ended</Badge>
154+
</div>
155+
</template>
156+
<template #default>
157+
<div class="flex flex-col gap-4 px-8">
158+
<div class="flex flex-row items-center gap-4">
159+
<h1 class="text-xl sm:text-2xl md:text-3xl font-bold">{{ contest?.name }}</h1>
160+
<Badge v-if="contest?.mode">{{ contest?.mode }}</Badge>
161+
<Skeleton v-else width="50px"></Skeleton>
162+
</div>
163+
<p class="text-xs md:text-base text-wrap break-all m-0">
164+
{{ contest?.description }}
165+
</p>
166+
<div class="flex flex-col gap-2">
167+
<span class="text-sm">From {{ contest?.start_time }} to {{ contest?.end_time
168+
}}</span>
169+
<span class="text-sm">Duration {{ duration }}</span>
170+
</div>
171+
</div>
172+
</template>
173+
</Panel>
174+
</div>
175+
<Panel v-if="!loading && hasStarted() && notEnded()" class="w-full h-full mt-4">
130176
<template #header>
131-
<div class="flex justify-center items-center w-full">
132-
<span class="text-2xl font-bold">Time to start</span>
133-
</div>
177+
<div></div>
134178
</template>
135179
<template #default>
136-
<div class="h-full flex items-center justify-center">
137-
<span class="text-center text-3xl md:text-5xl lg:text-6xl font-bold">{{ timeDiff
138-
}}</span>
139-
</div>
180+
<DataTable :value="problems" class="h-full w-full">
181+
<template #header>
182+
<div class="flex flex-wrap items-center justify-between gap-2">
183+
<span class="text-xl font-bold">Problems</span>
184+
</div>
185+
</template>
186+
<Column field="title" header="Title">
187+
<template #body="slotProps">
188+
<a target="_blank" :href="`#/problem/${slotProps.data.id}`"
189+
class="cursor-pointer text-blue-500 hover:underline">{{ slotProps.data.title
190+
}}</a>
191+
</template>
192+
</Column>
193+
<Column field="acceptedCount" header="Accepted" sortable></Column>
194+
<Column field="submittedCount" header="Submitted" sortable></Column>
195+
<Column field="accuracy" header="Accuracy" sortable></Column>
196+
<Column field="solved" header="Status" sortable>
197+
<template #body="slotProps">
198+
<div class="flex items-center justify-center rounded-full w-[1.5em] h-[1.5em]"
199+
:class="{ 'bg-green-400': slotProps.data.solved, 'bg-red-400': !slotProps.data.solved }">
200+
<i class="pi" :class="slotProps.data.solved ? 'pi-check' : 'pi-times'"></i>
201+
</div>
202+
</template>
203+
</Column>
204+
</DataTable>
140205
</template>
141206
</Panel>
142-
<Panel class="flex-grow">
207+
</div>
208+
<div v-else-if="selectedPanel === 'ranks'" class="flex flex-col w-full h-full p-10 gap-8">
209+
<Message severity="warn">Ranking is still under <code>beta</code> and never fully tested, this may
210+
not work as expected.
211+
</Message>
212+
<Panel class="w-full h-full mt-4">
143213
<template #header>
144-
<div class="flex justify-between px-8 items-center w-full">
145-
<span class="text-2xl font-bold">Contest Details</span>
146-
<Badge v-if="!hasStarted()" severity="warn" size="large">Not Started</Badge>
147-
<Badge v-else-if="hasStarted() && notEnded()" severity="success" size="large">
148-
Ongoing
149-
</Badge>
150-
<Badge v-else-if="!notEnded()" severity="danger" size="large">Ended</Badge>
151-
</div>
214+
<div>Ranks</div>
152215
</template>
153216
<template #default>
154-
<div class="flex flex-col gap-4 px-8">
155-
<div class="flex flex-row items-center gap-4">
156-
<h1 class="text-3xl font-bold">{{ contest?.name }}</h1>
157-
<Badge>{{ contest?.mode }}</Badge>
158-
</div>
159-
<p>
160-
{{ contest?.description }}
161-
</p>
162-
<div class="flex flex-col gap-2">
163-
<span class="text-sm">From {{ contest?.start_time }} to {{ contest?.end_time
164-
}}</span>
165-
<span class="text-sm">Duration {{ duration }}</span>
166-
</div>
167-
</div>
217+
<DataTable v-if="ranks && ranks.length > 0" :value="ranks">
218+
<Column field="id" header="UserID"></Column>
219+
<Column v-for="detail in ranks[0].details" :key="detail.name" :header="detail.name"
220+
field="details">
221+
<template #body="slotProps">
222+
{{ slotProps }}
223+
</template>
224+
</Column>
225+
</DataTable>
168226
</template>
169227
</Panel>
170228
</div>
171-
<Panel v-if="!loading && hasStarted() && notEnded()" class="w-full h-full mt-4">
172-
<template #header>
173-
<div></div>
174-
</template>
175-
<template #default>
176-
<DataTable :value="problems" class="h-full w-full">
177-
<template #header>
178-
<div class="flex flex-wrap items-center justify-between gap-2">
179-
<span class="text-xl font-bold">Problems</span>
180-
</div>
181-
</template>
182-
<Column field="title" header="Title">
183-
<template #body="slotProps">
184-
<a target="_blank" :href="`#/problem/${slotProps.data.id}`"
185-
class="cursor-pointer text-blue-500 hover:underline">{{ slotProps.data.title
186-
}}</a>
187-
</template>
188-
</Column>
189-
<Column field="acceptedCount" header="Accepted" sortable></Column>
190-
<Column field="submittedCount" header="Submitted" sortable></Column>
191-
<Column field="accuracy" header="Accuracy" sortable></Column>
192-
<Column field="solved" header="Status" sortable>
193-
<template #body="slotProps">
194-
<div class="flex items-center justify-center rounded-full w-[1.5em] h-[1.5em]"
195-
:class="{ 'bg-green-400': slotProps.data.solved, 'bg-red-400': !slotProps.data.solved }">
196-
<i class="pi" :class="slotProps.data.solved ? 'pi-check' : 'pi-times'"></i>
197-
</div>
198-
</template>
199-
</Column>
200-
</DataTable>
201-
</template>
202-
</Panel>
203-
</div>
204-
<div v-else-if="selectedPanel === 'ranks'" class="flex flex-col w-full h-full p-10 gap-8">
205-
<Message severity="warn">Ranking is still under <code>beta</code> and never fully tested, this may not
206-
work as expected.
207-
</Message>
208-
<Panel class="w-full h-full mt-4">
209-
<template #header>
210-
<div>Ranks</div>
211-
</template>
212-
<template #default>
213-
<DataTable v-if="ranks && ranks.length > 0" :value="ranks">
214-
<Column field="id" header="UserID"></Column>
215-
<Column v-for="detail in ranks[0].details" :key="detail.name" :header="detail.name"
216-
field="details">
217-
<template #body="slotProps">
218-
{{ slotProps }}
219-
</template>
220-
</Column>
221-
</DataTable>
222-
</template>
223-
</Panel>
224229
</div>
225230
</div>
226231
</div>

0 commit comments

Comments
 (0)