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

UX: improve weird scrolling behaviour, esp on homepage; preferred languages are on top in themes as well

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-07-09 03:30:39 +02:00
parent bae13fdfdf
commit b63e9c0262
7 changed files with 270 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/UI/Base/DrawerLeft.svelte
View file

@ -23,7 +23,7 @@
transitionType="fly"
{transitionParams}
bgColor="frozen-glass"
divClass="overflow-y-auto z-50 "
divClass="overflow-hidden z-50 "
bind:hidden
>
<slot>CONTENTS</slot>

84
src/UI/Base/SidebarUnit.svelte
View file

@ -3,50 +3,54 @@
</div>
<style>
:global(.sidebar-unit) {
display: flex;
flex-direction: column;
row-gap: 0.25rem;
background: var(--background-color);
padding: 0.5rem;
border-radius: 0.5rem;
}
:global(.sidebar-unit) {
display: flex;
flex-direction: column;
background: var(--background-color);
padding: 0.5rem;
border-radius: 0.5rem;
}
:global(.sidebar-unit > h3) {
margin-top: 0;
margin-bottom: 0.5rem;
padding: 0.25rem;
}
:global(.sidebar-unit > h3) {
margin-top: 0;
margin-bottom: 0.5rem;
padding: 0.25rem;
top: 0;
position: sticky;
z-index: 1;
padding-top: 0.5rem;
background: var(--background-color);
}
:global(
:global(
.sidebar-button svg,
.sidebar-button img,
.sidebar-unit > button img,
.sidebar-unit > button svg
) {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
flex-shrink: 0;
}
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
flex-shrink: 0;
}
:global(.sidebar-button .weblate-link > svg) {
width: 0.75rem;
height: 0.75rem;
flex-shrink: 0;
}
:global(.sidebar-button .weblate-link > svg) {
width: 0.75rem;
height: 0.75rem;
flex-shrink: 0;
}
:global(.sidebar-button, .sidebar-unit > a, .sidebar-unit > button) {
display: flex;
align-items: center;
border-radius: 0.25rem !important;
padding: 0.4rem 0.75rem !important;
text-decoration: none !important;
width: 100%;
text-align: start;
}
:global(.sidebar-button, .sidebar-unit > a, .sidebar-unit > button) {
display: flex;
align-items: center;
border-radius: 0.25rem !important;
padding: 0.4rem 0.75rem !important;
text-decoration: none !important;
width: 100%;
text-align: start;
}
:global(
:global(
.sidebar-button > svg,
.sidebar-button > img,
.sidebar-unit > a img,
@ -54,11 +58,11 @@
.sidebar-unit > button svg,
.sidebar-unit > button img
) {
margin-right: 0.5rem;
flex-shrink: 0;
}
margin-right: 0.5rem;
flex-shrink: 0;
}
:global(.sidebar-button:hover, .sidebar-unit > a:hover, .sidebar-unit > button:hover) {
background: var(--low-interaction-background) !important;
}
:global(.sidebar-button:hover, .sidebar-unit > a:hover, .sidebar-unit > button:hover) {
background: var(--low-interaction-background) !important;
}
</style>