bit-badger/myWebLog
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 11 Activity

Add loading indicator for admin theme (#25)

Browse Source
This commit is contained in:
Daniel J. Summers 2022-07-26 22:34:19 -04:00
parent b1ca48c2c5
commit a8386d6c97
3 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/admin-theme/_layout.liquid
View File

@ -51,6 +51,7 @@
</nav> </nav>
</header> </header>
<main class="mx-3 mt-3"> <main class="mx-3 mt-3">
<div class="load-overlay p-5" id="loadOverlay"><h1 class="p-3">Loading&hellip;</h1></div>
<div class="messages mt-2" id="msgContainer"> <div class="messages mt-2" id="msgContainer">
{% for msg in messages %} {% for msg in messages %}
<div role="alert" class="alert alert-{{ msg.level }} alert-dismissible fade show"> <div role="alert" class="alert alert-{{ msg.level }} alert-dismissible fade show">

2
src/admin-theme/layout.liquid
View File

@ -8,7 +8,7 @@
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="{{ "themes/admin/admin.css" | relative_link }}"> <link rel="stylesheet" href="{{ "themes/admin/admin.css" | relative_link }}">
</head> </head>
<body hx-boost="true"> <body hx-boost="true" hx-indicator="#loadOverlay">
{% include_template "_layout" %} {% include_template "_layout" %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"

22
src/admin-theme/wwwroot/admin.css
View File

@ -92,3 +92,25 @@ a.text-danger:link:hover, a.text-danger:visited:hover {
border-radius: .5rem; border-radius: .5rem;
padding: .5rem; padding: .5rem;
} }
.load-overlay {
position: fixed;
background-color: rgba(0, 0, 0, .25);
color: white;
z-index: 100;
display: none;
top: 55px;
left: 0;
width: 100%;
height: 100%;
transition: ease-in-out .5s;
}
.load-overlay h1 {
background-color: rgba(0, 0, 0, .75);
height: fit-content;
border: solid 6px white;
border-radius: .5rem;
}
.load-overlay.htmx-request {
display: flex;
flex-flow: row;
}