Tsumanu/actix-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add loading animation

Browse Source
This commit is contained in:
Manuel Gugger 2022-10-06 15:08:00 +02:00
parent 0b293b5807
commit aacc610926
3 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
templates/base.html
View File

@ -49,9 +49,28 @@
});
</script>
<style>
.loader-wrapper {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
/*background: rgba(120,120,120,.2);*/
display: flex;
justify-content: center;
align-items: center;
z-index: 5;
pointer-events: none
}
</style>
</head>
<body>
<div id="loading" class="loader-wrapper htmx-indicator">
<div class="loader is-size-1"></div>
</div>
{% include "header.html" %}
<div class="container is-fluid">
{% block content %}

4
templates/create_or_edit.html
View File

@ -1,7 +1,7 @@
{% extends "base.html" %}
{% block content %}
<form method="post" enctype="multipart/form-data">
<form hx-boost="true" hx-indicator="#loading" hx-encoding="multipart/form-data" method="post" enctype="multipart/form-data">
{% for model_field in view_model.fields -%}
<div class="field">
<label class="{{ model_field | get_html_input_type }}" for="{{ model_field.field_name }}">
@ -26,7 +26,7 @@
{%- endfor %}
<div class="field is-grouped">
<div class="control">
<button class="button is-link" type="submit">Save</button>
<button class="button is-link" type="submit">Save</i></button>
</div>
<div class="control">
<a class="button is-link is-light" href="{{ list_link }}">Cancel</a>

4
templates/list.html
View File

@ -35,7 +35,7 @@
placeholder="Search"
hx-get="/admin/{{ entity_name }}/list?render_partial=true&entities_per_page={{ entities_per_page }}&page={{ page }}"
hx-trigger="keyup changed delay:500ms, search" hx-target="#{{ entity_name }}table"
hx-indicator=".htmx-indicator">
hx-indicator="#loading">
<span class="icon is-small is-left">
<i class="fas fa-search"></i>
</span>
@ -66,7 +66,7 @@
<div id="{{ entity_name }}table">
<form id="checked-rows">
<table class="table is-fullwidth is-hoverable">
<table class="table is-fullwidth is-hoverable is-striped">
<thead>
<tr>
<th>