Formatting and style tweaks

UI/Popup/DeleteWizard.ts

@@ -90,7 +90,7 @@ export default class DeleteWizard extends Toggle {
                 config,
                 state,
                 {
-                    cancelButton: cancelButton,
+                    cancelButton,
                     /*Using a custom save button constructor erases all logic to actually save, so we have to listen for the click!*/
                     saveButtonConstr: (v) => DeleteWizard.constructConfirmButton(v).onClick(() => {
                         doDelete(v.data)

UI/Popup/EditableTagRendering.ts

@@ -71,7 +71,7 @@ export default class EditableTagRendering extends Toggle {
                     {
                         units: units,
                         cancelButton: Translations.t.general.cancel.Clone()
-                            .SetClass("btn btn-secondary mr-3")
+                            .SetClass("btn btn-secondary")
                             .onClick(() => {
                                 editMode.setData(false)
                             }),

UI/Popup/QuestionBox.ts

@@ -42,7 +42,7 @@ export default class QuestionBox extends VariableUiElement {
                             skippedQuestions.ping();
                         },
                         cancelButton: Translations.t.general.skip.Clone()
-                            .SetClass("btn btn-secondary mr-3")
+                            .SetClass("btn btn-secondary")
                             .onClick(() => {
                                 skippedQuestions.data.push(i);
                                 skippedQuestions.ping();

UI/Popup/TagRenderingQuestion.ts

@@ -138,8 +138,8 @@ export default class TagRenderingQuestion extends Combine {
         super([
             question,
             inputElement,
-            options.cancelButton,
+            new Combine([options.cancelButton,
-            saveButton,
+            saveButton]).SetClass("flex w-full justify-end flex-wrap-reverse"),
             bottomTags,
             new Toggle(Translations.t.general.testing.SetClass("alert"), undefined, state.featureSwitchIsTesting)
             ])

css/index-tailwind-output.css

@@ -1260,6 +1260,10 @@ video {
   flex-wrap: wrap;
 }
 
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
 .items-end {
   align-items: flex-end;
 }
@@ -1353,10 +1357,6 @@ video {
   border-radius: 1.5rem;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1365,6 +1365,10 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-sm {
   border-radius: 0.125rem;
 }
@@ -1809,23 +1813,38 @@ video {
 }
 
 :root {
+  /* The main colour scheme of mapcomplete is configured here.
+     * For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these.
+     */
+  /* Main color of the application: the background and text colours */
+  --background-color: white;
+  /* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */
+  --foreground-color: black;
+  /* A colour to indicate an error or warning */
+  --alert-color: #fee4d1;
+  /**
+     * Base colour of interactive elements, mainly the 'subtle button'
+     * 
+     */
   --subtle-detail-color: #DBEAFE;
   --subtle-detail-color-contrast: black;
   --subtle-detail-color-light-contrast: lightgrey;
+  /**
+     * A stronger variant of the 'subtle-detail-colour'
+     * Used as subtle button hover
+     */
   --unsubtle-detail-color: #BFDBFE;
   --unsubtle-detail-color-contrast: black;
   --catch-detail-color: #3a3aeb;
   --catch-detail-color-contrast: white;
-  --alert-color: #fee4d1;
-  --background-color: white;
-  --foreground-color: black;
-  --popup-border: white;
   --non-active-tab-svg: var(--foreground-color);
   --shadow-color: #00000066;
-  --variable-title-height: 0px;
-  /* Set by javascript */
   --return-to-the-map-height: 2em;
   --image-carousel-height: 350px;
+  /* The border colour of the leaflet popup */
+  --popup-border: white;
+  /* Technical variable to make some dynamic behaviour possible; set by javascript. */
+  --variable-title-height: 0px;
 }
 
 html, body {
@@ -1902,8 +1921,6 @@ a {
 }
 
 .btn {
-  margin-top: 0.5rem;
-  margin-right: 0.5rem;
   line-height: 1.25rem;
   --tw-text-opacity: 1;
   color: var(--catch-detail-color-contrast);
@@ -1917,6 +1934,7 @@ a {
   padding-right: 1.25rem;
   font-size: large;
   font-weight: bold;
+  transition: 100ms;
   /*-- invisible border: rendered on hover*/
   border: 3px solid var(--unsubtle-detail-color);
 }
@@ -1927,11 +1945,12 @@ a {
 
 .btn-secondary {
   background-color: var(--catch-detail-color);
-  filter: saturate(0.8);
+  filter: saturate(0.5);
 }
 
 .btn-secondary:hover {
   background-color: var(--catch-detail-color);
+  filter: unset;
 }
 
 .btn-disabled {
@@ -2358,6 +2377,7 @@ input {
 .layer-filters {
   /* If needed, the panel which contains the extra filters for a layer */
   margin-bottom: 1rem;
+  border-bottom: 2px solid var(--foreground-color);
 }
 
 .filter-panel {

index.css

@@ -45,24 +45,49 @@
 
 
 :root {
+    /* The main colour scheme of mapcomplete is configured here.
+     * For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these.
+     */
+
+    /* Main color of the application: the background and text colours */
+    --background-color: white;
+    /* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */
+    --foreground-color: black;
+    
+    /* A colour to indicate an error or warning */
+    --alert-color: #fee4d1;
+    
+    /**
+     * Base colour of interactive elements, mainly the 'subtle button'
+     * 
+     */
     --subtle-detail-color: #DBEAFE;
     --subtle-detail-color-contrast: black;
     --subtle-detail-color-light-contrast: lightgrey;
 
+    /**
+     * A stronger variant of the 'subtle-detail-colour'
+     * Used as subtle button hover
+     */
     --unsubtle-detail-color: #BFDBFE;
     --unsubtle-detail-color-contrast: black;
+    
+    
     --catch-detail-color: #3a3aeb;
     --catch-detail-color-contrast: white;
-    --alert-color: #fee4d1;
+
-    --background-color: white;
+    
-    --foreground-color: black;
-    --popup-border: white;
     --non-active-tab-svg: var(--foreground-color);
     --shadow-color: #00000066;
-    --variable-title-height: 0px; /* Set by javascript */
-    --return-to-the-map-height: 2em;
     
+    --return-to-the-map-height: 2em;
     --image-carousel-height: 350px;
+
+    /* The border colour of the leaflet popup */
+    --popup-border: white;
+
+    /* Technical variable to make some dynamic behaviour possible; set by javascript. */
+    --variable-title-height: 0px; 
 }
 
 html, body {
@@ -139,8 +164,6 @@ a {
 }
 
 .btn {
-    margin-top: 0.5rem;
-    margin-right: 0.5rem;
     line-height: 1.25rem;
     --tw-text-opacity: 1;
     color: var(--catch-detail-color-contrast);
@@ -154,6 +177,7 @@ a {
     padding-right: 1.25rem;
     font-size: large;
     font-weight: bold;
+    transition: 100ms;
     /*-- invisible border: rendered on hover*/
     border: 3px solid var(--unsubtle-detail-color);
 }
@@ -164,11 +188,13 @@ a {
 
 .btn-secondary {
     background-color: var(--catch-detail-color);
-    filter: saturate(0.8);
+    filter: saturate(0.5);
+    
 }
 
 .btn-secondary:hover {
     background-color: var(--catch-detail-color);
+    filter: unset;
 }
 
 .btn-disabled {
@@ -549,6 +575,7 @@ input {
 .layer-filters {
     /* If needed, the panel which contains the extra filters for a layer */
     margin-bottom: 1rem;
+    border-bottom: 2px solid var(--foreground-color);
 }
 
 .filter-panel {

scripts/generateLayerOverview.ts

@@ -4,7 +4,7 @@ import * as licenses from "../assets/generated/license_info.json"
 import {LayoutConfigJson} from "../Models/ThemeConfig/Json/LayoutConfigJson";
 import {LayerConfigJson} from "../Models/ThemeConfig/Json/LayerConfigJson";
 import Constants from "../Models/Constants";
-import {ValidateLayer, ValidateThemeAndLayers} from "../Models/ThemeConfig/Conversion/LegacyJsonConvert";
+import {PrevalidateTheme, ValidateLayer, ValidateThemeAndLayers} from "../Models/ThemeConfig/Conversion/Validation";
 import {Translation} from "../UI/i18n/Translation";
 import {TagRenderingConfigJson} from "../Models/ThemeConfig/Json/TagRenderingConfigJson";
 import * as questions from "../assets/tagRenderings/questions.json";
@@ -174,6 +174,7 @@ class LayerOverviewUtils {
             let themeFile = themeInfo.parsed
             const themePath = themeInfo.path
 
+            new PrevalidateTheme().convertStrict(convertState, themeFile, themePath)
             themeFile = new PrepareTheme().convertStrict(convertState, themeFile, themePath)
 
             new ValidateThemeAndLayers(knownImagePaths, themePath, true)
@@ -196,10 +197,4 @@ class LayerOverviewUtils {
     }
 }
 
-try{
 new LayerOverviewUtils().main(process.argv)
-    
-}catch(e){
-    console.error("ERROR WHILE GENERATING THE LAYERS:", e)
-    console.log("If a weird error persists, 'npm run reset:layeroverview'")
-}

scripts/generateLicenseInfo.ts

@@ -91,6 +91,14 @@ knownLicenses.set("na", {
     sources: []
 })
 
+knownLicenses.set("tv", {
+    authors: ["Toerisme Vlaanderen"],
+    path: undefined,
+    license: "CC0",
+    sources: ["https://toerismevlaanderen.be/pinjepunt","https://mapcomplete.osm.be/toerisme_vlaanderenn"]
+})
+
+
 knownLicenses.set("twemoji", {
     authors: ["Twemoji"],
     path: undefined,
@@ -223,18 +231,29 @@ function createFullLicenseOverview(licensePaths) {
 }
 
 console.log("Checking and compiling license info")
-const contents = ScriptUtils.readDirRecSync("./assets")
-    .filter(entry => entry.indexOf("./assets/generated") != 0)
-const licensePaths = contents.filter(entry => entry.indexOf("license_info.json") >= 0)
-const licenseInfos = generateLicenseInfos(licensePaths);
 
 if (!existsSync("./assets/generated")) {
     mkdirSync("./assets/generated")
 }
 
 
+let contents = ScriptUtils.readDirRecSync("./assets")
+    .filter(entry => entry.indexOf("./assets/generated") != 0)
+let licensePaths = contents.filter(entry => entry.indexOf("license_info.json") >= 0)
+let licenseInfos = generateLicenseInfos(licensePaths);
+
+
+
 const artwork = contents.filter(pth => pth.match(/(.svg|.png|.jpg)$/i) != null)
 const missingLicenses = missingLicenseInfos(licenseInfos, artwork)
+if (process.argv.indexOf("--prompt") >= 0 || process.argv.indexOf("--query") >= 0) {
+    queryMissingLicenses(missingLicenses)
+    contents = ScriptUtils.readDirRecSync("./assets")
+        .filter(entry => entry.indexOf("./assets/generated") != 0)
+    licensePaths = contents.filter(entry => entry.indexOf("license_info.json") >= 0)
+    licenseInfos = generateLicenseInfos(licensePaths);
+}
+
 const invalidLicenses = licenseInfos.filter(l => (l.license ?? "") === "").map(l => `License for artwork ${l.path} is empty string or undefined`)
 for (const licenseInfo of licenseInfos) {
     for (const source of licenseInfo.sources) {
@@ -248,9 +267,7 @@ for (const licenseInfo of licenseInfos) {
         }
     }
 }
-if (process.argv.indexOf("--prompt") >= 0 || process.argv.indexOf("--query") >= 0) {
+
-    queryMissingLicenses(missingLicenses)
-}
 if (missingLicenses.length > 0) {
     const msg = `There are ${missingLicenses.length} licenses missing and ${invalidLicenses.length} invalid licenses.`
     console.log(missingLicenses.concat(invalidLicenses).join("\n"))