Tweak loading screen

assets/themes/toerisme_vlaanderen/toerisme_vlaanderen.json

@@ -12,7 +12,7 @@
     "nl": "Pin je punt"
   },
   "shortDescription": {
-    "nl": "Een kaart om toeristisch relevante info op aan te duiden"
+    "nl": "<p class='mb-4'><i>Pin je punt</i> is een open toerismekaart waarin wandelaars en fietsers nuttige gegevens verzamelen die handig zijn voor andere wandelaars en fietsers.</p><p>Met de steun van Toerisme Vlaanderen</p><img style='max-height:10rem; float: right; margin-top: 4rem; background: white; width: auto; padding: 0.5rem' src='./assets/themes/toerisme_vlaanderen/logo.png' />"
   },
   "description": {
     "nl": "<p class='mb-4'><i>Pin je punt</i> is een open toerismekaart waarin wandelaars en fietsers nuttige gegevens verzamelen die handig zijn voor andere wandelaars en fietsers.</p><p class='mb-4'>We verzamelen 7 thematische lagen:  <ol><li>Laadpunten voor e-bikes</li><li>Openbare toiletten</li><li>Zit- en picknickbankjes</li><li>Uitkijkpunten, uitkijkplatformen en uitkijktorens</li><li>Fietsherstelpunten</li><li>Fietsverhuurpunten</li><li>Speeltuinen</li></ol><p>Klik op de exacte locatie op de kaart om een van deze 7 punten toe te voegen. Of corrigeer bestaande punten door erop te klikken.</p>"

scripts/generateLayouts.ts

@@ -191,6 +191,7 @@ async function createLandingPage(layout: LayoutConfig, manifest) {
     let output = template
         .replace("Loading MapComplete, hang on...", `Loading MapComplete theme <i>${ogTitle}</i>...`)
         .replace(/<!-- THEME-SPECIFIC -->.*<!-- THEME-SPECIFIC-END-->/s, themeSpecific)
+        .replace(/<!-- DESCRIPTION START -->.*<!-- DESCRIPTION END -->/s, layout.shortDescription.textFor("en"))
         .replace("<script src=\"./index.ts\"></script>", `<script src='./index_${layout.id}.ts'></script>`);
 
     try {

theme.html

@@ -63,10 +63,20 @@
 
 <div class="clutter absolute h-24 left-24 right-24 top-56 text-xl text-center"
      id="centermessage" style="z-index: 4000">
-    <h1>Loading MapComplete, hang on...</h1>
-    <p class="subtle">Powered by OpenStreetMap</p>
+    <div style="height: max-content">
+    <div style="margin-top: -3rem">
+    <h1 style="font-weight: bold; font-size: xx-large; padding-bottom: 1rem">Loading MapComplete, hang on...</h1>
+    <p class="subtle" style="padding-bottom: 1rem">Powered by OpenStreetMap</p>
+    <div style="background: #ffffffaa; padding-bottom: 1rem; border-radius: 0.25rem">
+    <!-- DESCRIPTION START -->
+    MapComplete is an easy to use map viewer and map editor
+    <!-- DESCRIPTION END -->
+    </div>
+    </div>
+    </div>
 </div>
 
+
 <span class="absolute" id="belowmap" style="z-index: -1">Below</span>
 <div id="leafletDiv"></div>