Skip to content
/ web Public

Commit 9655be0

Browse files
lukepololukepolo
committed
chore: fix more page transitions
1 parent 758032c commit 9655be0

File tree

22 files changed

+1841
-1895
lines changed

22 files changed

+1841
-1895
lines changed

‎components/ui/transitions/PageTransition.vue‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
11
<script setup lang="ts">
22
interface Props {
33
delay?: number
4-
duration?: number
54
}
65
76
const props = withDefaults(defineProps<Props>(), {
8-
delay: 0,
9-
duration: 600
7+
delay: 0
108
})
119
12-
const delayClass = computed(() => props.delay ? `delay-${props.delay}` : '')
10+
// Map delay values to Tailwind delay classes
11+
const delayClass = computed(() => {
12+
switch (props.delay) {
13+
case 100: return 'delay-100'
14+
case 200: return 'delay-200'
15+
case 300: return 'delay-300'
16+
case 500: return 'delay-500'
17+
default: return ''
18+
}
19+
})
1320
</script>
1421

1522
<template>
1623
<Transition
1724
appear
18-
:enter-active-class="`transition-all duration-${duration} ease-out ${delayClass}`"
25+
:enter-active-class="`transition-all duration-600 ease-out ${delayClass}`"
1926
enter-from-class="opacity-0 translate-y-5"
2027
enter-to-class="opacity-100 translate-y-0"
2128
leave-active-class="transition-all duration-600 ease-out"

‎pages/dedicated-servers/[id].vue‎

Lines changed: 121 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -44,150 +44,146 @@ import AnimatedCard from "~/components/ui/animated-card/AnimatedCard.vue";
4444
const serverMenu = ref(false);
4545
</script>
4646
<template>
47-
<div class="flex-grow flex flex-col gap-6">
48-
<PageTransition :delay="0">
49-
<PageHeading v-if="server">
50-
<template #title>
51-
<div class="flex items-center justify-between gap-4">
52-
<div class="flex flex-col">
53-
<div>
54-
<Badge>{{ server.region }}</Badge>
55-
</div>
56-
<div class="flex gap-4">
57-
<div class="flex gap-2 items-center">
58-
<ServerStatus :server="server" />
47+
<PageTransition :delay="0">
48+
<PageHeading v-if="server">
49+
<template #title>
50+
<div class="flex items-center justify-between gap-4">
51+
<div class="flex flex-col">
52+
<div>
53+
<Badge>{{ server.region }}</Badge>
54+
</div>
55+
<div class="flex gap-4">
56+
<div class="flex gap-2 items-center">
57+
<ServerStatus :server="server" />
5958

60-
<div>
61-
<span class="truncate">
62-
{{ server.label }}
63-
({{ server.host }}:{{ server.port }})
64-
</span>
65-
</div>
59+
<div>
60+
<span class="truncate">
61+
{{ server.label }}
62+
({{ server.host }}:{{ server.port }})
63+
</span>
6664
</div>
65+
</div>
6766

68-
<div class="flex items-center space-x-2">
69-
<Switch
70-
@click="toggleServerEnabled"
71-
:model-value="server.enabled"
72-
/>
73-
<Label>{{
74-
$t("pages.dedicated_servers.detail.enabled")
75-
}}</Label>
76-
</div>
67+
<div class="flex items-center space-x-2">
68+
<Switch
69+
@click="toggleServerEnabled"
70+
:model-value="server.enabled"
71+
/>
72+
<Label>{{
73+
$t("pages.dedicated_servers.detail.enabled")
74+
}}</Label>
7775
</div>
7876
</div>
7977
</div>
80-
</template>
78+
</div>
79+
</template>
8180

