Add fruit tree theme prototype; cleanup and split of the mobile layout (fix #120), allow overzoom on baselayers (fix #97)
This commit is contained in:
Pieter Vander Vennet
parent
d7083131a1
commit
ca5b4297b3
6 changed files with 265 additions and 167 deletions
|
|
@ -24,7 +24,7 @@ export class BaseLayers {
|
||||||
{
|
{
|
||||||
// omwrgbmrvl
|
// omwrgbmrvl
|
||||||
attribution: 'Luchtfoto\'s van © AIV Vlaanderen (Laatste) © AGIV',
|
attribution: 'Luchtfoto\'s van © AIV Vlaanderen (Laatste) © AGIV',
|
||||||
maxZoom: 20,
|
maxZoom: 22,
|
||||||
minZoom: 1,
|
minZoom: 1,
|
||||||
wmts: true
|
wmts: true
|
||||||
})
|
})
|
||||||
|
|
|
||||||
169
assets/themes/fruit_trees/fruit_trees.json
Normal file
169
assets/themes/fruit_trees/fruit_trees.json
Normal file
|
|
@ -0,0 +1,169 @@
|
||||||
|
{
|
||||||
|
"id": "boomgaarden",
|
||||||
|
"title": {
|
||||||
|
"nl": "Open Boomgaardenkaart"
|
||||||
|
},
|
||||||
|
"shortDescription": {
|
||||||
|
"nl": "Boomgaarden en fruitbomen"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"nl": "Op deze kaart vindt je boomgaarden en fruitbomen"
|
||||||
|
},
|
||||||
|
"language": [
|
||||||
|
"nl"
|
||||||
|
],
|
||||||
|
"maintainer": "",
|
||||||
|
"icon": "https://upload.wikimedia.org/wikipedia/commons/4/4e/Low_Hanging_Fruit_-_The_Noun_Project.svg",
|
||||||
|
"version": "0",
|
||||||
|
"startLat": 0,
|
||||||
|
"startLon": 0,
|
||||||
|
"startZoom": 1,
|
||||||
|
"widenFactor": 0.001,
|
||||||
|
"socialImage": "",
|
||||||
|
"layers": [
|
||||||
|
{
|
||||||
|
"id": "orchards",
|
||||||
|
"name": {
|
||||||
|
"nl": "Boomgaarden"
|
||||||
|
},
|
||||||
|
"minzoom": 12,
|
||||||
|
"overpassTags": {
|
||||||
|
"and": [
|
||||||
|
"landuse=orchard"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"title": {
|
||||||
|
"render": {
|
||||||
|
"nl": "Boomgaard"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"description": {},
|
||||||
|
"tagRenderings": [],
|
||||||
|
"hideUnderlayingFeaturesMinPercentage": 0,
|
||||||
|
"icon": {
|
||||||
|
"render": "./assets/themes/buurtnatuur/forest.svg"
|
||||||
|
},
|
||||||
|
"width": {
|
||||||
|
"render": "8"
|
||||||
|
},
|
||||||
|
"iconSize": {
|
||||||
|
"render": "40,40,center"
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"render": "#00f"
|
||||||
|
},
|
||||||
|
"presets": [
|
||||||
|
{
|
||||||
|
"tags": [
|
||||||
|
"landuse=orchard",
|
||||||
|
"fixme=Added with mapcomplete - geometry still to draw"
|
||||||
|
],
|
||||||
|
"title": {
|
||||||
|
"nl": "Boomgaard"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"nl": "Voeg een boomgaard toe (als punt - omtrek nog te tekenen)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "fruitboom",
|
||||||
|
"name": {
|
||||||
|
"nl": "Boom"
|
||||||
|
},
|
||||||
|
"minzoom": 12,
|
||||||
|
"overpassTags": {
|
||||||
|
"and": [
|
||||||
|
"natural=tree"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"title": {
|
||||||
|
"render": {
|
||||||
|
"nl": "Boom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"nl": "Een boom"
|
||||||
|
},
|
||||||
|
"tagRenderings": [
|
||||||
|
{
|
||||||
|
"render": {
|
||||||
|
"nl": "De soort is {species:nl}"
|
||||||
|
},
|
||||||
|
"question": {
|
||||||
|
"nl": "Wat is de soort van deze boom (in het Nederlands)?"
|
||||||
|
},
|
||||||
|
"freeform": {
|
||||||
|
"key": "species:nl"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"render": {
|
||||||
|
"nl": "Het ras (taxon) van deze boom is <b>{taxon}</b>"
|
||||||
|
},
|
||||||
|
"question": {
|
||||||
|
"nl": "Wat is het taxon (ras) van deze boom?"
|
||||||
|
},
|
||||||
|
"freeform": {
|
||||||
|
"key": "taxon"
|
||||||
|
},
|
||||||
|
"condition": {
|
||||||
|
"and": [
|
||||||
|
"species:nl~*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"render": {
|
||||||
|
"nl": "Beschrijving: <i>{description}</i>"
|
||||||
|
},
|
||||||
|
"question": {
|
||||||
|
"nl": "Welke beschrijving past bij deze boom?"
|
||||||
|
},
|
||||||
|
"freeform": {
|
||||||
|
"key": "description"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"render": {
|
||||||
|
"nl": "Referentienummer: <b>{ref}</b>"
|
||||||
|
},
|
||||||
|
"question": {
|
||||||
|
"nl": "Is er een refernetienummer?"
|
||||||
|
},
|
||||||
|
"freeform": {
|
||||||
|
"key": "ref"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"hideUnderlayingFeaturesMinPercentage": 0,
|
||||||
|
"icon": {
|
||||||
|
"render": "https://upload.wikimedia.org/wikipedia/commons/4/4e/Low_Hanging_Fruit_-_The_Noun_Project.svg"
|
||||||
|
},
|
||||||
|
"width": {
|
||||||
|
"render": "8"
|
||||||
|
},
|
||||||
|
"iconSize": {
|
||||||
|
"render": "40,40,center"
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"render": "#00f"
|
||||||
|
},
|
||||||
|
"presets": [
|
||||||
|
{
|
||||||
|
"tags": [
|
||||||
|
"natural=tree"
|
||||||
|
],
|
||||||
|
"title": {
|
||||||
|
"nl": "Boom"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"nl": "Voeg hier een boom toe"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"roamingRenderings": []
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
/*
|
||||||
|
Contains tweaks for small screens
|
||||||
|
*/
|
||||||
|
|
||||||
|
.only-on-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
|
||||||
|
|
||||||
|
.only-on-mobile {
|
||||||
|
display: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden-on-mobile {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#messagesbox {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#help-button-mobile{
|
||||||
|
display: unset;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
#help-button-mobile div {
|
||||||
|
box-shadow: 0 0 10px #0006;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#geolocate-button {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-popup {
|
||||||
|
/* Popups are hidden on mobile */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#centermessage {
|
||||||
|
top: 30%;
|
||||||
|
left: 15%;
|
||||||
|
width: 60%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-popup-all-buttons {
|
||||||
|
/* Buttons in the 'add new point' have a default of 50vh maxheight which is ugly in the new context*/
|
||||||
|
max-height: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#messagesboxmobile {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10000;
|
||||||
|
background-color: white;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#welcomeMessage {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 0;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-height: max-content;
|
||||||
|
box-shadow: unset;
|
||||||
|
overflow-y: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
/* Portrait */
|
||||||
|
#userbadge-and-search {
|
||||||
|
display: inline-block;
|
||||||
|
width: auto;
|
||||||
|
max-width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topleft-tools {
|
||||||
|
padding: 0.2em !important;
|
||||||
|
padding-top: 0.3em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#userbadge {
|
||||||
|
margin-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
164
index.css
164
index.css
|
|
@ -24,7 +24,6 @@ body {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 43px;
|
width: 43px;
|
||||||
height: 43px;
|
height: 43px;
|
||||||
display: none; /*Hidden by default, only visible on mobile*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#geolocate-button img {
|
#geolocate-button img {
|
||||||
|
|
@ -188,12 +187,6 @@ body {
|
||||||
padding-bottom: 0.2em;
|
padding-bottom: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#hidden-on-mobile {
|
|
||||||
display: none; /*Only shown on small screens - this is probably named wrongly*/
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.add-popup-all-buttons {
|
.add-popup-all-buttons {
|
||||||
max-height: 50vh;
|
max-height: 50vh;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -201,61 +194,6 @@ body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-height: 600px) and (not (max-width:700px)) {
|
|
||||||
|
|
||||||
/* Landscape and portrait */
|
|
||||||
#topleft-tools {
|
|
||||||
padding: 0.1em 0.1em 0.1em unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden-on-mobile {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#userbadge-and-search {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: auto;
|
|
||||||
max-width: 50vw;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#userbadge {
|
|
||||||
position: fixed;
|
|
||||||
right: 0.3em;
|
|
||||||
width: min-content;
|
|
||||||
max-width: 50vw;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media only screen and (max-width: 600px) {
|
|
||||||
/* Portrait */
|
|
||||||
#userbadge-and-search {
|
|
||||||
display: inline-block;
|
|
||||||
width: auto;
|
|
||||||
max-width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.hidden-on-mobile {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#topleft-tools {
|
|
||||||
padding: 0.2em !important;
|
|
||||||
padding-top: 0.3em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#userbadge {
|
|
||||||
margin-bottom: 0.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**************************************/
|
/**************************************/
|
||||||
|
|
@ -365,108 +303,6 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
|
|
||||||
#hidden-on-mobile {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.hidden-on-mobile {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messagesbox-wrapper {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messagesbox {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#help-button-mobile{
|
|
||||||
display: unset;
|
|
||||||
pointer-events: all;
|
|
||||||
}
|
|
||||||
|
|
||||||
#help-button-mobile div {
|
|
||||||
box-shadow: 0 0 10px #0006;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#geolocate-button {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.leaflet-popup {
|
|
||||||
/* Popups are hidden on mobile */
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#centermessage {
|
|
||||||
top: 30%;
|
|
||||||
left: 15%;
|
|
||||||
width: 60%;
|
|
||||||
|
|
||||||
}
|
|
||||||
.add-popup-all-buttons {
|
|
||||||
max-height: calc(100vh - 12em);
|
|
||||||
height: min-content;
|
|
||||||
display: inline-block;
|
|
||||||
overflow-y: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#messagesboxmobile {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 10000;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#welcomeMessage {
|
|
||||||
display: inline-block;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 0;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-height: max-content;
|
|
||||||
box-shadow: unset;
|
|
||||||
overflow-y: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-height: 400px) {
|
|
||||||
/* Landscape: small 'to the map' */
|
|
||||||
#hidden-on-mobile {
|
|
||||||
display: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.hidden-on-mobile {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#messagesboxmobile {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
z-index: 10000;
|
|
||||||
padding-bottom: 5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#welcomeMessage {
|
|
||||||
box-shadow: unset;
|
|
||||||
max-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.imgWithAttr {
|
.imgWithAttr {
|
||||||
max-height: 20em;
|
max-height: 20em;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
<link rel="stylesheet" href="./css/userbadge.css"/>
|
<link rel="stylesheet" href="./css/userbadge.css"/>
|
||||||
<link rel="stylesheet" href="./css/tabbedComponent.css"/>
|
<link rel="stylesheet" href="./css/tabbedComponent.css"/>
|
||||||
<link rel="stylesheet" href="./css/slideshow.css"/>
|
<link rel="stylesheet" href="./css/slideshow.css"/>
|
||||||
|
<link rel="stylesheet" href="./css/mobile.css"/>
|
||||||
<link rel="manifest" href="./manifest.manifest">
|
<link rel="manifest" href="./manifest.manifest">
|
||||||
<link rel="icon" href="assets/add.svg" sizes="any" type="image/svg+xml">
|
<link rel="icon" href="assets/add.svg" sizes="any" type="image/svg+xml">
|
||||||
|
|
||||||
|
|
@ -34,7 +35,7 @@
|
||||||
<!-- DECORATION 0 END -->
|
<!-- DECORATION 0 END -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hidden-on-mobile">
|
<div class="only-on-mobile">
|
||||||
<div id="messagesboxmobile">
|
<div id="messagesboxmobile">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
1
index.ts
1
index.ts
|
|
@ -18,7 +18,6 @@ if (location.href.startsWith("http://buurtnatuur.be")) {
|
||||||
window.location.replace("https://buurtnatuur.be");
|
window.location.replace("https://buurtnatuur.be");
|
||||||
}
|
}
|
||||||
|
|
||||||
let defaultLayout = "bookcases"
|
|
||||||
if (location.href.indexOf("buurtnatuur.be") >= 0) {
|
if (location.href.indexOf("buurtnatuur.be") >= 0) {
|
||||||
// Reload the https version. This is important for the 'locate me' button
|
// Reload the https version. This is important for the 'locate me' button
|
||||||
defaultLayout = "buurtnatuur"
|
defaultLayout = "buurtnatuur"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue