Skip to content

Commit d1f66ef

Browse files
frozenheliumfrozenhelium
committed
Use MobilePreview in all previews
1 parent 770ada6 commit d1f66ef

File tree

7 files changed

+57
-117
lines changed

7 files changed

+57
-117
lines changed

‎manager-dashboard/app/components/MobilePreview/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ interface Props {
1414
popupTitle?: React.ReactNode;
1515
popupDescription?: React.ReactNode;
1616
popupIcons?: React.ReactNode;
17+
contentClassName?: string;
1718
}
1819

1920
function MobilePreview(props: Props) {
@@ -25,6 +26,7 @@ function MobilePreview(props: Props) {
2526
popupTitle,
2627
popupDescription,
2728
popupIcons,
29+
contentClassName,
2830
} = props;
2931

3032
return (
@@ -45,9 +47,9 @@ function MobilePreview(props: Props) {
4547
</div>
4648
)}
4749
</div>
48-
<div className={styles.content}>
50+
<div className={_cs(styles.content, contentClassName)}>
4951
<div className={styles.popup}>
50-
<div>
52+
<div className={styles.details}>
5153
<div className={styles.title}>
5254
{popupTitle}
5355
</div>

‎manager-dashboard/app/components/MobilePreview/styles.css‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,29 @@
3131

3232
.content {
3333
position: relative;
34+
z-index: 0;
3435
background-color: var(--color-primary);
3536

3637
.popup {
38+
display: flex;
3739
position: absolute;
3840
top: var(--spacing-medium);
41+
left: var(--spacing-small);
42+
z-index: 1;
43+
border-radius: var(--radius-card-border);
3944
background-color: var(--color-foreground);
40-
width: 100%;
45+
padding: var(--spacing-small) var(--spacing-medium);
46+
width: calc(100% - 2 * var(--spacing-small));
47+
color: var(--color-text);
48+
49+
.details {
50+
flex-grow: 1;
51+
}
52+
53+
.icons {
54+
flex-shrink: 0;
55+
font-size: 2rem;
56+
}
4157
}
4258
}
4359
}

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { _cs } from '@togglecorp/fujs';
33

4+
import MobilePreview from '#components/MobilePreview';
45
import GeoJsonPreview from '#components/GeoJsonPreview';
56
import { iconMap, IconKey } from '#utils/common';
67

@@ -30,32 +31,24 @@ export default function ChangeDetectionGeoJsonPreview(props: Props) {
3031
const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
3132

3233
return (
33-
<div className={_cs(styles.previewScreen, className)}>
34+
<MobilePreview
35+
className={_cs(styles.changeDetectionGeoJsonPreview, className)}
36+
heading="You are looking for: mobile homes"
37+
popupIcons={Comp && <Comp />}
38+
popupTitle={previewPopUp?.title ?? 'Title'}
39+
popupDescription={previewPopUp?.description ?? 'Description'}
40+
contentClassName={styles.content}
41+
>
3442
<GeoJsonPreview
3543
className={styles.mapPreview}
3644
geoJson={geoJson}
3745
url={url}
3846
/>
39-
<div className={styles.mapContent}>
40-
<div className={styles.popUpContent}>
41-
<div className={styles.popUpTitle}>
42-
{previewPopUp?.title ?? 'Title'}
43-
</div>
44-
<div>
45-
{previewPopUp?.description ?? 'Description'}
46-
</div>
47-
</div>
48-
{ Comp && (
49-
<div className={styles.popUpIcon}>
50-
<Comp />
51-
</div>
52-
)}
53-
</div>
5447
<GeoJsonPreview
5548
className={styles.mapPreview}
5649
geoJson={geoJson}
5750
url={urlB}
5851
/>
59-
</div>
52+
</MobilePreview>
6053
);
6154
}

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css‎

