midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

More climbing styling

Browse source
This commit is contained in:
pietervdvn 2022-04-26 10:30:19 +02:00
parent 9086713657
commit a22ff2f36b
5 changed files with 91 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/layers/climbing_area/climbing_area.json
View file

@ -93,7 +93,7 @@
},
"calculatedTags": [
"_contained_climbing_routes_properties=feat.overlapWith('climbing_route').map(f => f.feat.properties).map(p => {return {id: p.id, name: p.name, 'climbing:grade:french': p['climbing:grade:french'], 'climbing:length': p['climbing:length']} })",
"_contained_climbing_routes=feat.get('_contained_climbing_routes_properties')?.map(p => `<li><a href='#${p.id}'>${p.name ?? 'climbing route'}</a> (<b>${p['climbing:grade:french'] ?? 'unknown difficulty'}</b>, ${p['climbing:length'] ?? 'unkown length'} meter)</li>`).join('')",
"_contained_climbing_routes=feat.get('_contained_climbing_routes_properties')?.map(p => `<li><a href='#${p.id}'>${p.name ?? 'climbing route'}</a> (<b class='climbing-${p['__difficulty:char']} rounded-full p-l-1 p-r-1'>${p['climbing:grade:french'] ?? 'unknown difficulty'}</b>, ${p['climbing:length'] ?? 'unkown length'} meter)</li>`).join('')",
"_contained_climbing_route_ids=feat.get('_contained_climbing_routes_properties')?.map(p => p.id)",
"_difficulty_hist=feat.get('_contained_climbing_routes_properties')?.map(p => p['climbing:grade:french'])?.filter(p => (p ?? null) !== null)?.sort()",
"_difficulty_max=feat.get('_difficulty_hist')?.at(-1)",

11
assets/layers/climbing_route/climbing_route.json
View file

@ -217,9 +217,18 @@
],
"label": {
"mappings": [
{
"if": {
"and": [
"climbing:grade:french~*",
"name~*"
]
},
"then": "<div class='w-max p-1 rounded-xl' style='background: white;'>{name} <span class='climbing-{__difficulty:char}'>{climbing:grade:french}</span></div>"
},
{
"if": "name~*",
"then": "<div style='background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>"
"then": "<div class='w-max p-1 rounded-xl' style='background: white;'>{name}</div>"
}
]
}

44
assets/themes/climbing/climbing.css Normal file
View file

@ -0,0 +1,44 @@
/* a few extra colours, mostly colours difficulties. Debuggable in css-test.html */
.climbing- {
/*Fallback in case of unrecognized difficulty*/
background: white;
border: 1px solid black;
}
.climbing-2 {
background: #a2ff00;
}
.climbing-3 {
background: #a2ff00;
}
.climbing-4 {
background: yellow;
}
.climbing-5 {
background: blue;
color: white;
}
.climbing-6 {
background: red;
color: white;
}
.climbing-7 {
background: fuchsia;
}
.climbing-8 {
background: black;
color: white;
}
.climbing-9 {
background: black;
color: white;
}

100
assets/themes/climbing/climbing.json
View file

@ -42,16 +42,17 @@
"startLon": 0,
"startZoom": 1,
"widenFactor": 1.5,
"customCss": "./assets/themes/climbing/climbing.css",
"layers": [
{
"builtin": [
"climbing_club",
"climbing_gym",
"climbing_route",
"climbing_area",
"climbing_opportunity"
"climbing_club",
"climbing_gym",
"climbing_route",
"climbing_area",
"climbing_opportunity"
],
"override": {
"override": {
"allowMove": {
"enableRelocation": false,
"enableImproveAccuracy": true
@ -76,93 +77,15 @@
{
"id": "Min difficulty",
"condition": "__difficulty_min~*",
"then": "<div class='w-8 flex justify-center rounded-left-full border border-black' style='margin-right: -5px; background-color:#ebf224'> {__difficulty_min}</div>",
"mappings": [
{
"if": "__difficulty_min~(2|3).*",
"then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#ebf224'> {__difficulty_min}</div>"
},
{
"if": "__difficulty_min~4.*",
"then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#7af224'> {__difficulty_min}</div>"
},
{
"if": "__difficulty_min~5.*",
"then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#f24a24'> {__difficulty_min}</div>"
},
{
"if": "__difficulty_min~6.*",
"then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#244af2'> {__difficulty_min}</div>"
},
{
"if": "__difficulty_min~(7|8).*",
"then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-color:#e904ed'> {__difficulty_min}</div>"
},
{
"if": "__difficulty_min~*",
"then": "<div class='w-8 flex justify-center rounded-left-full' style='margin-right: -5px; background-colour:black'> {__difficulty_min}</div>"
}
]
"render": "<div class='w-8 flex justify-center rounded-left-full climbing-{__difficulty_min:char}' style='margin-right: -5px;'> {__difficulty_min}</div>"
},
{
"id": "max difficulty",
"condition": "__difficulty_max~*",
"then": "<div class='w-8 flex justify-center rounded-right-full border border-black' style='background-color:#ebf224'> {__difficulty_max}</div>",
"mappings": [
{
"if": "__difficulty_max~(2|3).*",
"then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#ebf224'> {__difficulty_max}</div>"
},
{
"if": "__difficulty_max~4.*",
"then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#7af224'> {__difficulty_max}</div>"
},
{
"if": "__difficulty_max~5.*",
"then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#f24a24'> {__difficulty_max}</div>"
},
{
"if": "__difficulty_max~6.*",
"then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#244af2'> {__difficulty_max}</div>"
},
{
"if": "__difficulty_max~(7|8).*",
"then": "<div class='w-8 flex justify-center rounded-right-full' style='background-color:#e904ed'> {__difficulty_max}</div>"
},
{
"if": "__difficulty_max~*",
"then": "<div class='w-8 flex justify-center rounded-right-full' style='background-colour:black'> {__difficulty_max}</div>"
}
]
"render": "<div class='w-8 flex justify-center rounded-right-full climbing-{__difficulty_max:char}'> {__difficulty_max}</div>"
},
{
"mappings": [
{
"if": "climbing:grade:french~3.*",
"then": "<div class='rounded-full px-1' style='background-color:#ebf224'> {climbing:grade:french}</div>"
},
{
"if": "climbing:grade:french~4.*",
"then": "<div class='rounded-full pl-2 pr-2' style='background-color:#7af224'> {climbing:grade:french}</div>"
},
{
"if": "climbing:grade:french~5.*",
"then": "<div class='rounded-full pl-2 pr-2' style='background-color:#f24a24'> {climbing:grade:french}</div>"
},
{
"if": "climbing:grade:french~6.*",
"then": "<div class='text-white rounded-full pl-2 pr-2' style='background-color:#244af2'> {climbing:grade:french}</div>"
},
{
"if": "climbing:grade:french~7.*",
"then": "<div class='text-white rounded-full pl-2 pr-2' style='background-color:#e904ed'> {climbing:grade:french}</div>"
},
{
"if": "climbing:grade:french~*",
"then": "<div class='text-white rounded-full px-2' style='background-colour:black'> {climbing:grade:french}</div>"
}
]
"render": "<div class='flex justify-center rounded-full pl-1 pr-1 climbing-{__difficulty:char}'> {climbing:grade:french}</div>"
}
],
"+calculatedTags": [
@ -176,6 +99,9 @@
"_embedding_feature:id=feat.get('_embedding_features_with_access')?.id",
"__difficulty_max= feat.properties['climbing:grade:french:max'] ?? feat.properties['_difficulty_max']",
"__difficulty_min= feat.properties['climbing:grade:french:min'] ?? feat.properties['_difficulty_min']",
"__difficulty_max:char= feat.properties['__difficulty_max']?.at(0)",
"__difficulty_min:char= feat.properties['__difficulty_min']?.at(0)",
"__difficulty:char= feat.properties['climbing:grade:french']?.at(0)",
"__bolts_max= feat.get('climbing:bolts:max') ?? feat.get('climbing:bolts') ?? feat.get('_bolts_max')"
],
"units+": [

23
assets/themes/climbing/css-test.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-debugging for climbing theme</title>
<link href="/css/index-tailwind-output.css" rel="stylesheet"/>
<link href="/assets/themes/climbing/climbing.css" rel="stylesheet"/>
</head>
<body>
<div class="rounded-full climbing-2">2</div>
<div class="rounded-full climbing-3">3</div>
<div class="rounded-full climbing-4">4</div>
<div class="rounded-full climbing-5">5</div>
<div class="rounded-full climbing-6">6</div>
<div class="rounded-full climbing-7">7</div>
<div class="rounded-full climbing-8">8</div>
<div class="rounded-full climbing-9">9</div>
<div class="rounded-full climbing-">X</div>
</body>
</html>