diff --git a/Customizations/JSON/FromJSON.ts b/Customizations/JSON/FromJSON.ts index 6276902..48aa340 100644 --- a/Customizations/JSON/FromJSON.ts +++ b/Customizations/JSON/FromJSON.ts @@ -15,6 +15,8 @@ import * as drinkingWater from "../../assets/layers/drinking_water/drinking_wate import * as ghostbikes from "../../assets/layers/ghost_bike/ghost_bike.json" import * as viewpoint from "../../assets/layers/viewpoint/viewpoint.json" import * as bike_parking from "../../assets/layers/bike_parking/bike_parking.json" +import * as birdhides from "../../assets/layers/bird_hide/birdhides.json" + import {Utils} from "../../Utils"; export class FromJSON { @@ -29,6 +31,7 @@ export class FromJSON { FromJSON.Layer(ghostbikes), FromJSON.Layer(viewpoint), FromJSON.Layer(bike_parking), + FromJSON.Layer(birdhides), ]; for (const layer of sharedLayersList) { diff --git a/Customizations/Layers/Birdhide.ts b/Customizations/Layers/Birdhide.ts deleted file mode 100644 index fa561ee..0000000 --- a/Customizations/Layers/Birdhide.ts +++ /dev/null @@ -1,164 +0,0 @@ -import {LayerDefinition} from "../LayerDefinition"; -import {And, Or, Tag} from "../../Logic/Tags"; -import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload"; -import {TagRenderingOptions} from "../TagRenderingOptions"; - -export class Birdhide extends LayerDefinition { - - private static readonly birdhide = new Tag("leisure", "bird_hide"); - - - constructor() { - super("birdhide",{ - name: "vogelkijkplaats", - description: "Een plaats om vogels te kijken, zoals een vogelkijkhut of kijkwand", - overpassFilter: Birdhide.birdhide, - elementsToShow: [], - icon: "assets/nature/birdhide.svg", - minzoom: 12, - wayHandling: LayerDefinition.WAYHANDLING_CENTER_AND_WAY, - presets: [ - { - title: "Vogelkijkplaats", - tags: [Birdhide.birdhide] - } - ], - style(): { color: string; icon: any } { - return {color: "", icon: undefined}; - }, - }); - - function rmStart(toRemove: string, title: string): string { - if (title.toLowerCase().indexOf(toRemove.toLowerCase()) == 0) { - return title.substr(toRemove.length).trim(); - } - return title; - - } - - function rmStarts(toRemove: string[], title: string) { - for (const toRm of toRemove) { - title = rmStart(toRm, title); - } - return title; - } - - this.title = new TagRenderingOptions({ - tagsPreprocessor: (tags) => { - if (tags.name) { - const nm = - rmStarts( - ["Vogelkijkhut", "Vogelkijkwand", "Kijkwand", "Kijkhut"], - tags.name); - - tags.name = " '" + nm + "'"; - } else { - tags.name = ""; - } - }, - mappings: [ - { - k: new And([new Tag("shelter", "no"), new Tag("building", "")]), - txt: "Vogelkijkwand{name}" - }, - { - k: new And([new Tag("amenity", "shelter"), new Tag("building", "yes")]), - txt: "Vogelijkhut{name}" - }, - { - k: new Tag("amenity", "shelter"), - txt: "Vogelijkhut{name}" - }, - { - k: new Tag("shelter", "yes"), - txt: "Vogelijkhut{name}" - }, - { - k: new Tag("amenity", "shelter"), - txt: "Vogelijkhut{name}" - }, - { - k: new Tag("building", "yes"), - txt: "Vogelijkhut{name}" - }, - {k: null, txt: "Vogelkijkplaats{name}"} - ] - }); - - - this.style = (properties) => { - let icon = "assets/nature/birdhide.svg"; - if (new Or([new Tag("amenity", "shelter"), new Tag("building", "yes"), new Tag("shelter", "yes")]).matchesProperties(properties)) { - icon = "assets/nature/birdshelter.svg"; - } - - return { - color: "#0000bb", - icon: { - iconUrl: icon, - iconSize: [40,40], - iconAnchor: [20,20] - } - } - } - - - this.elementsToShow = [ - new ImageCarouselWithUploadConstructor(), - - new TagRenderingOptions({ - question: "Is dit een kijkwand of kijkhut?", - mappings: [ - { - k: new And([new Tag("shelter", "no"), new Tag("building", ""), new Tag("amenity", "")]), - txt: "Vogelkijkwand" - }, - { - k: new And([new Tag("amenity", "shelter"), new Tag("building", "yes"), new Tag("shelter", "yes")]), - txt: "Vogelijkhut" - }, - { - k: new Or([new Tag("amenity", "shelter"), new Tag("building", "yes"), new Tag("shelter", "yes")]), - txt: "Vogelijkhut" - }, - - ] - }), - new TagRenderingOptions({ - question: "Is ze rolstoeltoegankelijk?", - mappings: [ - { - k: new Tag("wheelchair", "no"), - txt: "Niet rolstoeltoegankelijk" - }, - { - k: new Tag("wheelchair", "limited"), - txt: "Een rolstoel raakt er, maar het is niet makkelijk" - }, - { - k: new Tag("wheelchair", "yes"), - txt: "Een rolstoel raakt er gemakkelijk" - } - ] - }), - - new TagRenderingOptions({ - question: "Wie beheert deze?", - freeform: { - key: "operator", - template: "Beheer door $$$", - renderTemplate: "Beheer door {operator}", - placeholder: "organisatie" - }, - mappings: [ - {k: new Tag("operator", "Natuurpunt"), txt: "Natuurpunt"}, - {k: new Tag("operator", "Agentschap Natuur en Bos"), txt: "het Agentschap Natuur en Bos (ANB)"}, - - ] - }) - - - ]; - - } -} \ No newline at end of file diff --git a/Customizations/Layouts/Natuurpunt.ts b/Customizations/Layouts/Natuurpunt.ts index df81eb6..1ff287e 100644 --- a/Customizations/Layouts/Natuurpunt.ts +++ b/Customizations/Layouts/Natuurpunt.ts @@ -1,5 +1,4 @@ import {Layout} from "../Layout"; -import {Birdhide} from "../Layers/Birdhide"; import {InformationBoard} from "../Layers/InformationBoard"; import {NatureReserves} from "../Layers/NatureReserves"; @@ -9,7 +8,7 @@ export class Natuurpunt extends Layout{ "natuurpunt", ["nl"], "De natuur in", - [new Birdhide(), new InformationBoard(), new NatureReserves(true), "drinking_water"], + ["birdhides", new InformationBoard(), new NatureReserves(true), "drinking_water"], 12, 51.20875, 3.22435, @@ -17,6 +16,6 @@ export class Natuurpunt extends Layout{ "", "" ); - this.icon = "./assets/nature/birdhide.svg" + this.icon = "./assets/layers/bird_hide/birdhide.svg" } } \ No newline at end of file diff --git a/Customizations/OnlyShowIf.ts b/Customizations/OnlyShowIf.ts index 0552a38..d439f07 100644 --- a/Customizations/OnlyShowIf.ts +++ b/Customizations/OnlyShowIf.ts @@ -103,8 +103,9 @@ class OnlyShowIf extends UIElement implements TagDependantUIElement { return this._embedded.IsQuestioning(); } - Activate(): void { + Activate(): UIElement { this._embedded.Activate(); + return this; } Update(): void { diff --git a/Logic/Tags.ts b/Logic/Tags.ts index 414b92b..dcbccd4 100644 --- a/Logic/Tags.ts +++ b/Logic/Tags.ts @@ -46,7 +46,7 @@ export class RegexTag extends TagsFilter { matches(tags: { k: string; v: string }[]): boolean { for (const tag of tags) { if (RegexTag.doesMatch(tag.k, this.key)){ - return RegexTag.doesMatch(tag.v, this.value); + return RegexTag.doesMatch(tag.v, this.value) != this.invert; } } return false; diff --git a/UI/CustomGenerator/CustomGeneratorPanel.ts b/UI/CustomGenerator/CustomGeneratorPanel.ts index 5df977f..fe83784 100644 --- a/UI/CustomGenerator/CustomGeneratorPanel.ts +++ b/UI/CustomGenerator/CustomGeneratorPanel.ts @@ -22,7 +22,7 @@ export default class CustomGeneratorPanel extends UIElement { private mainPanel: UIElement; private loginButton: UIElement; - private connection: OsmConnection; + private readonly connection: OsmConnection; constructor(connection: OsmConnection, layout: LayoutConfigJson) { super(connection.userDetails); @@ -40,7 +40,7 @@ export default class CustomGeneratorPanel extends UIElement { private InitMainPanel(layout: LayoutConfigJson, userDetails: UserDetails, connection: OsmConnection) { const es = new UIEventSource(layout); const encoded = es.map(config => btoa(JSON.stringify(config))); - encoded.addCallback(encoded => LocalStorageSource.Get("\"last-custom-theme\"")) + encoded.addCallback(encoded => LocalStorageSource.Get("last-custom-theme")) const liveUrl = encoded.map(encoded => `./index.html?userlayout=${es.data.id}#${encoded}`) const iframe = liveUrl.map(url => ``); const currentSetting = new UIEventSource>(undefined) diff --git a/UI/CustomGenerator/GenerateEmpty.ts b/UI/CustomGenerator/GenerateEmpty.ts index f07518e..fc02f44 100644 --- a/UI/CustomGenerator/GenerateEmpty.ts +++ b/UI/CustomGenerator/GenerateEmpty.ts @@ -11,7 +11,7 @@ export class GenerateEmpty { overpassTags: {and: [""]}, title: undefined, description: {}, - tagRenderings: [] + tagRenderings: [], } } diff --git a/UI/CustomGenerator/TagRenderingPanel.ts b/UI/CustomGenerator/TagRenderingPanel.ts index ba14ccb..99ebe7e 100644 --- a/UI/CustomGenerator/TagRenderingPanel.ts +++ b/UI/CustomGenerator/TagRenderingPanel.ts @@ -41,7 +41,7 @@ export default class TagRenderingPanel extends InputElement", options?.title ?? "TagRendering", "", options?.description ?? ""]) diff --git a/UI/Image/ImageCarousel.ts b/UI/Image/ImageCarousel.ts index bda22b2..412a42e 100644 --- a/UI/Image/ImageCarousel.ts +++ b/UI/Image/ImageCarousel.ts @@ -85,7 +85,7 @@ export class ImageCarousel extends TagDependantUIElement { this._deleteButton = new ConfirmDialog(showDeleteButton, - "Afbeelding verwijderen", + "Afbeelding verwijderen", "Afbeelding verwijderen", "Terug", deleteCurrent, @@ -149,6 +149,7 @@ export class ImageCarousel extends TagDependantUIElement { Activate() { super.Activate(); this.searcher.Activate(); + return this; } } \ No newline at end of file diff --git a/UI/Image/ImageCarouselWithUpload.ts b/UI/Image/ImageCarouselWithUpload.ts index c82dc09..2984e77 100644 --- a/UI/Image/ImageCarouselWithUpload.ts +++ b/UI/Image/ImageCarouselWithUpload.ts @@ -53,6 +53,7 @@ class ImageCarouselWithUpload extends TagDependantUIElement { super.Activate(); this._imageElement.Activate(); this._pictureUploader.Activate(); + return this; } Update() { diff --git a/UI/Input/SingleTagInput.ts b/UI/Input/SingleTagInput.ts index d48860d..5e998cd 100644 --- a/UI/Input/SingleTagInput.ts +++ b/UI/Input/SingleTagInput.ts @@ -16,7 +16,7 @@ export default class SingleTagInput extends InputElement { constructor(value: UIEventSource = undefined) { super(undefined); - this._value = value ?? new UIEventSource(undefined); + this._value = value ?? new UIEventSource(""); this.key = TextField.KeyInput(); diff --git a/UI/SlideShow.ts b/UI/SlideShow.ts index c6fc1bf..38ee929 100644 --- a/UI/SlideShow.ts +++ b/UI/SlideShow.ts @@ -86,6 +86,7 @@ export class SlideShow extends UIElement { } this._next.Update(); this._prev.Update(); + return this; } } \ No newline at end of file diff --git a/UI/UserBadge.ts b/UI/UserBadge.ts index b73e267..f7ea5da 100644 --- a/UI/UserBadge.ts +++ b/UI/UserBadge.ts @@ -47,7 +47,7 @@ export class UserBadge extends UIElement { this._homeButton = new VariableUiElement( this._userDetails.map((userinfo) => { if (userinfo.home) { - return "home "; + return "home "; } return ""; }) diff --git a/assets/nature/birdhide.svg b/assets/layers/bird_hide/birdhide.svg similarity index 100% rename from assets/nature/birdhide.svg rename to assets/layers/bird_hide/birdhide.svg diff --git a/assets/layers/bird_hide/birdhides.json b/assets/layers/bird_hide/birdhides.json new file mode 100644 index 0000000..78fc325 --- /dev/null +++ b/assets/layers/bird_hide/birdhides.json @@ -0,0 +1,251 @@ +{ + "id": "birdhides", + "name": { + "nl": "Vogelkijkhutten" + }, + "minzoom": 14, + "overpassTags": { + "and": [ + "leisure=bird_hide" + ] + }, + "title": { + "render": { + "nl": "Vogelkijkplaats" + }, + "mappings": [ + { + "if": { + "and": [ + "name~((V|v)ogel.*).*" + ] + }, + "then": { + "nl": "{name}" + } + }, + { + "if": { + "and": [ + "name~*", + { + "or": [ + "building!~no", + "shelter=yes" + ] + } + ] + }, + "then": { + "nl": "Vogelkijkhut {name}" + } + }, + { + "if": { + "and": [ + "name~*" + ] + }, + "then": { + "nl": "Vogelkijkwand {name}" + } + } + ] + }, + "description": { + "nl": "Een vogelkijkhut" + }, + "tagRenderings": [ + { + "question": { + "nl": "Is dit een kijkwand of kijkhut?" + }, + "mappings": [ + { + "if": { + "and": [ + "shelter=no", + "building=", + "amenity=" + ] + }, + "then": { + "nl": "Vogelkijkwand" + } + }, + { + "if": { + "and": [ + "amenity=shelter", + "building=yes", + "shelter=yes" + ] + }, + "then": { + "nl": "Vogelkijkhut" + } + }, + { + "if": { + "or": [ + "amenity=shelter", + "building=yes", + "shelter=yes" + ] + }, + "then": { + "nl": "Vogelkijkhut" + }, + "hideInAnswer": true + } + ] + }, + { + "question": { + "nl": "Is deze vogelkijkplaats rolstoeltoegankelijk?" + }, + "mappings": [ + { + "if": { + "and": [ + "wheelchair=designated" + ] + }, + "then": { + "nl": "Er zijn speciale voorzieningen voor rolstoelen" + } + }, + { + "if": { + "and": [ + "wheelchair=yes" + ] + }, + "then": { + "nl": "Een rolstoel raakt er vlot" + } + }, + { + "if": { + "and": [ + "wheelchair=limited" + ] + }, + "then": { + "nl": "Je kan er raken met een rolstoel, maar het is niet makkelijk" + } + }, + { + "if": { + "and": [ + "wheelchair=no" + ] + }, + "then": { + "nl": "Niet rolstoeltoegankelijk" + } + } + ] + }, + { + "render": { + "nl": "Beheer door {operator}" + }, + "freeform": { + "key": "operator" + }, + "question": { + "nl": "Wie beheert deze vogelkijkplaats?" + }, + "mappings": [ + { + "if": { + "and": [ + "operator~Natuurpunt" + ] + }, + "then": { + "nl": "Beheer door Natuurpunt" + } + }, + { + "if": { + "and": [ + "operator=Agentschap Natuur en Bos" + ] + }, + "then": { + "nl": "Beheer door het Agentschap Natuur en Bos " + } + } + ] + } + ], + "icon": { + "render": { + "nl": "./assets/layers/bird_hide/birdhide.svg" + }, + "mappings": [ + { + "if": { + "or": [ + "building=yes", + "shelter=yes", + "amenity=shelter" + ] + }, + "then": "./assets/layers/bird_hide/birdshelter.svg" + } + ] + }, + "size": { + "question": {}, + "freeform": { + "addExtraTags": [] + }, + "render": { + "nl": "40,40,center" + }, + "mappings": [] + }, + "color": { + "render": { + "nl": "#94bb28" + }, + }, + "stroke": { + "render": { + "nl": "3" + }, + }, + "presets": [ + { + "tags": [ + "leisure=bird_hide", + "building=yes", + "shelter=yes", + "amenity=shelter" + ], + "title": { + "nl": "Vogelkijkhut" + }, + "description": { + "nl": "Een overdekte hut waarbinnen er warm en droog naar vogels gekeken kan worden" + } + }, + { + "tags": [ + "leisure=bird_hide", + "building=no", + "shelter=no" + ], + "title": { + "nl": "Vogelkijkwand" + }, + "description": { + "nl": "Een vogelkijkwand waarachter men kan staan om vogels te kijken" + } + } + ], + "wayHandling": 2 +} \ No newline at end of file diff --git a/assets/nature/birdshelter.svg b/assets/layers/bird_hide/birdshelter.svg similarity index 100% rename from assets/nature/birdshelter.svg rename to assets/layers/bird_hide/birdshelter.svg diff --git a/assets/nature/birdshelter.png b/assets/nature/birdshelter.png deleted file mode 100644 index d5b2303..0000000 Binary files a/assets/nature/birdshelter.png and /dev/null differ diff --git a/css/slideshow.css b/css/slideshow.css new file mode 100644 index 0000000..4c96502 --- /dev/null +++ b/css/slideshow.css @@ -0,0 +1,84 @@ + +.image-slideshow { + position: relative; + text-align: center; + max-width: 100%; + margin-top: 1em; + margin-bottom: 1em; +} + +.slides { + overflow: hidden; +} + +.prev-button { + background-color: black; + opacity: 0.3; + width: 4.0em; + + height: 100%; + padding-left: 0.5em; + padding-right: 0.5em; + position: absolute; + top: 50%; + left: 0; + transform: translate(0, -50%); + + z-index: 5060; + + border-radius: 1em; +} + + +.next-button { + 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; + +} + +.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; +} + + +.hidden { + /* This is used by the slideshow, to hide non-active slides*/ + display: none !important; + +} diff --git a/css/userbadge.css b/css/userbadge.css new file mode 100644 index 0000000..1e618dd --- /dev/null +++ b/css/userbadge.css @@ -0,0 +1,89 @@ + +.small-userbadge-icon { + width: 1em; + height: 1em; + fill: black; + border-radius: 0; +} + +#profile-pic { + float: left; + width: 4em; + height: 4em; + padding: 0; + margin: 0; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + opacity: 0; + transition: opacity 500ms linear; +} + +#username { + text-decoration: none; + color: black; +} + + +#usertext { + width: max-content; + margin: 0; + + padding: 0.9em; + padding-left: 4.7em; /* Should be half of profile-pic's width + actual padding (same as padding-right)*/ + padding-right: 1.5em; + border-radius: 2em; /*Half border radius width/height*/ + height: 2.2em; /*SHould equal profile-pic height - padding*/ + z-index: 5000; + text-align: left; + background-color: white; + background-size: 100%; + display: block; + + line-height: 0.75em; +} + +#usertext a { + text-decoration: none; + color: black; +} + +#userbadge { + display: inline-block; + text-align: center; + background-color: white; + -webkit-border-radius: 2em; + -moz-border-radius: 2em; + border-radius: 2em; + border-bottom-right-radius: 1.5em; + border-top-right-radius: 1.5em; + margin: 0; + margin-bottom: 0.5em; + + min-width: 20em; + pointer-events: all; +} + +.userbadge-login { + font-weight: bold; + font-size: large; + background-color: #e5f5ff !important; + height:3em; + + display: inline-block; + text-align: center; + -webkit-border-radius: 2em; + -moz-border-radius: 2em; + border-radius: 2em; + border-bottom-right-radius: 1.5em; + border-top-right-radius: 1.5em; + margin: 0; + + min-width: 20em; + pointer-events: all; +} + +#userbadge-and-search { + display: inline-block; + width: min-content; +} diff --git a/customGenerator.ts b/customGenerator.ts index 19532fa..6d94d6e 100644 --- a/customGenerator.ts +++ b/customGenerator.ts @@ -12,6 +12,7 @@ if (window.location.hash.length > 10) { } else { const hash = LocalStorageSource.Get("last-custom-theme").data if (hash !== undefined) { + console.log("Using theme from local storage") layout = JSON.parse(atob(hash)) as LayoutConfigJson; } } diff --git a/index.css b/index.css index 3e528bb..dfcec51 100644 --- a/index.css +++ b/index.css @@ -4,23 +4,10 @@ padding: 0; } - body { font-family: 'Helvetica Neue', Arial, sans-serif; } - form { - display: inline; - } - - .invalid { - box-shadow: 0 0 10px #ff5353; - } - - .shadow { - box-shadow: 0 0 10px #00000066; - } - #leafletDiv { height: 100%; @@ -40,10 +27,6 @@ display: none; /*Hidden by default, only visible on mobile*/ } - #help-button-mobile { - display: none; - } - #geolocate-button img { width: 31px; height: 31px; @@ -54,8 +37,9 @@ display: block; } - .selected-element { - fill: black + + #help-button-mobile { + display: none; } /**************** GENERIC ****************/ @@ -78,6 +62,18 @@ padding-bottom: 0.15em; } + form { + display: inline; + } + + .invalid { + box-shadow: 0 0 10px #ff5353; + } + + .shadow { + box-shadow: 0 0 10px #00000066; + } + .soft { background-color: #e5f5ff; font-weight: bold; @@ -126,103 +122,6 @@ } -/**************** USER BADGE ****************/ - -.small-userbadge-icon { - width: 1em; - height: 1em; - fill: black; - border-radius: 0; -} - - - -#home { - cursor: pointer; -} - -#profile-pic { - float: left; - width: 4em; - height: 4em; - padding: 0; - margin: 0; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border-radius: 50%; - opacity: 0; - transition: opacity 500ms linear; -} - -#username { - text-decoration: none; - color: black; -} - - -#usertext { - width: max-content; - margin: 0; - - padding: 0.9em; - padding-left: 4.7em; /* Should be half of profile-pic's width + actual padding (same as padding-right)*/ - padding-right: 1.5em; - border-radius: 2em; /*Half border radius width/height*/ - height: 2.2em; /*SHould equal profile-pic height - padding*/ - z-index: 5000; - text-align: left; - background-color: white; - background-size: 100%; - display: block; - - line-height: 0.75em; -} - -#usertext a { - text-decoration: none; - color: black; -} - -#userbadge { - display: inline-block; - text-align: center; - background-color: white; - -webkit-border-radius: 2em; - -moz-border-radius: 2em; - border-radius: 2em; - border-bottom-right-radius: 1.5em; - border-top-right-radius: 1.5em; - margin: 0; - margin-bottom: 0.5em; - - min-width: 20em; - pointer-events: all; -} - -.userbadge-login { - font-weight: bold; - font-size: large; - background-color: #e5f5ff !important; - height:3em; - - display: inline-block; - text-align: center; - -webkit-border-radius: 2em; - -moz-border-radius: 2em; - border-radius: 2em; - border-bottom-right-radius: 1.5em; - border-top-right-radius: 1.5em; - margin: 0; - - min-width: 20em; - pointer-events: all; -} - -#userbadge-and-search { - display: inline-block; - width: min-content; -} - #searchbox { display: inline-block; @@ -614,7 +513,6 @@ #welcomeMessage { display: inline-block; background-color: white; - padding: 1em; border-radius: 0; width: 100%; max-width: 100%; @@ -719,90 +617,6 @@ /************ Slideshow *****************/ -.image-slideshow { - position: relative; - text-align: center; - max-width: 100%; - margin-top: 1em; - margin-bottom: 1em; -} - -.slides { - overflow: hidden; -} - -.prev-button { - background-color: black; - opacity: 0.3; - width: 4.0em; - - height: 100%; - padding-left: 0.5em; - padding-right: 0.5em; - position: absolute; - top: 50%; - left: 0; - transform: translate(0, -50%); - - z-index: 5060; - - border-radius: 1em; -} - - -.next-button { - 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; - -} - -.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; -} - - -.hidden { - /* This is used by the slideshow, to hide non-active slides*/ - display: none !important; - -} - .imgWithAttr { max-height: 20em; @@ -1101,7 +915,6 @@ padding: 0.5em; padding-left: 0.75em; - height: 3em; width: 14em; border-radius: 1em; border-top-left-radius: 0; diff --git a/index.html b/index.html index 754b501..ede2540 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ MapComplete + +