CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

Backend: Improve asynctask status feedback

Browse Source
This commit is contained in:
Raphael Michel
2020-07-07 10:42:06 +02:00
parent fc9e5166da
commit 640c05729b
2 changed files with 55 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/pretix/control/templates/pretixcontrol/base.html
View File

@@ -423,11 +423,16 @@
<div id="ajaxerr">
</div>
<div id="loadingmodal">
<i class="fa fa-cog big-rotating-icon"></i>
<h1>{% trans "We are processing your request …" %}</h1>
<p>
{% trans "If this takes longer than a few minutes, please contact us." %}
</p>
<div class="modal-card">
<div class="modal-card-icon">
<i class="fa fa-cog big-rotating-icon"></i>
</div>
<div class="modal-card-content">
<h3></h3>
<p class="text"></p>
<p class="status">{% trans "If this takes longer than a few minutes, please contact us." %}</p>
</div>
</div>
</div>
</body>
</html>

53
src/pretix/static/pretixcontrol/scss/main.scss
View File

@@ -221,7 +221,6 @@ body.loading #wrapper {
height: 100vh;
background: rgba(255, 255, 255, .7);
opacity: 0;
text-align: center;
z-index: 900000;
visibility: hidden;
padding: 10px;
@@ -232,14 +231,52 @@ body.loading #wrapper {
color: $brand-primary;
}
.big-rotating-icon {
-webkit-animation: fa-spin 8s infinite linear;
animation: fa-spin 8s infinite linear;
margin-top: 50px;
font-size: 200px;
color: $brand-primary;
.modal-card {
margin: 50px auto 0;
top: 50px;
width: 90%;
max-width: 600px;
background: white;
border-radius: $border-radius-large;
box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07);
padding: 20px;
min-height: 160px;
.modal-card-icon {
float: left;
width: 150px;
text-align: center;
.big-rotating-icon {
font-size: 120px;
margin: 0;
}
}
.modal-card-content {
margin-left: 160px;
text-align: left;
h3 {
margin-top: 0;
}
}
}
}
@media (max-width: 700px) {
#loadingmodal, #ajaxerr {
.modal-card {
.modal-card-icon {
float: none;
width: 100%;
}
.modal-card-content {
text-align: center;
margin-left: 0;
margin-top: 10px;
}
}
}
}
#ajaxerr {
background: rgba(236, 236, 236, .9);
}
@@ -680,4 +717,4 @@ h1 .label {
@import "../../pretixbase/scss/_rtl.scss";
@import "../../bootstrap/scss/_rtl.scss";
@import "_rtl.scss";
@import "_rtl.scss";