mirrors/live_beats
1
0
Fork 0
mirror of https://github.com/fly-apps/live_beats.git synced 2024-11-21 23:50:59 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #34 from adamwiggall/updated-flash

Browse source 
Update flash, reduce markup and alignment improved
This commit is contained in:
Chris McCord 2022-02-03 12:06:13 -05:00 committed by GitHub
commit 20062ccaee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
lib/live_beats_web/live/live_helpers.ex
View file

@ -59,22 +59,14 @@ defmodule LiveBeatsWeb.LiveHelpers do
phx-click={JS.push("lv:clear-flash") |> JS.remove_class("fade-in-scale", to: "#flash") |> hide("#flash")} phx-click={JS.push("lv:clear-flash") |> JS.remove_class("fade-in-scale", to: "#flash") |> hide("#flash")}
phx-hook="Flash" phx-hook="Flash"
> >
<div class="flex"> <div class="flex justify-between items-center space-x-3 text-red-700">
<div class="flex-shrink-0"> <.icon name={:exclamation_circle} class="w-5 w-5"/>
<.icon name={:check_circle} solid /> <p class="flex-1 text-sm font-medium">
</div> <%= live_flash(@flash, @kind) %>
<div class="ml-3"> </p>
<p class="text-sm font-medium text-red-800"> <button type="button" class="inline-flex bg-red-50 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600">
<%= live_flash(@flash, @kind) %> <.icon name={:x} class="w-4 h-4" />
</p> </button>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex bg-red-50 rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600">
<.icon name={:x} solid />
</button>
</div>
</div>
</div> </div>
</div> </div>
<% end %> <% end %>
@ -91,22 +83,14 @@ defmodule LiveBeatsWeb.LiveHelpers do
phx-value-key="info" phx-value-key="info"
phx-hook="Flash" phx-hook="Flash"
> >
<div class="flex"> <div class="flex justify-between items-center space-x-3 text-green-700">
<div class="flex-shrink-0"> <.icon name={:check_circle} class="w-5 h-5"/>
<.icon name={:check_circle} solid /> <p class="flex-1 text-sm font-medium">
</div> <%= live_flash(@flash, @kind) %>
<div class="ml-3"> </p>
<p class="text-sm font-medium text-green-800"> <button type="button" class="inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600">
<%= live_flash(@flash, @kind) %> <.icon name={:x} class="w-4 h-4" />
</p> </button>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex bg-green-50 rounded-md p-1.5 text-green-500 hover:bg-green-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600">
<.icon name={:x} solid />
</button>
</div>
</div>
</div> </div>
</div> </div>
<% end %> <% end %>