midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Formatting and style tweaks

Browse source
This commit is contained in:
pietervdvn 2022-02-04 00:45:22 +01:00
parent 80533597c1
commit dcfcc9a5d7
8 changed files with 100 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
UI/Popup/DeleteWizard.ts
View file

@ -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)

2
UI/Popup/EditableTagRendering.ts
View file

@ -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)
}),

2
UI/Popup/QuestionBox.ts
View file

@ -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();

4
UI/Popup/TagRenderingQuestion.ts
View file

@ -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)
])

46
css/index-tailwind-output.css
View file

@ -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 {

45
index.css
View file

@ -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 {

9
scripts/generateLayerOverview.ts
View file

@ -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'")
}

31
scripts/generateLicenseInfo.ts
View file

@ -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"))