Update base template styling (#2050)
This commit is contained in:
Nikhil Rao
GitHub
parent
23255d49d4
commit
6b7bd8e51b
@ -14,24 +14,25 @@ reflex init --template blank
|
||||
This template has the following directory structure:
|
||||
|
||||
```bash
|
||||
.
|
||||
├── README.md
|
||||
├── assets
|
||||
├── requirements.txt
|
||||
├── rxconfig.py
|
||||
└── {your_app}
|
||||
├── __init__.py
|
||||
├── components
|
||||
│ └── sidebar.py
|
||||
│ ├── __init__.py
|
||||
│ └── sidebar.py
|
||||
├── pages
|
||||
│ ├── __init__.py
|
||||
│ ├── dashboard.py
|
||||
│ ├── index.py
|
||||
│ ├── settings.py
|
||||
│ └── template.py
|
||||
│ ├── __init__.py
|
||||
│ ├── dashboard.py
|
||||
│ ├── index.py
|
||||
│ └── settings.py
|
||||
├── state.py
|
||||
├── styles.py
|
||||
├── templates
|
||||
│ ├── __init__.py
|
||||
│ └── template.py
|
||||
└── {your_app}.py
|
||||
|
||||
```
|
||||
|
||||
See the [Project Structure docs](https://reflex.dev/docs/getting-started/project-structure/) for more information on general Reflex project structure.
|
||||
@ -50,7 +51,7 @@ To add a new page:
|
||||
|
||||
1. Add a new file in `{your_app}/pages/`. We recommend using one file per page, but you can also group pages in a single file.
|
||||
2. Add a new function with the `@template` decorator, which takes the same arguments as `@rx.page`.
|
||||
3. Import the page in your `{your_app}/{your_app}.py` file and it will automatically be added to the app.
|
||||
3. Import the page in your `{your_app}/pages/__init__.py` file and it will automatically be added to the app.
|
||||
|
||||
|
||||
### Adding Components
|
||||
|
||||
@ -49,35 +49,13 @@ def sidebar_footer() -> rx.Component:
|
||||
The sidebar footer component.
|
||||
"""
|
||||
return rx.hstack(
|
||||
rx.link(
|
||||
rx.center(
|
||||
rx.image(
|
||||
src="/paneleft.svg",
|
||||
height="2em",
|
||||
padding="0.5em",
|
||||
),
|
||||
bg="transparent",
|
||||
border_radius=styles.border_radius,
|
||||
**styles.hover_accent_bg,
|
||||
),
|
||||
on_click=State.toggle_sidebar_displayed,
|
||||
transform=rx.cond(~State.sidebar_displayed, "rotate(180deg)", ""),
|
||||
transition="transform 0.5s, left 0.5s",
|
||||
position="relative",
|
||||
left=rx.cond(State.sidebar_displayed, "0px", "20.5em"),
|
||||
**styles.overlapping_button_style,
|
||||
),
|
||||
rx.spacer(),
|
||||
rx.link(
|
||||
rx.text(
|
||||
"Docs",
|
||||
),
|
||||
rx.text("Docs"),
|
||||
href="https://reflex.dev/docs/getting-started/introduction/",
|
||||
),
|
||||
rx.link(
|
||||
rx.text(
|
||||
"Blog",
|
||||
),
|
||||
rx.text("Blog"),
|
||||
href="https://reflex.dev/blog/",
|
||||
),
|
||||
width="100%",
|
||||
@ -162,6 +140,7 @@ def sidebar() -> rx.Component:
|
||||
sidebar_footer(),
|
||||
height="100dvh",
|
||||
),
|
||||
display=["none", "none", "block"],
|
||||
min_width=styles.sidebar_width,
|
||||
height="100%",
|
||||
position="sticky",
|
||||
|
||||
@ -6,7 +6,7 @@ from code.templates import template
|
||||
import reflex as rx
|
||||
|
||||
|
||||
@template(route="/", title="Home", image="/logo.svg")
|
||||
@template(route="/", title="Home", image="/github.svg")
|
||||
def index() -> rx.Component:
|
||||
"""The home page.
|
||||
|
||||
|
||||
@ -4,11 +4,9 @@ import reflex as rx
|
||||
|
||||
|
||||
class State(rx.State):
|
||||
"""State for the app."""
|
||||
"""Base state for the app.
|
||||
|
||||
# Whether the sidebar is displayed.
|
||||
sidebar_displayed: bool = True
|
||||
The base state is used to store general vars used throughout the app.
|
||||
"""
|
||||
|
||||
def toggle_sidebar_displayed(self) -> None:
|
||||
"""Toggle the sidebar displayed."""
|
||||
self.sidebar_displayed = not self.sidebar_displayed
|
||||
pass
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
"""Styles for the app."""
|
||||
from code.state import State
|
||||
|
||||
import reflex as rx
|
||||
|
||||
@ -20,12 +19,7 @@ template_page_style = {
|
||||
}
|
||||
|
||||
template_content_style = {
|
||||
"width": rx.cond(
|
||||
State.sidebar_displayed,
|
||||
f"calc({content_width_vw} - {sidebar_width})",
|
||||
content_width_vw,
|
||||
),
|
||||
"min-width": sidebar_width,
|
||||
"width": "100%",
|
||||
"align_items": "flex-start",
|
||||
"box_shadow": box_shadow,
|
||||
"border_radius": border_radius,
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
|
||||
from code import styles
|
||||
from code.components.sidebar import sidebar
|
||||
from code.state import State
|
||||
from typing import Callable
|
||||
|
||||
import reflex as rx
|
||||
@ -22,6 +21,8 @@ def menu_button() -> rx.Component:
|
||||
Returns:
|
||||
The menu button component.
|
||||
"""
|
||||
from reflex.page import get_decorated_pages
|
||||
|
||||
return rx.box(
|
||||
rx.menu(
|
||||
rx.menu_button(
|
||||
@ -32,7 +33,16 @@ def menu_button() -> rx.Component:
|
||||
),
|
||||
),
|
||||
rx.menu_list(
|
||||
rx.menu_item(rx.link("Home", href="/", width="100%")),
|
||||
*[
|
||||
rx.menu_item(
|
||||
rx.link(
|
||||
page["title"],
|
||||
href=page["route"],
|
||||
width="100%",
|
||||
)
|
||||
)
|
||||
for page in get_decorated_pages()
|
||||
],
|
||||
rx.menu_divider(),
|
||||
rx.menu_item(
|
||||
rx.link("About", href="https://github.com/reflex-dev", width="100%")
|
||||
@ -50,12 +60,24 @@ def menu_button() -> rx.Component:
|
||||
|
||||
|
||||
def template(
|
||||
**page_kwargs: dict,
|
||||
route: str | None = None,
|
||||
title: str | None = None,
|
||||
image: str | None = None,
|
||||
description: str | None = None,
|
||||
meta: str | None = None,
|
||||
script_tags: list[rx.Component] | None = None,
|
||||
on_load: rx.event.EventHandler | list[rx.event.EventHandler] | None = None,
|
||||
) -> Callable[[Callable[[], rx.Component]], rx.Component]:
|
||||
"""The template for each page of the app.
|
||||
|
||||
Args:
|
||||
page_kwargs: Keyword arguments to pass to the page.
|
||||
route: The route to reach the page.
|
||||
title: The title of the page.
|
||||
image: The favicon of the page.
|
||||
description: The description of the page.
|
||||
meta: Additionnal meta to add to the page.
|
||||
on_load: The event handler(s) called when the page load.
|
||||
script_tags: Scripts to attach to the page.
|
||||
|
||||
Returns:
|
||||
The template with the page content.
|
||||
@ -71,9 +93,17 @@ def template(
|
||||
The template with the page content.
|
||||
"""
|
||||
# Get the meta tags for the page.
|
||||
page_kwargs["meta"] = [*default_meta, *page_kwargs.get("meta", [])]
|
||||
all_meta = [*default_meta, *(meta or [])]
|
||||
|
||||
@rx.page(**page_kwargs)
|
||||
@rx.page(
|
||||
route=route,
|
||||
title=title,
|
||||
image=image,
|
||||
description=description,
|
||||
meta=all_meta,
|
||||
script_tags=script_tags,
|
||||
on_load=on_load,
|
||||
)
|
||||
def templated_page():
|
||||
return rx.hstack(
|
||||
sidebar(),
|
||||
@ -89,9 +119,6 @@ def template(
|
||||
align_items="flex-start",
|
||||
transition="left 0.5s, width 0.5s",
|
||||
position="relative",
|
||||
left=rx.cond(
|
||||
State.sidebar_displayed, "0px", f"-{styles.sidebar_width}"
|
||||
),
|
||||
)
|
||||
|
||||
return templated_page
|
||||
|
||||
@ -169,6 +169,7 @@ def sidebar() -> rx.Component:
|
||||
sidebar_footer(),
|
||||
height="100dvh",
|
||||
),
|
||||
display=["none", "none", "block"],
|
||||
min_width=sidebar_width,
|
||||
height="100%",
|
||||
position="sticky",
|
||||
|
||||
@ -719,12 +719,12 @@ def demo(
|
||||
_init(
|
||||
name="reflex_demo",
|
||||
template=constants.Templates.Kind.DEMO,
|
||||
loglevel=constants.LogLevel.DEBUG,
|
||||
loglevel=constants.LogLevel.ERROR,
|
||||
)
|
||||
_run(
|
||||
frontend_port=frontend_port,
|
||||
backend_port=backend_port,
|
||||
loglevel=constants.LogLevel.DEBUG,
|
||||
loglevel=constants.LogLevel.ERROR,
|
||||
)
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user