Skip to content

Commit 994a3cb

Browse files
lukepololukepolo
authored
bug: fixing player / team search (#242)
1 parent 79f4a83 commit 994a3cb

6 files changed

Lines changed: 93 additions & 93 deletions

File tree

‎components/PlayerSearch.vue‎

Lines changed: 35 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useMediaQuery } from "@vueuse/core";
77
import debounce from "~/utilities/debounce";
88
99
const isMobile = useMediaQuery("(max-width: 768px)");
10+
const { height: viewportHeight } = useVisualViewport();
1011
</script>
1112

1213
<template>
@@ -41,41 +42,50 @@ const isMobile = useMediaQuery("(max-width: 768px)");
4142
</div>
4243
<DrawerContent>
4344
<DrawerTitle class="sr-only">{{ label }}</DrawerTitle>
44-
<div class="flex flex-col h-[80dvh] p-4">
45-
<div class="flex-1 overflow-y-auto min-h-0">
45+
<div
46+
class="flex flex-col"
47+
:style="{ height: `${viewportHeight * 0.9}px` }"
48+
>
49+
<div class="flex-1 overflow-y-auto min-h-0 p-4 flex flex-col">
50+
<div class="flex-1" />
4651
<div
4752
v-if="!players?.length"
4853
class="p-4 text-center text-muted-foreground"
4954
>
5055
{{ $t("player.search.no_players_found") }}
5156
</div>
5257

53-
<div v-else>
54-
<div class="px-3 py-2 text-sm text-muted-foreground">
55-
{{ players.length }} {{ $t("player.search.found_players") }}
56-
</div>
57-
58-
<div class="divide-y">
59-
<div
60-
v-for="player in players"
61-
:key="`player-${player.steam_id}}`"
62-
class="px-3 py-2 hover:bg-accent cursor-pointer"
63-
@click="select(player)"
64-
>
65-
<PlayerDisplay :player="player" />
66-
</div>
58+
<div v-else class="divide-y">
59+
<div
60+
v-for="player in players"
61+
:key="`player-${player.steam_id}}`"
62+
class="px-3 py-2 hover:bg-accent cursor-pointer"
63+
@click="select(player)"
64+
>
65+
<PlayerDisplay :player="player" />
6766
</div>
6867
</div>
6968
</div>
7069

