kevinowino869/mitrobill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improvement

Browse Source 
just replace the save loading with css for better loading feature
This commit is contained in:
Focuslinkstech 2024-03-02 12:40:04 +01:00
parent a7f191f058
commit 9ab0b6a0fa
4 changed files with 64 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/ui/sections/footer.tpl
View File

@ -27,7 +27,7 @@
if (el.addEventListener) { // all browsers except IE before version 9
el.addEventListener("click", function() {
$(this).html(
`<span class="glyphicon glyphicon-refresh" role="status" aria-hidden="true"></span>`
`<span class="loading"></span>`
);
setTimeout(() => {
$(this).prop("disabled", true);
@ -37,7 +37,7 @@
if (el.attachEvent) { // IE before version 9
el.attachEvent("click", function() {
$(this).html(
`<span class="glyphicon glyphicon-refresh" role="status" aria-hidden="true"></span>`
`<span class="loading"></span>`
);
setTimeout(() => {
$(this).prop("disabled", true);

32
ui/ui/sections/header.tpl
View File

@ -57,8 +57,36 @@
max-height: 1em;
line-height: 1em;
}
</style>
.loading {
pointer-events: none;
opacity: 0.7;
}
.loading::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin-left: 10px;
border: 2px solid #fff;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
{if isset($xheader)}
{$xheader}
{/if}

4
ui/ui/sections/user-footer.tpl
View File

@ -85,7 +85,7 @@
if (el.addEventListener) { // all browsers except IE before version 9
el.addEventListener("click", function() {
$(this).html(
`<span class="glyphicon glyphicon-refresh" role="status" aria-hidden="true"></span>`
`<span class="loading"></span>`
);
setTimeout(() => {
$(this).prop("disabled", true);
@ -95,7 +95,7 @@
if (el.attachEvent) { // IE before version 9
el.attachEvent("click", function() {
$(this).html(
`<span class="glyphicon glyphicon-refresh" role="status" aria-hidden="true"></span>`
`<span class="loading"></span>`
);
setTimeout(() => {
$(this).prop("disabled", true);

31
ui/ui/sections/user-header.tpl
View File

@ -37,7 +37,36 @@
margin-top: 100px;
}
}
</style>
.loading {
pointer-events: none;
opacity: 0.7;
}
.loading::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin-left: 10px;
border: 2px solid #fff;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
{if isset($xheader)}
{$xheader}