82-
<template #description>
83-
<div
84-
v-if="server && server.type === 'Ranked'"
85-
class="bg-muted rounded-md p-4 my-4"
86-
>
87-
<div class="flex flex-col space-y-2">
88-
<div class="flex items-center justify-between">
89-
<h3 class="text-lg font-semibold">
81+
<template #description>
82+
<div
83+
v-if="server && server.type === 'Ranked'"
84+
class="bg-muted rounded-md p-4 my-4"
85+
>
86+
<div class="flex flex-col space-y-2">
87+
<div class="flex items-center justify-between">
88+
<h3 class="text-lg font-semibold">
89+
{{ $t("pages.dedicated_servers.detail.server_plugin_config") }}
90+
</h3>
91+
<div class="flex items-center gap-2">
92+
<Button
93+
variant="ghost"
94+
size="sm"
95+
@click="showConfig = !showConfig"
96+
>
97+
<Eye v-if="!showConfig" class="mr-2 h-4 w-4" />
98+
<EyeOff v-else class="mr-2 h-4 w-4" />
9099
{{
91-
$t("pages.dedicated_servers.detail.server_plugin_config")
100+
showConfig
101+
? $t("pages.dedicated_servers.detail.hide_config")
102+
: $t("pages.dedicated_servers.detail.show_config")
92103
}}
93-
</h3>
94-
<div class="flex items-center gap-2">
95-
<Button
96-
variant="ghost"
97-
size="sm"
98-
@click="showConfig = !showConfig"
99-
>
100-
<Eye v-if="!showConfig" class="mr-2 h-4 w-4" />
101-
<EyeOff v-else class="mr-2 h-4 w-4" />
102-
{{
103-
showConfig
104-
? $t("pages.dedicated_servers.detail.hide_config")
105-
: $t("pages.dedicated_servers.detail.show_config")
106-
}}
107-
</Button>
108-
</div>
104+
</Button>
109105
</div>
106+
</div>
110107

111-
<p class="text-sm text-muted-foreground">
112-
{{ $t("pages.dedicated_servers.detail.config_location") }}
113-
<Badge>
114-
addons/counterstrikesharp/config/plugins/FiveStack/FiveStack.json
115-
</Badge>
116-
</p>
108+
<p class="text-sm text-muted-foreground">
109+
{{ $t("pages.dedicated_servers.detail.config_location") }}
110+
<Badge>
111+
addons/counterstrikesharp/config/plugins/FiveStack/FiveStack.json
112+
</Badge>
113+
</p>
117114

118-
<div v-if="showConfig" class="relative">
119-
<pre
120-
class="bg-secondary p-4 rounded-lg text-sm font-mono whitespace-pre-wrap w-full"
121-
>{{ config }}</pre
122-
>
123-
<div class="absolute top-2 right-2">
124-
<Clipboard :data="config"></Clipboard>
125-
</div>
115+
<div v-if="showConfig" class="relative">
116+
<pre
117+
class="bg-secondary p-4 rounded-lg text-sm font-mono whitespace-pre-wrap w-full"
118+
>{{ config }}</pre
119+
>
120+
<div class="absolute top-2 right-2">
121+
<Clipboard :data="config"></Clipboard>
126122
</div>
127123
</div>
128124
</div>
129-
</template>
125+
</div>
126+
</template>
130127

