Move slick buttons to a clickable location
This commit is contained in:
pietervdvn
parent
f86ce4bc17
commit
79fc3f54e5
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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"/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue