feat(web): Add geolocation button, clear location, i18n, and spacing fixes

Add a "use my current location" button next to the search box (shown
only when no location is selected), make clearing the search box reset
selected location, prayer times, and URL coords, rebalance vertical
spacing so the clock isn't flush against the viewport edge, and
translate all UI copy based on browser language.
This commit is contained in:
abdus committed 2026-10-08 21:00:44 +02:00
1 parent b55fc2333c
commit b5aecf4304
3 files changed
+156 -9

No files matched your search

+35 -3
View File
@@ -45,7 +45,7 @@ body {
align-items: center;
justify-content: center;
gap: 1.25rem;
padding: 0.875rem 1.25rem;
padding: clamp(1rem, 4vh, 2rem) 1.25rem 0.875rem;
}
.app-bar__brand {
@@ -72,11 +72,16 @@ body {
.location-search {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
max-width: 24rem;
}
.location-search__input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
border: 1px solid var(--color-border);
border-radius: 0.75rem;
@@ -86,6 +91,33 @@ body {
color: var(--color-ink);
}
.location-search__locate {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border: 1px solid var(--color-border);
border-radius: 0.75rem;
background: var(--color-surface);
color: var(--color-primary);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
.location-search__locate:hover {
background: #f4f1e4;
border-color: var(--color-primary);
}
.location-search__locate:disabled,
.location-search__locate--busy {
opacity: 0.6;
cursor: wait;
}
.location-search__input:focus {
outline: none;
border-color: var(--color-primary);
@@ -175,7 +207,7 @@ p + p {
align-items: center;
justify-content: space-evenly;
gap: clamp(0.5rem, 2vh, 1.25rem);
padding: 0.5rem 1rem;
padding: clamp(0.5rem, 2vh, 1rem) 1rem;
overflow: hidden;
}
@@ -282,7 +314,7 @@ tr.current .cell-names {
.app-footer {
flex: 0 0 auto;
padding: 0.25rem 1rem 0.75rem;
padding: clamp(0.5rem, 2vh, 1rem) 1rem clamp(1rem, 4vh, 2rem);
}
.clock {