Skip to content

Commit a45380c

Browse files
why-Miawhy-Mia
committed
styling updates for server list & sort server list by active first
1 parent 91900fa commit a45380c

2 files changed

Lines changed: 55 additions & 39 deletions

File tree

‎src/components/RecentTimes.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131

3232

3333
<template>
34-
<div class="text-white w-full max-w-[1000px] p-4 text-center flex flex-col justify-center rounded-lg mt-8">
34+
<div class="text-white w-full max-w-5xl p-4 text-center flex flex-col justify-center rounded-lg mt-8">
3535
<h1 class="text-2xl mb-2">Recent Times</h1>
3636
<p class="text-sm text-gray-400 mb-4">Displaying records from the last 2 weeks</p>
3737
<div class="flex py-2 justify-between flex-wrap gap-3">

‎src/views/ServersView.vue‎

Lines changed: 54 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,99 @@
11
<template>
22
<main>
33
<div class="flex flex-col items-center justify-center">
4-
<div class="w-full max-w-6xl mx-auto px-4 py-8">
5-
<h1 class="text-white text-2xl text-center mb-8">Servers</h1>
6-
4+
<div class="w-full max-w-5xl mx-auto px-4 py-8">
5+
<div class="mb-7">
6+
<h1 class="text-white text-2xl text-center mb-2">Servers</h1>
7+
<p class="text-sm text-gray-400 mb-4 text-center">Active servers that have submitted times within the last 2 weeks</p>
8+
</div>
79
<!-- Server Statistics -->
8-
<div v-if="!loading && !error && servers.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
10+
<div v-if="!loading && !error && servers.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-5">
911
<div class="bg-main-700 rounded-md p-4">
1012
<div class="flex items-center">
11-
<div class="p-1.5 bg-main-500 rounded-md">
13+
<div class="p-1.5 bg-main-400 rounded-md">
1214
<svg class="w-5 h-5 text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1315
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/>
1416
</svg>
1517
</div>
1618
<div class="ml-3">
17-
<h3 class="text-xs font-medium text-gray-300">Total Servers</h3>
18-
<p class="text-xl font-semibold text-gray-100">{{ totalServers }}</p>
19+
<h3 class="text-xs text-gray-400">Total Servers</h3>
20+
<p class="text-2xl font-mono font-medium text-gray-100">{{ totalServers }}</p>
1921
</div>
2022
</div>
2123
</div>
2224

2325
<div class="bg-main-700 rounded-md p-4">
2426
<div class="flex items-center">
25-
<div class="p-1.5 bg-green-900 rounded-md">
26-
<div class="w-5 h-5 bg-green-500 rounded-full"></div>
27+
<div class="p-1.5 bg-green-900/50 rounded-md">
28+
<div class="w-5 h-5 bg-green-500/80 rounded-full"></div>
2729
</div>
2830
<div class="ml-3">
29-
<h3 class="text-xs font-medium text-gray-300">Active Servers</h3>
30-
<p class="text-xl font-semibold text-green-400">{{ activeServers.length }}</p>
31+
<h3 class="text-xs text-gray-400">Active Servers</h3>
32+
<p class="text-2xl font-mono font-medium text-green-400">{{ activeServers.length }}</p>
3133
</div>
3234
</div>
3335
</div>
3436

3537
<div class="bg-main-700 rounded-md p-4">
3638
<div class="flex items-center">
37-
<div class="p-1.5 bg-red-900 rounded-md">
38-
<div class="w-5 h-5 bg-red-500 rounded-full"></div>
39+
<div class="p-1.5 bg-red-900/50 rounded-md">
40+
<div class="w-5 h-5 bg-red-500/80 rounded-full"></div>
3941
</div>
4042
<div class="ml-3">
41-
<h3 class="text-xs font-medium text-gray-300">Inactive Servers</h3>
42-
<p class="text-xl font-semibold text-red-400">{{ inactiveServers.length }}</p>
43+
<h3 class="text-xs text-gray-400">Inactive Servers</h3>
44+
<p class="text-2xl font-mono font-medium text-red-400">{{ inactiveServers.length }}</p>
4345
</div>
4446
</div>
4547
</div>
4648
</div>
4749

4850
<div class="bg-main-700 rounded-md overflow-hidden">
49-
<div class="px-6 py-4 bg-main-900">
51+
<div class="px-5 pr-4 py-4 bg-main-900">
5052
<div class="flex justify-between items-center">
5153
<div>
52-
<h2 class="text-xl font-semibold text-gray-100">Connected Servers</h2>
53-
<p class="text-sm text-gray-300 mt-1">
54-
Servers that have submitted times within the last 2 weeks
54+
<h2 class="text-base font-medium text-gray-100">Connected Servers</h2>
55+
<p class="text-sm text-gray-400">
56+
5557
</p>
5658
</div>
5759
<div class="flex items-center space-x-3">
5860
<!-- API Key Creation Button -->
5961
<button
6062
v-if="canManageKeys"
6163
@click="openCreateKeyModal"
62-
class="px-4 py-2 text-sm font-medium text-gray-100 bg-green-700 rounded-md hover:bg-green-600 transition-colors cursor-pointer"
64+
class="px-4 py-2 text-sm text-gray-100 bg-green-700 rounded-md hover:bg-green-600 transition-colors cursor-pointer"
6365
>
6466
Create Server API Key
6567
</button>
6668
<button
6769
@click="loadServers"
6870
:disabled="loading"
69-
class="px-4 py-2 text-sm font-medium text-gray-100 bg-main-600 rounded-md hover:bg-main-500 transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed"
71+
class="px-2.5 py-2 text-sm text-gray-100 bg-main-400 rounded-md hover:bg-main-300 transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed"
7072
>
71-
<div v-if="loading" class="flex items-center">
72-
<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-100 mr-2"></div>
73-
Loading...
73+
<div :class="loading ? 'animate-spin' : ''">
74+
<svg
75+
xmlns="http://www.w3.org/2000/svg"
76+
width="20"
77+
height="20"
78+
viewBox="0 0 24 24"
79+
fill="none"
80+
stroke="currentColor"
81+
stroke-width="1.5"
82+
stroke-linecap="round"
83+
stroke-linejoin="round"
84+
class="text-gray-200"
85+
>
86+
<path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
87+
<path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
88+
</svg>
7489
</div>
75-
<span v-else>Refresh</span>
7690
</button>
7791
</div>
7892
</div>
7993
</div>
8094

