shibao/cannery
shibao
/
cannery
1
2
Fork 1
Code Issues 11 Pull Requests Projects 1 Releases 33 Wiki Activity

add liveview loading and reconnection screen

This commit is contained in:
shibao 2022-02-18 17:43:08 -05:00
parent f0589348cc
commit 736cd3ab57
2 changed files with 44 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/css/app.scss
View File

@ -16,6 +16,24 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
scrollbar-color: rgba(161, 161, 170, var(--tw-bg-opacity)) white;
}
.fa-fade {
animation: pulse 1s ease-in-out 0s infinite alternate;
}
@keyframes pulse {
0% { scale: 0.95; opacity: 0.5; }
100% { scale: 1.0; opacity: 1; }
}
.phx-connected > #disconnect, #loading {
opacity: 0 !important;
pointer-events: none;
}
.phx-loading:not(.phx-error) > #loading, .phx-error > #disconnect {
opacity: 0.95 !important;
}
/* Alerts and form errors used by phx.new */
.alert {
padding: 15px;

26
lib/cannery_web/templates/layout/live.html.heex
View File

@ -26,3 +26,29 @@
<%= @inner_content %>
</div>
</main>
<div
id="loading"
class="absolute opacity-0 top-0 left-0 w-screen h-screen bg-white z-50
flex flex-col justify-center items-center space-y-4
transition-opacity ease-in-out duration-500"
>
<h1 class="title text-2xl title-primary-500">
<%= gettext("Loading...") %>
</h1>
<i class="fas fa-3x fa-spin fa-cog"></i>
</div>
<div
id="disconnect"
class="absolute opacity-0 top-0 left-0 w-screen h-screen bg-white z-50
flex flex-col justify-center items-center space-y-4
transition-opacity ease-in-out duration-500"
>
<h1 class="title text-2xl title-primary-500">
<%= gettext("Reconnecting...") %>
</h1>
<i class="fas fa-3x fa-fade fa-satellite-dish"></i>
</div>