Tweak sizes and layout for icon buttons
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user