Skip to content

Commit c13b233

Browse files
mickel8mickel8
committed
Fix div hidding
1 parent 162ec98 commit c13b233

File tree

1 file changed

+45
-38
lines changed

1 file changed

+45
-38
lines changed

‎lib/live_ex_webrtc/publisher.ex

Lines changed: 45 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -206,22 +206,26 @@ defmodule LiveExWebRTC.Publisher do
206206
<div class="w-full flex flex-col gap-4">
207207
<div
208208
id="lex-media-devices-wrapper"
209-
phx-click={
210-
Phoenix.LiveView.JS.toggle_class("hidden", to: "#lex-media-devices")
211-
|> Phoenix.LiveView.JS.toggle_class("rotate-180",
212-
to: "#lex-media-devices-wrapper .chevron"
213-
)
214-
}
215209
phx-update="ignore"
216-
class="px-4 py-3 cursor-pointer bg-brand/10 rounded-md border border-brand/30"
210+
class="cursor-pointer bg-brand/10 rounded-md border border-brand/30"
217211
>
218-
<div class="flex items-center justify-between">
219-
<div class="font-bold text-[#0d0d0d] py-2.5">Devices</div>
212+
<div
213+
phx-click={
214+
Phoenix.LiveView.JS.toggle_class("hidden", to: "#lex-media-devices")
215+
|> Phoenix.LiveView.JS.toggle_class("rotate-180",
216+
to: "#lex-media-devices-wrapper .chevron"
217+
)
218+
}
219+
class="px-4 py-3 flex items-center justify-between"
220+
>
221+
<div class="font-bold text-[#0d0d0d] py-2.5">
222+
Devices
223+
</div>
220224
<div class="chevron transition-all duration-300">
221225
<.icon name="hero-chevron-down" />
222226
</div>
223227
</div>
224-
<div id="lex-media-devices" class="hidden text-[#606060] flex flex-col gap-6 py-2.5">
228+
<div id="lex-media-devices" class="hidden text-[#606060] flex flex-col gap-6 px-4 pb-3">
225229
<div class="flex gap-2.5 items-center">
226230
<label for="lex-audio-devices" class="">Audio Device</label>
227231
<select
@@ -242,22 +246,24 @@ defmodule LiveExWebRTC.Publisher do
242246
</div>
243247
<div
244248
id="lex-audio-settings-wrapper"
245-
phx-click={
246-
Phoenix.LiveView.JS.toggle_class("hidden", to: "#lex-audio-settings")
247-
|> Phoenix.LiveView.JS.toggle_class("rotate-180",
248-
to: "#lex-audio-settings-wrapper .chevron"
249-
)
250-
}
251249
phx-update="ignore"
252-
class="px-4 py-3 cursor-pointer bg-brand/10 rounded-md border border-brand/30"
250+
class="cursor-pointer bg-brand/10 rounded-md border border-brand/30"
253251
>
254-
<div class="flex items-center justify-between">
252+
<div
253+
phx-click={
254+
Phoenix.LiveView.JS.toggle_class("hidden", to: "#lex-audio-settings")
255+
|> Phoenix.LiveView.JS.toggle_class("rotate-180",
256+
to: "#lex-audio-settings-wrapper .chevron"
257+
)
258+
}
259+
class="px-4 py-3 flex items-center justify-between"
260+
>
255261
<div class="font-bold text-[#0d0d0d] py-2.5">Audio Settings</div>
256262
<div class="chevron transition-all duration-300">
257263
<.icon name="hero-chevron-down" />
258264
</div>
259265
</div>
260-
<div id="lex-audio-settings" class="hidden text-[#606060] flex flex-col gap-6 py-2.5">
266+
<div id="lex-audio-settings" class="hidden text-[#606060] flex flex-col gap-6 px-4 pb-3">
261267
<div class="flex gap-2.5 items-center">
262268
<label for="lex-echo-cancellation">Echo Cancellation</label>
263269
<input type="checkbox" id="lex-echo-cancellation" class="rounded-full" checked />
@@ -281,26 +287,27 @@ defmodule LiveExWebRTC.Publisher do
281287
</div>
282288
<div
283289
id="lex-video-settings-wrapper"
284-
phx-click={
285-
Phoenix.LiveView.JS.toggle_class("hidden",
286-
to: "#lex-video-settings"
287-
)
288-
|> Phoenix.LiveView.JS.toggle_class("rotate-180",
289-
to: "#lex-video-settings-wrapper .chevron"
290-
)
291-
}
292-
phx-update="ignore"
293-
class="px-4 py-3 cursor-pointer bg-brand/10 rounded-md border border-brand/30"
290+
class="cursor-pointer bg-brand/10 rounded-md border border-brand/30"
294291
>
295-
<div class="flex items-center justify-between">
292+
<div
293+
phx-click={
294+
Phoenix.LiveView.JS.toggle_class("hidden",
295+
to: "#lex-video-settings"
296+
)
297+
|> Phoenix.LiveView.JS.toggle_class("rotate-180",
298+
to: "#lex-video-settings-wrapper .chevron"
299+
)
300+
}
301+
class="px-4 py-3 flex items-center justify-between"
302+
>
296303
<div class="font-bold text-[#0d0d0d] py-2.5">Video Settings</div>
297304
<div class="chevron transition-all duration-300">
298305
<.icon name="hero-chevron-down" />
299306
</div>
300307
</div>
301308
<div
302309
id="lex-video-settings"
303-
class="hidden transition-all duration-700 text-[#606060] flex flex-col gap-6 py-2.5"
310+
class="hidden transition-all duration-700 text-[#606060] flex flex-col gap-6 px-4 pb-3"
304311
>
305312
<div id="lex-resolution" class="flex gap-2.5 items-center">
306313
<label for="lex-width">Width</label>
@@ -327,6 +334,13 @@ defmodule LiveExWebRTC.Publisher do
327334
class="rounded-lg disabled:text-gray-400 disabled:border-gray-400 focus:border-brand focus:outline-none focus:ring-0"
328335
/>
329336
</div>
337+
<button
338+
id="lex-video-apply-button"
339+
class="rounded-lg px-10 py-2.5 bg-brand disabled:bg-brand/50 hover:bg-brand/90 text-white font-bold"
340+
disabled
341+
>
342+
Apply
343+
</button>
330344
<div class="flex gap-2.5 items-center">
331345
<label for="lex-bitrate">Max Bitrate (kbps)</label>
332346
<input
@@ -336,13 +350,6 @@ defmodule LiveExWebRTC.Publisher do
336350
class="rounded-lg disabled:text-gray-400 disabled:border-gray-400 focus:border-brand focus:outline-none focus:ring-0"
337351
/>
338352
</div>
339-
<button
340-
id="lex-video-apply-button"
341-
class="rounded-lg px-10 py-2.5 bg-brand disabled:bg-brand/50 hover:bg-brand/90 text-white font-bold"
342-
disabled
343-
>
344-
Apply
345-
</button>
346353
<.form for={@publisher.form} phx-change="change_simulcast" phx-update="replace">
347354
<.input type="checkbox" field={@publisher.form[:simulcast]} label="Simulcast" />
348355
</.form>

0 commit comments

Comments
 (0)