Skip to content

Commit

Permalink
feat: expand contest problem view (#120)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thezzisu
thezzisu authored Dec 28, 2024
1 parent da2c5da commit 608b5a7
Show file tree
Hide file tree
Showing 7 changed files with 158 additions and 67 deletions.
2 changes: 2 additions & 0 deletions .yarn/versions/7cecd77a.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
releases:
"@aoi-js/frontend": patch
12 changes: 9 additions & 3 deletions apps/frontend/src/components/aoi/AoiBar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
<template>
<VAppBar border>
<VAppBar border :density="appState.navBarExtension ? 'compact' : 'default'">
<VAppBarNavIcon @click="appState.navBar = !appState.navBar" />
<VToolbarItems>
<VBtn to="/" rounded="lg" :active="false">
<template #prepend>
<VIcon size="48"><AoiLogo /></VIcon>
<VIcon :size="appState.navBarExtension ? '32' : '48'">
<AoiLogo />
</VIcon>
</template>
<div v-if="mdAndUp" class="text-none u-pl-4 u-font-mono u-text-3xl">
<div
v-if="mdAndUp"
class="text-none u-pl-4 u-font-mono"
:class="[appState.navBarExtension ? 'u-text-2xl' : 'u-text-3xl']"
>
{{ appName }}
</div>
</VBtn>
Expand Down
6 changes: 3 additions & 3 deletions apps/frontend/src/components/aoi/AoiFooter.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<template>
<VFooter app absolute>
<VRow no-gutters>
<VCol cols="12" class="text-center" v-if="extraFooterText">
<span>{{ extraFooterText }}</span>
<VCol cols="12" class="text-center" v-if="extraFooter">
<div v-html="extraFooter" />
</VCol>
<VCol cols="12" class="text-center text-caption u-opacity-70">
<I18nT keypath="powered-by">
Expand All @@ -18,7 +18,7 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { extraFooterText } from '@/utils/flags'
import { extraFooter } from '@/utils/flags'
const { t } = useI18n()
</script>
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/components/aoi/AoiNavDrawer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
AOI-UI v{{ appBuildInfo.version }}
</div>
<div class="u-text-xs u-font-mono u-tracking-tighter u-text-blue-900">
{{ appBuildInfo.hash }}@{{ appBuildInfo.branch }}
{{ appBuildInfo.hash }}
</div>
</div>
</VBtn>
Expand Down
194 changes: 135 additions & 59 deletions apps/frontend/src/pages/org/[orgId]/contest/[contestId]/problem/[problemId].vue
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,136 @@
<template>
<AsyncState v-if="contestProblem" :state="problem" hide-when-loading>
<template v-slot="{ value }">
<VCard :class="$style.header">
<VCardTitle>
<div class="d-flex justify-space-between align-center">
<div>
<span class="text-h4">{{ value.title }}</span>
</div>
<div>
<VChipGroup class="justify-end">
<VChip v-for="tag in value.tags" class="mx-2" :key="tag">
{{ tag }}
</VChip>
</VChipGroup>
<div v-intersect="{ handler: onIntersect, options: { rootMargin } }"></div>
<VCard :class="$style.header" :density="shrinkHeader ? 'compact' : 'default'">
<VFadeTransition mode="out-in">
<div v-if="shrinkHeader">
<VCardTitle class="pb-0">
<div class="d-flex justify-space-between align-center">
<div>
<span class="text-h6">{{ value.title }}</span>
</div>
<div>
<VChipGroup class="justify-end">
<VChip v-for="tag in value.tags" class="mx-2" :key="tag" density="compact">
{{ tag }}
</VChip>
</VChipGroup>
</div>
</div>
</VCardTitle>
<div class="d-flex justify-space-between align-center">
<VTabs v-model="currentTab" density="compact">
<VTab prepend-icon="mdi-book-outline" value="desc">
{{ t('tabs.problem-description') }}
</VTab>
<VTab
prepend-icon="mdi-upload-outline"
value="submit"
v-if="value.config && (settings.solutionEnabled || admin)"
>
{{ t('tabs.submit') }}
</VTab>
<VTab
prepend-icon="mdi-timer-sand"
:to="{
path: `/org/${orgId}/contest/${contestId}/solution`,
query: { problemId }
}"
>
{{ t('tabs.solutions') }}
</VTab>
<VTab prepend-icon="mdi-attachment" value="attachments">
{{ t('tabs.attachments') }}
</VTab>
<VTab prepend-icon="mdi-cog-outline" value="management" v-if="admin">
{{ t('tabs.management') }}
</VTab>
</VTabs>
<div class="u-flex u-px-2 u-space-x-2">
<VChip
color="info"
variant="outlined"
prepend-icon="mdi-star-four-points"
density="compact"
:text="'' + contestProblem.settings.score"
/>
<VChip
:color="solutionCountLimit.color"
variant="outlined"
prepend-icon="mdi-format-vertical-align-top"
density="compact"
:text="'' + solutionCountLimit.limit"
/>
</div>
</div>
</div>
<div class="d-flex u-gap-2 pt-2">
<VChip
color="info"
variant="outlined"
prepend-icon="mdi-star-four-points"
:text="t('score', { score: contestProblem.settings.score })"
/>
<VChip
:color="solutionCountLimit.color"
variant="outlined"
prepend-icon="mdi-format-vertical-align-top"
:text="t('solution-count-limit', { limit: solutionCountLimit.limit })"
/>
<VChip
v-if="admin"
color="primary"
variant="outlined"
prepend-icon="mdi-arrow-top-left"
:text="t('jump-to-problem')"
:to="`/org/${orgId}/problem/${problemId}`"
/>
<div v-else>
<VCardTitle>
<div class="d-flex justify-space-between align-center">
<div>
<span class="text-h4">{{ value.title }}</span>
</div>
<div>
<VChipGroup class="justify-end">
<VChip v-for="tag in value.tags" class="mx-2" :key="tag">
{{ tag }}
</VChip>
</VChipGroup>
</div>
</div>
<div class="d-flex u-space-x-2 pt-2">
<VChip
color="info"
variant="outlined"
prepend-icon="mdi-star-four-points"
:text="t('score', { score: contestProblem.settings.score })"
/>
<VChip
:color="solutionCountLimit.color"
variant="outlined"
prepend-icon="mdi-format-vertical-align-top"
:text="t('solution-count-limit', { limit: solutionCountLimit.limit })"
/>
<VChip
v-if="admin"
color="primary"
variant="outlined"
prepend-icon="mdi-arrow-top-left"
:text="t('jump-to-problem')"
:to="`/org/${orgId}/problem/${problemId}`"
/>
</div>
</VCardTitle>
<VTabs v-model="currentTab">
<VTab prepend-icon="mdi-book-outline" value="desc">
{{ t('tabs.problem-description') }}
</VTab>
<VTab
prepend-icon="mdi-upload-outline"
value="submit"
v-if="value.config && (settings.solutionEnabled || admin)"
>
{{ t('tabs.submit') }}
</VTab>
<VTab
prepend-icon="mdi-timer-sand"
:to="{
path: `/org/${orgId}/contest/${contestId}/solution`,
query: { problemId }
}"
>
{{ t('tabs.solutions') }}
</VTab>
<VTab prepend-icon="mdi-attachment" value="attachments">
{{ t('tabs.attachments') }}
</VTab>
<VTab prepend-icon="mdi-cog-outline" value="management" v-if="admin">
{{ t('tabs.management') }}
</VTab>
</VTabs>
</div>
</VCardTitle>
<VTabs v-model="currentTab">
<VTab prepend-icon="mdi-book-outline" value="desc">
{{ t('tabs.problem-description') }}
</VTab>
<VTab
prepend-icon="mdi-upload-outline"
value="submit"
v-if="value.config && (settings.solutionEnabled || admin)"
>
{{ t('tabs.submit') }}
</VTab>
<VTab
prepend-icon="mdi-timer-sand"
:to="{ path: `/org/${orgId}/contest/${contestId}/solution`, query: { problemId } }"
>
{{ t('tabs.solutions') }}
</VTab>
<VTab prepend-icon="mdi-attachment" value="attachments">
{{ t('tabs.attachments') }}
</VTab>
<VTab prepend-icon="mdi-cog-outline" value="management" v-if="admin">
{{ t('tabs.management') }}
</VTab>
</VTabs>
</VFadeTransition>
</VCard>
<VCard class="mt-2">
<VWindow v-model="currentTab">
Expand Down Expand Up @@ -93,7 +162,7 @@
import { useAsyncState } from '@vueuse/core'
import { ref, watch, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useLayout } from 'vuetify'
import { useDisplay, useLayout } from 'vuetify'
import ProblemTabAdmin from '@/components/contest/ProblemTabAdmin.vue'
import ProblemTabAttachments from '@/components/contest/ProblemTabAttachments.vue'
Expand Down Expand Up @@ -133,6 +202,13 @@ const problem = useAsyncState(async () => {
const app = useAppState()
const layout = useLayout()
const display = useDisplay()
const rootMargin = computed(() => `-${layout.mainRect.value.top}px 0px 0px 0px`)
const shouldShrinkHeader = ref(false)
const shrinkHeader = computed(() => display.lgAndDown.value && shouldShrinkHeader.value)
function onIntersect(isIntersecting: boolean) {
shouldShrinkHeader.value = !isIntersecting
}
const solutionCount = useAsyncState(
async () => {
Expand Down
7 changes: 7 additions & 0 deletions apps/frontend/src/utils/build.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,10 @@ export const appBuildInfo = {
branch: __GIT_BRANCH__,
time: __BUILD_TIME__
}

console.log(
`%cAOI-UI%c${version}%c${__GIT_HASH__}@${__GIT_BRANCH__} ${__BUILD_TIME__}`,
'background: #35495e; color: #fff; padding: 2px 4px; border-radius: 4px 0 0 4px',
'background: #1966c0; color: #fff; padding: 2px 4px',
'background: #afddff; color: #000; padding: 2px 4px; border-radius: 0 4px 4px 0'
)
2 changes: 1 addition & 1 deletion apps/frontend/src/utils/flags.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export const gravatarBase = import.meta.env.VITE_GRAVATAR_BASE ?? `https://www.g
export const enableMfa = !import.meta.env.VITE_DISABLE_MFA_BIND
export const appName = import.meta.env.VITE_APP_NAME ?? 'AOI'
export const showCountdown = !!import.meta.env.VITE_APPBAR_SHOW_COUNTDOWN
export const extraFooterText = import.meta.env.VITE_EXTRA_FOOTER_TEXT
export const extraFooter = import.meta.env.VITE_EXTRA_FOOTER
export const loginHint = import.meta.env.VITE_LOGIN_HINT
export const verifyHint = import.meta.env.VITE_VERIFY_HINT
export const enableOverview = !!import.meta.env.VITE_ENABLE_OVERVIEW
Expand Down

0 comments on commit 608b5a7

Please sign in to comment.