Commit e808f751 by Timothy J Warren

Add overlay during update request on list pages, resolves #31

parent 8bfc9fcc
Pipeline #304 passed with stage
in 4 minutes 34 seconds
<section id="loading-shadow" hidden="hidden">
<div class="loading-wrapper">
<div class="loading-content">
<h3>Updating List Item...</h3>
<div class="cssload-loader">
<div class="cssload-inner cssload-one"></div>
<div class="cssload-inner cssload-two"></div>
<div class="cssload-inner cssload-three"></div>
</div>
</div>
</div>
</section>
<script defer="defer" src="<?= $urlGenerator->assetUrl('js.php/g/event') ?>"></script>
</body>
</html>
\ No newline at end of file
......@@ -649,4 +649,40 @@ a:hover, a:active {
.cover_streaming_link .streaming-logo {
width: 20px;
height: 20px;
}
\ No newline at end of file
}
/* ----------------------------------------------------------------------------
Loading overlay
-----------------------------------------------------------------------------*/
#loading-shadow {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 500;
}
#loading-shadow .loading-wrapper {
position: fixed;
z-index: 501;
top: 0;
left: 0;
width: 100%;
height: 100%;
display:flex;
align-items: center;
justify-content: center;
}
#loading-shadow .loading-content {
position: relative;
color: #fff
}
.loading-content .cssload-inner.cssload-one,
.loading-content .cssload-inner.cssload-two,
.loading-content .cssload-inner.cssload-three {
border-color: #fff
}
\ No newline at end of file
......@@ -20,7 +20,7 @@ use function Amp\wait;
use Amp\Artax\{Client, FormBody, Request};
use Aviat\Ion\Json;
// Include guzzle
// Include Amp and Artax
require_once('../vendor/autoload.php');
//Creative rewriting of /g/groupname to ?g=groupname
......
......@@ -32,6 +32,8 @@
data.data.status = 'completed';
}
_.show(_.$('#loading-shadow')[0]);
// okay, lets actually make some changes!
_.ajax(_.url('/anime/update'), {
data,
......@@ -42,11 +44,14 @@
_.hide(parentSel);
}
_.hide(_.$('#loading-shadow')[0]);
_.showMessage('success', `Successfully updated ${title}`);
_.$('.completed_number', parentSel)[0].textContent = ++watchedCount;
_.scrollToTop();
},
error: (xhr, errorType, error) => {
_.hide(_.$('#loading-shadow')[0]);
_.showMessage('error', `Failed to update ${title}. `);
_.scrollToTop();
}
......
......@@ -40,6 +40,8 @@
// Update the total count
data.data.progress = ++completed;
_.show(_.$('#loading-shadow')[0]);
_.ajax(_.url('/manga/update'), {
data,
dataType: 'json',
......@@ -50,12 +52,15 @@
_.hide(parentSel);
}
_.hide(_.$('#loading-shadow')[0]);
_.$(`.${type}s_read`, parentSel)[0].textContent = completed;
_.showMessage('success', `Sucessfully updated ${mangaName}`);
_.scrollToTop();
},
error: () => {
_.showMessage('error', `Failed to updated ${mangaName}`);
_.hide(_.$('#loading-shadow')[0]);
_.showMessage('error', `Failed to update ${mangaName}`);
_.scrollToTop();
}
});
......
......@@ -6,8 +6,8 @@
"devDependencies": {
"cssnano": "^3.10.0",
"postcss-cachify": "^1.3.1",
"postcss-cssnext": "^2.9.0",
"postcss-import": "^9.0.0",
"postcss-cssnext": "^3.0.0",
"postcss-import": "^10.0.0",
"watch": "^1.0.2"
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment