Skip to content

Commit 6cd3f29

Browse files
rajat1saxenarajat1saxena
committed
Merged section Y padding and vertical padding
1 parent 65111af commit 6cd3f29

File tree

39 files changed

+118
-209
lines changed

39 files changed

+118
-209
lines changed

‎apps/web/components/admin/page-editor/theme-editor/structure-selector.tsx‎

Lines changed: 0 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
} from "@/components/ui/select";
99
import { Label } from "@/components/ui/label";
1010
import { paddingOptions } from "./tailwind-to-human-readable";
11-
import { Separator } from "@components/ui/separator";
1211
import { ThemeStyle } from "@courselit/page-models";
1312

1413
interface StructureSelectorProps {
@@ -149,64 +148,6 @@ function StructureSelector({
149148
</SelectContent>
150149
</Select>
151150
</div>
152-
153-
<div className="space-y-2">
154-
<Label>Outer Vertical Padding</Label>
155-
<Select
156-
value={sectionValue?.verticalPadding || ""}
157-
onValueChange={(newValue) => {
158-
onChange({
159-
...theme,
160-
structure: {
161-
...theme.structure,
162-
section: {
163-
...sectionValue,
164-
verticalPadding:
165-
newValue as Theme["structure"]["section"]["verticalPadding"],
166-
},
167-
},
168-
});
169-
}}
170-
>
171-
<SelectTrigger>
172-
<SelectValue placeholder="Select padding" />
173-
</SelectTrigger>
174-
<SelectContent>
175-
{paddingOptions.y.map((option) => (
176-
<SelectItem
177-
key={option.value}
178-
value={option.value}
179-
>
180-
{option.label}
181-
</SelectItem>
182-
))}
183-
</SelectContent>
184-
</Select>
185-
</div>
186-
187-
<Separator className="my-6" />
188-
189-
<div className="space-y-2">
190-
<h2 className="text-xs font-semibold text-muted-foreground">
191-
How the layout works
192-
</h2>
193-
<div className="flex flex-col justify-between text-xs">
194-
<div className="bg-[#e3f0fc] text-[#3b4a5a] rounded-t-md px-2 py-1">
195-
Outer vertical padding
196-
</div>
197-
<div className="w-full px-3 pb-3 bg-[#b6daf7]">
198-
<div className="text-[#3b4a5a] py-1">
199-
Padding
200-
</div>
201-
<div className="w-full h-10 bg-white border border-[#b6daf7] rounded flex items-center justify-center text-[#3b4a5a] shadow-sm">
202-
Content
203-
</div>
204-
</div>
205-
<div className="bg-[#e3f0fc] text-[#3b4a5a] rounded-b-md px-2 py-1">
206-
Outer vertical padding
207-
</div>
208-
</div>
209-
</div>
210151
</div>
211152
);
212153
}

‎apps/web/components/admin/page-editor/theme-editor/tailwind-to-human-readable.ts‎

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,43 +6,35 @@ export interface TailwindOption {
66
export const paddingOptions = {
77
x: [
88
{ label: "None", value: "px-0" },
9-
{ label: "Extra Small", value: "px-1" },
10-
{ label: "Small", value: "px-2" },
11-
{ label: "Medium", value: "px-3" },
12-
{ label: "Large", value: "px-4" },
13-
{ label: "Extra Large", value: "px-5" },
14-
{ label: "2X Large", value: "px-6" },
15-
{ label: "3X Large", value: "px-8" },
16-
{ label: "4X Large", value: "px-10" },
17-
{ label: "5X Large", value: "px-12" },
18-
{ label: "6X Large", value: "px-16" },
19-
{ label: "7X Large", value: "px-20" },
20-
{ label: "8X Large", value: "px-24" },
21-
{ label: "9X Large", value: "px-32" },
22-
{ label: "10X Large", value: "px-40" },
23-
{ label: "11X Large", value: "px-48" },
24-
{ label: "12X Large", value: "px-56" },
25-
{ label: "13X Large", value: "px-64" },
9+
{ label: "Extra Small", value: "px-4" },
10+
{ label: "Small", value: "px-6" },
11+
{ label: "Medium", value: "px-8" },
12+
{ label: "Large", value: "px-10" },
13+
{ label: "Extra Large", value: "px-12" },
14+
{ label: "2X Large", value: "px-16" },
15+
{ label: "3X Large", value: "px-20" },
16+
{ label: "4X Large", value: "px-24" },
17+
{ label: "5X Large", value: "px-32" },
18+
{ label: "6X Large", value: "px-40" },
19+
{ label: "7X Large", value: "px-48" },
20+
{ label: "8X Large", value: "px-56" },
21+
{ label: "9X Large", value: "px-64" },
2622
],
2723
y: [
2824
{ label: "None", value: "py-0" },
29-
{ label: "Extra Small", value: "py-1" },
30-
{ label: "Small", value: "py-2" },
31-
{ label: "Medium", value: "py-3" },
32-
{ label: "Large", value: "py-4" },
33-
{ label: "Extra Large", value: "py-5" },
34-
{ label: "2X Large", value: "py-6" },
35-
{ label: "3X Large", value: "py-8" },
36-
{ label: "4X Large", value: "py-10" },
37-
{ label: "5X Large", value: "py-12" },
38-
{ label: "6X Large", value: "py-16" },
39-
{ label: "7X Large", value: "py-20" },
40-
{ label: "8X Large", value: "py-24" },
41-
{ label: "9X Large", value: "py-32" },
42-
{ label: "10X Large", value: "py-40" },
43-
{ label: "11X Large", value: "py-48" },
44-
{ label: "12X Large", value: "py-56" },
45-
{ label: "13X Large", value: "py-64" },
25+
{ label: "Extra Small", value: "py-4" },
26+
{ label: "Small", value: "py-6" },
27+
{ label: "Medium", value: "py-8" },
28+
{ label: "Large", value: "py-10" },
29+
{ label: "Extra Large", value: "py-12" },
30+
{ label: "2X Large", value: "py-16" },
31+
{ label: "3X Large", value: "py-20" },
32+
{ label: "4X Large", value: "py-24" },
33+
{ label: "5X Large", value: "py-32" },
34+
{ label: "6X Large", value: "py-40" },
35+
{ label: "7X Large", value: "py-48" },
36+
{ label: "8X Large", value: "py-56" },
37+
{ label: "9X Large", value: "py-64" },
4638
],
4739
} as const;
4840

‎apps/web/graphql/pages/logic.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,9 @@ export const publish = async (
221221
ctx.subdomain.sharedWidgets = ctx.subdomain.draftSharedWidgets;
222222
// ctx.subdomain.draftSharedWidgets = {};
223223

224-
await publishTheme(ctx.subdomain.themeId, ctx);
224+
if (ctx.subdomain.themeId) {
225+
await publishTheme(ctx.subdomain.themeId, ctx);
226+
}
225227

226228
await (ctx.subdomain as any).save();
227229
await (page as any).save();

‎apps/web/graphql/pages/page-templates.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ export const homePageTemplate = [
179179
],
180180
itemsAlignment: "center",
181181
columns: 3,
182-
backgroundColor: "#f4f4f5",
182+
// backgroundColor: "#f4f4f5",
183183
},
184184
},
185185
{
@@ -203,7 +203,7 @@ export const homePageTemplate = [
203203
caption: "",
204204
},
205205
mediaRadius: 2,
206-
backgroundColor: "#171127",
206+
// backgroundColor: "#171127",
207207
},
208208
},
209209
{
@@ -305,7 +305,7 @@ export const homePageTemplate = [
305305
deleteable: true,
306306
shared: false,
307307
settings: {
308-
backgroundColor: "#f4f4f5",
308+
// backgroundColor: "#f4f4f5",
309309
},
310310
},
311311
{
@@ -363,7 +363,7 @@ export const homePageTemplate = [
363363
],
364364
},
365365
alignment: "center",
366-
color: "#525252",
366+
// color: "#525252",
367367
fontSize: 5,
368368
verticalPadding: "py-2",
369369
},

