[HOS-211] Mobile view + docs hosting banner fix (#1078)

Author: carlosabadia

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",
+        ),
     )

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",