From 3c3efaff27c09afd2d660e870e480763ff2ecf8d Mon Sep 17 00:00:00 2001
From: arily <arily@arily.moe>
Date: Sun, 7 Jul 2024 15:39:44 +0800
Subject: [PATCH] redesign score list

---
 src/components/app/nav/index.vue       |   4 +-
 src/components/app/score-list-item.vue | 174 ++++++++++++-------------
 src/components/userpage/heading.vue    |  21 +--
 src/pages/user/[handle].vue            |  13 +-
 4 files changed, 97 insertions(+), 115 deletions(-)

diff --git a/src/components/app/nav/index.vue b/src/components/app/nav/index.vue
index a188872d..fd30144e 100644
--- a/src/components/app/nav/index.vue
+++ b/src/components/app/nav/index.vue
@@ -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];
 }
diff --git a/src/components/app/score-list-item.vue b/src/components/app/score-list-item.vue
index aeee5bb3..03b1823c 100644
--- a/src/components/app/score-list-item.vue
+++ b/src/components/app/score-list-item.vue
@@ -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: {
@@ -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>
diff --git a/src/components/userpage/heading.vue b/src/components/userpage/heading.vue
index b84464f8..d85ad2bb 100755
--- a/src/components/userpage/heading.vue
+++ b/src/components/userpage/heading.vue
@@ -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">
@@ -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"
         >
@@ -189,24 +189,8 @@ 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',
           }"
@@ -214,6 +198,7 @@ de-DE:
           {{ 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"
       >
diff --git a/src/pages/user/[handle].vue b/src/pages/user/[handle].vue
index 32714121..ee06d9fd 100755
--- a/src/pages/user/[handle].vue
+++ b/src/pages/user/[handle].vue
@@ -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>
@@ -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>
@@ -205,6 +205,7 @@ de-DE:
 <style lang="postcss" scoped>
 .up-nav-item {
   justify-content: center;
+  @apply z-40;
 }
 
 .up-nav-item>* {