contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Style: style loading screen

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-05-25 10:46:32 +02:00
parent ab8af30934
commit 48700c3e15
3 changed files with 56 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

34
public/css/index-tailwind-output.css
View file

@ -805,11 +805,6 @@ video {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.my-2 { .my-2 {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
@ -825,6 +820,15 @@ video {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mr-2 { .mr-2 {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
@ -861,10 +865,6 @@ video {
margin-right: 0.25rem; margin-right: 0.25rem;
} }
.mb-4 {
margin-bottom: 1rem;
}
.ml-4 { .ml-4 {
margin-left: 1rem; margin-left: 1rem;
} }
@ -1075,6 +1075,10 @@ video {
width: 100%; width: 100%;
} }
.w-1\/2 {
width: 50%;
}
.w-8 { .w-8 {
width: 2rem; width: 2rem;
} }
@ -1133,10 +1137,6 @@ video {
width: 16rem; width: 16rem;
} }
.w-1\/2 {
width: 50%;
}
.w-96 { .w-96 {
width: 24rem; width: 24rem;
} }
@ -1532,6 +1532,10 @@ video {
padding: 0.25rem; padding: 0.25rem;
} }
.p-8 {
padding: 2rem;
}
.p-2 { .p-2 {
padding: 0.5rem; padding: 0.5rem;
} }
@ -1548,10 +1552,6 @@ video {
padding: 0px; padding: 0px;
} }
.p-8 {
padding: 2rem;
}
.px-1 { .px-1 {
padding-left: 0.25rem; padding-left: 0.25rem;
padding-right: 0.25rem; padding-right: 0.25rem;

3
scripts/generateLayouts.ts
View file

@ -280,7 +280,8 @@ async function createLandingPage(layout: LayoutConfig, manifest, whiteIcons, alr
.replace( .replace(
/<!-- DESCRIPTION START -->.*<!-- DESCRIPTION END -->/s, /<!-- DESCRIPTION START -->.*<!-- DESCRIPTION END -->/s,
asLangSpan(layout.shortDescription) asLangSpan(layout.shortDescription)
) ) .replace(/<!-- IMAGE-START -->.*<!-- IMAGE-END-->/s, "<img class='p-8 h-32 w-32 self-start' src='"+ icon+"' />")
.replace( .replace(
'<script type="module" src="./index.ts"></script>', '<script type="module" src="./index.ts"></script>',
`<script type="module" src='./index_${layout.id}.ts'></script>` `<script type="module" src='./index_${layout.id}.ts'></script>`

59
theme.html
View file

@ -33,53 +33,68 @@
<link href="./assets/generated/images/assets_svg_mapcomplete_logo72.png" rel="apple-touch-icon" sizes="72x72"> <link href="./assets/generated/images/assets_svg_mapcomplete_logo72.png" rel="apple-touch-icon" sizes="72x72">
<!-- THEME-SPECIFIC-END--> <!-- THEME-SPECIFIC-END-->
</head> </head>
<body> <body>
<span class="absolute" id="belowmap" style="z-index: -1; visibility: hidden">Below</span> <span class="absolute" id="belowmap" style="z-index: -1; visibility: hidden">Below</span>
<div id="maindiv" class="h-full"> <div class="h-full" id="maindiv">
<div id="default-main"> <div id="default-main h-full">
<div class="w-full h-screen flex flex-col items-center justify-between">
<span id="default-title">Loading MapComplete, hang on...</span> <div class="w-full h-full flex flex-col items-center">
<!-- DESCRIPTION START --> <h1 id="default-title">Loading MapComplete, hang on...</h1>
MapComplete is an easy to use map viewer and map editor
<!-- DESCRIPTION END --> <p class="text-xl">
<!-- DESCRIPTION START -->
MapComplete is an easy to use map viewer and map editor
<!-- DESCRIPTION END -->
</p>
<p>
Made with OpenStreetMap
</p>
</div>
<!-- IMAGE-START -->
<img class="p-8 h-32 w-32 self-start" src="./assets/svg/add.svg">
<!-- IMAGE-END -->
</div>
</div> </div>
</div> </div>
<script> <script>
let lang = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage || 'en').substr(0, 2); let lang = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage || 'en').substr(0, 2);
function filterLangs(maindiv){
function filterLangs(maindiv) {
let foundLangs = 0 let foundLangs = 0
for(const child of Array.from(maindiv.children)){ for (const child of Array.from(maindiv.children)) {
if(child.attributes.lang?.value === lang){ if (child.attributes.lang?.value === lang) {
foundLangs ++ foundLangs++
} }
} }
if(foundLangs === 0){ if (foundLangs === 0) {
lang = "en" lang = "en"
} }
for(const child of Array.from(maindiv.children)){ for (const child of Array.from(maindiv.children)) {
const childLang = child.attributes.lang const childLang = child.attributes.lang
if(childLang === undefined){ if (childLang === undefined) {
continue continue
} }
if(childLang.value === lang){ if (childLang.value === lang) {
continue continue
} }
child.parentElement.removeChild(child) child.parentElement.removeChild(child)
} }
} }
filterLangs( document.getElementById("default-main"))
filterLangs( document.getElementById("default-title")) filterLangs(document.getElementById("default-main"))
filterLangs(document.getElementById("default-title"))
</script> </script>
<script type="module" src="./index.ts"></script> <script src="./index.ts" type="module"></script>
<script async data-goatcounter="https://pietervdvn.goatcounter.com/count" src="//gc.zgo.at/count.js"></script> <script async data-goatcounter="https://pietervdvn.goatcounter.com/count" src="//gc.zgo.at/count.js"></script>
<script> <script>