Skip to content

Commit

Permalink
redesign score list
Browse files Browse the repository at this point in the history
  • Loading branch information
@arily
arily committed Jul 7, 2024
1 parent e9170ee commit 3c3efaf
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 115 deletions.
4 changes: 2 additions & 2 deletions src/components/app/nav/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,8 +167,8 @@ function clearFocus() {
<style lang="postcss">
.navbar-tint,
.detached>.navbar {
@apply bg-gbase-100/80 dark:bg-gbase-700/80;
@apply backdrop-blur-md shadow-xl;
@apply bg-gbase-100/85 dark:bg-gbase-700/80;
@apply backdrop-blur-md shadow-md;
@apply backdrop-saturate-[0.9] backdrop-brightness-[0.95];
@apply dark:backdrop-saturate-[1] dark:backdrop-brightness-[1];
}
Expand Down
174 changes: 85 additions & 89 deletions src/components/app/score-list-item.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,29 +86,30 @@ de-DE:
</i18n>

<template>
<div class="flex justify-between mx-1 lg:mx-0">
<div class="flex min-w-0 gap-4">
<div class="hidden md:block">
<picture
v-if="beatmap
&& beatmapIsVisible(beatmap)
&& beatmap.beatmapset.source === BeatmapSource.Bancho"
>
<source v-if="beatmap.beatmapset.assets['list@2x']" :srcset="`${beatmap.beatmapset.assets.list} 1x, ${beatmap.beatmapset.assets['list@2x']} 2x`">
<nuxt-img
loading="lazy"
:src="beatmap.beatmapset.assets.list"
:alt="autoLocale(beatmap.beatmapset.meta).title"
:onerror="placeholder"
class="object-cover w-20 h-16 shadow-md rounded-xl"
/>
</picture>
<icon v-else class="w-20 h-16" name="clarity:unknown-status-line" size="100%" />
</div>
<div class="flex flex-col min-w-0">
<div class="flex gap-2 px-1 lg:mx-0">
<div class="h-20 w-14 shrink-0 md:w-24 transition-[width]">
<picture
v-if="beatmap
&& beatmapIsVisible(beatmap)
&& beatmap.beatmapset.source === BeatmapSource.Bancho"
>
<source v-if="beatmap.beatmapset.assets['list@2x']" :srcset="`${beatmap.beatmapset.assets.list} 1x, ${beatmap.beatmapset.assets['list@2x']} 2x`">
<nuxt-img
loading="lazy"
:src="beatmap.beatmapset.assets.list"
:alt="autoLocale(beatmap.beatmapset.meta).title"
:onerror="placeholder"
class="object-cover w-full h-full shadow-md rounded-xl"
/>
</picture>
<icon v-else class="w-full h-full" name="clarity:unknown-status-line" size="100%" />
</div>

<div class="truncate shrink grow leading-[1]">
<template
v-if="beatmap && beatmapIsVisible(beatmap)"
>
<router-link
v-if="beatmap && beatmapIsVisible(beatmap)"
class="truncate"
:to="{
name: 'beatmapset-id',
params: {
Expand All @@ -126,83 +127,78 @@ de-DE:
},
}"
>
<icon
v-if="rankingStatusIconMapping[beatmap.status]"
size="100%"
class="w-5 h-5 md:w-6 md:h-6"
:name="rankingStatusIconMapping[beatmap.status]!"
:aria-label="beatmap.status"
/>
<span v-if="meta" class="text-sm font-bold truncate md:text-md xl:text-lg">
{{ meta.artist }} - {{ meta.title }}
</span>
<div class="absolute flex flex-wrap gap-2 text-xs md:text-sm lg:text-md">
<span v-if="beatmap" class="font-semibold">
<template v-if="meta">
<span class="text-xs font-semibold md:text-sm transition-[font-size]">{{ meta.artist }}</span><br>
<span class="text-sm font-bold md:text-lg transition-[font-size]">{{ meta.title }}</span>
</template>
<div class="leading-snug md:leading-tight">
<icon
v-if="rankingStatusIconMapping[beatmap.status]"
size="100%"
class="w-5 h-auto"
:name="rankingStatusIconMapping[beatmap.status]!"
:aria-label="beatmap.status"
/>
<span v-if="beatmap" class="text-xs !leading-none font-semibold md:text-sm lg:text-md transition-[font-size]">
{{ beatmap.version }}
</span>
<span v-if="score.mods.length" class="flex justify-end gap-1 tooltip tooltip-primary lg:tooltip-right" :data-tip="score.mods.map(m => StableMod[m]).join(', ')">
<app-mod v-for="mod in score.mods" :key="mod" :mod="mod" class="w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6" />
</span>
</div>
<div class="text-xs md:text-sm lg:text-md opacity-0 pointer-events-none">
IM HERE TO TAKE HEIGHT
</div>
</router-link>
<div v-else>
{{ t('unknown-beatmap') }}
</div>
<div class="mt-auto map-date">
<time class="text-xs italic lg:text-sm font-extralight">
{{ score.playedAt.toLocaleString(locale, { dateStyle: 'long', timeStyle: 'full' }) }}
</time>
</div>
</template>
<div v-else>
{{ t('unknown-beatmap') }}
</div>
<time class="text-xs italic lg:text-sm font-extralight transition-[font-size]">
{{ score.playedAt.toLocaleString(locale, { dateStyle: 'medium', timeStyle: 'medium' }) }}
</time>
</div>
<div class="relative flex">
<div class="flex flex-col">
<div class="flex items-center justify-end flex-grow text-lg sm:text-xl lg:text-2xl">
<template v-if="(ppRankingSystems).includes(props.rankingSystem as LeaderboardPPRankingSystem)">
<div class="font-mono font-bold">
{{ score.pp.toFixed(2) }}
</div>
<span class="font-light">{{ $t('global.pp') }}</span>
</template>
<template v-else-if="(leaderboardScoreRankingSystems).includes(props.rankingSystem as LeaderboardScoreRankingSystem)">
<div class="font-mono font-bold">
{{ numberFmt(score.score) }}
</div>
</template>
</div>
<div class="justify-end mt-auto text-sm md:text-md lg:text-md whitespace-nowrap">
<div class="text-right">
<template v-if="beatmap">
<span class="font-semibold align-middle">
{{ score.maxCombo }}
</span>
<span class="font-light align-middle">
/
</span>
<span class="align-middle">
{{ beatmap.properties.maxCombo }}
</span>
</template>
<span v-else class="align-middle">
{{ score.maxCombo }}
</span>
<span class="font-light align-middle">
x
</span>
<span v-if="score.mods.length" class="hidden p-1 mt-auto space-x-4 rounded-lg lg:block bg-neutral/40 tooltip tooltip-primary" :data-tip="score.mods.map(m => StableMod[m]).join(', ')">
<app-mod v-for="mod in score.mods" :key="mod" :mod="mod" class="w-8 h-8 opacity-80" />
</span>
<div class="flex flex-col justify-between">
<div class="flex justify-end text-lg lg:text-2xl transition-[font-size]">
<template v-if="(ppRankingSystems).includes(props.rankingSystem as LeaderboardPPRankingSystem)">
<div class="font-mono font-bold">
{{ score.pp.toFixed(2) }}
</div>

