Skip to content

Commit 91900fa

Browse files
why-Miawhy-Mia
committed
styling updates for individual records view
1 parent ce2fbb2 commit 91900fa

1 file changed

Lines changed: 47 additions & 73 deletions

File tree

‎src/views/IndividualRecordView.vue‎

Lines changed: 47 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
</script>
7878

7979
<template>
80-
<main class="flex flex-col items-center justify-center min-h-screen p-4">
80+
<main class="flex flex-col items-center justify-center p-4">
8181
<div class="text-white w-full max-w-[800px] text-center flex flex-col justify-center rounded-lg">
8282

8383
<!-- Header -->
@@ -88,7 +88,7 @@
8888
>
8989
← Back
9090
</button>
91-
<h1 class="text-3xl mb-2">Individual Record</h1>
91+
<h1 class="text-2xl mb-2">Individual Record</h1>
9292
</div>
9393

9494
<!-- Loading State -->
@@ -110,15 +110,15 @@
110110
</div>
111111

112112
<!-- Record Details -->
113-
<div v-else-if="record" class="space-y-6">
113+
<div v-else-if="record" class="space-y-4">
114114

115115
<!-- Main Record Info -->
116-
<div class="bg-main-700 p-6 rounded-lg">
116+
<div class="bg-main-700 p-6 py-4 rounded-lg">
117117
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
118118

119119
<!-- Player Info -->
120120
<div class="space-y-2">
121-
<h3 class="text-lg font-semibold text-gray-300">Player</h3>
121+
<h3 class="text-base font-medium text-gray-300">Player</h3>
122122
<div class="text-xl">
123123
<a
124124
v-if="playerUrl"
@@ -129,12 +129,12 @@
129129
</a>
130130
<span v-else>{{ record.name }}</span>
131131
</div>
132-
<div class="text-sm text-gray-400">{{ record.steamid }}</div>
132+
<div class="text-sm text-gray-400 mb-1">{{ record.steamid }}</div>
133133
</div>
134134

135135
<!-- Map Info -->
136136
<div class="space-y-2">
137-
<h3 class="text-lg font-semibold text-gray-300">Map</h3>
137+
<h3 class="text-base font-medium text-gray-300">Map</h3>
138138
<div class="text-xl">
139139
<a
140140
v-if="mapLeaderboardUrl"
@@ -145,7 +145,7 @@
145145
</a>
146146
<span v-else>{{ record.map }}</span>
147147
</div>
148-
<div class="text-sm text-gray-400">
148+
<div class="text-sm text-gray-400 mb-1">
149149
Style: {{ styleFormat.name(record.style) }}
150150
</div>
151151
</div>
@@ -154,38 +154,35 @@
154154
</div>
155155

156156
<!-- Performance Stats -->
157-
<div class="bg-main-700 p-6 rounded-lg">
158-
<h3 class="text-lg font-semibold text-gray-300 mb-4">Performance</h3>
159-
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
160-
161-
<div class="bg-main-600 p-3 rounded">
162-
<div class="text-sm text-gray-400">Time</div>
163-
<div class="text-xl font-mono text-green-400">
164-
{{ dateTimeFormats.time(record.time) }}
165-
</div>
166-
</div>
167-
168-
<div class="bg-main-600 p-3 rounded">
169-
<div class="text-sm text-gray-400">Sync</div>
170-
<div class="text-xl font-mono">{{ record.sync }}%</div>
157+
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
158+
159+
<div class="bg-main-700 p-3 rounded">
160+
<div class="text-sm text-gray-400 mb-0.5">Time</div>
161+
<div class="text-xl font-mono text-green-400">
162+
{{ dateTimeFormats.time(record.time) }}
171163
</div>
164+
</div>
172165

173-
<div class="bg-main-600 p-3 rounded">
174-
<div class="text-sm text-gray-400">Strafes</div>
175-
<div class="text-xl font-mono">{{ record.strafes }}</div>
176-
</div>
166+
<div class="bg-main-700 p-3 rounded">
167+
<div class="text-sm text-gray-400 mb-0.5">Sync</div>
168+
<div class="text-xl font-mono">{{ record.sync }}%</div>
169+
</div>
177170

178-
<div class="bg-main-600 p-3 rounded">
179-
<div class="text-sm text-gray-400">Jumps</div>
180-
<div class="text-xl font-mono">{{ record.jumps }}</div>
181-
</div>
171+
<div class="bg-main-700 p-3 rounded">
172+
<div class="text-sm text-gray-400 mb-0.5">Strafes</div>
173+
<div class="text-xl font-mono">{{ record.strafes }}</div>
174+
</div>
182175

176+
<div class="bg-main-700 p-3 rounded">
177+
<div class="text-sm text-gray-400 mb-0.5">Jumps</div>
178+
<div class="text-xl font-mono">{{ record.jumps }}</div>
183179
</div>
180+
184181
</div>
185182

186183
<!-- Additional Info -->
187-
<div class="bg-main-700 p-6 rounded-lg">
188-
<h3 class="text-lg font-semibold text-gray-300 mb-4">Additional Information</h3>
184+
<div class="bg-main-700 p-6 py-5 rounded-lg">
185+
<h3 class="text-lg font-medium text-gray-300 mb-4">Additional Information</h3>
189186
<div class="space-y-0 text-left">
190187

191188
<div class="flex justify-between py-3 border-b border-gray-600/30">
@@ -215,51 +212,28 @@
215212

216213
</div>
217214
</div>
218-
219-
<!-- Actions -->
220-
<div class="bg-main-700 p-6 rounded-lg">
221-
<h3 class="text-lg font-semibold text-gray-300 mb-4">Actions</h3>
222-
<div class="flex flex-wrap gap-3 justify-center">
223-
224-
<a
225-
v-if="playerUrl"
226-
:href="playerUrl"
215+
<div class="flex flex-wrap gap-3 justify-center">
216+
<div v-if="record.replay_ref">
217+
<button
218+
v-if="isLoggedIn"
219+
@click="downloadReplay"
227220
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
228221
>
229-
View Player Profile
230-
</a>
231-
232-
<a
233-
v-if="mapLeaderboardUrl"
234-
:href="mapLeaderboardUrl"
235-
class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg transition-colors"
222+
Download Replay
223+
</button>
224+
<button
225+
v-else
226+
disabled
227+
class="px-4 py-2 bg-gray-600 text-gray-400 rounded-lg cursor-not-allowed"
228+
title="Login with Steam required to download replays"
236229
>
237-
View Map Leaderboard
238-
</a>
239-
240-
<div v-if="record.replay_ref">
241-
<button
242-
v-if="isLoggedIn"
243-
@click="downloadReplay"
244-
class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg transition-colors"
245-
>
246-
Download Replay
247-
</button>
248-
<button
249-
v-else
250-
disabled
251-
class="px-4 py-2 bg-gray-600 text-gray-400 rounded-lg cursor-not-allowed"
252-
title="Login with Steam required to download replays"
253-
>
254-
Download Replay (Login Required)
255-
</button>
256-
</div>
257-
258-
<span v-else class="px-4 py-2 bg-gray-600 text-gray-400 rounded-lg">
259-
No Replay Available
260-
</span>
261-
230+
Download Replay (Login Required)
231+
</button>
262232
</div>
233+
234+
<span v-else class="px-4 py-2 bg-gray-600 text-gray-400 rounded-lg">
235+
No Replay Available
236+
</span>
263237
</div>
264238

265239
</div>

0 commit comments

Comments
 (0)