From ecad52093e9ed7978cd762ebce12b25f0606b8b9 Mon Sep 17 00:00:00 2001 From: Carlos Date: Mon, 11 Nov 2024 11:58:17 +0100 Subject: [PATCH] [HOS-211] Mobile view + docs hosting banner fix --- pcweb/components/hosting_banner.py | 20 +++++++++++++------- pcweb/templates/docpage/docpage.py | 23 +++++++++++++++++++---- 2 files changed, 32 insertions(+), 11 deletions(-) diff --git a/pcweb/components/hosting_banner.py b/pcweb/components/hosting_banner.py index 11b2a486f..762cc26da 100644 --- a/pcweb/components/hosting_banner.py +++ b/pcweb/components/hosting_banner.py @@ -15,16 +15,15 @@ class HostingBannerState(rx.State): show_banner: bool = True def hide_banner(self): - print("hide_banner") self.show_banner = False + def hosting_banner() -> rx.Component: return rx.cond( HostingBannerState.show_banner, - rx.desktop_only(rx.box( + rx.box( rx.link( rx.box( - rx.text(""), rx.text( "Reflex Cloud - ", rx.el.span( @@ -35,14 +34,21 @@ def hosting_banner() -> rx.Component: ), rx.el.button( "Launching Soon", - class_name="text-slate-11 h-[1.5rem] rounded-md bg-slate-4 px-1.5 text-sm font-semibold z-[1]", + class_name="text-slate-11 h-[1.5rem] rounded-md bg-slate-4 px-1.5 text-sm font-semibold z-[1] items-center justify-center shrink-0", ), class_name="flex items-center gap-4", ), href="/hosting", + underline="none", + class_name="mr-7 lg:mr-0", + ), + rx.icon( + "x", + on_click=HostingBannerState.hide_banner, + size=16, + class_name="z-[1] cursor-pointer hover:!text-slate-11 transition-color !text-slate-9 absolute right-4", ), - rx.icon("x", on_click=HostingBannerState.hide_banner, size=16, color=rx.color("slate", 9), class_name="absolute right-4 z-[1]"), glow(), - class_name="px-4 lg:px-6 w-screen h-auto lg:h-[40px] shadow-[inset_0_-1px_0_0_var(--c-slate-3)] flex items-center justify-center bg-slate-1 flex-row gap-4 overflow-hidden relative lg:py-0 py-2 max-w-full", - )) + class_name="px-4 lg:px-6 w-screen h-auto lg:h-[3.5rem] shadow-[inset_0_-1px_0_0_var(--c-slate-3)] flex items-center justify-center bg-slate-1 flex-row gap-4 overflow-hidden relative lg:py-0 py-2 max-w-full", + ), ) diff --git a/pcweb/templates/docpage/docpage.py b/pcweb/templates/docpage/docpage.py index 6e73bb1f6..29ed4e0f4 100644 --- a/pcweb/templates/docpage/docpage.py +++ b/pcweb/templates/docpage/docpage.py @@ -286,7 +286,7 @@ def breadcrumb(path: str, nav_sidebar: rx.Component): class_name="font-sm text-slate-8 mobile-only", ) ) - + from pcweb.components.hosting_banner import HostingBannerState # Return the list of breadcrumb items with separators return rx.box( docs_sidebar_drawer( @@ -303,7 +303,11 @@ def breadcrumb(path: str, nav_sidebar: rx.Component): rx.icon(tag="chevron-down", size=14, class_name="!text-slate-9"), class_name="p-[0.563rem] mobile-only", ), - 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 lg:mt-[119px] mb-6 lg:mb-12 p-[0.5rem_1rem_0.5rem_1rem] lg:p-0 border-b lg:border-none w-full", + 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" + rx.cond( + HostingBannerState.show_banner, + " lg:mt-[175px]", + " lg:mt-[119px]", + ), ) @@ -414,6 +418,7 @@ def wrapper(*args, **kwargs) -> rx.Component: from pcweb.components.docpage.navbar import navbar from pcweb.components.docpage.sidebar import get_prev_next from pcweb.components.docpage.sidebar import sidebar as sb + from pcweb.components.hosting_banner import HostingBannerState # Create the docpage sidebar. sidebar = sb(url=path, width="300px") @@ -494,7 +499,12 @@ def wrapper(*args, **kwargs) -> rx.Component: rx.el.main( rx.box( sidebar, - class_name="mt-[90px] h-full shrink-0 desktop-only lg:w-[24%]", + class_name="h-full shrink-0 desktop-only lg:w-[24%]" + + rx.cond( + HostingBannerState.show_banner, + " mt-[146px]", + " mt-[90px]", + ), ), rx.box( rx.box( @@ -567,7 +577,12 @@ def wrapper(*args, **kwargs) -> rx.Component: ), class_name="fixed flex flex-col justify-start gap-4 p-[0.875rem_0.5rem_0px_0.5rem] w-full max-w-[300px] max-h-[80vh] overflow-hidden", ), - class_name="mt-[90px] h-full shrink-0 w-[16%]" + class_name="h-full shrink-0 w-[16%]" + + rx.cond( + HostingBannerState.show_banner, + " mt-[146px]", + " mt-[90px]", + ) + (" hidden xl:flex" if right_sidebar else " hidden"), ), class_name="justify-center flex flex-row mx-auto mt-0 max-w-[94.5em] h-full min-h-screen w-full",