<span class="text-right">
<span><b class="font-mono">{{ score.accuracy.toFixed(2) }}</b></span>
<span class="text-light">% {{ $t('global.acc') }}</span>
<span class="font-light">{{ $t('global.pp') }}</span>
</template>
<template v-else-if="(leaderboardScoreRankingSystems).includes(props.rankingSystem as LeaderboardScoreRankingSystem)">
<div class="font-mono font-bold">
{{ numberFmt(score.score) }}
</div>
</template>
</div>
<div class="text-xs sm:text-sm lg:text-base text-end text-nowrap transition-[font-size]">
<template v-if="beatmap">
<span class="font-semibold align-middle">
{{ score.maxCombo }}
</span>
</div>
<span class="font-light align-middle">
/
</span>
<span class="align-middle">
{{ beatmap.properties.maxCombo }}
</span>
</template>
<span v-else class="align-middle">
{{ score.maxCombo }}
</span>
<span class="font-light align-middle">
x
</span>
</div>
<div class="font-mono text-4xl text-center md:text-5xl w-14 md:w-20">
{{ score.grade }}

<div class="text-xs sm:text-sm lg:text-base text-end text-nowrap transition-[font-size]">
<span><b class="font-mono">{{ score.accuracy.toFixed(2) }}</b></span>
<span class="text-light">% {{ $t('global.acc') }}</span>
</div>
<span v-if="score.mods.length" class="block px-2 mt-auto space-x-1 rounded-lg lg:hidden bg-neutral/40 tooltip tooltip-primary" :data-tip="score.mods.map(m => StableMod[m]).join(', ')">
<app-mod v-for="mod in score.mods" :key="mod" :mod="mod" class="w-5 h-5" />
</span>
</div>
<div class="self-center font-mono text-4xl text-center md:text-5xl w-14 md:w-20 transition-[font-size]">
{{ score.grade }}
</div>
</div>
</template>
Expand Down
21 changes: 3 additions & 18 deletions src/components/userpage/heading.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,6 @@ de-DE:
<!-- info -->
<div class="flex flex-col w-full p-2 lg:p-0 md:p-0 bg-gbase-200 dark:bg-gbase-700 md:bg-transparent dark:md:bg-transparent md:grow">
<div
v-if="session.$state.userId !== page.user.id"
class="container flex items-center justify-center order-3 gap-3 pb-2 mx-auto lg:justify-between md:order-1 md:justify-end md:pb-0"
>
<p class="flex flex-wrap gap-1">
Expand All @@ -169,6 +168,7 @@ de-DE:
</span>
</p>
<t-button
v-if="session.$state.userId !== page.user.id"
ref="changeFriendStateButton" class="gap-1 btn-shadow" size="sm"
:variant="isMutualFriend ? 'primary' : isFriend ? 'secondary' : 'gbase'" @click="toggleFriend"
>
Expand All @@ -189,31 +189,16 @@ de-DE:
/>
<span v-else>{{ friendButtonContent }}</span>
</t-button>
<!-- <t-button class="btn-shadow"
v-if="session.$state.loggedIn"
size="sm"
variant="secondary"
class="gap-1"
>
icon[name=ph:chat-circle-dots-fill]
<span>send message</span>
</t-button> -->
</div>
<div v-else class="container flex justify-around order-3 gap-3 pb-4 mx-auto md:order-1 md:justify-end md:pb-0">
<!-- <t-button class="btn-shadow"
size="sm"
variant="primary"
>
add as friend
</t-button> -->
<t-nuxt-link-button
v-else
class="btn-shadow" size="sm" variant="accent" :to="{
name: 'me-settings',
}"
>
{{ t('edit') }}
</t-nuxt-link-button>
</div>

