Mirrors/Claper
1
0
Fork 0
mirror of https://github.com/ClaperCo/Claper.git synced 2025-12-16 11:57:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve poll results ui

Browse Source
This commit is contained in:
Alex
2024-08-31 23:55:47 +02:00
parent bf563252fe
commit 4bb10c097d
4 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -3,6 +3,7 @@
### Fixes and improvements
- Fix OIDC to allow only client_secret_basic and client_secret_post auth methods
- Improve poll results UI
## v2.1.0

20
lib/claper_web/live/event_live/poll_component.ex
View File

@@ -57,13 +57,13 @@ defmodule ClaperWeb.EventLive.PollComponent do
<%= if (length @poll.poll_opts) > 0 do %>
<%= for {opt, idx} <- Enum.with_index(@poll.poll_opts) do %>
<%= if (length @current_poll_vote) > 0 do %>
<button class="bg-gray-500 px-3 py-2 rounded-full flex justify-between items-center relative text-white">
<button class="bg-gray-500 px-3 py-2 rounded-3xl flex justify-between items-center relative text-white">
<div
style={"width: #{if @show_results, do: opt.percentage, else: 0}%;"}
class={"bg-gradient-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-full #{if opt.percentage == "100", do: "rounded-r-full"}"}
class={"bg-gradient-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-3xl #{if opt.percentage == "100", do: "rounded-r-3xl"}"}
>
</div>
<div class="flex space-x-3 z-10 text-left">
<div class="flex space-x-3 items-center z-10 text-left">
<%= if (length Enum.filter(@current_poll_vote, fn(vote) -> vote.poll_opt_id == opt.id end)) > 0 do %>
<%= if @poll.multiple do %>
<span class="h-5 w-5 mt-0.5 point-select bg-white"></span>
@@ -78,7 +78,7 @@ defmodule ClaperWeb.EventLive.PollComponent do
</span>
<% end %>
<% end %>
<span class="flex-1"><%= opt.content %></span>
<span class="flex-1 pr-2"><%= opt.content %></span>
</div>
<span :if={@show_results} class="text-sm z-10">
<%= opt.percentage %>% (<%= opt.vote_count %>)
@@ -89,14 +89,14 @@ defmodule ClaperWeb.EventLive.PollComponent do
id={"poll-opt-#{idx}"}
phx-click="select-poll-opt"
phx-value-opt={idx}
class="bg-gray-500 px-3 py-2 rounded-full flex justify-between items-center relative text-white"
class="bg-gray-500 px-3 py-2 flex justify-between items-center rounded-3xl relative text-white"
>
<div
style={"width: #{if @show_results, do: opt.percentage, else: 0}%;"}
class={"bg-gradient-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-full #{if opt.percentage == "100", do: "rounded-r-full"}"}
class={"bg-gradient-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-3xl #{if opt.percentage == "100", do: "rounded-r-3xl"}"}
>
</div>
<div class="flex space-x-3 z-10 text-left">
<div class="flex space-x-3 items-center z-10 text-left">
<%= if Enum.member?(@selected_poll_opt, "#{idx}") do %>
<%= if @poll.multiple do %>
<span class="h-5 w-5 mt-0.5 point-select bg-white"></span>
@@ -111,7 +111,7 @@ defmodule ClaperWeb.EventLive.PollComponent do
</span>
<% end %>
<% end %>
<span class="flex-1"><%= opt.content %></span>
<span class="flex-1 pr-2"><%= opt.content %></span>
</div>
<span :if={@show_results} class="text-sm z-10">
<%= opt.percentage %>% (<%= opt.vote_count %>)
@@ -123,14 +123,14 @@ defmodule ClaperWeb.EventLive.PollComponent do
</div>
<%= if (length @selected_poll_opt) == 0 || (length @current_poll_vote) > 0 do %>
<button class="px-3 py-2 text-white font-semibold bg-gray-500 rounded-md my-5 cursor-default">
<button class="px-3 py-2 text-white font-semibold bg-gray-500 rounded-md mt-3 mb-12 cursor-default">
<%= gettext("Vote") %>
</button>
<% else %>
<button
phx-click="vote"
phx-disable-with="..."
class="px-3 py-2 text-white font-semibold bg-primary-500 hover:bg-primary-600 rounded-md my-5"
class="px-3 py-2 text-white font-semibold bg-primary-500 hover:bg-primary-600 rounded-md mt-3 mb-12"
>
<%= gettext("Vote") %>
</button>

6
lib/claper_web/live/event_live/presenter.html.heex
View File

@@ -56,14 +56,14 @@
<div class={"#{if @iframe, do: "space-y-5", else: "space-y-8"} flex flex-col"}>
<%= if (length @current_poll.poll_opts) > 0 do %>
<%= for opt <- @current_poll.poll_opts do %>
<div class={"#{if @iframe, do: "py-1", else: "py-4"} bg-gray-500 px-6 rounded-full flex justify-between items-center relative text-white"}>
<div class={"#{if @iframe, do: "py-1", else: "py-4"} bg-gray-500 px-6 rounded-3xl flex justify-between items-center relative text-white"}>
<div
style={"width: #{opt.percentage}%;"}
class="bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full h-full absolute left-0 transition-all"
class="bg-gradient-to-r from-primary-500 to-secondary-500 rounded-3xl h-full absolute left-0 transition-all"
>
</div>
<div class="flex space-x-3 z-10 text-left">
<span class={"#{if @iframe, do: "text-base", else: "text-2xl"} flex-1 font-bold"}>
<span class={"#{if @iframe, do: "text-base", else: "text-2xl"} flex-1 font-bold pr-2"}>
<%= opt.content %>
</span>
</div>

8
lib/claper_web/live/stat_live/index.html.heex
View File

@@ -191,15 +191,15 @@
else: 0 %>
<button
id={"poll-opt-#{idx}"}
class="bg-gray-500 px-3 py-2 rounded-full flex justify-between items-center relative text-white"
class="bg-gray-500 px-3 py-2 rounded-3xl flex justify-between items-center relative text-white"
>
<div
style={"width: #{percentage}%;"}
class={"bg-gradient-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-full #{if percentage == "100", do: "rounded-r-full"}"}
class={"bg-gradient-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-3xl #{if percentage == "100", do: "rounded-r-3xl"}"}
>
</div>
<div class="flex space-x-3 z-10 text-left">
<span class="flex-1"><%= opt.content %></span>
<div class="flex space-x-3 items-center z-10 text-left">
<span class="flex-1 pr-2"><%= opt.content %></span>
</div>
<span class="text-sm z-10"><%= percentage %>% (<%= opt.vote_count %>)</span>
</button>