livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2024-09-20 10:05:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Redesign flash message snackbars

Browse source
This commit is contained in:
Jonatan Kłosko 2021-10-27 17:04:33 +02:00
parent 394c6daef1
commit 386fe5b531
2 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/css/utilities.css
View file

@ -19,6 +19,10 @@
0 0 10px -5px rgba(0, 0, 0, 0.04); 0 0 10px -5px rgba(0, 0, 0, 0.04);
} }
.shadow-custom-1 {
box-shadow: 10px 5px 25px -8px rgba(0, 0, 0, 0.2);
}
.flip-horizontally { .flip-horizontally {
transform: scaleY(-1); transform: scaleY(-1);
} }

15
lib/livebook_web/templates/layout/live.html.heex
View file

@ -1,28 +1,29 @@
<main role="main" class="flex-grow flex flex-col h-screen"> <main role="main" class="flex-grow flex flex-col h-screen">
<div class="fixed right-5 bottom-5 z-50 flex flex-col space-y-3"> <div class="fixed right-8 bottom-5 z-50 flex flex-col space-y-3">
<%= if live_flash(@flash, :info) do %> <%= if live_flash(@flash, :info) do %>
<div class="flex items-center space-x-2 rounded-lg px-4 py-2 bg-blue-100 text-blue-600 hover:opacity-75 cursor-pointer" role="alert" <div class="shadow-custom-1 max-w-2xl flex items-center space-x-3 rounded-lg px-4 py-2 border-l-4 rounded-l-none border-blue-500 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-500 cursor-pointer" role="alert"
phx-click="lv:clear-flash" phx-click="lv:clear-flash"
phx-value-key="info"> phx-value-key="info">
<.remix_icon icon="information-line" class="text-2xl" /> <.remix_icon icon="information-line" class="text-2xl text-blue-500" />
<span class="whitespace-pre-wrap"><%= live_flash(@flash, :info) %></span> <span class="whitespace-pre-wrap"><%= live_flash(@flash, :info) %></span>
</div> </div>
<% end %> <% end %>
<%= if live_flash(@flash, :warning) do %> <%= if live_flash(@flash, :warning) do %>
<div class="flex items-center space-x-2 rounded-lg px-4 py-2 bg-yellow-100 text-yellow-600 hover:opacity-75 cursor-pointer" role="alert" <div class="shadow-custom-1 max-w-2xl flex items-center space-x-3 rounded-lg px-4 py-2 border-l-4 rounded-l-none border-yellow-300 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-500 cursor-pointer" role="alert"
phx-click="lv:clear-flash" phx-click="lv:clear-flash"
phx-value-key="warning"> phx-value-key="warning">
<.remix_icon icon="error-warning-line" class="text-2xl" /> <.remix_icon icon="error-warning-line" class="text-2xl text-yellow-400" />
<span class="whitespace-pre-wrap"><%= live_flash(@flash, :warning) %></span> <span class="whitespace-pre-wrap"><%= live_flash(@flash, :warning) %></span>
</div> </div>
<% end %> <% end %>
<%= if live_flash(@flash, :error) do %> <%= if live_flash(@flash, :error) do %>
<div class="flex items-center space-x-2 rounded-lg px-4 py-2 bg-red-100 text-red-400 hover:opacity-75 cursor-pointer" role="alert" <div class="shadow-custom-1 max-w-2xl flex items-center space-x-3 rounded-lg px-4 py-2 border-l-4 rounded-l-none border-red-500 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-500 cursor-pointer" role="alert"
phx-click="lv:clear-flash" phx-click="lv:clear-flash"
phx-value-key="error"> phx-value-key="error">
<.remix_icon icon="error-warning-line" class="text-2xl" /> <.remix_icon icon="close-circle-line" class="text-2xl text-red-500" />
<span class="whitespace-pre-wrap"><%= live_flash(@flash, :error) %></span> <span class="whitespace-pre-wrap"><%= live_flash(@flash, :error) %></span>
</div> </div>
<% end %> <% end %>