Skip to content

Commit

Permalink
[ENG-3869]Make Chakra docs usable on mobile (#27)
Browse files Browse the repository at this point in the history 
* Make Chakra docs usable on mobile

* make the accordion width 100% on smaller devices

* address comments
  • Loading branch information
@ElijahAhianyo
ElijahAhianyo authored Nov 6, 2024
1 parent fbd8cbd commit b5b9019
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 33 deletions.
55 changes: 51 additions & 4 deletions docs/rcweb/rcweb/utils/docpage.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@
import os
from ..utils.flexdown import xd, markdown, docdemobox
from ..utils.sidebar import sidebar as sb
from ..utils.sidebar import MobileAndTabletSidebarState
from ..constants import css, fonts
import textwrap
import mistletoe
from reflex.style import toggle_color_mode

flat_items = []

Expand Down Expand Up @@ -323,6 +325,20 @@ def get_path(component_fn: Callable):
)


def mobile_and_tablet(*children, **props):
"""Create a component that is only visible on mobile and tablet.
Args:
*children: The children to pass to the component.
**props: The props to pass to the component.
Returns:
The component.
"""

return rx.box(*children, **props, display=["inline", "inline", "inline", "none"])


def docpage(
set_path: str | None = None,
t: str | None = None,
Expand Down Expand Up @@ -479,11 +495,43 @@ def wrapper(*args, **kwargs) -> rx.Component:

# Return the templated page.
return rx.flex(
# navbar(),
# navbar
rc.flex(
rc.box(
rx.box(
rx.el.button(
rx.color_mode.icon(
light_component=rx.icon(
"sun", size=16, class_name="!text-slate-9"
),
dark_component=rx.icon(
"moon", size=16, class_name="!text-slate-9"
),
),
on_click=toggle_color_mode,
class_name="flex flex-row justify-center items-center px-3 py-0.5 w-full h-[47px]",
),
float="right"
),
mobile_and_tablet(
rc.icon_button(
rx.icon("menu"), on_click=MobileAndTabletSidebarState.toggle_drawer,
float="right"
),
),
justify="space-between",
align_items="center",
padding="1em",
width="100%",
),
width="100%",
justify="center",
),


rx.el.main(
rx.box(
sidebar,
margin_top="105px",
height="100%",
width="24%",
display=["none", "none", "none", "none", "flex", "flex"],
Expand Down Expand Up @@ -520,7 +568,7 @@ def wrapper(*args, **kwargs) -> rx.Component:
),
# docpage_footer(path=path),
padding_x=["16px", "24px", "24px", "48px", "96px"],
margin_top=["105px", "145px", "0px", "0px", "0px"],
margin_top=["0px", "0px", "0px", "0px", "0px"],
padding_top="5em",
),
width=(
Expand Down Expand Up @@ -646,7 +694,6 @@ def wrapper(*args, **kwargs) -> rx.Component:
max_height="80vh",
overflow_y="scroll",
),
margin_top="105px",
width="18%",
height="100%",
display=(
Expand Down
89 changes: 60 additions & 29 deletions docs/rcweb/rcweb/utils/sidebar.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,7 @@ def create_sidebar_section(items, index, url):
width="100%",
padding_left="0em",
margin_left="0em",
margin_top="5em",
),
margin_left="0em",
direction="column",
Expand All @@ -384,28 +385,6 @@ def sidebar_comp(
"align_items": "flex-start",
}
return rx.flex(
# rx.link(
# rx.heading(
# "introduction",
# as_="h5",
# style={
# "color": rx.color("slate", 12),
# "font-family": "Instrument Sans",
# "font-size": "14px",
# "font-style": "normal",
# "font-weight": "600",
# "line-height": "20px",
# "letter-spacing": "-0.21px",
# "transition": "color 0.035s ease-out",
# "_hover": {
# "color": rx.color("violet", 9),
# },
# },
# ),
# underline="none",
# padding_y="12px",
# href="/introduction",
# ),
rx.unordered_list(
create_sidebar_section(
chakra_lib_items,
Expand Down Expand Up @@ -440,17 +419,69 @@ def sidebar_comp(
)


def sidebar(chakra_components, url=None, width: str = "100%") -> rx.Component:
"""Render the sidebar."""
class MobileAndTabletSidebarState(rx.State):
drawer_is_open: bool = False

def toggle_drawer(self):
self.drawer_is_open = not (self.drawer_is_open)


def sidebar_on_mobile_and_tablet(component):
return rc.vstack(
rc.drawer(
rc.drawer_overlay(
rc.drawer_content(
rc.box(
component,
margin_top="2em",
),
rc.drawer_footer(
rc.icon_button(
rx.icon(
"x",
size=24,
style={
"[data-state=open] &": {
"display": "flex",
},
"[data-state=closed] &": {
"display": "none",
},
},
class_name="!text-slate-9 shrink-0",
),
on_click=MobileAndTabletSidebarState.toggle_drawer,
)
),
bg="rgba(0, 0, 0)",
),
),
size="full",
is_open=MobileAndTabletSidebarState.drawer_is_open,
width="100vw"
),
on_unmount=MobileAndTabletSidebarState.set_drawer_is_open(False),

)


def get_sidebar_content(chakra_components, url=None, width: str = "100%"):
global chakra_lib_items
chakra_lib_items = get_sidebar_items_other_libraries(chakra_components)
other_libs_index = calculate_index(chakra_lib_items, url)
return sidebar_comp(
url=url,
other_libs_index=other_libs_index,
width=width,
)


def sidebar(chakra_components, url=None, width: str = "100%") -> rx.Component:
"""Render the sidebar."""

return rx.flex(
sidebar_comp(
url=url,
other_libs_index=other_libs_index,
width=width,
),
sidebar_on_mobile_and_tablet(get_sidebar_content(chakra_components, url, "100%")),
get_sidebar_content(chakra_components, url, width),
width="100%",
height="100%",
justify="end",
Expand Down

0 comments on commit b5b9019

Please sign in to comment.