Spaces:
Runtime error
Runtime error
fix scroll bar
Browse files
frontend/src/app.css
CHANGED
@@ -1,3 +1,25 @@
|
|
1 |
@tailwind base;
|
2 |
@tailwind components;
|
3 |
-
@tailwind utilities;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
@tailwind base;
|
2 |
@tailwind components;
|
3 |
+
@tailwind utilities;
|
4 |
+
|
5 |
+
/* Firefox */
|
6 |
+
.x-scroll {
|
7 |
+
scrollbar-width: thin;
|
8 |
+
scrollbar-color: white #2F6DCB;
|
9 |
+
}
|
10 |
+
|
11 |
+
/* Chrome, Edge, and Safari */
|
12 |
+
.x-scroll::-webkit-scrollbar {
|
13 |
+
width: 4px;
|
14 |
+
}
|
15 |
+
|
16 |
+
.x-scroll::-webkit-scrollbar-track {
|
17 |
+
background: white;
|
18 |
+
border-radius: 100px;
|
19 |
+
}
|
20 |
+
|
21 |
+
.x-scroll::-webkit-scrollbar-thumb {
|
22 |
+
background-color: #2F6DCB;
|
23 |
+
border-radius: 100px;
|
24 |
+
border: 2px solid #2F6DCB;
|
25 |
+
}
|
frontend/src/lib/App.svelte
CHANGED
@@ -193,7 +193,7 @@
|
|
193 |
<!-- <div class="fixed top-0 right-0 z-10 p-2">
|
194 |
<ShareWithCommunity />
|
195 |
</div> -->
|
196 |
-
<div class="fixed bottom-
|
197 |
<Menu on:prompt={onPrompt} {isLoading} />
|
198 |
</div>
|
199 |
|
|
|
193 |
<!-- <div class="fixed top-0 right-0 z-10 p-2">
|
194 |
<ShareWithCommunity />
|
195 |
</div> -->
|
196 |
+
<div class="fixed bottom-2 md:bottom-10 left-0 right-0 z-10 my-2">
|
197 |
<Menu on:prompt={onPrompt} {isLoading} />
|
198 |
</div>
|
199 |
|
frontend/src/lib/Buttons/RoomsSelector.svelte
CHANGED
@@ -40,7 +40,7 @@
|
|
40 |
</script>
|
41 |
|
42 |
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
43 |
-
<div class="min-w-[
|
44 |
{#if loadingRooms}
|
45 |
<div
|
46 |
class="text-sm rounded md:text-smtext-gray-700 py-1 font-medium tracking-tight relative"
|
@@ -48,11 +48,14 @@
|
|
48 |
bind:this={boxEl}
|
49 |
>
|
50 |
{#if !collapsed}
|
51 |
-
<div
|
52 |
-
|
53 |
-
|
|
|
|
|
54 |
<Room />
|
55 |
<span> room </span>
|
|
|
56 |
<People />
|
57 |
<span> players </span>
|
58 |
</li>
|
@@ -72,6 +75,7 @@
|
|
72 |
</span>
|
73 |
<span>room {room.id} </span>
|
74 |
<span />
|
|
|
75 |
<span>{room.users_count} / {MAX_CAPACITY}</span>
|
76 |
</a>
|
77 |
</li>
|
@@ -91,6 +95,7 @@
|
|
91 |
<span>
|
92 |
room {selectedRoom?.id}
|
93 |
</span>
|
|
|
94 |
<People />
|
95 |
<span>
|
96 |
{selectedRoom?.users_count} / {MAX_CAPACITY}
|
@@ -120,8 +125,11 @@
|
|
120 |
<style lang="postcss" scoped>
|
121 |
.grid-row {
|
122 |
display: grid;
|
123 |
-
grid-template-columns: 0.5fr 2fr 0.5fr 2fr;
|
124 |
align-items: center;
|
125 |
justify-items: flex-start;
|
126 |
}
|
|
|
|
|
|
|
127 |
</style>
|
|
|
40 |
</script>
|
41 |
|
42 |
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
43 |
+
<div class="min-w-[20ch]">
|
44 |
{#if loadingRooms}
|
45 |
<div
|
46 |
class="text-sm rounded md:text-smtext-gray-700 py-1 font-medium tracking-tight relative"
|
|
|
48 |
bind:this={boxEl}
|
49 |
>
|
50 |
{#if !collapsed}
|
51 |
+
<div
|
52 |
+
class="absolute left-0 right-0 bottom-full rounded-xl bg-blue-600 px-1 overflow-hidden z-0"
|
53 |
+
>
|
54 |
+
<ul class="relative overflow-hidden overflow-y-scroll max-h-72 w-full x-scroll">
|
55 |
+
<li class="grid-row gap-2 pb-2 sticky top-0 py-2 bg-blue-600 font-semibold">
|
56 |
<Room />
|
57 |
<span> room </span>
|
58 |
+
<span />
|
59 |
<People />
|
60 |
<span> players </span>
|
61 |
</li>
|
|
|
75 |
</span>
|
76 |
<span>room {room.id} </span>
|
77 |
<span />
|
78 |
+
<span />
|
79 |
<span>{room.users_count} / {MAX_CAPACITY}</span>
|
80 |
</a>
|
81 |
</li>
|
|
|
95 |
<span>
|
96 |
room {selectedRoom?.id}
|
97 |
</span>
|
98 |
+
<span />
|
99 |
<People />
|
100 |
<span>
|
101 |
{selectedRoom?.users_count} / {MAX_CAPACITY}
|
|
|
125 |
<style lang="postcss" scoped>
|
126 |
.grid-row {
|
127 |
display: grid;
|
128 |
+
grid-template-columns: 0.5fr 2fr 1fr 0.5fr 2fr;
|
129 |
align-items: center;
|
130 |
justify-items: flex-start;
|
131 |
}
|
132 |
+
.grid-row span {
|
133 |
+
white-space: nowrap;
|
134 |
+
}
|
135 |
</style>
|
frontend/src/lib/Menu.svelte
CHANGED
@@ -14,7 +14,7 @@
|
|
14 |
<svelte:window
|
15 |
on:keyup|preventDefault|stopPropagation={(e) => e.key === 'Enter' && dispatch('prompt')}
|
16 |
/>
|
17 |
-
<div class="flex flex-col md:flex-row items-center justify-between px-12 gap-
|
18 |
<AboutButton
|
19 |
on:click={() => {
|
20 |
$toggleAbout = !$toggleAbout;
|
@@ -26,7 +26,7 @@
|
|
26 |
disabled={isLoading}
|
27 |
class="{isLoading
|
28 |
? 'cursor-wait'
|
29 |
-
: 'cursor-pointer'} order-first md:order-none text-3xl bg-blue-600 text-white px-6 py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl self-center flex items-center hover:saturate-150"
|
30 |
><span class="mr-3">π</span>Paint
|
31 |
<span
|
32 |
class="bg-blue-800 text-gray-300 rounded-lg px-2 py-0.5 text-base ml-4 hidden sm:flex items-center translate-y-[2px]"
|
|
|
14 |
<svelte:window
|
15 |
on:keyup|preventDefault|stopPropagation={(e) => e.key === 'Enter' && dispatch('prompt')}
|
16 |
/>
|
17 |
+
<div class="flex flex-col md:flex-row items-center justify-between px-12 gap-2 md:gap-0">
|
18 |
<AboutButton
|
19 |
on:click={() => {
|
20 |
$toggleAbout = !$toggleAbout;
|
|
|
26 |
disabled={isLoading}
|
27 |
class="{isLoading
|
28 |
? 'cursor-wait'
|
29 |
+
: 'cursor-pointer'} order-first md:order-none text-xl md:text-3xl bg-blue-600 text-white px-6 py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl self-center flex items-center hover:saturate-150"
|
30 |
><span class="mr-3">π</span>Paint
|
31 |
<span
|
32 |
class="bg-blue-800 text-gray-300 rounded-lg px-2 py-0.5 text-base ml-4 hidden sm:flex items-center translate-y-[2px]"
|