Skip to content

Commit

Permalink
fix tables
Browse files Browse the repository at this point in the history
  • Loading branch information
arily committed Oct 27, 2023
1 parent c3f465c commit c43e635
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 106 deletions.
177 changes: 88 additions & 89 deletions src/components/app/scores/table.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,96 +41,95 @@ fr-FR:
</i18n>

<template>
<table class="table table-compact table-zebra">
<thead>
<tr>
<th scope="col">
{{ $t('global.player') }}
</th>
<th scope="col" class="text-right">
{{ $t('global.rank') }}
</th>
<th scope="col" class="text-right">
{{ $t('global.mods') }}
</th>
<th scope="col" class="text-right">
{{ $t(localeKey.rankingSystem(Rank.Score)) }}
</th>
<th v-if="rankingSystem !== Rank.Score" scope="col" class="text-right">
{{ $t(localeKey.rankingSystem(rankingSystem)) }}
</th>
<th scope="col">
{{ $t('global.played-at') }}
</th>
<th scope="col" class="text-center">
{{ t('actions') }}
</th>
</tr>
</thead>
<tbody>
<template v-if="props.scores.length">
<tr v-for="(item, index) in props.scores" :key="index">
<th scope="row">
<div class="flex gap-2 items-center">
<div class="aspect-square mask mask-squircle flex">
<img
class="m-auto"
:src="item.user.avatarSrc"
:alt="item.user.name"
width="30"
>
</div>
<nuxt-link-locale
:to="{
name: 'user-handle',
params: { handle: item.user.safeName },
}"
:class="useUserRoleColor(item.user)"
>
{{ item.user.name }}
</nuxt-link-locale>
</div>
</th>
<td class="text-right">
#{{ index + 1 }}
</td>
<td class="flex justify-end gap-1 tooltip tooltip-primary lg:tooltip-right" :data-tip="item.score.mods.map(m => StableMod[m]).join(', ')">
<app-mod v-for="mod in item.score.mods" :key="mod" :mod="mod" class="w-6 h-6" />
</td>
<td class="text-right font-mono">
{{ comma(item.score.score) }}
</td>
<td v-if="rankingSystem === Rank.PPv2" class="text-right font-mono">
{{ pp(item.score[Rank.PPv2] || 0) }}
</td>
<td v-else-if="rankingSystem === Rank.PPv1" class="text-right font-mono">
{{ pp(item.score[Rank.PPv2] || 0) }}
</td>
<td class="font-mono">
{{ item.score.playedAt.toLocaleDateString() }}
{{ item.score.playedAt.toLocaleTimeString() }}
</td>
<td class="text-center">
<div class="btn-group">
<a :href="`/replay/${item.score.id}/download`" class="btn btn-ghost btn-sm align-middle">
Replay <icon name="line-md:download-loop" class="w-4 h-4" />
</a>
<nuxt-link-locale :to="`/score/${item.score.id}`" class="btn btn-ghost btn-sm align-middle">
Detail <icon name="fa-solid:expand" class="w-4 h-4" />
</nuxt-link-locale>
</div>
</td>
</tr>
</template>
<template v-else>
<div class="overflow-x-auto">
<table class="table table-zebra">
<thead>
<tr>
<th colspan="6" scope="row">
<div class="text-center">
{{ t('no-score') }}
</div>
<th scope="col" class="text-right">
{{ $t('global.rank') }}
</th>
<th scope="col">
{{ $t('global.player') }}
</th>
<th scope="col" class="text-right">
{{ $t('global.mods') }}
</th>
<th scope="col" class="text-right">
{{ $t(localeKey.rankingSystem(Rank.Score)) }}
</th>
<th v-if="rankingSystem !== Rank.Score" scope="col" class="text-right">
{{ $t(localeKey.rankingSystem(rankingSystem)) }}
</th>
<th scope="col">
{{ $t('global.played-at') }}
</th>
<th scope="col">
{{ t('actions') }}
</th>
</tr>
</template>
</tbody>
</table>
</thead>
<tbody>
<template v-if="props.scores.length">
<tr v-for="(item, index) in props.scores" :key="index">
<td class="text-right">
#{{ index + 1 }}
</td>
<th scope="row">
<div class="flex items-center space-x-3">
<div class="avatar">
<div class="mask mask-squircle w-8 h-8">
<img :src="item.user.avatarSrc" alt="avatar">
</div>
</div>
<div>
<nuxt-link-locale class="font-bold whitespace-nowrap" :class="useUserRoleColor(item.user)" :to="{ name: 'user-handle', params: { handle: `@${item.user.safeName}` } }">
{{ item.user.name }}
</nuxt-link-locale>
<!-- <div class="text-sm opacity-50 whitespace-nowrap">
{{ toCountryName(item.user.flag || CountryCode.Unknown) }}
</div> -->
</div>
</div>
</th>
<td class="flex justify-end gap-1 tooltip tooltip-primary lg:tooltip-right" :data-tip="item.score.mods.map(m => StableMod[m]).join(', ')">
<app-mod v-for="mod in item.score.mods" :key="mod" :mod="mod" class="w-6 h-6" />
</td>
<td class="text-right font-mono">
{{ comma(item.score.score) }}
</td>
<td v-if="rankingSystem === Rank.PPv2" class="text-right font-mono">
{{ pp(item.score[Rank.PPv2] || 0) }}
</td>
<td v-else-if="rankingSystem === Rank.PPv1" class="text-right font-mono">
{{ pp(item.score[Rank.PPv1] || 0) }}
</td>
<td class="font-mono">
{{ item.score.playedAt.toLocaleDateString() }}
{{ item.score.playedAt.toLocaleTimeString() }}
</td>
<td class="text-center">
<div class="flex gap-2">
<a :href="`/replay/${item.score.id}/download`" class="link link-hover">
Replay <icon name="line-md:download-loop" class="w-4 h-4" />
</a>
<!-- TODO convert to model -->
<nuxt-link-locale :to="`/score/${item.score.id}`" class="link link-hover">
Detail <icon name="fa-solid:expand" class="w-4 h-4" />
</nuxt-link-locale>
</div>
</td>
</tr>
</template>
<template v-else>
<tr>
<th colspan="6" scope="row">
<div class="text-center">
{{ t('no-score') }}
</div>
</th>
</tr>
</template>
</tbody>
</table>
</div>
</template>
2 changes: 1 addition & 1 deletion src/pages/admin/users/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ function options<T extends Record<string, string>, TTr extends (key: keyof T, va
</div>
<div class="overflow-x-auto border border-base-300 rounded-lg">
<table
class="table" :class="{
class="table table-sm table-zebra" :class="{
loading: pending,
}"
>
Expand Down
22 changes: 9 additions & 13 deletions src/pages/beatmapset/[id].vue
Original file line number Diff line number Diff line change
Expand Up @@ -412,21 +412,17 @@ fr-FR:
</div>
</div>
</div>
</div>
<div class="container custom-container mx-auto mt-4">
<AppScoresRankingSystemSwitcher
ref="scoreRS" v-model="switcher.rankingSystem" :mode="switcher.mode"
:ruleset="switcher.ruleset" class="mx-auto" @update:model-value="update"
ref="scoreRS"
v-model="switcher.rankingSystem" class="mt-2" :mode="switcher.mode"
:ruleset="switcher.ruleset" @update:model-value="update"
/>
<app-scores-table
v-if="leaderboard" :scores="leaderboard" :ranking-system="switcher.rankingSystem"
:class="{
'clear-rounded-tl': scoreRS?.rankingSystems[0] === switcher.rankingSystem,
}"
/>
<div class="overflow-auto">
<app-scores-table
v-if="leaderboard" :scores="leaderboard" :ranking-system="switcher.rankingSystem" class="w-full"
:class="{
'clear-rounded-tl':
scoreRS?.rankingSystems[0] === switcher.rankingSystem,
}"
/>
</div>
</div>
</div>
</template>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/leaderboard/[[mode]].vue
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ fr-FR:
</i18n>

<template>
<div class="flex flex-col h-full leaderboard custom-container mx-auto">
<div class="flex flex-col h-full leaderboard custom-container mx-auto w-full">
<header-simple-title-with-sub
id="desc"
class="container mx-auto custom-container !max-w-4xl"
Expand Down Expand Up @@ -147,12 +147,12 @@ fr-FR:
</header-simple-title-with-sub>
<div
v-if="table"
class="container flex flex-col mx-auto grow"
class="container flex flex-col w-full"
:class="{
content: table.length,
}"
>
<div v-if="table.length" class="relative mx-auto xl:rounded-lg w-full max-w-max">
<div v-if="table.length" class="relative mx-auto xl:rounded-lg w-full max-w-max overflow-x-auto">
<table class="table table-sm px-2 whitespace-nowrap" aria-describedby="desc">
<thead>
<tr class="bg-base-100">
Expand Down

0 comments on commit c43e635

Please sign in to comment.