‎apps/web/models/Theme.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ export const ThemeSchema = new mongoose.Schema<Theme>({
7272
type: mongoose.Schema.Types.Mixed,
7373
required: true,
7474
},
75-
verticalPadding: { type: String, required: true },
7675
},
7776
required: true,
7877
_id: false,

‎packages/common-models/src/widget-default-settings.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@ type PageType =
1414

1515
export default interface WidgetDefaultSettings {
1616
type: PageType;
17-
verticalPadding: ThemeStyle["structure"]["section"]["verticalPadding"];
17+
verticalPadding: ThemeStyle["structure"]["section"]["padding"]["y"];
1818
maxWidth?: ThemeStyle["structure"]["page"]["width"];
1919
}

‎packages/components-library/src/vertical-padding-selector.tsx‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,32 @@ import PageBuilderSlider from "./page-builder-slider";
44
// Map of numeric values to Tailwind padding classes
55
const PADDING_MAP = {
66
0: "py-0",
7-
1: "py-1",
8-
2: "py-2",
9-
3: "py-3",
10-
4: "py-4",
11-
5: "py-5",
12-
6: "py-6",
13-
7: "py-8",
14-
8: "py-10",
15-
9: "py-12",
16-
10: "py-16",
17-
11: "py-20",
18-
12: "py-24",
19-
13: "py-32",
20-
14: "py-40",
21-
15: "py-48",
22-
16: "py-56",
23-
17: "py-64",
7+
1: "py-4",
8+
2: "py-6",
9+
3: "py-8",
10+
4: "py-10",
11+
5: "py-12",
12+
6: "py-16",
13+
7: "py-20",
14+
8: "py-24",
15+
9: "py-32",
16+
10: "py-40",
17+
11: "py-48",
18+
12: "py-56",
19+
13: "py-64",
2420
};
2521