81-
<div v-if="loading" class="p-8 text-center">
82-
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-100 mx-auto"></div>
95+
<div v-if="loading" class="p-8 text-center flex flex-col items-center align-center">
96+
<loadWheel></loadWheel>
8397
<p class="mt-2 text-gray-300">Loading servers...</p>
8498
</div>
8599

@@ -95,7 +109,7 @@
95109
<div
96110
v-for="server in servers"
97111
:key="server.server"
98-
class="group p-6 hover:bg-main-600 transition-colors bg-main-700 odd:bg-main-800 relative"
112+
class="group p-6 py-4 hover:bg-main-500 transition-colors bg-main-600 odd:bg-main-700 relative"
99113
>
100114
<div class="flex items-center justify-between">
101115
<div class="flex items-center">
@@ -106,16 +120,17 @@
106120
]"
107121
></div>
108122
<div>
109-
<h3 class="text-lg font-medium text-gray-100">{{ server.server }}</h3>
123+
<h3 class="text-base font-medium text-gray-100">{{ server.server }}</h3>
110124
<div class="flex items-center flex-wrap gap-1 mt-1">
111125
<span
112126
v-for="(ip, index) in server.ips"
113127
:key="ip"
114-
@click="copyToClipboard(ip)"
115-
class="text-sm text-gray-100 monospace cursor-pointer hover:text-gray-200 hover:bg-main-600 px-1 py-0.5 rounded transition-colors"
128+
class="text-sm text-gray-200 monospace pr-1 py-0.5 "
116129
:title="`Click to copy ${ip}`"
117-
>{{ ip }}<span v-if="index < server.ips.length - 1" class="text-gray-400">,</span></span>
118-
<span v-if="server.ips && server.ips.length > 0" class="text-xs text-gray-400 ml-2">(click to copy)</span>
130+
>
131+
<span @click="copyToClipboard(ip)" class="cursor-pointer hover:text-gray-200 hover:bg-main-200 transition-colors rounded p-0.5">{{ ip }}</span>
132+
<span v-if="index < server.ips.length - 1" class="text-gray-400 -ml-0.5">,</span>
133+
</span>
119134
</div>
120135
</div>
121136
</div>
@@ -125,7 +140,7 @@
125140
<button
126141
v-if="canManageKeys"
127142
@click="openEditKeyModal(server.server)"
128-
class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 px-3 py-1.5 text-xs font-medium text-gray-300 bg-main-800 hover:bg-main-700 border border-main-500 hover:border-main-400 rounded-md hover:text-gray-100 transition-colors cursor-pointer mr-3"
143+
class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 px-3 py-1.5 text-xs font-medium text-gray-300 bg-main-800 hover:bg-main-700 border border-main-500 hover:border-main-400 rounded-md hover:text-gray-100 transition-colors cursor-pointer mr-3 min-w-24"
129144
title="Edit API key"
130145
>
131146
<svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -138,8 +153,8 @@
138153
:class="[
139154
'px-2 py-1 text-xs font-medium rounded-full',
140155
server.active
141-
? 'bg-green-800 text-green-400'
142-
: 'bg-red-800 text-red-400'
156+
? 'bg-green-900 text-green-400'
157+
: 'bg-red-900 text-red-400'
143158
]"
144159
>
145160
{{ server.active ? 'Active' : 'Inactive' }}
@@ -317,7 +332,7 @@
317332
<div v-else-if="loadingKeyInfo" class="mb-4">
318333
<label class="block text-sm font-medium text-gray-300 mb-2">Current API Key</label>
319334
<div class="w-full px-3 py-2 bg-main-900 border border-main-600 rounded-md flex items-center">
320-
<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-100 mr-2"></div>
335+
<loadWheel class="w-4 h-4 mr-2"></loadWheel>
321336
<span class="text-sm text-gray-400">Loading key information...</span>
322337
</div>
323338
</div>
@@ -428,6 +443,7 @@ import { KeyPermissions, addPermission } from '@/utils/permissions';
428443
import { canManageApiKeys } from '@/utils/userPermissions';
429444
import { useAuth } from '@/stores/auth';
430445
import Toast from '@/components/Toast.vue';
446+
import loadWheel from '@/components/icons/loadWheel.vue';
431447
432448
// Auth
433449
const { user } = useAuth();
@@ -487,7 +503,7 @@ const loadServers = async () => {
487503
try {
488504
loading.value = true;
489505
error.value = null;
490-
servers.value = await OffstylesApi.getServers();
506+
servers.value = (await OffstylesApi.getServers()).sort((a,b) => Number(b.active) - Number(a.active));
491507
} catch (err) {
492508
error.value = err instanceof Error ? err.message : 'Failed to load servers';
493509
console.error('Failed to load servers:', err);

0 commit comments

Comments
 (0)