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

Move slick buttons to a clickable location

Browse source
This commit is contained in:
pietervdvn 2021-02-15 19:06:06 +01:00
parent f86ce4bc17
commit 79fc3f54e5
3 changed files with 16 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
UI/ShowDataLayer.ts
View file

@ -37,7 +37,6 @@ export default class ShowDataLayer {
let cluster = undefined;
function update() {
console.log("Updating the data layer...", features.data.length, "objects loaded")
if (features.data === undefined) {
return;
}
@ -68,7 +67,7 @@ export default class ShowDataLayer {
} else {
mp.addLayer(geoLayer)
}
State.state.selectedElement.ping();
}
@ -84,7 +83,7 @@ export default class ShowDataLayer {
const layer = this._layerDict[feature._matching_layer_id];
return layer.GenerateLeafletStyle(tagsSource, layer._showOnPopup !== undefined);
}
private pointToLayer(feature, latLng): L.Layer {
// Leaflet cannot handle geojson points natively
// We have to convert them to the appropriate icon
@ -146,16 +145,12 @@ export default class ShowDataLayer {
})
State.state.selectedElement.addCallbackAndRun(selected => {
if(selected !== undefined && feature.properties.id === selected.properties.id){
console.log("Currently selected feature:", selected, "feature is",feature, "is same?", selected == feature)
}
if (selected === undefined) {
if (popup.isOpen()) {
popup.remove();
}
} else if (selected == feature && selected.geometry.type === feature.geometry.type) {
console.log("Found the popup to open!")
// If wayhandling introduces a centerpoint and an area, this code might become unstable:
// The popup for the centerpoint would open, a bit later the area would close the first popup and open it's own
// In the process, the 'selectedElement' is set to undefined and to the other feature again, causing an infinite loop
@ -165,7 +160,6 @@ export default class ShowDataLayer {
const mp = this._leafletMap.data;
if (!popup.isOpen() && mp !== undefined) {
var centerpoint = GeoOperations.centerpointCoordinates(feature);
console.log("centerpoint:", centerpoint,"of",feature)
popup
.setLatLng(GeoOperations.centerpointCoordinates(feature))
.openOn(mp);

85
css/slideshow.css
View file

@ -1,81 +1,22 @@
.image-slideshow {
position: relative;
display: block;
text-align: center;
max-width: 100%;
margin-top: 1em;
margin-bottom: 1em;
.slick-next {
top: unset;
bottom: -25px;
right: 15px;
z-index: 10000;
}
.slides {
display: block;
overflow: hidden;
}
.prev-button {
display: block;
background-color: black;
opacity: 0.3;
width: 4.0em;
height: 100%;
padding-left: 0.5em;
padding-right: 0.5em;
position: absolute;
top: 50%;
.slick-prev {
top: unset;
bottom: -25px;
left: 0;
transform: translate(0, -50%);
z-index: 5060;
border-radius: 1em;
z-index: 10000;
}
.next-button {
display: block;
background-color: black;
opacity: 0.3;
width: 4.0em;
height: 100%;
padding-left: 0.5em;
padding-right: 0.5em;
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
border-radius: 1em;
z-index: 5060;
.slick-next::before {
font-size: 35px;
}
.vspan {
height: calc(50% - 3em);
}
.prev-button img {
margin-left: -1em;
width: 6em;
text-align: center;
}
.next-button img {
margin-left: -1em;
width: 6em;
text-align: center;
}
.slide > span {
max-height: 40vh;
}
.slide > span img {
height: auto;
width: auto;
max-width: 100%;
max-height: 30vh;
border-radius: 1em;
.slick-prev::before {
font-size: 35px;
}

2
index.html
View file

@ -9,13 +9,13 @@
<link rel="stylesheet" href="./index.css"/>
<link rel="stylesheet" href="./css/userbadge.css"/>
<link rel="stylesheet" href="./css/tabbedComponent.css"/>
<link rel="stylesheet" href="./css/slideshow.css"/>
<link rel="stylesheet" href="./css/mobile.css"/>
<link rel="stylesheet" href="./css/openinghourstable.css"/>
<link rel="stylesheet" href="./css/tagrendering.css"/>
<link rel="stylesheet" href="./css/imageUploadFlow.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/>
<link rel="stylesheet" href="./css/slideshow.css"/>
<link href="css/ReviewElement.css" rel="stylesheet"/>