2622
export function getVerticalPaddingTWClass(
2723
value: number,
28-
): ThemeStyle["structure"]["section"]["verticalPadding"] {
24+
): ThemeStyle["structure"]["section"]["padding"]["y"] {
2925
const roundedValue = Math.max(0, Math.min(17, Math.round(value)));
3026
return PADDING_MAP[roundedValue] || PADDING_MAP[5]; // Default to py-5
3127
}
3228

3329
interface VerticalPaddingSelectorProps {
34-
value: ThemeStyle["structure"]["section"]["verticalPadding"];
30+
value: ThemeStyle["structure"]["section"]["padding"]["y"];
3531
onChange: (
36-
padding: ThemeStyle["structure"]["section"]["verticalPadding"],
32+
padding: ThemeStyle["structure"]["section"]["padding"]["y"],
3733
) => void;
3834
className?: string;
3935
}
@@ -54,7 +50,7 @@ export function VerticalPaddingSelector({
5450
return (
5551
<PageBuilderSlider
5652
title="Vertical padding"
57-
max={17}
53+
max={13}
5854
min={0}
5955
onChange={handleChange}
6056
value={parseInt(numericValue)}

‎packages/page-blocks/src/blocks/banner/admin-widget/custom-settings.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export default function CustomSettings({
8282
ThemeStyle["structure"]["page"]["width"]
8383
>(settings.maxWidth);
8484
const [verticalPadding, setVerticalPadding] = useState<
85-
ThemeStyle["structure"]["section"]["verticalPadding"]
85+
ThemeStyle["structure"]["section"]["padding"]["y"]
8686
>(settings.verticalPadding);
8787
const [mediaBorderRadius, setMediaBorderRadius] = useState(
8888
settings.mediaRadius || 2,
@@ -269,8 +269,7 @@ export default function CustomSettings({
269269
/>
270270
<VerticalPaddingSelector
271271
value={
272-
verticalPadding ||
273-
theme.structure.section.verticalPadding
272+
verticalPadding || theme.structure.section.padding.y
274273
}
275274
onChange={setVerticalPadding}
276275
/>

‎packages/page-blocks/src/blocks/banner/widget.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@ export default function Widget({
8080
const overiddenTheme: ThemeStyle = JSON.parse(JSON.stringify(theme.theme));
8181
overiddenTheme.structure.page.width =
8282
maxWidth || theme.theme.structure.page.width;
83-
overiddenTheme.structure.section.verticalPadding =
84-
verticalPadding || theme.theme.structure.section.verticalPadding;
83+
overiddenTheme.structure.section.padding.y =
84+
verticalPadding || theme.theme.structure.section.padding.y;
8585

8686
const [email, setEmail] = useState("");
8787
const [success, setSuccess] = useState(false);

‎packages/page-blocks/src/blocks/content/admin-widget.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function AdminWidget({
4848
ThemeStyle["structure"]["page"]["width"]
4949
>(settings.maxWidth);
5050
const [verticalPadding, setVerticalPadding] = useState<
51-
ThemeStyle["structure"]["section"]["verticalPadding"]
51+
ThemeStyle["structure"]["section"]["padding"]["y"]
5252
>(settings.verticalPadding);
5353
const [cssId, setCssId] = useState(settings.cssId);
5454

@@ -139,7 +139,7 @@ export default function AdminWidget({
139139
<VerticalPaddingSelector
140140
value={
141141
verticalPadding ||
142-
theme.theme.structure.section.verticalPadding
142+
theme.theme.structure.section.padding.y
143143
}
144144
onChange={setVerticalPadding}
145145
/>

0 commit comments

Comments
 (0)