Skip to content

Commit 2c7c77d

Browse files
wlee261wlee261
committed
feat: mobile style for drawer
1 parent 6ce922b commit 2c7c77d

File tree

3 files changed

+123
-49
lines changed

3 files changed

+123
-49
lines changed

‎src/components/Themes/DesktopThemePreview.tsx

Lines changed: 65 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ const DesktopThemePreview = ({
1414
clearPreviewIds,
1515
setPreviewIds,
1616
}: DesktopThemePreviewProps) => {
17+
const [isVisible, setIsVisible] = useState(false);
18+
19+
const toggleDrawerVisibility = () => {
20+
setIsVisible(!isVisible);
21+
};
22+
1723
// flow for interactive chatbot
1824
const flow = {
1925
start: {
@@ -61,34 +67,80 @@ const DesktopThemePreview = ({
6167
},
6268
};
6369

64-
console.log(previewIds)
70+
const handleRemoveSelectionClick = (previewIdToRemove: string) => {
71+
const filteredPreviewIds = previewIds.filter(
72+
(previewId) => previewId !== previewIdToRemove
73+
);
74+
setPreviewIds([...filteredPreviewIds]);
75+
};
6576

66-
return (
67-
<div className="h-screen bg-accent-800 p-5 w-[45rem] flex flex-col items-center">
68-
<div className="text-accent-50 mb-12 w-full">
77+
return isVisible ? (
78+
<div
79+
className={`h-[92vh] bg-accent-800 p-5 flex flex-col items-center w-screen md:w-[45rem] absolute md:relative`}
80+
>
81+
<div className="text-accent-50 mb-4 md:mb-12 w-full md:mt-14">
6982
<h2 className="text-2xl font-semibold">Preview</h2>
70-
<h3 className="text-accent-400">{previewIds.length} theme(s) selected</h3>
83+
<h3 className="text-accent-400">
84+
{previewIds.length} theme(s) selected
85+
</h3>
86+
</div>
87+
<button className="text-accent-50 top-3 right-5 absolute" onClick={toggleDrawerVisibility}>Close</button>
88+
<div className="hidden md:block absolute left-[-2rem]">
89+
<span className="bg-blue-500 text-accent-50 text-sm px-[8px] py-[3px] rounded-full absolute left-[-12px] top-[-10px]">
90+
{previewIds.length}
91+
</span>
92+
<button
93+
onClick={toggleDrawerVisibility}
94+
className="text-accent-50 text-lg bg-accent-700 py-2 px-3 rounded-lg"
95+
>
96+
Collapse {'>>'}
97+
</button>
7198
</div>
7299
<ChatBot
73100
flow={flow}
74101
themes={previewIds.map((themeId) => ({ id: themeId }))}
75102
settings={{ general: { embedded: true } }}
76103
styles={{ chatWindowStyle: { height: '50vh' } }}
77104
/>
78-
<div className="w-full mt-8">
105+
<div className="w-full mt-8 max-h-[300px] overflow-y-auto">
79106
{previewIds.map((previewId) => {
80-
const previewTitle = formatPreviewIdToTitleCase(previewId)
81-
return <div className="flex justify-between my-2">
82-
<span className="text-accent-50 font-semibold text-lg">{previewTitle}</span>
83-
<span className="text-blue-500 font-semibold">Remove Selection (x)</span>
84-
</div>
107+
const previewTitle = formatPreviewIdToTitleCase(previewId);
108+
return (
109+
<div className="flex justify-between my-2">
110+
<span className="text-accent-50 font-semibold text-lg">
111+
{previewTitle}
112+
</span>
113+
<button
114+
onClick={() => handleRemoveSelectionClick(previewId)}
115+
className="text-blue-500 hover:text-blue-600 font-semibold"
116+
>
117+
Remove Selection (x)
118+
</button>
119+
</div>
120+
);
85121
})}
86122
</div>
87123
<div className="flex flex-col p-3 w-full items-center">
88-
<button className="bg-accent-700 text-accent-400 text-lg py-2 rounded-lg my-2 w-[90%] hover:bg-accent-600 hover:text-accent-300">Download theme bundle</button>
89-
<button className="bg-accent-300 text-accent-950 text-lg py-2 rounded-lg my-2 w-[90%] hover:bg-accent-200">Edit in theme builder</button>
124+
<button className="bg-accent-700 text-accent-400 text-lg py-2 rounded-lg my-2 w-[90%] hover:bg-accent-600 hover:text-accent-300">
125+
Download theme bundle
126+
</button>
127+
<button className="bg-accent-300 text-accent-950 text-lg py-2 rounded-lg my-2 w-[90%] hover:bg-accent-200">
128+
Edit in theme builder
129+
</button>
90130
</div>
91131
</div>
132+
) : (
133+
<div className="absolute bottom-6 md:top-32 right-5">
134+
<span className="bg-blue-500 text-accent-50 text-sm px-[8px] py-[3px] rounded-full absolute left-[-12px] top-[-10px]">
135+
{previewIds.length}
136+
</span>
137+
<button
138+
onClick={toggleDrawerVisibility}
139+
className="text-accent-50 text-lg bg-accent-700 py-2 px-3 rounded-lg"
140+
>
141+
Show Preview
142+
</button>
143+
</div>
92144
);
93145
};
94146

‎src/components/Themes/ThemeCard.tsx

Lines changed: 56 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
33
import { Theme } from '../../interfaces/Theme';
44

55
import '../../styles/theme_card.css';
6+
import ThemeModal from './ThemeModal';
67

78
type Props = {
89
theme: Theme;
@@ -14,41 +15,61 @@ type Props = {
1415
* Theme card component to hold the details of each theme in the themes page.
1516
*/
1617
const ThemeCard: React.FC<Props> = ({ theme, isPreviewed, onPreview }) => {
17-
const onClickPreview = () => {
18-
onPreview(theme.name);
19-
};
20-
21-
const handleCheckboxChange = () => {
22-
onClickPreview();
23-
};
24-
25-
return (
26-
<div className={`flex flex-row md:flex-col md:w-64 p-4 my-4 mx-2 border-2 border-solid rounded-xl ${isPreviewed ? 'border-blue-700' : 'border-accent-600'}`}>
27-
<div className="flex-1 basis-1/5 md:basis-1/2 mr-3 flex flex-row overflow-hidden w-32 h-20 md:w-56 md:h-56 rounded-xl">
28-
<img
29-
src={theme.themeImg}
30-
alt={theme.name}
31-
className="w-60 h-60 object-cover object-left-top"
32-
/>
33-
</div>
34-
<div className="flex-1 mr-4 basis-3/5 md:basis-1/3 flex flex-col pt-4">
35-
<h2 className="text-accent-50 text-lg font-medium">{theme.name}</h2>
36-
<span className="text-accent-300 text-sm">{theme.description}</span>
37-
</div>
38-
<div className="flex-1 basis-1/5 md:basis-1/6 flex flex-col">
39-
<span className="text-blue-500 text-sm my-4">More Info (i)</span>
40-
<label className="text-accent-50">
41-
Select
42-
<input
43-
type="checkbox"
44-
checked={isPreviewed}
45-
onChange={handleCheckboxChange}
46-
className="ml-2"
47-
/>
48-
</label>
49-
</div>
50-
</div>
51-
);
18+
const [viewDetails, setViewDetails] = useState(false);
19+
20+
const onViewDetails = () => {
21+
setViewDetails(true);
22+
};
23+
24+
const onClickPreview = () => {
25+
onPreview(theme.name);
26+
};
27+
28+
const handleCheckboxChange = () => {
29+
onClickPreview();
30+
};
31+
32+
return (
33+
<>
34+
<div
35+
className={`flex flex-row items-center md:items-start md:flex-col md:w-64 p-4 my-4 mx-2 border-2 border-solid rounded-xl ${isPreviewed ? 'border-blue-700' : 'border-accent-600'}`}
36+
>
37+
<div className="flex-1 basis-1/3 md:basis-1/2 mr-3 flex flex-row overflow-hidden w-32 h-20 md:w-56 md:h-56 rounded-xl">
38+
<img
39+
src={theme.themeImg}
40+
alt={theme.name}
41+
className="w-60 h-60 object-cover object-left-top"
42+
/>
43+
</div>
44+
<div className="flex-1 mr-4 basis-1/2 md:basis-1/3 flex flex-col md:pt-4">
45+
<h2 className="text-accent-50 text-lg font-medium mt-[-4px]">{theme.name}</h2>
46+
<span className="text-accent-300 text-sm">{theme.description}</span>
47+
</div>
48+
<div className="flex-1 basis-1/6 md:basis-1/6 flex flex-col">
49+
<button
50+
onClick={onViewDetails}
51+
className="text-blue-500 text-sm my-4 w-20"
52+
>
53+
More Info (i)
54+
</button>
55+
<label className=" ml-[2px] text-accent-50 text-sm md:text-base">
56+
Select
57+
<input
58+
type="checkbox"
59+
checked={isPreviewed}
60+
onChange={handleCheckboxChange}
61+
className="ml-2"
62+
/>
63+
</label>
64+
</div>
65+
</div>
66+
<ThemeModal
67+
isOpen={viewDetails}
68+
theme={theme}
69+
onClose={() => setViewDetails(false)}
70+
/>
71+
</>
72+
);
5273
};
5374

5475
export default ThemeCard;

‎src/pages/Themes.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,8 @@ const Themes: React.FC = () => {
7979
}
8080

8181
return (
82-
<div className="bg-accent-950 flex h-screen w-full">
82+
// 92vh comes from 100vh - 8vh (the height of the navbar)
83+
<div className="bg-accent-950 flex h-[92vh] w-full">
8384
{/* Main Content Section */}
8485
<div className="overflow-y-scroll hide-scrollbar w-full flex flex-col">
8586
<div className="ml-14 mr-4 mt-6 text-accent-50">

0 commit comments

Comments
 (0)