diff --git a/app/components/search-box.gjs b/app/components/search-box.gjs
index 03e5860..b439b1f 100644
--- a/app/components/search-box.gjs
+++ b/app/components/search-box.gjs
@@ -132,7 +132,7 @@ export default class SearchBoxComponent extends Component {
aria-label="Menu"
{{on "click" @onToggleMenu}}
>
-
+
-
+
{{/if}}
diff --git a/app/styles/app.css b/app/styles/app.css
index 1dc2bb8..65fbd36 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -14,7 +14,7 @@ button {
body {
margin: 0;
- font-family: 'Noto Serif', sans-serif;
+ font-family: 'Noto Sans', sans-serif;
font-size: 16px;
color: #333;
}
@@ -61,7 +61,7 @@ body {
left: 0;
right: 0;
height: 60px;
- padding: 0 1rem;
+ padding: 0.5rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
@@ -69,6 +69,12 @@ body {
pointer-events: none; /* Let clicks pass through to map where transparent */
}
+@media (width <= 768px) {
+ .app-header {
+ padding: 0 0.5rem;
+ }
+}
+
.header-left,
.header-right {
pointer-events: auto; /* Re-enable clicks for buttons */
@@ -203,7 +209,6 @@ body {
z-index: 3200; /* Higher than Places Sidebar (3100) */
}
-/* Settings Pane Mobile Overrides */
@media (width <= 768px) {
.settings-pane.sidebar {
width: 100%;
@@ -539,42 +544,54 @@ body {
}
}
-/* Zoom Control - Moved to bottom right above attribution */
-.ol-zoom {
- top: auto !important;
- left: auto !important;
- bottom: 2.5em;
- right: 0.5em;
+/* Map controls */
+
+.ol-control.ol-attribution {
+ bottom: 1rem;
+}
+.ol-touch .ol-control.ol-attribution {
+ bottom: 0.5rem;
}
-.ol-touch .ol-zoom {
- bottom: 3.5em;
+.ol-control.ol-zoom {
+ bottom: 3rem;
+}
+.ol-touch .ol-control.ol-zoom {
+ bottom: 3.5rem;
}
-/* Locate Control - Above Zoom */
.ol-control.ol-locate {
- top: auto !important;
- left: auto !important;
- bottom: 6.5em;
- right: 0.5em;
+ bottom: 6.5rem;
}
-
.ol-touch .ol-control.ol-locate {
- bottom: 8.5em;
+ bottom: 8.5rem;
}
-/* Rotate Control - Above Locate */
-.ol-rotate {
- top: auto !important;
- left: auto !important;
- bottom: 9em;
- right: 0.5em;
+.ol-control.ol-rotate {
+ bottom: 9rem;
+}
+.ol-touch .ol-control.ol-rotate {
+ bottom: 11.5rem;
}
-.ol-touch .ol-rotate {
- bottom: 11.5em;
+.ol-control.ol-attribution,
+.ol-control.ol-zoom,
+.ol-control.ol-locate,
+.ol-control.ol-rotate {
+ top: auto;
+ left: auto;
+ right: 1rem;
}
+.ol-touch .ol-control.ol-attribution,
+.ol-touch .ol-control.ol-zoom,
+.ol-touch .ol-control.ol-locate,
+.ol-touch .ol-control.ol-rotate {
+ right: 0.5rem;
+}
+
+/* Icons */
+
span.icon {
display: inline-block;
}
@@ -752,13 +769,6 @@ button.create-place {
z-index: 3002; /* Higher than menu button to be safe */
}
-@media (max-width: 768px) {
- .search-box {
- max-width: calc(100vw - 80px); /* Smaller on mobile but wider than before */
- margin-left: 0.5rem;
- }
-}
-
.search-form {
display: flex;
align-items: center;