Skip to content

Commit 6f653cd

Browse files
cdauthcdauth
committed
Attempt to make map expand around notch on iPhone (#368)
1 parent b4be6bc commit 6f653cd

File tree

7 files changed

+84
-34
lines changed

7 files changed

+84
-34
lines changed

‎frontend/src/lib/components/facil-map-context-provider/search-box-context.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export interface SearchBoxTab {
1818
}
1919

2020
export interface SearchBoxContextData {
21+
visible: boolean;
2122
tabs: Map<string, SearchBoxTab>;
2223
activeTabId: string | undefined;
2324
activeTab: SearchBoxTab | undefined;

‎frontend/src/lib/components/leaflet-map/leaflet-map.vue‎

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
</script>
4444

4545
<template>
46-
<div class="fm-leaflet-map-container" :class="{ isNarrow: context.isNarrow }">
46+
<div class="fm-leaflet-map-container" :class="{ isNarrow: context.isNarrow, hasSearchBox: context.components.searchBox?.visible }">
4747
<slot v-if="mapContext" name="before"></slot>
4848

4949
<div class="fm-leaflet-map-wrapper">
@@ -99,6 +99,12 @@
9999
flex-grow: 1;
100100
position: relative;
101101
102+
--fm-leaflet-map-container-margin-bottom: var(--facilmap-control-margin-bottom);
103+
104+
&.isNarrow.hasSearchBox {
105+
--fm-leaflet-map-container-margin-bottom: 0px;
106+
}
107+
102108
.fm-leaflet-map-wrapper {
103109
display: flex;
104110
flex-direction: column;
@@ -121,16 +127,34 @@
121127
user-select: none;
122128
-webkit-user-select: none;
123129
124-
.fm-leaflet-center {
125-
left: 50%;
126-
transform: translateX(-50%);
127-
text-align: center;
128-
width: 100%;
130+
.leaflet-control-container {
131+
> .leaflet-top {
132+
top: var(--facilmap-control-margin-top, 0px);
133+
}
129134
130-
.leaflet-control {
131-
display: inline-block;
132-
float: none;
133-
clear: none;
135+
> .leaflet-right {
136+
right: var(--facilmap-control-margin-right, 0px);
137+
}
138+
139+
> .leaflet-bottom {
140+
bottom: var(--fm-leaflet-map-container-margin-bottom, 0px);
141+
}
142+
143+
> .leaflet-left {
144+
left: var(--facilmap-control-margin-left, 0px);
145+
}
146+
147+
> .fm-leaflet-center {
148+
left: 50%;
149+
transform: translateX(-50%);
150+
text-align: center;
151+
width: 100%;
152+
153+
.leaflet-control {
154+
display: inline-block;
155+
float: none;
156+
clear: none;
157+
}
134158
}
135159
}
136160
@@ -227,9 +251,9 @@
227251
228252
.fm-leaflet-map-narrow-attribution {
229253
position: absolute;
230-
top: 0;
231-
left: 0;
232-
max-width: calc(100% - 54px);
254+
top: var(--facilmap-control-margin-top, 0px);
255+
left: var(--facilmap-control-margin-left, 0px);
256+
max-width: calc(100% - 54px - var(--facilmap-control-margin-left, 0px) - var(--facilmap-control-margin-right, 0px));
233257
opacity: 0;
234258
transition: opacity 1s;
235259
pointer-events: none;
@@ -305,8 +329,8 @@
305329
306330
.fm-logo {
307331
position: absolute;
308-
bottom: 0;
309-
left: -25px;
332+
bottom: var(--fm-leaflet-map-container-margin-bottom, 0px);
333+
left: calc(var(--facilmap-control-margin-left, 0px) - 25px);
310334
pointer-events: none;
311335
overflow: hidden;
312336
user-select: none;

‎frontend/src/lib/components/legend/legend.vue‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,27 @@
44
import { getLegendItems } from "./legend-utils";
55
import SearchBoxTab from "../search-box/search-box-tab.vue";
66
import { computed, ref } from "vue";
7-
import { useDomEventListener } from "../../utils/utils";
87
import { useResizeObserver } from "../../utils/vue";
9-
import { injectContextRequired, requireClientContext, requireMapContext } from "../facil-map-context-provider/facil-map-context-provider.vue";
8+
import { injectContextRequired, requireClientContext } from "../facil-map-context-provider/facil-map-context-provider.vue";
109
import { useI18n } from "../../utils/i18n";
1110
1211
const context = injectContextRequired();
1312
const client = requireClientContext(context);
14-
const mapContext = requireMapContext(context);
1513
const i18n = useI18n();
1614
15+
const placeholderRef = ref<HTMLElement>();
1716
const absoluteContainerRef = ref<HTMLElement>();
1817
1918
const scale = ref(1);
2019
21-
useDomEventListener(window, "resize", updateMaxScale);
2220
useResizeObserver(absoluteContainerRef, updateMaxScale);
21+
useResizeObserver(placeholderRef, updateMaxScale);
2322
updateMaxScale();
2423
2524
function updateMaxScale(): void {
26-
if (absoluteContainerRef.value) {
27-
const mapContainer = mapContext.value.components.map.getContainer();
28-
const maxHeight = mapContainer.offsetHeight - 94;
29-
const maxWidth = mapContainer.offsetWidth - 20;
25+
if (absoluteContainerRef.value && placeholderRef.value) {
26+
const maxHeight = placeholderRef.value.offsetHeight;
27+
const maxWidth = placeholderRef.value.offsetWidth;
3028
3129
const currentHeight = absoluteContainerRef.value.offsetHeight;
3230
const currentWidth = absoluteContainerRef.value.offsetWidth;
@@ -53,6 +51,7 @@
5351
<template>
5452
<div class="fm-legend" v-if="legendItems.length > 0 || legend1 || legend2">
5553
<template v-if="!context.isNarrow">
54+
<div class="fm-legend-placeholder" ref="placeholderRef"></div>
5655
<div
5756
class="fm-legend-absolute card"
5857
:style="{ '--fm-scale-factor': scale }"
@@ -72,10 +71,19 @@
7271
</template>
7372

7473
<style lang="scss">
74+
.fm-legend-placeholder {
75+
position: absolute;
76+
pointer-events: none;
77+
left: calc(10px + var(--facilmap-control-margin-left));
78+
right: calc(10px + var(--facilmap-control-margin-right));
79+
top: calc(69px + var(--facilmap-control-margin-top));
80+
bottom: calc(25px + var(--facilmap-control-margin-bottom));
81+
}
82+
7583
.fm-legend-absolute.fm-legend-absolute {
7684
position: absolute;
77-
right: 10px;
78-
bottom: 25px;
85+
right: calc(10px + var(--facilmap-control-margin-right));
86+
bottom: calc(25px + var(--facilmap-control-margin-bottom));
7987
max-width: 20rem;
8088
z-index: 800;
8189
transform-origin: bottom right;

‎frontend/src/lib/components/search-box/search-box.vue‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import Icon from "../ui/icon.vue";
3-
import { type Ref, defineComponent, nextTick, onScopeDispose, reactive, readonly, ref, toRef, watch } from "vue";
3+
import { type Ref, computed, defineComponent, nextTick, onScopeDispose, reactive, readonly, ref, toRef, watch } from "vue";
44
import vTooltip from "../../utils/tooltip";
55
import type { SearchBoxEventMap, SearchBoxTab, WritableSearchBoxContext } from "../facil-map-context-provider/search-box-context";
66
import mitt from "mitt";
@@ -16,6 +16,8 @@
1616
const activeTabId = ref<string | undefined>();
1717
const tabHistory = ref<string[]>([]);
1818
19+
const visible = computed(() => tabs.size > 0);
20+
1921
function provideTab(id: string, tabRef: Ref<SearchBoxTab>) {
2022
if (tabs.has(id)) {
2123
throw new Error(`Tab with ID ${id} already present.`);
@@ -63,6 +65,7 @@
6365
}
6466
6567
const searchBoxContext: WritableSearchBoxContext = reactive(Object.assign(mitt<SearchBoxEventMap>(), {
68+
visible,
6669
tabs,
6770
activeTabId: undefined,
6871
activeTab: undefined,
@@ -175,7 +178,7 @@
175178
<template>
176179
<div
177180
class="card fm-search-box"
178-
v-show="searchBoxContext.tabs.size > 0"
181+
v-show="visible"
179182
ref="containerRef"
180183
:class="{ isNarrow: context.isNarrow, hasFocus, isPanning: panDrag.isDragging }"
181184
@focusin="handleFocusIn"
@@ -233,9 +236,9 @@
233236
.fm-search-box.fm-search-box {
234237
&:not(.isNarrow) {
235238
position: absolute;
236-
top: 10px !important; /* Override drag position from narrow mode */
237-
left: 52px;
238-
max-height: calc(100% - 25px);
239+
top: calc(10px + var(--facilmap-control-margin-top)) !important; /* Override drag position from narrow mode */
240+
left: calc(52px + var(--facilmap-control-margin-left));
241+
max-height: calc(100% - 25px - var(--facilmap-control-margin-top) - var(--facilmap-control-margin-bottom));
239242
min-width: 19rem;
240243
min-height: 6rem;
241244
width: 29.5rem;
@@ -274,6 +277,8 @@
274277
275278
> .card-header {
276279
padding-top: 11px;
280+
padding-left: var(--facilmap-control-margin-left, 0px);
281+
padding-right: var(--facilmap-control-margin-right, 0px);
277282
position: relative;
278283
-webkit-touch-callout: none;
279284
cursor: row-resize;
@@ -309,6 +314,9 @@
309314
flex-direction: column;
310315
min-height: 0;
311316
overflow: auto;
317+
margin-left: var(--facilmap-control-margin-left, 0px);
318+
margin-right: var(--facilmap-control-margin-right, 0px);
319+
margin-bottom: var(--facilmap-control-margin-bottom, 0px);
312320
}
313321
314322
> .card-header {

‎frontend/src/lib/components/toolbox/toolbox.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,8 @@
111111
<style lang="scss">
112112
.fm-toolbox {
113113
position: absolute;
114-
top: 10px;
115-
right: 10px;
114+
top: calc(10px + var(--facilmap-control-margin-top));
115+
right: calc(10px + var(--facilmap-control-margin-right));
116116
117117
&:hover {
118118
z-index: 1000;

‎frontend/src/lib/components/ui/sidebar.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,7 @@
172172
touch-action: pan-y !important;
173173
transform: translateX(100%);
174174
transition: transform 0.3s, box-shadow 0.3s;
175+
padding: var(--facilmap-control-margin-top, 0px) var(--facilmap-control-margin-right, 0px) var(--facilmap-control-margin-bottom, 0px) 0;
175176
176177
> .navbar {
177178
display: flex;

‎frontend/src/map/map.ejs‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<% } else { -%>
1010
<meta name="robots" content="noindex,nofollow" />
1111
<% } -%>
12-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
1313
<meta name="fmConfig" content="<%=JSON.stringify(config)%>" />
1414
<link rel="icon" href=".<%=paths.base%>static/favicon.svg">
1515
<link rel="mask-icon" href=".<%=paths.base%>static/favicon.svg" color="#00272a">
@@ -30,10 +30,18 @@
3030
3131
html {
3232
height: 100%;
33+
/*--facilmap-control-margin-top: env(safe-area-inset-top, 0px);
34+
--facilmap-control-margin-right: env(safe-area-inset-right, 0px);
35+
--facilmap-control-margin-bottom: env(safe-area-inset-bottom, 0px);
36+
--facilmap-control-margin-left: env(safe-area-inset-left, 0px);*/
37+
--facilmap-control-margin-top: 20px;
38+
--facilmap-control-margin-right: 20px;
39+
--facilmap-control-margin-bottom: 20px;
40+
--facilmap-control-margin-left: 20px;
3341
}
3442
3543
#loading {
36-
padding: 10px;
44+
padding: calc(var(--facilmap-control-margin-top, 0px) + 10px) calc(var(--facilmap-control-margin-right, 0px) + 10px) calc(var(--facilmap-control-margin-bottom, 0px) + 10px) calc(var(--facilmap-control-margin-left, 0px) + 10px);
3745
font-size: 24.5px;
3846
font-weight: 500;
3947
color: #495057;

0 commit comments

Comments
 (0)