Skip to content

Commit

Permalink
Add active boost animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@ruilopesm
ruilopesm committed Mar 28, 2023
1 parent d31a7de commit 1377d6b
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 71 deletions.
4 changes: 2 additions & 2 deletions lib/parzival_web/components/boost.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ defmodule ParzivalWeb.Components.Boost do
def render(assigns) do
~H"""
<div class="w-12 h-12">
<%= if ! assigns.item.expires_at do %>
<%= if !assigns.item.expires_at do %>
<%= if assigns.item.boost.type in [:exp, :tokens] do %>
<button phx-click="activate-boost" phx-value-item_id={assigns.item.id} phx-target={@myself} data-confirm={"Are you sure you wanna activate #{assigns.item.boost.name}? #{assigns.item.boost.description}."}>
<img src={Uploaders.BoostImage.url({assigns.item.boost.image, assigns.item.boost}, :original)} class="object-cover object-center w-full h-full lg:w-full lg:h-full hover:opacity-70" />
Expand All @@ -18,8 +18,8 @@ defmodule ParzivalWeb.Components.Boost do
<% end %>
<% else %>
<div class="relative">
<span class="absolute w-full h-full bg-red-500 opacity-75 animate-ping" />
<img src={Uploaders.BoostImage.url({assigns.item.boost.image, assigns.item.boost}, :original)} class="object-cover object-center w-full h-full lg:w-full lg:h-full" />
<div style={"height: #{100 - round(Timex.diff(assigns.item.expires_at, NaiveDateTime.utc_now()) / 36_000_000)}%"} class="absolute top-0 w-12 bg-black opacity-50" />
</div>
<% end %>
</div>
Expand Down
136 changes: 67 additions & 69 deletions lib/parzival_web/live/backoffice/gamification/task_live/form_component.html.heex
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,77 @@
<div>
<.form let={_f} for={:taskuser} id="taskuser-form" phx-target={@myself} phx-submit="save">
<div class="min-h-full bg-white border-r border-gray-200">
<div class="pt-5 pr-6 pb-5 pl-4 border-gray-200 sm:pl-6 lg:pl-8 xl:pt-6 xl:pl-6 border-y">
<div class="flex justify-between items-center h-10">
<h1 class="flex-1 text-lg font-medium">Task</h1>
<%= if @current_user.role in [:staff, :admin] do %>
<div class="flex flex-row gap-x-4">
<%= if not @is_completed? do %>
<%= submit do %>
<div type="button" class="inline-flex justify-center items-center py-2 px-4 text-sm font-medium text-white rounded-md border border-transparent shadow-sm cursor-pointer xl:w-full bg-secondary hover:bg-primary" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
Redeem task
</div>
<% end %>
<.form let={_f} for={:taskuser} id="taskuser-form" phx-target={@myself} phx-submit="save">
<div class="min-h-full bg-white border-r border-gray-200">
<div class="pt-5 pr-6 pb-5 pl-4 border-gray-200 sm:pl-6 lg:pl-8 xl:pt-6 xl:pl-6 border-y">
<div class="flex justify-between items-center h-10">
<h1 class="flex-1 text-lg font-medium">Task</h1>
<%= if @current_user.role in [:staff, :admin] do %>
<div class="flex flex-row gap-x-4">
<%= if not @is_completed? do %>
<%= submit do %>
<div type="button" class="inline-flex justify-center items-center py-2 px-4 text-sm font-medium text-white rounded-md border border-transparent shadow-sm cursor-pointer xl:w-full bg-secondary hover:bg-primary" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
Redeem task
</div>
<% end %>
</div>
<% end %>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
<div class="flex flex-col py-6 px-4 mx-auto w-full border-b border-gray-200 sm:px-6 lg:px-8">
<div>
<%= live_redirect("< Back", to: Routes.admin_scanner_index_path(@socket, :index), class: "hover:underline inline-flex items-center justify-center whitespace-nowrap") %>
</div>
<div class="flex flex-col py-6 px-4 mx-auto w-full border-b border-gray-200 sm:px-6 lg:px-8">
<div class="flex flex-col gap-4 justify-between mt-6 text-gray-400">
<h1 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl">
<%= @task.title %>
</h1>
<div>
<%= live_redirect("< Back", to: Routes.admin_scanner_index_path(@socket, :index), class: "hover:underline inline-flex items-center justify-center whitespace-nowrap") %>
<p class="text-base font-medium text-black sm:text-lg">
Description
</p>
<span an class="mt-2 text-sm md:text-base">
<%= @task.description %>
</span>
</div>
<div class="flex flex-col gap-4 justify-between mt-6 text-gray-400">
<h1 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl">
<%= @task.title %>
</h1>
<div>
<p class="text-base font-medium text-black sm:text-lg">
Description
</p>
<span an class="mt-2 text-sm md:text-base">
<%= @task.description %>
</span>
</div>
<div>
<p class="text-base text-black sm:text-lg">
Rewards
</p>
<span class="mt-2 text-sm sm:text-base">
💰 <%= @task.tokens %>
</span>
<span class="ml-4 text-sm sm:text-base">
<%= @task.exp %> EXP
</span>
</div>
<div>
<p class="text-base text-black sm:text-lg">
Rewards
</p>
<span class="mt-2 text-sm sm:text-base">
💰 <%= @task.tokens %>
</span>
<span class="ml-4 text-sm sm:text-base">
<%= @task.exp %> EXP
</span>
</div>
</div>
<div class="flex flex-col mx-auto w-full">
<div class="flex flex-row justify-between items-center py-6 px-4 border-b border-gray-200 sm:px-6 lg:px-8">
<h2 class="text-lg font-medium sm:text-xl">
Redeeming task for user
</h2>
</div>
<div>
<%= live_redirect to: Routes.profile_show_path(@socket, :show, @attendee) do %>
<div class="flex flex-row gap-x-2 items-center py-2 px-4 w-full h-20 rounded-xl border-b border-gray-200 hover:bg-gray-50">
<div class="flex-shrink-0 w-14 h-14">
<span class="inline-flex justify-center items-center w-14 h-14 rounded-full bg-secondary">
<span class="text-xl font-medium leading-none text-white">
<%= extract_initials(@attendee.name) %>
</span>
</span>
</div>
<div class="flex overflow-hidden flex-col w-full">
<span class="inline-block overflow-hidden w-full text-base whitespace-nowrap text-ellipsis">
<%= @attendee.name %>
</span>
<span class="text-sm font-light text-gray-400">
Missions completed: <%= Enum.count(@attendee.missions) %>
</div>
<div class="flex flex-col mx-auto w-full">
<div class="flex flex-row justify-between items-center py-6 px-4 border-b border-gray-200 sm:px-6 lg:px-8">
<h2 class="text-lg font-medium sm:text-xl">
Redeeming task for user
</h2>
</div>
<div>
<%= live_redirect to: Routes.profile_show_path(@socket, :show, @attendee) do %>
<div class="flex flex-row gap-x-2 items-center py-2 px-4 w-full h-20 rounded-xl border-b border-gray-200 hover:bg-gray-50">
<div class="flex-shrink-0 w-14 h-14">
<span class="inline-flex justify-center items-center w-14 h-14 rounded-full bg-secondary">
<span class="text-xl font-medium leading-none text-white">
<%= extract_initials(@attendee.name) %>
</span>
</div>
</span>
</div>
<% end %>
</div>
<div class="flex overflow-hidden flex-col w-full">
<span class="inline-block overflow-hidden w-full text-base whitespace-nowrap text-ellipsis">
<%= @attendee.name %>
</span>
<span class="text-sm font-light text-gray-400">
Missions completed: <%= Enum.count(@attendee.missions) %>
</span>
</div>
</div>
<% end %>
</div>
</div>
</.form>
</div>
</div>
</.form>

0 comments on commit 1377d6b

Please sign in to comment.