Skip to content

Commit 85be907

Browse files
frozenheliumfrozenhelium
committed
Improve styling of mobile preview
1 parent 8d74ec6 commit 85be907

File tree

8 files changed

+128
-106
lines changed

8 files changed

+128
-106
lines changed

‎manager-dashboard/app/Base/styles.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ p {
5353
--color-background-primary-hint: #0d194920;
5454
--color-background-accent-hint: #4746f610;
5555

56+
--color-black: #000000;
57+
5658
--color-scrollbar-foreground: rgba(0, 0, 0, .2);
5759
--color-scrollbar-background: rgba(0, 0, 0, .01);
5860
--color-hover-background: rgba(0, 0, 0, 0.03);
@@ -90,11 +92,13 @@ p {
9092
--opacity-disabled-element: 0.5;
9193

9294
--width-separator-thin: 1pt;
95+
--width-separator-thick: 5pt;
96+
--width-separator-mobile-preview: 8pt;
9397
--width-scrollbar: 0.75rem;
9498
--width-page-content-max: 70rem;
9599
--width-navbar-content-max: 76rem;
96100

97-
--width-mobile-preview: 20rem;
101+
--width-mobile-preview: 22rem;
98102
--height-mobile-preview: 30rem;
99103

100104
--radius-popup-border: 0.25rem;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ function FileInput<Name>(props: Props<Name>) {
5454
Select file
5555
</>
5656
),
57-
variant: 'action',
57+
variant: 'secondary',
5858
className: styles.label,
5959
childrenClassName: styles.content,
6060
});

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

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react;
1+
import React from 'react';
22
import { IoArrowBack } from 'react-icons/io5';
33
import { _cs } from '@togglecorp/fujs';
44

@@ -11,6 +11,9 @@ interface Props {
1111
heading?: React.ReactNode;
1212
actions?: React.ReactNode;
1313
children?: React.ReactNode;
14+
popupTitle?: React.ReactNode;
15+
popupDescription?: React.ReactNode;
16+
popupIcons?: React.ReactNode;
1417
}
1518

1619
function MobilePreview(props: Props) {
@@ -19,15 +22,21 @@ function MobilePreview(props: Props) {
1922
heading,
2023
actions,
2124
children,
25+
popupTitle,
26+
popupDescription,
27+
popupIcons,
2228
} = props;
2329

2430
return (
2531
<div className={_cs(styles.mobilePreview, className)}>
2632
<div className={styles.header}>
2733
<div className={styles.icons}>
28-
<IoArrowBack />
34+
<IoArrowBack className={styles.backIcon} />
2935
</div>
30-
<Heading>
36+
<Heading
37+
className={styles.heading}
38+
level={4}
39+
>
3140
{heading}
3241
</Heading>
3342
{actions && (
@@ -37,8 +46,23 @@ function MobilePreview(props: Props) {
3746
)}
3847
</div>
3948
<div className={styles.content}>
49+
<div className={styles.popup}>
50+
<div>
51+
<div className={styles.title}>
52+
{popupTitle}
53+
</div>
54+
<div className={styles.description}>
55+
{popupDescription}
56+
</div>
57+
</div>
58+
<div className={styles.icons}>
59+
{popupIcons}
60+
</div>
61+
</div>
4062
{children}
4163
</div>
4264
</div>
4365
);
4466
}
67+
68+
export default MobilePreview;

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

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,43 @@
11
.mobile-preview {
2-
color: inherit;
2+
display: flex;
3+
flex-direction: column;
4+
border: var(--width-separator-mobile-preview) solid var(--color-black);
5+
border-radius: var(--radius-card-border);
6+
background-color: var(--color-black);
7+
padding: var(--spacing-small) 0;
8+
width: var(--width-mobile-preview);
9+
color: var(--color-text-on-dark);
10+
11+
.header {
12+
display: flex;
13+
background-color: var(--color-primary);
14+
padding: var(--spacing-medium);
15+
gap: var(--spacing-medium);
16+
17+
.icons {
18+
.back-icon {
19+
font-size: 1.2rem;
20+
}
21+
22+
.heading {
23+
flex-grow: 1;
24+
}
25+
26+
.actions {
27+
flex-shrink: 0;
28+
}
29+
}
30+
}
31+
32+
.content {
33+
position: relative;
34+
background-color: var(--color-primary);
35+
36+
.popup {
37+
position: absolute;
38+
top: var(--spacing-medium);
39+
background-color: var(--color-foreground);
40+
width: 100%;
41+
}
42+
}
343
}

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

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
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 { CustomOptionPreviewType } from '#views/NewTutorial/utils';
67
import { IconKey, iconMap } from '#utils/common';
78

89
import styles from './styles.css';
910

1011
interface Props {
11-
className?: string;
12+
// className?: string;
1213
geoJson: GeoJSON.GeoJSON | undefined;
1314
previewPopUp?: {
1415
title?: string;
@@ -20,7 +21,7 @@ interface Props {
2021
}
2122
export default function FootprintGeoJsonPreview(props: Props) {
2223
const {
23-
className,
24+
// className,
2425
geoJson,
2526
url,
2627
previewPopUp,
@@ -30,41 +31,32 @@ export default function FootprintGeoJsonPreview(props: Props) {
3031
const Comp = previewPopUp?.icon ? iconMap[previewPopUp.icon] : undefined;
3132

3233
return (
33-
<div className={_cs(className, styles.previewScreen)}>
34-
<div className={styles.mapContent}>
35-
<div className={styles.popUpContent}>
36-
<div className={styles.popUpTitle}>
37-
{previewPopUp?.title ?? 'Title'}
38-
</div>
39-
<div>
40-
{previewPopUp?.description ?? 'Description'}
41-
</div>
42-
</div>
43-
{ Comp && (
44-
<div className={styles.popUpIcon}>
45-
<Comp />
46-
</div>
47-
)}
48-
</div>
34+
<MobilePreview
35+
className={styles.footprintGeoJsonPreview}
36+
heading="You are looking for: mobile homes"
37+
popupIcons={Comp && <Comp />}
38+
popupTitle={previewPopUp?.title ?? 'Title'}
39+
popupDescription={previewPopUp?.description ?? 'Description'}
40+
>
4941
<GeoJsonPreview
5042
className={styles.mapPreview}
5143
url={url}
5244
geoJson={geoJson}
5345
/>
54-
<div className={styles.footerOption}>
46+
<div className={styles.options}>
5547
{customOptionsPreview?.map((option) => {
5648
const Icon = iconMap[option.icon];
5749
return (
5850
<div
5951
key={option.id}
60-
className={styles.previewIcon}
52+
className={styles.option}
6153
style={{ backgroundColor: option.iconColor }}
6254
>
6355
<Icon />
6456
</div>
6557
);
6658
})}
6759
</div>
68-
</div>
60+
</MobilePreview>
6961
);
7062
}

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

Lines changed: 11 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,22 @@
1-
.preview-screen {
2-
display: flex;
3-
position: relative;
4-
align-items: center;
5-
flex-direction: column;
6-
gap: var(--spacing-medium);
7-
flex-shrink: 0;
8-
z-index: 0;
9-
background-color: var(--color-primary);
10-
width: var(--width-mobile-preview);
11-
height: var(--height-mobile-preview);
12-
1+
.footprint-geo-json-preview {
132
.map-preview {
14-
z-index: -1;
15-
padding: var(--spacing-medium);
16-
height: 80%;
3+
position: relative;
4+
z-index: 0;
5+
height: var(--height-mobile-preview);
176
}
187

19-
.map-content {
8+
.options {
209
display: flex;
21-
position: absolute;
22-
top: 3rem;
23-
opacity: 0.95;
24-
border-radius: 10px;
25-
background-color: var(--color-foreground);
26-
padding: var(--spacing-medium);
10+
justify-content: center;
11+
padding: var(--spacing-large);
2712
gap: var(--spacing-large);
28-
width: 90%;
29-
30-
.pop-up-content {
31-
display: flex;
32-
flex-basis: 80%;
33-
flex-direction: column;
34-
35-
.pop-up-title {
36-
font-weight: var(--font-weight-bold);
37-
}
3813

39-
}
40-
41-
.pop-up-icon {
42-
display: flex;
43-
align-items: center;
44-
font-size: var(--font-size-super-large);
45-
}
46-
}
47-
48-
.footer-option {
49-
display: flex;
50-
flex-direction: column;
51-
gap: var(--spacing-large);
52-
53-
.preview-icon {
14+
.option {
5415
display: flex;
5516
align-items: center;
5617
border-radius: 50%;
57-
padding: 3px;
58-
font-size: 30px;
18+
padding: var(--spacing-small);
19+
font-size: var(--font-size-extra-large);
5920
}
6021
}
61-
}
22+
}

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

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -710,37 +710,32 @@ function NewTutorial(props: Props) {
710710
error={error?.tutorialTasks}
711711
disabled={submissionPending || projectTypeEmpty}
712712
/>
713-
<div title="Describe Scenarios">
714-
<Heading>
715-
Describe Scenarios
716-
</Heading>
717-
<div className={styles.scenarioList}>
718-
{value.scenarioPages?.map((task, index) => (
719-
<ExpandableContainer
713+
<div className={styles.scenarioList}>
714+
{value.scenarioPages?.map((task, index) => (
715+
<ExpandableContainer
716+
key={task.scenarioId}
717+
header={`Scenario ${task.scenarioId}`}
718+
>
719+
<ScenarioPageInput
720720
key={task.scenarioId}
721-
header={`Scenario ${task.scenarioId}`}
722-
>
723-
<ScenarioPageInput
724-
key={task.scenarioId}
725-
index={index}
726-
value={task}
727-
projectType={value.projectType}
728-
onChange={onScenarioFormChange}
729-
error={scenarioError?.[task.scenarioId]}
730-
customOptionsPreview={customOptionsPreview}
731-
geoJson={previewGeoJson}
732-
url={tileServerAUrl}
733-
urlB={tileServerBUrl}
734-
/>
735-
</ExpandableContainer>
736-
))}
737-
{(value.scenarioPages?.length ?? 0) === 0 && (
738-
<EmptyMessage
739-
title="Upload geojson file first"
740-
description="This section will automatically show scenarios after uploading geojson file"
721+
index={index}
722+
value={task}
723+
projectType={value.projectType}
724+
onChange={onScenarioFormChange}
725+
error={scenarioError?.[task.scenarioId]}
726+
customOptionsPreview={customOptionsPreview}
727+
geoJson={previewGeoJson}
728+
url={tileServerAUrl}
729+
urlB={tileServerBUrl}
741730
/>
742-
)}
743-
</div>
731+
</ExpandableContainer>
732+
))}
733+
{(value.scenarioPages?.length ?? 0) === 0 && (
734+
<EmptyMessage
735+
title="Upload geojson file first"
736+
description="This section will automatically show scenarios after uploading geojson file"
737+
/>
738+
)}
744739
</div>
745740
</InputSection>
746741
{hasErrors && (

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,12 @@
4343
gap: var(--spacing-medium);
4444
}
4545
}
46+
47+
.scenario-list {
48+
display: flex;
49+
flex-direction: column;
50+
gap: var(--spacing-medium);
51+
}
4652
}
4753

4854
.error-message {

0 commit comments

Comments
 (0)