Lines changed: 7 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,12 @@
1-
.preview-screen {
2-
display: flex;
3-
align-items: center;
4-
flex-direction: column;
5-
gap: var(--spacing-medium);
6-
flex-shrink: 0;
7-
background-color: var(--color-primary);
8-
width: 100%;
9-
10-
.map-preview {
11-
padding: var(--spacing-small);
12-
width: 15rem;
13-
height: 15rem;
14-
}
15-
16-
.map-content {
1+
.change-detection-geo-json-preview {
2+
.content {
173
display: flex;
18-
opacity: 0.95;
19-
border-radius: 10px;
20-
background-color: var(--color-foreground);
4+
flex-direction: column;
215
padding: var(--spacing-medium);
22-
gap: var(--spacing-large);
23-
width: 90%;
24-
25-
.pop-up-content {
26-
display: flex;
27-
flex-basis: 80%;
28-
flex-direction: column;
29-
30-
.pop-up-title {
31-
font-weight: var(--font-weight-bold);
32-
}
33-
34-
}
6+
gap: var(--spacing-extra-large);
357

36-
.pop-up-icon {
37-
display: flex;
38-
align-items: center;
39-
font-size: var(--font-size-super-large);
8+
.map-preview {
9+
height: 16rem;
4010
}
4111
}
42-
}
12+
}

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/FootprintGeoJsonPreview/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { IconKey, iconMap } from '#utils/common';
99
import styles from './styles.css';
1010

1111
interface Props {
12-
// className?: string;
12+
className?: string;
1313
geoJson: GeoJSON.GeoJSON | undefined;
1414
previewPopUp?: {
1515
title?: string;
@@ -21,7 +21,7 @@ interface Props {
2121
}
2222
export default function FootprintGeoJsonPreview(props: Props) {
2323
const {
24-
// className,
24+
className,
2525
geoJson,
2626
url,
2727
previewPopUp,
@@ -32,7 +32,7 @@ export default function FootprintGeoJsonPreview(props: Props) {
3232

3333
return (
3434
<MobilePreview
35-
className={styles.footprintGeoJsonPreview}
35+
className={_cs(styles.footprintGeoJsonPreview, className)}
3636
heading="You are looking for: mobile homes"
3737
popupIcons={Comp && <Comp />}
3838
popupTitle={previewPopUp?.title ?? 'Title'}

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/index.tsx‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { _cs } from '@togglecorp/fujs';
33

4+
import MobilePreview from '#components/MobilePreview';
45
import GeoJsonPreview from '#components/GeoJsonPreview';
56
import { iconMap, IconKey } from '#utils/common';
67

@@ -28,28 +29,20 @@ function ScenarioGeoJsonPreview(props: Props) {
2829
const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
2930

3031
return (
31-
<div className={_cs(styles.geoJsonPreview, className)}>
32-
<div className={styles.mapContent}>
33-
<div className={styles.popUpContent}>
34-
<div className={styles.popUpTitle}>
35-
{previewPopUp?.title ?? 'Title'}
36-
</div>
37-
<div>
38-
{previewPopUp?.description ?? 'Description'}
39-
</div>
40-
</div>
41-
{ Comp && (
42-
<div className={styles.popUpIcon}>
43-
<Comp />
44-
</div>
45-
)}
46-
</div>
32+
<MobilePreview
33+
className={_cs(styles.scenarioGeoJsonPreview, className)}
34+
heading="You are looking for: mobile homes"
35+
popupIcons={Comp && <Comp />}
36+
popupTitle={previewPopUp?.title ?? 'Title'}
37+
popupDescription={previewPopUp?.description ?? 'Description'}
38+
contentClassName={styles.content}
39+
>
4740
<GeoJsonPreview
4841
className={styles.mapContainer}
4942
geoJson={geoJson}
5043
url={url}
5144
/>
52-
</div>
45+
</MobilePreview>
5346
);
5447
}
5548

‎manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ScenarioGeoJsonPreview/styles.css‎

Lines changed: 6 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,10 @@
1-
.geo-json-preview {
2-
display: flex;
3-
position: relative;
4-
align-items: center;
5-
flex-direction: column;
6-
flex-shrink: 0;
7-
gap: var(--spacing-medium);
8-
z-index: 0;
1+
.scenario-geo-json-preview {
2+
.content {
3+
padding: var(--spacing-extra-large) var(--spacing-medium);
94

10-
.map-container {
11-
z-index: -1;
12-
width: var(--width-mobile-preview);
13-
height: var(--height-mobile-preview);
14-
}
15-
16-
.map-content {
17-
display: flex;
18-
position: absolute;
19-
top: 3rem;
20-
opacity: 0.95;
21-
border-radius: 10px;
22-
background-color: var(--color-foreground);
23-
padding: var(--spacing-medium);
24-
gap: var(--spacing-large);
25-
width: 90%;
26-
27-
.pop-up-content {
28-
display: flex;
29-
flex-basis: 80%;
30-
flex-direction: column;
31-
32-
.pop-up-title {
33-
font-weight: var(--font-weight-bold);
34-
}
35-
36-
}
37-
38-
.pop-up-icon {
39-
display: flex;
40-
align-items: center;
41-
font-size: var(--font-size-super-large);
5+
.map-container {
6+
z-index: 0;
7+
height: var(--height-mobile-preview);
428
}
439
}
4410
}

0 commit comments

Comments
 (0)