Skip to content

Commit 697a23c

Browse files
LineIndentLineIndent
authored
ui changes to main docpages (sidebars, main content, TOC, ...) (#1558)
1 parent 663bd7d commit 697a23c

File tree

1 file changed

+47
-63
lines changed

1 file changed

+47
-63
lines changed

‎pcweb/templates/docpage/docpage.py‎

Lines changed: 47 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -425,7 +425,7 @@ def breadcrumb(path: str, nav_sidebar: rx.Component):
425425
rx.icon(tag="chevron-down", size=14, class_name="!text-slate-9"),
426426
class_name="p-[0.563rem] lg:hidden flex",
427427
),
428-
class_name="relative z-10 flex flex-row justify-between items-center gap-4 lg:gap-0 border-slate-4 bg-slate-1 mt-12 mb-6 lg:mb-12 p-[0.5rem_1rem_0.5rem_1rem] lg:p-0 border-b lg:border-none w-full"
428+
class_name="relative z-10 flex flex-row justify-between items-center gap-4 lg:gap-0 border-slate-4 bg-slate-1 mt-12 mb-6 lg:mb-8 p-[0.5rem_1rem_0.5rem_1rem] lg:p-0 border-b lg:border-none w-full"
429429
+ rx.cond(
430430
HostingBannerState.show_banner,
431431
" lg:mt-[175px]",
@@ -616,31 +616,31 @@ def wrapper(*args, **kwargs) -> rx.Component:
616616

617617
show_right_sidebar = right_sidebar and len(toc) >= 2
618618

619-
grid_cols_classes = "grid-cols-1"
620-
if show_right_sidebar:
621-
grid_cols_classes += " 2xl:grid-cols-[300px_1fr_16%]"
622-
grid_cols_classes += " lg:grid-cols-[300px_1fr]"
623-
624619
return rx.box(
625620
navbar(),
626621
rx.el.main(
627622
rx.box(
628623
sidebar,
629-
class_name="h-full shrink-0 lg:block hidden"
630-
+ rx.cond(
631-
HostingBannerState.show_banner,
632-
" mt-[146px]",
633-
" mt-[90px]",
624+
class_name=(
625+
"w-[300px] h-screen sticky top-0 shrink-0 hidden lg:block"
626+
+ rx.cond(
627+
HostingBannerState.show_banner,
628+
" mt-[146px]",
629+
" mt-[90px]",
630+
)
634631
),
635632
),
633+
636634
rx.box(
637635
rx.box(
638636
breadcrumb(path=path, nav_sidebar=nav_sidebar),
639-
class_name="px-0 xl:px-20 pt-0 "
640-
+ rx.cond(
641-
HostingBannerState.show_banner,
642-
"mt-[90px]",
643-
"",
637+
class_name=(
638+
"px-0 xl:px-14 pt-0"
639+
+ rx.cond(
640+
HostingBannerState.show_banner,
641+
" mt-[90px]",
642+
"",
643+
)
644644
),
645645
),
646646
rx.box(
@@ -650,95 +650,79 @@ def wrapper(*args, **kwargs) -> rx.Component:
650650
class_name="flex flex-row gap-2 mt-8 lg:mt-10 mb-6 lg:mb-12",
651651
),
652652
docpage_footer(path=path.rstrip("/")),
653-
class_name="lg:mt-0 mt-6 px-4 xl:px-20 h-screen bg-slate-1",
654-
),
655-
class_name="w-full bg-slate-1 h-full mx-auto max-w-2xl "
656-
+ (
657-
" xl:max-w-[60rem]"
658-
if show_right_sidebar
659-
else "xl:max-w-full"
653+
class_name="lg:mt-0 mt-6 px-4 xl:px-10 h-auto bg-slate-1",
660654
),
655+
# class_name="flex-1 bg-slate-1 h-auto mx-auto max-w-4xl overflow-y-auto" # <-keep for future ref...
656+
class_name="flex-1 bg-slate-1 h-auto mx-auto overflow-y-auto "
657+
+ "max-w-4xl" if show_right_sidebar and not pseudo_right_bar else "!max-w-7xl",
661658
),
662-
(
663-
# right-hand sidebar
659+
rx.box(
664660
rx.el.nav(
665661
rx.box(
666-
rx.el.h5(
662+
rx.el.p(
667663
"On this page",
668-
class_name="font-smbold text-[0.875rem] text-slate-12 hover:text-violet-9 leading-5 tracking-[-0.01313rem] transition-color",
664+
class_name="font-smbold text-sm text-slate-12 hover:text-violet-9 leading-5 tracking-[-0.01313rem] transition-color",
669665
),
670666
rx.el.ul(
671667
*[
672668
(
673669
rx.el.li(
674670
rx.link(
675671
text,
676-
class_name="font-small text-slate-9 hover:!text-slate-11 whitespace-normal transition-color",
672+
class_name="font-small text-slate-9 hover:!text-slate-11 whitespace-normal transition-color break-words",
677673
underline="none",
678-
href=path
679-
+ "#"
680-
+ text.lower().replace(" ", "-"),
674+
href=path + "#" + text.lower().replace(" ", "-"),
681675
)
682676
)
683677
if level == 1
684678
else (
685679
rx.list_item(
686680
rx.link(
687681
text,
688-
class_name="font-small text-slate-9 hover:!text-slate-11 whitespace-normal transition-color",
682+
class_name="font-small text-slate-9 hover:!text-slate-11 whitespace-normal transition-color break-words",
689683
underline="none",
690-
href=path
691-
+ "#"
692-
+ text.lower().replace(
693-
" ", "-"
694-
),
684+
href=path + "#" + text.lower().replace(" ", "-"),
695685
)
696686
)
697687
if level == 2
698688
else rx.el.li(
699689
rx.link(
700690
text,
701691
underline="none",
702-
class_name="pl-6 font-small text-slate-9 hover:!text-slate-11 transition-color",
703-
href=path
704-
+ "#"
705-
+ text.lower().replace(
706-
" ", "-"
707-
),
692+
class_name="pl-3 block text-sm text-slate-9 hover:!text-slate-11 transition-color break-words",
693+
href=path + "#" + text.lower().replace(" ", "-"),
708694
)
709695
)
710696
)
711697
)
712698
for level, text in toc
713699
],
714-
class_name="flex flex-col gap-4 list-none",
700+
class_name="flex flex-col gap-y-3 list-none",
715701
),
716-
class_name="fixed flex flex-col justify-start gap-4 p-[0.875rem_0.5rem_0px_0.5rem] max-h-[80vh] overflow-y-auto",
717-
style={"width": "inherit"},
702+
class_name="flex flex-col justify-start gap-y-2 p-[0.875rem_0.5rem_0px_0.5rem] max-h-[80vh] overflow-y-auto sticky top-4",
718703
),
719-
class_name="shrink-0 2xl:col-start-3 2xl:col-end-4"
720-
+ rx.cond(
721-
HostingBannerState.show_banner,
722-
" mt-[146px]",
723-
" mt-[90px]",
724-
)
725-
+ (
726-
" hidden xl:flex xl:flex-col"
727-
if show_right_sidebar and not pseudo_right_bar
728-
else " hidden"
704+
class_name=(
705+
"w-full h-full"
706+
+ rx.cond(
707+
HostingBannerState.show_banner,
708+
" mt-[146px]",
709+
" mt-[90px]",
710+
)
729711
),
730712
id="toc-navigation",
731-
)
732-
if not pseudo_right_bar or show_right_sidebar
733-
else rx.el.div(class_name="hidden")
734-
),
735-
class_name="grid justify-center mx-auto mt-0 max-w-[94.5em] h-full min-h-screen w-full lg:px-10 "
736-
+ grid_cols_classes,
713+
),
714+
class_name=(
715+
"w-[240px] h-screen sticky top-0 shrink-0 hidden xl:block"
716+
),
717+
) if show_right_sidebar and not pseudo_right_bar else rx.box(class_name="w-[180px] h-screen sticky top-0 shrink-0 hidden xl:block"),
718+
719+
class_name="flex justify-center mx-auto mt-0 max-w-[94.5em] h-full min-h-screen w-full lg:px-10",
737720
),
738-
class_name="flex flex-col justify-center bg-slate-1 w-full mx-auto",
721+
class_name="flex flex-col justify-center bg-slate-1 w-full",
739722
on_mount=rx.call_script(right_sidebar_item_highlight()),
740723
)
741724

725+
742726
components = path.split("/")
743727
category = (
744728
" ".join(

0 commit comments

Comments
 (0)