From dcfcc9a5d763c717f15f3877bf96566f3a2314ea Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Fri, 4 Feb 2022 00:45:22 +0100 Subject: [PATCH] Formatting and style tweaks --- UI/Popup/DeleteWizard.ts | 2 +- UI/Popup/EditableTagRendering.ts | 2 +- UI/Popup/QuestionBox.ts | 2 +- UI/Popup/TagRenderingQuestion.ts | 4 +-- css/index-tailwind-output.css | 46 +++++++++++++++++++++++--------- index.css | 45 ++++++++++++++++++++++++------- scripts/generateLayerOverview.ts | 9 ++----- scripts/generateLicenseInfo.ts | 31 ++++++++++++++++----- 8 files changed, 100 insertions(+), 41 deletions(-) diff --git a/UI/Popup/DeleteWizard.ts b/UI/Popup/DeleteWizard.ts index 5d04f34d4c..ba289a2e24 100644 --- a/UI/Popup/DeleteWizard.ts +++ b/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) diff --git a/UI/Popup/EditableTagRendering.ts b/UI/Popup/EditableTagRendering.ts index 5a36374429..c9dee62c42 100644 --- a/UI/Popup/EditableTagRendering.ts +++ b/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) }), diff --git a/UI/Popup/QuestionBox.ts b/UI/Popup/QuestionBox.ts index 918c15d1e9..fcc92ead41 100644 --- a/UI/Popup/QuestionBox.ts +++ b/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(); diff --git a/UI/Popup/TagRenderingQuestion.ts b/UI/Popup/TagRenderingQuestion.ts index a632bcf5d5..6fa6f2d07f 100644 --- a/UI/Popup/TagRenderingQuestion.ts +++ b/UI/Popup/TagRenderingQuestion.ts @@ -138,8 +138,8 @@ export default class TagRenderingQuestion extends Combine { super([ question, inputElement, - options.cancelButton, - saveButton, + new Combine([options.cancelButton, + saveButton]).SetClass("flex w-full justify-end flex-wrap-reverse"), bottomTags, new Toggle(Translations.t.general.testing.SetClass("alert"), undefined, state.featureSwitchIsTesting) ]) diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index 5868be05f3..84d7d99fd8 100644 --- a/css/index-tailwind-output.css +++ b/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 { diff --git a/index.css b/index.css index a969451d69..259260ca38 100644 --- a/index.css +++ b/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; - --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 { diff --git a/scripts/generateLayerOverview.ts b/scripts/generateLayerOverview.ts index d293889ee0..a15f35a868 100644 --- a/scripts/generateLayerOverview.ts +++ b/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'") -} diff --git a/scripts/generateLicenseInfo.ts b/scripts/generateLicenseInfo.ts index 9bfe5601a4..8b552fda1d 100644 --- a/scripts/generateLicenseInfo.ts +++ b/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"))