raucao/marco
1
0
Fork 0
Code Issues 12 Pull Requests 1 Releases Activity

Tweak sizes and layout for icon buttons

Browse Source
This commit is contained in:
Râu Cao
2026-02-23 16:50:34 +04:00
parent 43b2700465
commit ecb3fe4b5a
2 changed files with 45 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/search-box.gjs
View File

@@ -132,7 +132,7 @@ export default class SearchBoxComponent extends Component {
aria-label="Menu" aria-label="Menu"
{{on "click" @onToggleMenu}} {{on "click" @onToggleMenu}}
> >
<Icon @name="menu" @size={{24}} @color="#5f6368" /> <Icon @name="menu" @size={{20}} @color="#5f6368" />
</button> </button>
<input <input
@@ -158,7 +158,7 @@ export default class SearchBoxComponent extends Component {
{{on "click" this.clear}} {{on "click" this.clear}}
aria-label="Clear" aria-label="Clear"
> >
<Icon @name="x" @size={{16}} @color="#5f6368" /> <Icon @name="x" @size={{20}} @color="#5f6368" />
</button> </button>
{{/if}} {{/if}}
</form> </form>

76
app/styles/app.css
View File

@@ -14,7 +14,7 @@ button {
body { body {
margin: 0; margin: 0;
font-family: 'Noto Serif', sans-serif; font-family: 'Noto Sans', sans-serif;
font-size: 16px; font-size: 16px;
color: #333; color: #333;
} }
@@ -61,7 +61,7 @@ body {
left: 0; left: 0;
right: 0; right: 0;
height: 60px; height: 60px;
padding: 0 1rem; padding: 0.5rem 1rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -69,6 +69,12 @@ body {
pointer-events: none; /* Let clicks pass through to map where transparent */ pointer-events: none; /* Let clicks pass through to map where transparent */
} }
@media (width <= 768px) {
.app-header {
padding: 0 0.5rem;
}
}
.header-left, .header-left,
.header-right { .header-right {
pointer-events: auto; /* Re-enable clicks for buttons */ pointer-events: auto; /* Re-enable clicks for buttons */
@@ -203,7 +209,6 @@ body {
z-index: 3200; /* Higher than Places Sidebar (3100) */ z-index: 3200; /* Higher than Places Sidebar (3100) */
} }
/* Settings Pane Mobile Overrides */
@media (width <= 768px) { @media (width <= 768px) {
.settings-pane.sidebar { .settings-pane.sidebar {
width: 100%; width: 100%;
@@ -539,42 +544,54 @@ body {
} }
} }
/* Zoom Control - Moved to bottom right above attribution */ /* Map controls */
.ol-zoom {
top: auto !important; .ol-control.ol-attribution {
left: auto !important; bottom: 1rem;
bottom: 2.5em; }
right: 0.5em; .ol-touch .ol-control.ol-attribution {
bottom: 0.5rem;
} }
.ol-touch .ol-zoom { .ol-control.ol-zoom {
bottom: 3.5em; bottom: 3rem;
}
.ol-touch .ol-control.ol-zoom {
bottom: 3.5rem;
} }
/* Locate Control - Above Zoom */
.ol-control.ol-locate { .ol-control.ol-locate {
top: auto !important; bottom: 6.5rem;
left: auto !important;
bottom: 6.5em;
right: 0.5em;
} }
.ol-touch .ol-control.ol-locate { .ol-touch .ol-control.ol-locate {
bottom: 8.5em; bottom: 8.5rem;
} }
/* Rotate Control - Above Locate */ .ol-control.ol-rotate {
.ol-rotate { bottom: 9rem;
top: auto !important; }
left: auto !important; .ol-touch .ol-control.ol-rotate {
bottom: 9em; bottom: 11.5rem;
right: 0.5em;
} }
.ol-touch .ol-rotate { .ol-control.ol-attribution,
bottom: 11.5em; .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 { span.icon {
display: inline-block; display: inline-block;
} }
@@ -752,13 +769,6 @@ button.create-place {
z-index: 3002; /* Higher than menu button to be safe */ 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 { .search-form {
display: flex; display: flex;
align-items: center; align-items: center;