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:
1 parent
b55fc2333c
commit
b5aecf4304
3 files changed
+156
-9
No files matched your search
@@ -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 {
|
||||
|
||||
Reference in new issue
Block a user