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

Refactoring: removal of many obsolete css classes

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-05-09 00:06:51 +02:00
parent ab28fbe35c
commit 94111dbdb7
15 changed files with 253 additions and 524 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
StylesheetTestGui.ts Normal file
View file

@ -0,0 +1,4 @@
import SvelteUIElement from "./UI/Base/SvelteUIElement";
import StylesheetTestGui from "./UI/StylesheetTestGui.svelte";
new SvelteUIElement(StylesheetTestGui, {}).AttachTo("main")

4
UI/Popup/DeleteWizard.ts
View file

@ -108,9 +108,7 @@ export default class DeleteWizard extends Toggle {
const deleteOptionPicker = DeleteWizard.constructMultipleChoice(options, tagsSource, state) const deleteOptionPicker = DeleteWizard.constructMultipleChoice(options, tagsSource, state)
const deleteDialog = new Combine([ const deleteDialog = new Combine([
new Title( new Title(
new SubstitutedTranslation(t.whyDelete, tagsSource, state).SetClass( new SubstitutedTranslation(t.whyDelete, tagsSource, state),
"question-text"
),
3 3
), ),
deleteOptionPicker, deleteOptionPicker,

2
UI/Popup/LanguageElement.ts
View file

@ -143,7 +143,7 @@ export class LanguageElement implements SpecialVisualization {
const saveButton = new SaveButton( const saveButton = new SaveButton(
selector.GetValue().map((lngs) => (lngs.length > 0 ? "true" : undefined)), selector.GetValue().map((lngs) => (lngs.length > 0 ? "true" : undefined)),
state.osmConnection state
).onClick(() => { ).onClick(() => {
const selectedLanguages = selector.GetValue().data const selectedLanguages = selector.GetValue().data
const currentLanguages = foundLanguages.data const currentLanguages = foundLanguages.data

19
UI/Popup/SaveButton.ts
View file

@ -1,10 +1,11 @@
import { ImmutableStore, Store } from "../../Logic/UIEventSource" import {Store} from "../../Logic/UIEventSource"
import Translations from "../i18n/Translations" import Translations from "../i18n/Translations"
import { OsmConnection } from "../../Logic/Osm/OsmConnection" import {OsmConnection} from "../../Logic/Osm/OsmConnection"
import Toggle from "../Input/Toggle" import Toggle from "../Input/Toggle"
import BaseUIElement from "../BaseUIElement" import BaseUIElement from "../BaseUIElement"
import Combine from "../Base/Combine" import Combine from "../Base/Combine"
import Svg from "../../Svg" import Svg from "../../Svg"
import {LoginToggle} from "./LoginButton";
export class EditButton extends Toggle { export class EditButton extends Toggle {
constructor(osmConnection: OsmConnection, onClick: () => void) { constructor(osmConnection: OsmConnection, onClick: () => void) {
@ -19,10 +20,13 @@ export class EditButton extends Toggle {
} }
} }
export class SaveButton extends Toggle { export class SaveButton extends LoginToggle {
constructor( constructor(
value: Store<any>, value: Store<any>,
osmConnection: OsmConnection, state: {
readonly osmConnection?: OsmConnection
readonly featureSwitchUserbadge?: Store<boolean>
},
textEnabled?: BaseUIElement, textEnabled?: BaseUIElement,
textDisabled?: BaseUIElement textDisabled?: BaseUIElement
) { ) {
@ -30,11 +34,6 @@ export class SaveButton extends Toggle {
throw "No event source for savebutton, something is wrong" throw "No event source for savebutton, something is wrong"
} }
const pleaseLogin = Translations.t.general.loginToStart
.Clone()
.SetClass("login-button-friendly")
.onClick(() => osmConnection?.AttemptLogin())
const isSaveable = value.map((v) => v !== false && (v ?? "") !== "") const isSaveable = value.map((v) => v !== false && (v ?? "") !== "")
const saveEnabled = (textEnabled ?? Translations.t.general.save.Clone()).SetClass(`btn`) const saveEnabled = (textEnabled ?? Translations.t.general.save.Clone()).SetClass(`btn`)
@ -43,6 +42,6 @@ export class SaveButton extends Toggle {
) )
const save = new Toggle(saveEnabled, saveDisabled, isSaveable) const save = new Toggle(saveEnabled, saveDisabled, isSaveable)
super(save, pleaseLogin, osmConnection?.isLoggedIn ?? new ImmutableStore(false)) super(save, Translations.t.general.loginToStart, state)
} }
} }

4
UI/Reviews/ReviewForm.ts
View file

@ -44,9 +44,7 @@ export default class ReviewForm extends LoginToggle {
const saveButton = new Toggle( const saveButton = new Toggle(
Translations.t.reviews.no_rating.SetClass("block alert"), Translations.t.reviews.no_rating.SetClass("block alert"),
new SubtleButton(Svg.confirm_svg(), Translations.t.reviews.save, { new SubtleButton(Svg.confirm_svg(), Translations.t.reviews.save)
extraClasses: "border-attention-catch",
})
.OnClickWithLoading( .OnClickWithLoading(
Translations.t.reviews.saving_review.SetClass("alert"), Translations.t.reviews.saving_review.SetClass("alert"),
async () => { async () => {

12
UI/Reviews/SingleReview.ts
View file

@ -13,13 +13,15 @@ export default class SingleReview extends Combine {
const reviewAuthor = const reviewAuthor =
review.metadata.nickname ?? review.metadata.nickname ??
(review.metadata.given_name ?? "") + (review.metadata.family_name ?? "") (review.metadata.given_name ?? "") + (review.metadata.family_name ?? "")
const authorElement = new FixedUiElement(reviewAuthor).SetClass("font-bold")
super([ super([
new Combine([SingleReview.GenStars(review.rating)]), new Combine([SingleReview.GenStars(review.rating)]),
new FixedUiElement(review.opinion), new FixedUiElement(review.opinion),
new Combine([ new Combine([
new Combine([ new Combine([
new FixedUiElement(reviewAuthor).SetClass("font-bold"), authorElement,
review.metadata.is_affiliated review.metadata.is_affiliated
? Translations.t.reviews.affiliated_reviewer_warning ? Translations.t.reviews.affiliated_reviewer_warning
: "", : "",
]).SetStyle("margin-right: 0.5em"), ]).SetStyle("margin-right: 0.5em"),
@ -29,15 +31,15 @@ export default class SingleReview extends Combine {
)}-${Utils.TwoDigits(date.getDate())} ${Utils.TwoDigits( )}-${Utils.TwoDigits(date.getDate())} ${Utils.TwoDigits(
date.getHours() date.getHours()
)}:${Utils.TwoDigits(date.getMinutes())}` )}:${Utils.TwoDigits(date.getMinutes())}`
).SetClass("subtle-lighter"), ).SetClass("subtle"),
]).SetClass("flex mb-4 justify-end"), ]).SetClass("flex mb-4 justify-end"),
]) ])
this.SetClass("block p-2 m-4 rounded-xl subtle-background review-element") this.SetClass("block p-2 m-4 rounded-xl subtle-background review-element")
review.madeByLoggedInUser.addCallbackAndRun((madeByUser) => { review.madeByLoggedInUser.addCallbackAndRun((madeByUser) => {
if (madeByUser) { if (madeByUser) {
this.SetClass("border-attention-catch") authorElement.SetClass("thanks")
} else { } else {
this.RemoveClass("border-attention-catch") authorElement.RemoveClass("thanks")
} }
}) })
} }

2
UI/SpecialVisualizations.ts
View file

@ -129,7 +129,7 @@ class NearbyImageVis implements SpecialVisualization {
} }
saveButton = new SaveButton( saveButton = new SaveButton(
selectedImage, selectedImage,
state.osmConnection, state,
confirmText, confirmText,
t.noImageSelected t.noImageSelected
) )

58
UI/StylesheetTestGui.svelte Normal file
View file

@ -0,0 +1,58 @@
<script lang="ts">
</script>
<div>
<h1> Stylesheet testing grounds </h1>
This document exists to explore the style hierarchy.
<div class="normal-background">
<h2>Normal background</h2>
There are a few styles, such as the <span class="literal-code">normal-background</span>-style which is used if there is
nothing special going on. Some general information, with at most <a href="https://example.com" target="_blank">a
link to someplace</a>.
<span class="alert">Alert: something went wrong</span>
<span class="thanks">Thank you! Operation successful</span>
</div>
<div class="low-interaction flex flex-col">
<h2>Low interaction</h2>
<p>
There are <span class="literal-code">low-interaction</span> areas, where some buttons might appear.
</p>
<button class="btn">Main action</button>
<button class="btn-secondary">Secondary action</button>
<button class="btn-disabled">Disabled</button>
<input type="text">
<div>
<input id="html" name="fav_language" type="radio" value="HTML">
<label for="html">HTML</label><br>
<input id="css" name="fav_language" type="radio" value="CSS">
<label for="css">CSS</label><br>
<input id="javascript" name="fav_language" type="radio" value="JavaScript">
<label for="javascript">JavaScript</label>
</div>
<span class="alert">Alert: something went wrong</span>
<span class="thanks">Thank you! Operation successful</span>
</div>
<div class="interactive flex flex-col">
<h2>Interactive area</h2>
<p>
There are <span class="literal-code">interactive</span> areas, where some buttons might appear.
</p>
<button class="btn">Main action</button>
<button class="btn-secondary">Secondary action</button>
<button class="btn-disabled">Disabled</button>
<span class="alert">Alert: something went wrong</span>
<span class="thanks">Thank you! Operation successful</span>
</div>
</div>

83
assets/layers/bike_cleaning/bike_cleaning_icon.svg
View file

@ -1,18 +1,67 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1"> <svg
<g id="surface1"> width="375px"
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(41.960785%,76.862746%,96.862745%);fill-opacity:1;" d="M 375 187.5 C 375 291.054688 291.054688 375 187.5 375 C 83.945312 375 0 291.054688 0 187.5 C 0 83.945312 83.945312 0 187.5 0 C 291.054688 0 375 83.945312 375 187.5 Z M 375 187.5 "/> height="375px"
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;" d="M 112.082031 141.519531 C 112.761719 145.027344 116.449219 148.15625 120.320312 148.511719 C 124.179688 148.871094 126.761719 146.3125 126.082031 142.804688 L 123.097656 127.578125 C 122.417969 124.078125 118.730469 120.941406 114.863281 120.585938 C 111 120.234375 108.425781 122.789062 109.105469 126.289062 Z M 112.082031 141.519531 "/> viewBox="0 0 375 375"
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;" d="M 164.621094 45.179688 L 72.304688 121.449219 L 82.902344 134.277344 L 175.21875 58.011719 Z M 164.621094 45.179688 "/> version="1.1"
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;" d="M 45.011719 41.355469 L 46.390625 26.863281 C 81.960938 30.25 86.851562 34.675781 101.835938 52.867188 L 103.351562 54.703125 L 97.742188 59.339844 L 108.804688 50.199219 C 120.039062 40.917969 136.667969 42.503906 145.949219 53.738281 L 84.226562 104.730469 C 74.945312 93.496094 76.53125 76.867188 87.761719 67.585938 L 92.128906 63.976562 L 90.597656 62.125 C 77.875 46.671875 75.917969 44.296875 45.011719 41.355469 Z M 45.011719 41.355469 "/> id="svg29"
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;" d="M 117.109375 175.765625 C 117.789062 179.273438 121.476562 182.402344 125.34375 182.757812 C 129.207031 183.113281 131.789062 180.554688 131.105469 177.050781 L 128.125 161.824219 C 127.445312 158.320312 123.757812 155.1875 119.886719 154.832031 C 116.027344 154.480469 113.453125 157.03125 114.132812 160.535156 Z M 117.109375 175.765625 "/> xmlns="http://www.w3.org/2000/svg"
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;" d="M 139.046875 124.457031 C 141.324219 127.210938 146.058594 128.1875 149.625 126.648438 C 153.1875 125.109375 154.226562 121.628906 151.945312 118.875 L 142.035156 106.941406 C 139.757812 104.195312 135.019531 103.207031 131.453125 104.75 C 127.898438 106.292969 126.859375 109.769531 129.136719 112.515625 Z M 139.046875 124.457031 "/> xmlns:svg="http://www.w3.org/2000/svg">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;" d="M 159.960938 149.890625 C 162.011719 152.632812 166.5 153.796875 169.992188 152.496094 C 173.476562 151.199219 174.640625 147.917969 172.589844 145.175781 L 163.675781 133.273438 C 161.628906 130.539062 157.140625 129.367188 153.648438 130.667969 C 150.164062 131.96875 149.003906 135.246094 151.050781 137.984375 Z M 159.960938 149.890625 "/> <defs
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;" d="M 167.828125 103.125 C 171.160156 104.417969 175.773438 102.960938 178.132812 99.875 C 180.492188 96.796875 179.703125 93.25 176.371094 91.960938 L 161.898438 86.375 C 158.570312 85.085938 153.953125 86.535156 151.59375 89.621094 C 149.238281 92.703125 150.027344 96.242188 153.355469 97.53125 Z M 167.828125 103.125 "/> id="defs33" />
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;" d="M 201.746094 110.976562 C 205.148438 112.070312 209.667969 110.34375 211.839844 107.121094 C 214.011719 103.910156 213.011719 100.414062 209.609375 99.324219 L 194.832031 94.605469 C 191.433594 93.519531 186.910156 95.242188 184.738281 98.460938 C 182.570312 101.675781 183.570312 105.164062 186.964844 106.25 Z M 201.746094 110.976562 "/> <g
<path style="fill:none;stroke-width:2.218927;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;" d="M 50.491438 73.912417 L 33.444542 73.912417 L 42.743313 53.278313 L 65.988708 53.278313 M 65.988708 53.278313 L 63.406 47.459563 L 70.637583 47.459563 M 65.988708 53.278313 L 67.021792 55.924313 L 69.087958 60.156688 L 74.770938 73.912417 M 65.988708 53.278313 L 61.081563 61.214271 L 58.137479 65.976458 M 56.174417 69.15125 L 58.137479 65.976458 M 46.359104 59.098083 L 51.524521 70.737625 L 41.193688 47.459563 L 44.292938 53.808125 M 54.624792 71.796229 L 58.137479 65.976458 " transform="matrix(3.826531,0,0,3.826531,0,0)"/> id="surface1">
<path style="fill:none;stroke-width:1.109463;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;" d="M 56.057021 73.012042 C 56.057021 74.763792 54.673792 76.161313 52.995542 76.161313 C 51.317292 76.161313 49.934063 74.763792 49.934063 73.012042 C 49.934063 71.260292 51.317292 69.863792 52.995542 69.863792 C 54.673792 69.863792 56.057021 71.260292 56.057021 73.012042 Z M 56.057021 73.012042 " transform="matrix(3.826531,0,0,3.826531,0,0)"/> <path
<path style="fill:none;stroke-width:2.218927;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;" d="M 45.170854 71.954458 C 45.170854 78.671542 39.860479 84.07175 33.365938 84.07175 C 26.871396 84.07175 21.561021 78.671542 21.561021 71.954458 C 21.561021 65.237375 26.871396 59.837167 33.365938 59.837167 C 39.860479 59.837167 45.170854 65.237375 45.170854 71.954458 Z M 45.170854 71.954458 " transform="matrix(3.826531,0,0,3.826531,0,0)"/> style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;"
<path style="fill:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;" d="M 77.000287 62.999629 C 77.000287 69.075145 72.074914 73.999598 66.000318 73.999598 C 59.924801 73.999598 55.000348 69.075145 55.000348 62.999629 C 55.000348 56.925033 59.924801 51.99966 66.000318 51.99966 C 72.074914 51.99966 77.000287 56.925033 77.000287 62.999629 Z M 77.000287 62.999629 " transform="matrix(4.245395,0,0,4.245395,1.841617,11.787758)"/> d="M 112.082031 141.519531 C 112.761719 145.027344 116.449219 148.15625 120.320312 148.511719 C 124.179688 148.871094 126.761719 146.3125 126.082031 142.804688 L 123.097656 127.578125 C 122.417969 124.078125 118.730469 120.941406 114.863281 120.585938 C 111 120.234375 108.425781 122.789062 109.105469 126.289062 Z M 112.082031 141.519531 "
id="path4" />
<path
style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;"
d="M 164.621094 45.179688 L 72.304688 121.449219 L 82.902344 134.277344 L 175.21875 58.011719 Z M 164.621094 45.179688 "
id="path6" />
<path
style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;"
d="M 45.011719 41.355469 L 46.390625 26.863281 C 81.960938 30.25 86.851562 34.675781 101.835938 52.867188 L 103.351562 54.703125 L 97.742188 59.339844 L 108.804688 50.199219 C 120.039062 40.917969 136.667969 42.503906 145.949219 53.738281 L 84.226562 104.730469 C 74.945312 93.496094 76.53125 76.867188 87.761719 67.585938 L 92.128906 63.976562 L 90.597656 62.125 C 77.875 46.671875 75.917969 44.296875 45.011719 41.355469 Z M 45.011719 41.355469 "
id="path8" />
<path
style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;"
d="M 117.109375 175.765625 C 117.789062 179.273438 121.476562 182.402344 125.34375 182.757812 C 129.207031 183.113281 131.789062 180.554688 131.105469 177.050781 L 128.125 161.824219 C 127.445312 158.320312 123.757812 155.1875 119.886719 154.832031 C 116.027344 154.480469 113.453125 157.03125 114.132812 160.535156 Z M 117.109375 175.765625 "
id="path10" />
<path
style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;"
d="M 139.046875 124.457031 C 141.324219 127.210938 146.058594 128.1875 149.625 126.648438 C 153.1875 125.109375 154.226562 121.628906 151.945312 118.875 L 142.035156 106.941406 C 139.757812 104.195312 135.019531 103.207031 131.453125 104.75 C 127.898438 106.292969 126.859375 109.769531 129.136719 112.515625 Z M 139.046875 124.457031 "
id="path12" />
<path
style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;"
d="M 159.960938 149.890625 C 162.011719 152.632812 166.5 153.796875 169.992188 152.496094 C 173.476562 151.199219 174.640625 147.917969 172.589844 145.175781 L 163.675781 133.273438 C 161.628906 130.539062 157.140625 129.367188 153.648438 130.667969 C 150.164062 131.96875 149.003906 135.246094 151.050781 137.984375 Z M 159.960938 149.890625 "
id="path14" />
<path
style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;"
d="M 167.828125 103.125 C 171.160156 104.417969 175.773438 102.960938 178.132812 99.875 C 180.492188 96.796875 179.703125 93.25 176.371094 91.960938 L 161.898438 86.375 C 158.570312 85.085938 153.953125 86.535156 151.59375 89.621094 C 149.238281 92.703125 150.027344 96.242188 153.355469 97.53125 Z M 167.828125 103.125 "
id="path16" />
<path
style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,98.823529%);fill-opacity:1;"
d="M 201.746094 110.976562 C 205.148438 112.070312 209.667969 110.34375 211.839844 107.121094 C 214.011719 103.910156 213.011719 100.414062 209.609375 99.324219 L 194.832031 94.605469 C 191.433594 93.519531 186.910156 95.242188 184.738281 98.460938 C 182.570312 101.675781 183.570312 105.164062 186.964844 106.25 Z M 201.746094 110.976562 "
id="path18" />
<path
style="fill:none;stroke-width:2.218927;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;"
d="M 50.491438 73.912417 L 33.444542 73.912417 L 42.743313 53.278313 L 65.988708 53.278313 M 65.988708 53.278313 L 63.406 47.459563 L 70.637583 47.459563 M 65.988708 53.278313 L 67.021792 55.924313 L 69.087958 60.156688 L 74.770938 73.912417 M 65.988708 53.278313 L 61.081563 61.214271 L 58.137479 65.976458 M 56.174417 69.15125 L 58.137479 65.976458 M 46.359104 59.098083 L 51.524521 70.737625 L 41.193688 47.459563 L 44.292938 53.808125 M 54.624792 71.796229 L 58.137479 65.976458 "
transform="matrix(3.826531,0,0,3.826531,0,0)"
id="path20" />
<path
style="fill:none;stroke-width:1.109463;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;"
d="M 56.057021 73.012042 C 56.057021 74.763792 54.673792 76.161313 52.995542 76.161313 C 51.317292 76.161313 49.934063 74.763792 49.934063 73.012042 C 49.934063 71.260292 51.317292 69.863792 52.995542 69.863792 C 54.673792 69.863792 56.057021 71.260292 56.057021 73.012042 Z M 56.057021 73.012042 "
transform="matrix(3.826531,0,0,3.826531,0,0)"
id="path22" />
<path
style="fill:none;stroke-width:2.218927;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;"
d="M 45.170854 71.954458 C 45.170854 78.671542 39.860479 84.07175 33.365938 84.07175 C 26.871396 84.07175 21.561021 78.671542 21.561021 71.954458 C 21.561021 65.237375 26.871396 59.837167 33.365938 59.837167 C 39.860479 59.837167 45.170854 65.237375 45.170854 71.954458 Z M 45.170854 71.954458 "
transform="matrix(3.826531,0,0,3.826531,0,0)"
id="path24" />
<path
style="fill:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;"
d="M 77.000287 62.999629 C 77.000287 69.075145 72.074914 73.999598 66.000318 73.999598 C 59.924801 73.999598 55.000348 69.075145 55.000348 62.999629 C 55.000348 56.925033 59.924801 51.99966 66.000318 51.99966 C 72.074914 51.99966 77.000287 56.925033 77.000287 62.999629 Z M 77.000287 62.999629 "
transform="matrix(4.245395,0,0,4.245395,1.841617,11.787758)"
id="path26" />
</g> </g>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

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

@ -5218,4 +5218,4 @@
}, },
"neededChangesets": 10 "neededChangesets": 10
} }
} }

58
assets/svg/license_info.json
View file

@ -59,18 +59,6 @@
], ],
"sources": [] "sources": []
}, },
{
"path": "ampersand.svg",
"license": "CC0; trivial",
"authors": [],
"sources": []
},
{
"path": "ampersand.svg",
"license": "CC0; trivial",
"authors": [],
"sources": []
},
{ {
"path": "back.svg", "path": "back.svg",
"license": "CC0", "license": "CC0",
@ -165,22 +153,6 @@
"https://commons.wikimedia.org/wiki/File:Camera_font_awesome.svg" "https://commons.wikimedia.org/wiki/File:Camera_font_awesome.svg"
] ]
}, },
{
"path": "checkbox-empty.svg",
"license": "CC0",
"authors": [
"Hannah Declerck"
],
"sources": []
},
{
"path": "checkbox-filled.svg",
"license": "CC0",
"authors": [
"Hannah Declerck"
],
"sources": []
},
{ {
"path": "checkmark.svg", "path": "checkmark.svg",
"license": "CC0", "license": "CC0",
@ -289,36 +261,6 @@
"authors": [], "authors": [],
"sources": [] "sources": []
}, },
{
"path": "crosshair-blue-center.svg",
"license": "CC0; trivial",
"authors": [],
"sources": []
},
{
"path": "crosshair-blue-center.svg",
"license": "CC0; trivial",
"authors": [],
"sources": []
},
{
"path": "crosshair-blue.svg",
"license": "CC0; trivial",
"authors": [],
"sources": []
},
{
"path": "crosshair-blue.svg",
"license": "CC0; trivial",
"authors": [],
"sources": []
},
{
"path": "crosshair-empty.svg",
"license": "CC0; trivial",
"authors": [],
"sources": []
},
{ {
"path": "crosshair-locked.svg", "path": "crosshair-locked.svg",
"license": "CC0; trivial", "license": "CC0; trivial",

194
css/index-tailwind-output.css
View file

@ -763,14 +763,6 @@ video {
margin: 1.25rem; margin: 1.25rem;
} }
.m-0\.5 {
margin: 0.125rem;
}
.m-0 {
margin: 0px;
}
.m-3 { .m-3 {
margin: 0.75rem; margin: 0.75rem;
} }
@ -783,6 +775,14 @@ video {
margin: 0.25rem; margin: 0.25rem;
} }
.m-0\.5 {
margin: 0.125rem;
}
.m-0 {
margin: 0px;
}
.m-4 { .m-4 {
margin: 1rem; margin: 1rem;
} }
@ -989,10 +989,6 @@ video {
height: 8rem; height: 8rem;
} }
.h-10 {
height: 2.5rem;
}
.h-12 { .h-12 {
height: 3rem; height: 3rem;
} }
@ -1039,6 +1035,10 @@ video {
height: 10rem; height: 10rem;
} }
.h-10 {
height: 2.5rem;
}
.h-80 { .h-80 {
height: 20rem; height: 20rem;
} }
@ -1075,10 +1075,6 @@ video {
width: 8rem; width: 8rem;
} }
.w-10 {
width: 2.5rem;
}
.w-12 { .w-12 {
width: 3rem; width: 3rem;
} }
@ -1130,6 +1126,10 @@ video {
width: 6rem; width: 6rem;
} }
.w-10 {
width: 2.5rem;
}
.w-48 { .w-48 {
width: 12rem; width: 12rem;
} }
@ -1241,10 +1241,6 @@ video {
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
} }
.place-content-center {
place-content: center;
}
.content-start { .content-start {
align-content: flex-start; align-content: flex-start;
} }
@ -1428,11 +1424,6 @@ video {
border-color: rgb(132 204 22 / var(--tw-border-opacity)); border-color: rgb(132 204 22 / var(--tw-border-opacity));
} }
.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.border-opacity-50 { .border-opacity-50 {
--tw-border-opacity: 0.5; --tw-border-opacity: 0.5;
} }
@ -1805,15 +1796,6 @@ video {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
} }
.z-above-map {
z-index: 10000;
}
.bg-subtle {
background-color: var(--subtle-detail-color);
color: var(--subtle-detail-color-contrast);
}
.\[key\:string\] { .\[key\:string\] {
key: string; key: string;
} }
@ -1823,19 +1805,20 @@ video {
} }
:root { :root {
/* The main colour scheme of mapcomplete is configured here. /*
* For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these. * The main colour scheme of mapcomplete is configured here.
*/ * For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these.
*/
/* Main color of the application: the background and text colours */ /* Main color of the application: the background and text colours */
--background-color: white; --background-color: white;
/* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */ /* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */
--foreground-color: black; --foreground-color: black;
/* A colour to indicate an error or warning */ /* A colour scheme to indicate an error or warning */
--alert-color: #fee4d1; --alert-color: #fee4d1;
--alert-foreground-color: var(--foreground-color);
/** /**
* Base colour of interactive elements, mainly the 'subtle button' * Base colour of interactive elements, mainly the 'subtle button'
* */
*/
--subtle-detail-color: #dbeafe; --subtle-detail-color: #dbeafe;
--subtle-detail-color-contrast: black; --subtle-detail-color-contrast: black;
--subtle-detail-color-light-contrast: lightgrey; --subtle-detail-color-light-contrast: lightgrey;
@ -1847,11 +1830,7 @@ video {
--unsubtle-detail-color-contrast: black; --unsubtle-detail-color-contrast: black;
--catch-detail-color: #3a3aeb; --catch-detail-color: #3a3aeb;
--catch-detail-color-contrast: white; --catch-detail-color-contrast: white;
--non-active-tab-svg: var(--foreground-color);
--shadow-color: #00000066;
--image-carousel-height: 350px; --image-carousel-height: 350px;
/* Technical variable to make some dynamic behaviour possible; set by javascript. */
--variable-title-height: 0px;
} }
html, html,
@ -1936,34 +1915,6 @@ a {
border: 3px solid var(--unsubtle-detail-color); border: 3px solid var(--unsubtle-detail-color);
} }
/* slider */
input[type="range"].vertical {
-webkit-writing-mode: bt-lr;
writing-mode: bt-lr;
/* IE */
-webkit-appearance: slider-vertical;
/* Chromium */
cursor: pointer;
}
@-moz-document url-prefix() {
input[type="range"].elevator::-moz-range-thumb {
background-color: #00000000 !important;
background-image: url("/assets/svg/elevator_wheelchair.svg");
width: 150px !important;
height: 30px !important;
border: 2px;
border-style: solid;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
border-image: linear-gradient(to right, black 50%, transparent 50%) 100% 1;
padding-bottom: 5px;
}
}
.rounded-left-full { .rounded-left-full {
border-bottom-left-radius: 999rem; border-bottom-left-radius: 999rem;
border-top-left-radius: 999rem; border-top-left-radius: 999rem;
@ -1995,6 +1946,8 @@ li {
} }
h2 { h2 {
font-size: x-large;
margin-bottom: 0. 4em;
font-size: large; font-size: large;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.3em; margin-bottom: 0.3em;
@ -2027,22 +1980,6 @@ li::marker {
color: var(--foreground-color); color: var(--foreground-color);
} }
.subtle-lighter {
color: var(--subtle-detail-color-light-contrast);
}
.border-attention-catch {
border: 5px solid var(--catch-detail-color);
}
.border-attention {
border-color: var(--catch-detail-color);
}
.direction-svg svg path {
fill: var(--catch-detail-color) !important;
}
.block-ruby { .block-ruby {
display: block ruby; display: block ruby;
} }
@ -2066,6 +2003,8 @@ li::marker {
} }
.selected svg:not(.noselect *) path.selectable { .selected svg:not(.noselect *) path.selectable {
/* A marker on the map gets the 'selected' class when it's properties are displayed
*/
stroke: white !important; stroke: white !important;
stroke-width: 20px !important; stroke-width: 20px !important;
overflow: visible !important; overflow: visible !important;
@ -2074,6 +2013,8 @@ li::marker {
} }
.selected svg { .selected svg {
/* A marker on the map gets the 'selected' class when it's properties are displayed
*/
overflow: visible !important; overflow: visible !important;
} }
@ -2093,7 +2034,7 @@ li::marker {
.alert { .alert {
background-color: var(--alert-color); background-color: var(--alert-color);
color: var(--foreground-color); color: var(--alert-foreground-color);
font-weight: bold; font-weight: bold;
border-radius: 1em; border-radius: 1em;
margin: 0.25em; margin: 0.25em;
@ -2101,31 +2042,10 @@ li::marker {
padding: 0.15em 0.3em; padding: 0.15em 0.3em;
} }
.invalid {
box-shadow: 0 0 10px #ff5353;
height: -webkit-min-content;
height: min-content;
}
.shadow { .shadow {
box-shadow: 0 0 20px var(--shadow-color); box-shadow: 0 0 20px var(--shadow-color);
} }
.title-font span {
font-size: xx-large !important;
font-weight: bold;
}
.soft {
background-color: var(--subtle-detail-color);
color: var(--subtle-detail-color-contrast);
font-weight: bold;
border-radius: 1em;
margin: 0.25em;
text-align: center;
padding: 0.15em 0.3em;
}
.subtle { .subtle {
color: #999; color: #999;
} }
@ -2229,52 +2149,6 @@ input {
} }
} }
.mapping-icon-small-height {
/* A mapping icon type */
height: 1.5rem;
margin-right: 0.5rem;
width: unset;
}
.mapping-icon-medium-height {
/* A mapping icon type */
height: 3rem;
margin-right: 0.5rem;
width: unset;
}
.mapping-icon-large-height {
/* A mapping icon type */
height: 5rem;
margin-right: 0.5rem;
width: unset;
}
.mapping-icon-small {
/* A mapping icon type */
width: 1.5rem;
max-height: 1.5rem;
margin-right: 0.5rem;
}
.mapping-icon-medium {
/* A mapping icon type */
width: 3rem;
max-height: 3rem;
margin-right: 1rem;
margin-left: 1rem;
}
.mapping-icon-large {
/* A mapping icon type */
width: 6rem;
max-height: 5rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
margin-right: 1.5rem;
margin-left: 1.5rem;
}
.hover\:bg-unsubtle:hover { .hover\:bg-unsubtle:hover {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(191 219 254 / var(--tw-bg-opacity)); background-color: rgb(191 219 254 / var(--tw-bg-opacity));
@ -2296,11 +2170,6 @@ input {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.hover\:bg-unsubtle:hover {
background-color: var(--unsubtle-detail-color);
color: var(--unsubtle-detail-color-contrast);
}
@media (max-width: 480px) { @media (max-width: 480px) {
.max-\[480px\]\:w-full { .max-\[480px\]\:w-full {
width: 100%; width: 100%;
@ -2530,3 +2399,4 @@ input {
width: 33.333333%; width: 33.333333%;
} }
} }

69
css/mobile.css
View file

@ -1,77 +1,10 @@
/*
Contains tweaks for small screens
*/
@media only screen and (min-width: 769px) and (min-height: 700px) {
.only-on-mobile {
display: none !important;
}
}
@media only screen and (min-height: 175px) and (min-width: 175px) {
.very-small-screen {
display: none !important;
}
.hidden-on-very-small-screen {
}
}
@media not screen and (min-height: 175px) and (min-width: 175px) {
.very-small-screen {
}
.hidden-on-very-small-screen {
display: none !important;
}
}
@media only screen and (max-width: 768px), only screen and (max-height: 700px) { @media only screen and (max-width: 768px), only screen and (max-height: 700px) {
.hidden-on-mobile { .hidden-on-mobile {
display: none !important; display: none !important;
} }
#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;
width: 100vw;
height: 100vh;
}
}
@media only screen and (max-width: 768px) {
#leafletDiv .leaflet-control-attribution {
display: none;
}
.leaflet-popup {
display: none;
}
} }

84
css/tagrendering.css
View file

@ -1,4 +1,8 @@
/**
Some utility functions which are only used to render data
*/
.question .form-text-field > input { .question .form-text-field > input {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -26,43 +30,53 @@
height: 100%; height: 100%;
} }
.question-text {
font-size: larger;
font-weight: bold;
margin-bottom: 0.5em; .mapping-icon-small-height {
/* A mapping icon type */
height: 1.5rem;
margin-right: 0.5rem;
width: unset;
} }
.question-text img { .mapping-icon-medium-height {
max-width: 100%; /* A mapping icon type */
} height: 3rem;
margin-right: 0.5rem;
width: unset;
}
.question-option-with-border {
border: 2px solid lightgray; .mapping-icon-large-height {
border-radius: 0.5em; /* A mapping icon type */
display: block; height: 5rem;
width: 100%; margin-right: 0.5rem;
margin: 5px; width: unset;
box-sizing: border-box; }
padding: 0.5em;
} .mapping-icon-small {
/* A mapping icon type */
input:checked + label .question-option-with-border { width: 1.5rem;
border: 2px solid var(--subtle-detail-color-contrast); max-height: 1.5rem;
} margin-right: 0.5rem;
}
.login-button-friendly {
display: inline-block; .mapping-icon-medium {
background-color: var(--catch-detail-color); /* A mapping icon type */
color: var(--catch-detail-color-contrast); width: 3rem;
border: solid var(--catch-detail-color-contrast) 2px; max-height: 3rem;
padding: 0.2em 0.6em; margin-right: 1rem;
font-size: large; margin-left: 1rem;
font-weight: bold; }
border-radius: 1.5em;
box-sizing: border-box; .mapping-icon-large {
width: 100%; /* A mapping icon type */
width: 6rem;
max-height: 5rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
margin-right: 1.5rem;
margin-left: 1.5rem;
} }

182
index.css
View file

@ -11,62 +11,24 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer utilities {
.z-above-map {
z-index: 10000;
}
.z-above-controls {
z-index: 10001;
}
.w-160 {
width: 40rem;
}
.bg-subtle {
background-color: var(--subtle-detail-color);
color: var(--subtle-detail-color-contrast);
}
.bg-unsubtle {
background-color: var(--unsubtle-detail-color);
color: var(--unsubtle-detail-color-contrast);
}
.bg-catch {
background-color: var(--catch-detail-color);
color: var(--catch-detail-color-contrast);
}
.rounded-left-full {
border-bottom-left-radius: 999rem;
border-top-left-radius: 999rem;
}
.rounded-right-full {
border-bottom-right-radius: 999rem;
border-top-right-radius: 999rem;
}
}
:root { :root {
/* The main colour scheme of mapcomplete is configured here. /*
* For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these. * The main colour scheme of mapcomplete is configured here.
*/ * For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these.
*/
/* Main color of the application: the background and text colours */ /* Main color of the application: the background and text colours */
--background-color: white; --background-color: white;
/* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */ /* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */
--foreground-color: black; --foreground-color: black;
/* A colour to indicate an error or warning */ /* A colour scheme to indicate an error or warning */
--alert-color: #fee4d1; --alert-color: #fee4d1;
--alert-foreground-color: var(--foreground-color);
/** /**
* Base colour of interactive elements, mainly the 'subtle button' * Base colour of interactive elements, mainly the 'subtle button'
* */
*/
--subtle-detail-color: #dbeafe; --subtle-detail-color: #dbeafe;
--subtle-detail-color-contrast: black; --subtle-detail-color-contrast: black;
--subtle-detail-color-light-contrast: lightgrey; --subtle-detail-color-light-contrast: lightgrey;
@ -81,13 +43,9 @@
--catch-detail-color: #3a3aeb; --catch-detail-color: #3a3aeb;
--catch-detail-color-contrast: white; --catch-detail-color-contrast: white;
--non-active-tab-svg: var(--foreground-color);
--shadow-color: #00000066;
--image-carousel-height: 350px; --image-carousel-height: 350px;
/* Technical variable to make some dynamic behaviour possible; set by javascript. */
--variable-title-height: 0px;
} }
html, html,
@ -173,30 +131,6 @@ a {
border: 3px solid var(--unsubtle-detail-color); border: 3px solid var(--unsubtle-detail-color);
} }
/* slider */
input[type="range"].vertical {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* Chromium */
cursor: pointer;
}
@-moz-document url-prefix() {
input[type="range"].elevator::-moz-range-thumb {
background-color: #00000000 !important;
background-image: url("/assets/svg/elevator_wheelchair.svg");
width: 150px !important;
height: 30px !important;
border: 2px;
border-style: solid;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
border-image: linear-gradient(to right, black 50%, transparent 50%) 100% 1;
padding-bottom: 5px;
}
}
.rounded-left-full { .rounded-left-full {
border-bottom-left-radius: 999rem; border-bottom-left-radius: 999rem;
border-top-left-radius: 999rem; border-top-left-radius: 999rem;
@ -225,6 +159,14 @@ li {
margin-top: 0.1em; margin-top: 0.1em;
} }
h1 {
font-size: x-large;
margin-top: 0.6em;
margin-bottom: 0.4em;
font-weight: bold;
}
h2 { h2 {
font-size: large; font-size: large;
margin-top: 0.5em; margin-top: 0.5em;
@ -264,22 +206,6 @@ li::marker {
color: var(--foreground-color); color: var(--foreground-color);
} }
.subtle-lighter {
color: var(--subtle-detail-color-light-contrast);
}
.border-attention-catch {
border: 5px solid var(--catch-detail-color);
}
.border-attention {
border-color: var(--catch-detail-color);
}
.direction-svg svg path {
fill: var(--catch-detail-color) !important;
}
.block-ruby { .block-ruby {
display: block ruby; display: block ruby;
} }
@ -302,7 +228,10 @@ li::marker {
display: none; display: none;
} }
.selected svg:not(.noselect *) path.selectable { .selected svg:not(.noselect *) path.selectable {
/* A marker on the map gets the 'selected' class when it's properties are displayed
*/
stroke: white !important; stroke: white !important;
stroke-width: 20px !important; stroke-width: 20px !important;
overflow: visible !important; overflow: visible !important;
@ -312,6 +241,8 @@ li::marker {
} }
.selected svg { .selected svg {
/* A marker on the map gets the 'selected' class when it's properties are displayed
*/
overflow: visible !important; overflow: visible !important;
} }
@ -330,31 +261,7 @@ li::marker {
.alert { .alert {
background-color: var(--alert-color); background-color: var(--alert-color);
color: var(--foreground-color); color: var(--alert-foreground-color);
font-weight: bold;
border-radius: 1em;
margin: 0.25em;
text-align: center;
padding: 0.15em 0.3em;
}
.invalid {
box-shadow: 0 0 10px #ff5353;
height: min-content;
}
.shadow {
box-shadow: 0 0 20px var(--shadow-color);
}
.title-font span {
font-size: xx-large !important;
font-weight: bold;
}
.soft {
background-color: var(--subtle-detail-color);
color: var(--subtle-detail-color-contrast);
font-weight: bold; font-weight: bold;
border-radius: 1em; border-radius: 1em;
margin: 0.25em; margin: 0.25em;
@ -448,48 +355,3 @@ input {
} }
} }
.mapping-icon-small-height {
/* A mapping icon type */
height: 1.5rem;
margin-right: 0.5rem;
width: unset;
}
.mapping-icon-medium-height {
/* A mapping icon type */
height: 3rem;
margin-right: 0.5rem;
width: unset;
}
.mapping-icon-large-height {
/* A mapping icon type */
height: 5rem;
margin-right: 0.5rem;
width: unset;
}
.mapping-icon-small {
/* A mapping icon type */
width: 1.5rem;
max-height: 1.5rem;
margin-right: 0.5rem;
}
.mapping-icon-medium {
/* A mapping icon type */
width: 3rem;
max-height: 3rem;
margin-right: 1rem;
margin-left: 1rem;
}
.mapping-icon-large {
/* A mapping icon type */
width: 6rem;
max-height: 5rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
margin-right: 1.5rem;
margin-left: 1.5rem;
}