Skip to content

Section backgrounds #634

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rajat1saxena merged 8 commits into from
Sep 25, 2025
Merged

Section backgrounds #634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
276a0d9
WIP: Page block background types
Sep 21, 2025
20e2ffa
Lint fixes
Sep 21, 2025
0079d4e
Almost finished section backgrounds logic; Removed card layout from h…
Sep 22, 2025
fd6e2f8
Removed tooltips
Sep 23, 2025
ebc2201
UI improvements for background component
Sep 23, 2025
b70a249
Hack for dark theme
Sep 24, 2025
917c40c
Lint fix
Sep 24, 2025
f946ab5
section overflow fix
Sep 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions apps/docs/src/pages/en/website/blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ You will also see the newly added link on the header itself.
3. Click on the pencil icon against the newly added link to edit it as shown above.
4. Change the label (displayed as text on the header block) and the URL (where the user should be taken upon clicking the label on the header) and click `Done` to save.
![Header edit link](/assets/pages/header-edit-link.png)
</details>
</details>

### [Rich Text](#rich-text)

Expand All @@ -61,7 +61,7 @@ You can also use the floating controls to do the same as shown below.
2. Click on the floating `link` button to reveal a popup text input.
3. In the popup text input, enter the URL as shown below.
![Create a hyperlink in rich text block](/assets/pages/rich-text-create-hyperlink.gif)
</details>
</details>

### [Hero](#hero)

Expand All @@ -87,7 +87,7 @@ Following is how it looks on a page.
4. In the button action, enter the URL the user should be taken to upon clicking.
a. If the URL is from your own school, use its relative form, i.e., `/courses`.
b. If the URL is from some external website, use the absolute (complete) URL, i.e., `https://website.com/courses`.
</details>
</details>

### [Grid](#grid)

Expand Down Expand Up @@ -132,7 +132,7 @@ A grid block comes in handy when you want to show some sort of list, for example
4. In the button action, enter the URL the user should be taken to upon clicking.
a. If the URL is from your own school, use its relative form, i.e., `/courses`.
b. If the URL is from some external website, use the absolute (complete) URL, i.e., `https://website.com/courses`.
</details>
</details>

### [Featured](#featured)

Expand Down Expand Up @@ -268,7 +268,7 @@ In the `Design` panel, you can customize:
- Maximum width
- Vertical padding
- Social media links (Facebook, Twitter, Instagram, LinkedIn, YouTube, Discord, GitHub)
</details>
</details>

## [Shared blocks](#shared-blocks)

Expand Down
36 changes: 18 additions & 18 deletions apps/docs/src/pages/en/website/themes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,30 +192,30 @@ The typography editor lets you customize text styles across your website. These
- Header 3: Smaller titles for subsections
- Header 4: Small titles for minor sections
- Preheader: Introductory text that appears above headers
</details>
</details>

<details>
<summary>Subheaders</summary>

- Subheader 1: Primary subheaders for section introductions
- Subheader 2: Secondary subheaders for supporting text
</details>
</details>

<details>
<summary>Body Text</summary>

- Text 1: Main body text for content
- Text 2: Secondary body text for supporting content
- Caption: Small text for image captions and footnotes
</details>
</details>

<details>
<summary>Interactive Elements</summary>

- Link: Text for clickable links
- Button: Text for buttons and calls-to-action
- Input: Text for form fields and search boxes
</details>
</details>

For each text style, you can customize:

Expand Down Expand Up @@ -243,7 +243,7 @@ CourseLit provides a carefully curated selection of professional fonts, organize
- **Mulish**: A geometric sans-serif with a modern feel
- **Nunito**: A well-balanced font with rounded terminals
- **Work Sans**: A clean, modern font with a geometric feel
</details>
</details>

<details>
<summary>Serif Fonts</summary>
Expand All @@ -253,7 +253,7 @@ CourseLit provides a carefully curated selection of professional fonts, organize
- **Playfair Display**: An elegant serif font for headings
- **Roboto Slab**: A serif variant of Roboto
- **Source Serif 4**: A serif font designed for digital reading
</details>
</details>

<details>
<summary>Display Fonts</summary>
Expand All @@ -264,15 +264,15 @@ CourseLit provides a carefully curated selection of professional fonts, organize
- **Rubik**: A sans-serif with a geometric feel
- **Oswald**: A reworking of the classic style
- **Bebas Neue**: A display font with a strong personality
</details>
</details>

<details>
<summary>Modern Fonts</summary>

- **Lato**: A sans-serif font with a warm feel
- **PT Sans**: A font designed for public use
- **Quicksand**: A display sans-serif with rounded terminals
</details>
</details>

Each font is optimized for web use and includes multiple weights for flexibility in design. All fonts support Latin characters and are carefully selected for their readability and professional appearance.