131-
<template #actions>
132-
<Button
133-
v-if="server?.game_server_node_id"
134-
variant="outline"
135-
@click="$router.push(`/dedicated-servers/${server.id}/files`)"
136-
>
137-
<FolderOpen class="mr-2 h-4 w-4" />
138-
{{ $t("pages.dedicated_servers.detail.files") }}
139-
</Button>
140-
<DropdownMenu v-model:open="serverMenu">
141-
<DropdownMenuTrigger as-child>
142-
<Button variant="outline" size="icon">
143-
<MoreHorizontal />
144-
</Button>
145-
</DropdownMenuTrigger>
146-
<DropdownMenuContent align="end" class="w-[200px]">
147-
<DropdownMenuGroup>
148-
<DropdownMenuItem @click="editServerSheet = true">
149-
{{ $t("pages.dedicated_servers.detail.edit") }}
150-
</DropdownMenuItem>
151-
<DropdownMenuItem
152-
v-if="server?.game_server_node_id"
153-
@click="$router.push(`/dedicated-servers/${server.id}/files`)"
154-
>
155-
<FolderOpen class="mr-2 h-4 w-4 inline" />
156-
{{ $t("pages.dedicated_servers.detail.files") }}
157-
</DropdownMenuItem>
158-
<DropdownMenuSeparator />
159-
<DropdownMenuItem
160-
class="text-red-600"
161-
@click="deleteServerAlertDialog = true"
162-
>
163-
<Trash class="mr-2 h-4 w-4 inline" />
164-
{{ $t("pages.dedicated_servers.detail.delete") }}
165-
</DropdownMenuItem>
166-
</DropdownMenuGroup>
167-
</DropdownMenuContent>
168-
</DropdownMenu>
169-
</template>
170-
</PageHeading>
171-
</PageTransition>
128+
<template #actions>
129+
<Button
130+
v-if="server?.game_server_node_id"
131+
variant="outline"
132+
@click="$router.push(`/dedicated-servers/${server.id}/files`)"
133+
>
134+
<FolderOpen class="mr-2 h-4 w-4" />
135+
{{ $t("pages.dedicated_servers.detail.files") }}
136+
</Button>
137+
<DropdownMenu v-model:open="serverMenu">
138+
<DropdownMenuTrigger as-child>
139+
<Button variant="outline" size="icon">
140+
<MoreHorizontal />
141+
</Button>
142+
</DropdownMenuTrigger>
143+
<DropdownMenuContent align="end" class="w-[200px]">
144+
<DropdownMenuGroup>
145+
<DropdownMenuItem @click="editServerSheet = true">
146+
{{ $t("pages.dedicated_servers.detail.edit") }}
147+
</DropdownMenuItem>
148+
<DropdownMenuItem
149+
v-if="server?.game_server_node_id"
150+
@click="$router.push(`/dedicated-servers/${server.id}/files`)"
151+
>
152+
<FolderOpen class="mr-2 h-4 w-4 inline" />
153+
{{ $t("pages.dedicated_servers.detail.files") }}
154+
</DropdownMenuItem>
155+
<DropdownMenuSeparator />
156+
<DropdownMenuItem
157+
class="text-red-600"
158+
@click="deleteServerAlertDialog = true"
159+
>
160+
<Trash class="mr-2 h-4 w-4 inline" />
161+
{{ $t("pages.dedicated_servers.detail.delete") }}
162+
</DropdownMenuItem>
163+
</DropdownMenuGroup>
164+
</DropdownMenuContent>
165+
</DropdownMenu>
166+
</template>
167+
</PageHeading>
168+
</PageTransition>
172169

173-
<PageTransition :delay="100">
174-
<div v-if="server">
175-
<QuickServerConnect :server="server" />
176-
</div>
177-
</PageTransition>
170+
<PageTransition :delay="100" class="mt-6">
171+
<div v-if="server">
172+
<QuickServerConnect :server="server" />
173+
</div>
174+
</PageTransition>
178175

179-
<PageTransition :delay="200">
180-
<ServiceLogs
181-
:service="`dedicated-server-${$route.params.id}`"
182-
:compact="true"
183-
v-if="server?.game_server_node_id"
184-
/>
185-
</PageTransition>
176+
<PageTransition :delay="200" class="mt-6">
177+
<ServiceLogs
178+
:service="`dedicated-server-${$route.params.id}`"
179+
:compact="true"
180+
v-if="server?.game_server_node_id"
181+
/>
182+
</PageTransition>
186183

187-
<PageTransition :delay="300">
188-
<RconCommander :server-id="$route.params.id as string" :online="true" />
189-
</PageTransition>
190-
</div>
184+
<PageTransition :delay="300" class="mt-6">
185+
<RconCommander :server-id="$route.params.id as string" :online="true" />
186+
</PageTransition>
191187

192188
<Sheet
193189
:open="editServerSheet"

‎pages/dedicated-servers/create.vue‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,16 @@ import AnimatedCard from "~/components/ui/animated-card/AnimatedCard.vue";
66
</script>
77

88
<template>
9-
<div class="flex-grow flex flex-col gap-6">
10-
<PageTransition :delay="0">
11-
<PageHeading>
12-
<template #title>{{
13-
$t("pages.dedicated_servers.create.title")
14-
}}</template>
15-
</PageHeading>
16-
</PageTransition>
17-
<PageTransition :delay="100">
18-
<AnimatedCard variant="gradient" class="w-1/2 p-4">
19-
<server-form></server-form>
20-
</AnimatedCard>
21-
</PageTransition>
22-
</div>
9+
<PageTransition :delay="0">
10+
<PageHeading>
11+
<template #title>{{
12+
$t("pages.dedicated_servers.create.title")
13+
}}</template>
14+
</PageHeading>
15+
</PageTransition>
16+
<PageTransition :delay="100" class="mt-6">
17+
<AnimatedCard variant="gradient" class="w-1/2 p-4">
18+
<server-form></server-form>
19+
</AnimatedCard>
20+
</PageTransition>
2321
</template>

0 commit comments

Comments
 (0)