Skip to content

Commit cadd884

Browse files
benjaminsunliubenjaminsunliu
committed
fix mobile web view of app
1 parent ff4c277 commit cadd884

3 files changed

Lines changed: 113 additions & 33 deletions

File tree

‎app/+html.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,46 @@ export default function Root({ children }: { children: React.ReactNode }) {
1616
content="width=device-width, initial-scale=1, viewport-fit=cover"
1717
/>
1818

19+
<style
20+
dangerouslySetInnerHTML={{
21+
__html: `@media (max-width: 768px) {
22+
html {
23+
-webkit-text-size-adjust: 100%;
24+
text-size-adjust: 100%;
25+
}
26+
27+
input,
28+
textarea,
29+
select {
30+
font-size: 16px !important;
31+
}
32+
}`,
33+
}}
34+
/>
35+
36+
<script
37+
dangerouslySetInnerHTML={{
38+
__html: `(function () {
39+
var uaData = navigator.userAgentData;
40+
var isMobileByUAData = !!(uaData && uaData.mobile);
41+
var isMobileByUA = /Mobi|Android|iPhone|iPod|iPad/i.test(navigator.userAgent);
42+
if (!isMobileByUAData && !isMobileByUA) {
43+
return;
44+
}
45+
46+
var viewport = document.querySelector('meta[name="viewport"]');
47+
if (!viewport) {
48+
return;
49+
}
50+
51+
viewport.setAttribute(
52+
'content',
53+
'width=device-width, initial-scale=0.70, minimum-scale=0.70, maximum-scale=0.70, user-scalable=no, viewport-fit=cover',
54+
);
55+
})();`,
56+
}}
57+
/>
58+
1959
<script
2060
dangerouslySetInnerHTML={{
2161
__html: `(function (m, a, z, e) {

‎components/map/building-selection.tsx‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,8 @@ export default function BuildingSelection({
151151
const { width: windowWidth } = useWindowDimensions();
152152
const shouldUseHorizontalWebDirectionsLayout =
153153
isWeb && mode === "directions" && windowWidth >= 1100;
154+
const shouldUseStackedWebDirectionsLayout =
155+
isWeb && mode === "directions" && !shouldUseHorizontalWebDirectionsLayout;
154156

155157
const { queries, updateQuery, swapQueries, results } = useBuildingSearch({
156158
currentBuildingCodes,
@@ -344,6 +346,7 @@ export default function BuildingSelection({
344346
style={[
345347
{ backgroundColor: theme.buildingSelection.inputBackground },
346348
styles.inputWrapper,
349+
shouldUseStackedWebDirectionsLayout && styles.inputWrapperStackedWeb,
347350
options?.inputWrapperStyle,
348351
]}
349352
>
@@ -379,11 +382,12 @@ export default function BuildingSelection({
379382
textAlign="left"
380383
style={[
381384
styles.input,
385+
shouldUseStackedWebDirectionsLayout && styles.inputStackedWeb,
382386
{
383387
backgroundColor: theme.buildingSelection.inputBackground,
384388
borderColor: theme.buildingSelection.borderColor,
385389
color: theme.buildingSelection.inputText,
386-
fontSize: isWeb ? 18 : 16,
390+
fontSize: shouldUseStackedWebDirectionsLayout ? 16 : isWeb ? 18 : 16,
387391
paddingLeft: hasMagnifier ? 0 : 8,
388392
},
389393
]}
@@ -418,6 +422,7 @@ export default function BuildingSelection({
418422
scheduleBlur,
419423
handleChange,
420424
clearField,
425+
shouldUseStackedWebDirectionsLayout,
421426
],
422427
);
423428

@@ -512,13 +517,15 @@ export default function BuildingSelection({
512517
{ backgroundColor: theme.buildingSelection.containerBackground },
513518
styles.directionContainer,
514519
shouldUseHorizontalWebDirectionsLayout &&
515-
styles.directionContainerHorizontal,
520+
styles.directionContainerHorizontal,
521+
shouldUseStackedWebDirectionsLayout && styles.directionContainerStackedWeb,
516522
]}
517523
>
518524
<View
519525
style={[
520526
styles.icons,
521527
shouldUseHorizontalWebDirectionsLayout && styles.iconsHorizontal,
528+
shouldUseStackedWebDirectionsLayout && styles.iconsStackedWeb,
522529
]}
523530
>
524531
<Ionicons
@@ -542,14 +549,14 @@ export default function BuildingSelection({
542549
style={[
543550
styles.directionFields,
544551
shouldUseHorizontalWebDirectionsLayout &&
545-
styles.directionFieldsHorizontal,
552+
styles.directionFieldsHorizontal,
546553
]}
547554
>
548555
<View
549556
style={[
550557
styles.directionFieldGroup,
551558
shouldUseHorizontalWebDirectionsLayout &&
552-
styles.directionFieldGroupHorizontal,
559+
styles.directionFieldGroupHorizontal,
553560
]}
554561
>
555562
{renderInput(
@@ -579,6 +586,8 @@ export default function BuildingSelection({
579586
<Text
580587
style={[
581588
styles.startHint,
589+
shouldUseStackedWebDirectionsLayout &&
590+
styles.startHintStackedWeb,
582591
{ color: theme.buildingSelection.resultTitle },
583592
]}
584593
testID="start-hint"
@@ -594,6 +603,7 @@ export default function BuildingSelection({
594603
style={[
595604
styles.swapButton,
596605
shouldUseHorizontalWebDirectionsLayout && styles.swapButtonHorizontal,
606+
shouldUseStackedWebDirectionsLayout && styles.swapButtonStackedWeb,
597607
]}
598608
>
599609
<Ionicons
@@ -606,7 +616,7 @@ export default function BuildingSelection({
606616
style={[
607617
styles.directionFieldGroup,
608618
shouldUseHorizontalWebDirectionsLayout &&
609-
styles.directionFieldGroupHorizontal,
619+
styles.directionFieldGroupHorizontal,
610620
]}
611621
>
612622
{renderInput(
@@ -655,6 +665,12 @@ const styles = StyleSheet.create({
655665
paddingTop: 6,
656666
paddingBottom: 8,
657667
},
668+
directionContainerStackedWeb: {
669+
marginTop: 8,
670+
paddingRight: 24,
671+
paddingLeft: 8,
672+
paddingBottom: 6,
673+
},
658674
buildingSelectionContainer: {
659675
position: "absolute",
660676
width: "100%",
@@ -685,12 +701,20 @@ const styles = StyleSheet.create({
685701
marginTop: 0,
686702
marginHorizontal: 0,
687703
},
704+
inputWrapperStackedWeb: {
705+
marginTop: 8,
706+
minHeight: 38,
707+
paddingVertical: 2,
708+
},
688709
input: {
689710
paddingRight: "10%",
690711
width: "100%",
691712
textAlign: "left",
692713
minHeight: isWeb ? 44 : undefined,
693714
},
715+
inputStackedWeb: {
716+
minHeight: 38,
717+
},
694718
directionFields: {
695719
flex: 1,
696720
},
@@ -725,6 +749,10 @@ const styles = StyleSheet.create({
725749
alignSelf: "center",
726750
marginTop: 4,
727751
},
752+
swapButtonStackedWeb: {
753+
paddingTop: 4,
754+
paddingBottom: 0,
755+
},
728756
results: {
729757
maxHeight: 180,
730758
borderRadius: 8,
@@ -750,6 +778,10 @@ const styles = StyleSheet.create({
750778
marginLeft: 6,
751779
marginBottom: 2,
752780
},
781+
startHintStackedWeb: {
782+
fontSize: 12,
783+
marginBottom: 0,
784+
},
753785
startHintHorizontal: {
754786
marginLeft: 2,
755787
marginTop: 2,
@@ -767,4 +799,7 @@ const styles = StyleSheet.create({
767799
paddingTop: 0,
768800
marginRight: 10,
769801
},
802+
iconsStackedWeb: {
803+
paddingTop: 0,
804+
},
770805
});

‎components/map/outdoor-map-settings.tsx‎

Lines changed: 33 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ export default function OutdoorMapSettings({
3333
}: Readonly<OutdoorMapSettingsProps>) {
3434
const colorScheme = useColorScheme();
3535
const theme = Colors[colorScheme];
36-
const styles = makeStyles(theme);
36+
const isMobileWeb =
37+
Platform.OS === "web" && typeof window !== "undefined" && window.innerWidth <= 768;
38+
const styles = makeStyles(theme, isMobileWeb);
3739

3840
const [open, setOpen] = useState(false);
3941
const [displayRadius, setDisplayRadius] = useState(radius);
@@ -53,21 +55,21 @@ export default function OutdoorMapSettings({
5355
key: keyof OutdoorMapSettingsProps["poiFilters"];
5456
label: string;
5557
icon:
56-
| "restaurant-outline"
57-
| "cafe-outline"
58-
| "library-outline"
59-
| "barbell-outline"
60-
| "leaf-outline"
61-
| "cart-outline";
58+
| "restaurant-outline"
59+
| "cafe-outline"
60+
| "library-outline"
61+
| "barbell-outline"
62+
| "leaf-outline"
63+
| "cart-outline";
6264
}[] = [
63-
{ key: "restaurant", label: "Restaurants", icon: "restaurant-outline" },
64-
{ key: "cafe", label: "Cafes", icon: "cafe-outline" },
65-
{ key: "library", label: "Libraries", icon: "library-outline" },
66-
{ key: "gym", label: "Gyms", icon: "barbell-outline" },
67-
{ key: "park", label: "Parks", icon: "leaf-outline" },
68-
{ key: "shopping_mall", label: "Malls", icon: "cart-outline" },
69-
{ key: "supermarket", label: "Supermarkets", icon: "cart-outline" },
70-
];
65+
{ key: "restaurant", label: "Restaurants", icon: "restaurant-outline" },
66+
{ key: "cafe", label: "Cafes", icon: "cafe-outline" },
67+
{ key: "library", label: "Libraries", icon: "library-outline" },
68+
{ key: "gym", label: "Gyms", icon: "barbell-outline" },
69+
{ key: "park", label: "Parks", icon: "leaf-outline" },
70+
{ key: "shopping_mall", label: "Malls", icon: "cart-outline" },
71+
{ key: "supermarket", label: "Supermarkets", icon: "cart-outline" },
72+
];
7173

7274
if (hasVisiblePopup || searchFieldFocused) {
7375
return null;
@@ -82,9 +84,9 @@ export default function OutdoorMapSettings({
8284
styles.fab,
8385
open
8486
? {
85-
backgroundColor: theme.mapSettings.icon,
86-
borderColor: theme.mapSettings.icon,
87-
}
87+
backgroundColor: theme.mapSettings.icon,
88+
borderColor: theme.mapSettings.icon,
89+
}
8890
: null,
8991
]}
9092
onPress={() => setOpen((prev) => !prev)}
@@ -185,11 +187,14 @@ export default function OutdoorMapSettings({
185187
);
186188
}
187189

188-
const makeStyles = (theme: typeof Colors.light | typeof Colors.dark) =>
190+
const makeStyles = (
191+
theme: typeof Colors.light | typeof Colors.dark,
192+
isMobileWeb: boolean,
193+
) =>
189194
StyleSheet.create({
190195
container: {
191196
position: "absolute",
192-
top: "10%",
197+
top: isMobileWeb ? "12%" : "10%",
193198
right: 16,
194199
zIndex: 20,
195200
alignItems: "flex-end",
@@ -221,14 +226,14 @@ const makeStyles = (theme: typeof Colors.light | typeof Colors.dark) =>
221226
...(Platform.OS === "web"
222227
? { boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.18)" }
223228
: {
224-
shadowColor: "#000",
225-
shadowOffset: {
226-
width: 0,
227-
height: 4,
228-
},
229-
shadowOpacity: 0.18,
230-
shadowRadius: 8,
231-
}),
229+
shadowColor: "#000",
230+
shadowOffset: {
231+
width: 0,
232+
height: 4,
233+
},
234+
shadowOpacity: 0.18,
235+
shadowRadius: 8,
236+
}),
232237
},
233238

234239
fabLabel: {

0 commit comments

Comments
 (0)