Procházet zdrojové kódy

load entire page incrementally

Daniel Sheffield před 1 rokem
rodič
revize
a2b57758eb
2 změnil soubory, kde provedl 19 přidání a 32 odebrání
  1. 19 7
      app/rest/templates/loading.tpl
  2. 0 25
      app/rest/templates/trend.tpl

+ 19 - 7
app/rest/templates/loading.tpl

@@ -1,23 +1,38 @@
 % setdefault("start", False)
 % setdefault("end", False)
+% setdefault("progress", dict())
+% setdefault("done", False)
 % if start:
 <html>
   <head>
+    <title>{{title}}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous"/>
     <link rel="stylesheet" href="https://shandan.one/css/grids-responsive-min.css"/>
     <link rel="stylesheet" href="https://shandan.one/css/responsive-visibility-collapse.css"/>
     <link rel="stylesheet" href="/grocery/static/cloud-gears.css"/>
     <style>
+html {
+  --scrollbarBG: #333333;
+  --thumbBG: #080808;
+}
+svg {
+  max-height: min(100vh, calc(100vw * 9 / 16));
+  max-width: calc(100vw - 2em);
+}
 body {
   background-color: #080808;
   color: #cccccc;
+  text-align: center;
 }
 .loader-container {
   position: absolute;
   left: 45vw;
   top: 45vh;
 }
+.loader-container:has(+ .done) {
+  display: none;
+}
 div.progress {
   display:grid;
   grid-template-columns: max-content max-content;
@@ -37,13 +52,10 @@ div.progress:has(+ .done) label:after {
 }
     </style>
   </head>
-  <body>
+  <body align="center">
     <div class="loader-container">
 % end
-% if not end:
-%   include('progress', **progress)
+% include('progress', **progress, done=done)
 % if end:
-    <meta http-equiv="Refresh" content="0;" />
-  </body>
-</html>
-% end
+    </div>
+    <div class="done"/>

+ 0 - 25
app/rest/templates/trend.tpl

@@ -1,28 +1,3 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <style>
-html {
-  --scrollbarBG: #333333;
-  --thumbBG: #080808;
-}
-body {
-  background-color: #080808;
-  color: #cccccc;
-}
-
-svg {
-  max-height: min(100vh, calc(100vw * 9 / 16));
-  max-width: calc(100vw - 2em);
-}
-        </style>
-        <title>Trend</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1"/>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous"/>
-        <link rel="stylesheet" href="https://shandan.one/css/grids-responsive-min.css"/>
-        <link rel="stylesheet" href="https://shandan.one/css/responsive-visibility-collapse.css"/>
-    </head>
-    <body align="center" style="text-align: center">
 {{!form}}
 {{!svg}}
     </body>