71-
<div class="flex items-center justify-between pt-3 border-t">
70+
<div
71+
v-if="players?.length"
72+
class="px-4 py-2 text-xs text-muted-foreground border-t"
73+
>
74+
{{ players.length }} {{ $t("player.search.found_players") }}
75+
</div>
76+
77+
<div class="flex items-center justify-between p-4 border-t">
7278
<input
7379
ref="mobileSearchInput"
7480
v-model="query"
7581
:placeholder="$t('player.search.placeholder')"
7682
type="search"
7783
inputmode="search"
7884
enterkeyhint="search"
85+
autocomplete="off"
86+
autocorrect="off"
87+
autocapitalize="off"
88+
spellcheck="false"
7989
class="flex-1 bg-transparent outline-none text-base"
8090
@input="
8191
(e: Event) =>
@@ -252,7 +262,7 @@ export default {
252262
return useAuthStore().me;
253263
},
254264
canSelectSelf() {
255-
return this.self && !this.exclude.includes(this.me.steam_id);
265+
return this.self && this.me && !this.exclude.includes(this.me.steam_id);
256266
},
257267
onlineOnly: {
258268
get() {
@@ -268,6 +278,9 @@ export default {
268278
toggleOnlineOnly() {
269279
this.onlineOnly = !this.onlineOnly;
270280
this.searchPlayers();
281+
this.$nextTick(() => {
282+
(this.$refs.mobileSearchInput as HTMLInputElement)?.focus();
283+
});
271284
},
272285
select(player: Player) {
273286
if (!player) {
@@ -281,9 +294,10 @@ export default {
281294
this.query = query;
282295
}
283296
284-
const exclude = !this.canSelectSelf
285-
? (this.exclude as string[]).concat(this.me.steam_id)
286-
: (this.exclude as string[]);
297+
const exclude =
298+
!this.canSelectSelf && this.me?.steam_id
299+
? (this.exclude as string[]).concat(this.me.steam_id)
300+
: (this.exclude as string[]);
287301
288302
if (this.onlineOnly) {
289303
if (!this.query.trim()) {

‎components/game-server-nodes/GameServerNodeRow.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -454,11 +454,11 @@ const isSectionExpanded = (section: string) => {
454454
<button
455455
v-else-if="hasPorts"
456456
type="button"
457-
class="text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1 group"
457+
class="text-xs text-muted-foreground hover:text-foreground inline-flex items-center justify-center gap-1 group w-full"
458458
@click="showPortsDialog = true"
459459
>
460460
<span
461-
class="underline decoration-muted-foreground/40 group-hover:decoration-foreground"
461+
class="underline decoration-muted-foreground/40 group-hover:decoration-foreground text-center"
462462
>{{ portRangeLabel }}</span
463463
>
464464
<Pencil

‎components/teams/TeamSearch.vue‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import debounce from "~/utilities/debounce";
1313
import { e_team_roles_enum } from "~/generated/zeus";
1414
1515
const isMobile = useMediaQuery("(max-width: 768px)");
16+
const { height: viewportHeight } = useVisualViewport();
1617
</script>
1718

1819
<template>
@@ -31,46 +32,55 @@ const isMobile = useMediaQuery("(max-width: 768px)");
3132
</div>
3233
<DrawerContent>
3334
<DrawerTitle class="sr-only">{{ label }}</DrawerTitle>
34-
<div class="flex flex-col h-[80dvh] p-4">
35-
<div class="flex-1 overflow-y-auto min-h-0">
35+
<div
36+
class="flex flex-col"
37+
:style="{ height: `${viewportHeight * 0.9}px` }"
38+
>
39+
<div class="flex-1 overflow-y-auto min-h-0 p-4 flex flex-col">
40+
<div class="flex-1" />
3641
<div
3742
v-if="!teams?.length"
3843
class="p-4 text-center text-muted-foreground"
3944
>
4045
{{ $t("team.search.no_teams_found") }}
4146
</div>
4247

43-
<div v-else>
44-
<div class="px-3 py-2 text-sm text-muted-foreground">
45-
{{ teams.length }} {{ $t("team.search.found_teams") }}
46-
</div>
47-
48-
<div class="divide-y">
49-
<div
50-
v-for="team in teams"
51-
:key="team.id"
52-
class="px-3 py-2 hover:bg-accent cursor-pointer"
53-
@click="select(team)"
54-
>
55-
<div class="flex items-center">
56-
<span class="text-xs text-muted-foreground mr-2">
57-
[{{ team.short_name }}]
58-
</span>
59-
<span>{{ team.name }}</span>
60-
</div>
48+
<div v-else class="divide-y">
49+
<div
50+
v-for="team in teams"
51+
:key="team.id"
52+
class="px-3 py-2 hover:bg-accent cursor-pointer"
53+
@click="select(team)"
54+
>
55+
<div class="flex items-center">
56+
<span class="text-xs text-muted-foreground mr-2">
57+
[{{ team.short_name }}]
58+
</span>
59+
<span>{{ team.name }}</span>
6160
</div>
6261
</div>
6362
</div>
6463
</div>
6564

66-
<div class="flex items-center justify-between pt-3 border-t">
65+
<div
66+
v-if="teams?.length"
67+
class="px-4 py-2 text-xs text-muted-foreground border-t"
68+
>
69+
{{ teams.length }} {{ $t("team.search.found_teams") }}
70+
</div>
71+
72+
<div class="flex items-center justify-between p-4 border-t">
6773
<input
6874
ref="mobileSearchInput"
6975
v-model="query"
7076
:placeholder="$t('team.search.placeholder')"
7177
type="search"
7278
inputmode="search"
7379
enterkeyhint="search"
80+
autocomplete="off"
81+
autocorrect="off"
82+
autocapitalize="off"
83+
spellcheck="false"
7484
class="flex-1 bg-transparent outline-none text-base"
7585
@input="
7686
(e: Event) =>
@@ -265,6 +275,9 @@ export default {
265275
toggleMyTeamsOnly() {
266276
this.myTeamsOnly = !this.myTeamsOnly;
267277
this.searchTeams();
278+
this.$nextTick(() => {
279+
(this.$refs.mobileSearchInput as HTMLInputElement)?.focus();
280+
});
268281
},
269282
select(team: Team) {
270283
if (!team) {

‎composables/useVisualViewport.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { ref, onMounted, onUnmounted } from "vue";
2+
3+
export function useVisualViewport() {
4+
const height = ref(window.visualViewport?.height ?? window.innerHeight);
5+
6+
function update() {
7+
if (window.visualViewport) {
8+
height.value = window.visualViewport.height;
9+
}
10+
}
11+
12+
onMounted(() => {
13+
window.visualViewport?.addEventListener("resize", update);
14+
});
15+
16+
onUnmounted(() => {
17+
window.visualViewport?.removeEventListener("resize", update);
18+
});
19+
20+
return { height };
21+
}

‎layouts/default.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,7 @@ provide("containContent", containContent);
5353
<SidebarProvider>
5454
<AppSidebar v-if="showLeftNav" />
5555

56-
<SidebarInset
57-
class="flex flex-col overflow-hidden"
58-
style="height: 100svh"
59-
>
56+
<SidebarInset class="flex flex-col overflow-hidden" style="height: 100svh">
6057
<TopNav v-if="!showLeftNav" />
6158
<AppHeader class="px-6" v-if="showLeftNav" />
6259

‎pages/blank.vue‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

0 commit comments

Comments
 (0)