Backend: Improve asynctask status feedback

src/pretix/control/templates/pretixcontrol/base.html

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

src/pretix/static/pretixcontrol/scss/main.scss

@@ -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 {
+    .modal-card {
-        -webkit-animation: fa-spin 8s infinite linear;
+        margin: 50px auto 0;
-        animation: fa-spin 8s infinite linear;
+        top: 50px;
-        margin-top: 50px;
+        width: 90%;
-        font-size: 200px;
+        max-width: 600px;
-        color: $brand-primary;
+        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);
 }