<div
class="container flex flex-col flex-wrap gap-4 mx-auto lg:flex-row lg:gap-0 sm:order-2 md:items-end md:justify-between md:pb-2"
>
Expand Down
13 changes: 7 additions & 6 deletions src/pages/user/[handle].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ de-DE:
<div v-else-if="page.user" ref="handle" class="flex flex-col justify-stretch">
<div v-if="page.user.roles.includes(UserRole.Restricted)" class="container mx-auto custom-container">
<div role="alert" class="alert alert-error">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<span v-if="page.user.id === session.user?.id">{{ t('self-banned', { server: t('server.name') }) }}</span>
<span v-else>{{ t('banned') }}</span>
</div>
Expand All @@ -156,23 +156,23 @@ de-DE:
<userpage-profile />
<template v-if="page.currentStatistic?.level === 0">
<div class="container custom-container py-20 mx-auto">
<h1 class="text-center text-3xl text-gbase-400 dark:text-gbase-600">
<div class="container py-20 mx-auto custom-container">
<h1 class="text-3xl text-center text-gbase-400 dark:text-gbase-600">
{{ t('mode-no-data') }}
</h1>
</div>
</template>
<template v-else>
<userpage-ranking-system-switcher class="z-10" />
<div class="container mx-auto custom-container">
<div class="container max-w-screen-lg mx-auto">
<userpage-statistics id="statistics" ref="statistics" />
<userpage-score-rank-composition />
</div>
<template v-if="page.currentRankingSystem">
<div id="bestScores" ref="bestScores" class="container py-2 mx-auto custom-container">
<div id="bestScores" ref="bestScores" class="container max-w-screen-lg py-2 mx-auto">
<userpage-best-scores />
</div>
<div id="topScores" ref="topScores" class="container py-4 mx-auto custom-container">
<div id="topScores" ref="topScores" class="container max-w-screen-lg py-4 mx-auto">
<userpage-top-scores />
</div>
</template>
Expand Down Expand Up @@ -205,6 +205,7 @@ de-DE:
<style lang="postcss" scoped>
.up-nav-item {
justify-content: center;
@apply z-40;
}
.up-nav-item>* {
Expand Down

0 comments on commit 3c3efaf

Please sign in to comment.