Expand All @@ -290,7 +290,7 @@ The interactives editor allows you to customize the appearance of interactive el
- Shadow effects: From None to 2X Large
- Custom styles: Add your own custom styles using [supported Tailwind classes](#supported-tailwind-classes)
- Disabled state: How the button looks when it can't be clicked
</details>
</details>

<details>
<summary>Link</summary>
Expand All @@ -300,7 +300,7 @@ The interactives editor allows you to customize the appearance of interactive el
- Text shadow: Add depth to your links
- Custom styles: Add your own custom styles using [supported Tailwind classes](#supported-tailwind-classes)
- Disabled state: How the link looks when it can't be clicked
</details>
</details>

<details>
<summary>Card</summary>
Expand All @@ -309,7 +309,7 @@ The interactives editor allows you to customize the appearance of interactive el
- Border style: Choose from various border styles
- Shadow effects: Add depth to your cards
- Custom styles: Add your own custom styles using [supported Tailwind classes](#supported-tailwind-classes)
</details>
</details>

<details>
<summary>Input</summary>
Expand All @@ -320,7 +320,7 @@ The interactives editor allows you to customize the appearance of interactive el
- Shadow effects: Add depth to your input fields
- Custom styles: Add your own custom styles using [supported Tailwind classes](#supported-tailwind-classes)
- Disabled state: How the input looks when it can't be used
</details>
</details>

### 4. Structure

Expand All @@ -332,14 +332,14 @@ The structure editor lets you customize the layout of your pages, like section p
<summary>Page</summary>

- Maximum width options: - 2XL (42rem): Compact layout - 3XL (48rem): Standard layout - 4XL (56rem): Wide layout - 5XL (64rem): Extra wide layout - 6XL (72rem): Full width layout
</details>
</details>

<details>
<summary>Section</summary>

- Horizontal padding: Space on the left and right sides (None to 9X Large)
- Vertical padding: Space on the top and bottom (None to 9X Large)
</details>
</details>

## Publishing Changes

Expand Down Expand Up @@ -387,7 +387,7 @@ When adding custom styles to interactive elements, you can use the following Tai
- `text-6xl`: 6X large text
- `text-7xl`: 7X large text
- `text-8xl`: 8X large text
</details>
</details>

<details>
<summary>Padding</summary>
Expand All @@ -399,7 +399,7 @@ When adding custom styles to interactive elements, you can use the following Tai
#### Horizontal Padding

- `px-4` to `px-20`: Horizontal padding from 1rem to 5rem
</details>
</details>

<details>
<summary>Colors</summary>
Expand Down Expand Up @@ -454,7 +454,7 @@ Variants available: `hover`, `disabled`, `dark`
- `ease-out`: Ease out
- `ease-in-out`: Ease in and out
- `ease-linear`: Linear
</details>
</details>

<details>
<summary>Transforms</summary>
Expand All @@ -481,7 +481,7 @@ Variants available: `hover`, `disabled`, `dark`
- `scale-110`: 110% scale
- `scale-125`: 125% scale
- `scale-150`: 150% scale
</details>
</details>

<details>
<summary>Shadows</summary>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/components/admin/page-editor/add-widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function AddWidget({ pageType, onSelection, onClose }: WidgetsListProps) {
.map((item, index) =>
widgets[item].metadata.compatibleWith.includes(pageType) ? (
<li
className="flex items-center px-2 py-3 hover:!bg-slate-100 cursor-pointer justify-between"
className="flex items-center px-2 py-3 hover:!bg-accent cursor-pointer justify-between"
key={index}
onClick={(e) => onSelection(item)}
>
Expand Down
52 changes: 26 additions & 26 deletions apps/web/components/admin/page-editor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -815,31 +815,6 @@ export default function PageEditor({
</header>
</div>
<div className="flex w-full h-[calc(100vh-56px)] mt-14 gap-4 p-4 bg-muted/10">
{leftPaneContent !== "none" && (
<div className="w-[300px] rounded-xl border bg-background/98 backdrop-blur supports-[backdrop-filter]:bg-background/80 shadow-sm flex flex-col overflow-hidden">
<PanelHeader
title={
leftPaneContent === "widgets"
? EDIT_PAGE_ADD_WIDGET_TITLE
: leftPaneContent === "editor"
? "Edit Block"
: leftPaneContent === "fonts"
? "Fonts"
: leftPaneContent === "theme"
? "Theme"
: leftPaneContent === "seo"
? "SEO"
: ""
}
onClose={onClose}
/>
<ScrollArea className="h-[calc(100%-56px)]">
<div className="py-2 space-y-4">
{activeSidePaneContent}
</div>
</ScrollArea>
</div>
)}
<div
className={cn(
"rounded-xl border bg-background/98 backdrop-blur supports-[backdrop-filter]:bg-background/80 shadow-sm",
Expand Down Expand Up @@ -876,6 +851,31 @@ export default function PageEditor({
</div>
</ScrollArea>
</div>
{leftPaneContent !== "none" && (
<div className="w-[300px] rounded-xl border bg-background/98 backdrop-blur supports-[backdrop-filter]:bg-background/80 shadow-sm flex flex-col overflow-hidden">
<PanelHeader
title={
leftPaneContent === "widgets"
? EDIT_PAGE_ADD_WIDGET_TITLE
: leftPaneContent === "editor"
? "Edit Block"
: leftPaneContent === "fonts"
? "Fonts"
: leftPaneContent === "theme"
? "Theme"
: leftPaneContent === "seo"
? "SEO"
: ""
}
onClose={onClose}
/>
<ScrollArea className="h-[calc(100%-56px)]">
<div className="py-2 space-y-4">
{activeSidePaneContent}
</div>
</ScrollArea>
</div>
)}
</div>
</div>
);
Expand All @@ -885,8 +885,8 @@ export default function PageEditor({
<div className="flex flex-col gap-4 p-4">
<Skeleton className="w-full h-16" />
<div className="flex gap-4">
<Skeleton className="w-1/4 h-90" />
<Skeleton className="w-3/4 h-screen" />
<Skeleton className="w-1/4 h-90" />
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/web/components/public/base-layout/template/editable-widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const EditableWidget = ({
onClick={() => onEditClick && onEditClick(item.widgetId)}
className="relative cursor-pointer group"
>
<div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity z-20">
<div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity z-30">
<div className="text-white/90 border border-white/50 px-3 py-1.5 rounded text-sm font-medium">
Click to update
</div>
Expand Down
Loading
Loading