From 396ea522f5ce6385e540e64b3ae3ec864b964b8e Mon Sep 17 00:00:00 2001 From: Carlos Date: Fri, 30 Jan 2026 10:04:38 +0100 Subject: [PATCH 1/2] Update banner in mobile --- pcweb/components/hosting_banner.py | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/pcweb/components/hosting_banner.py b/pcweb/components/hosting_banner.py index 586cf3e10..47e83185a 100644 --- a/pcweb/components/hosting_banner.py +++ b/pcweb/components/hosting_banner.py @@ -64,40 +64,43 @@ def hosting_banner() -> rx.Component: return rx.el.div( rx.cond( HostingBannerState.is_banner_visible, - rx.hstack( + rx.el.div( rx.el.a( rx.box( rx.box( # Header text with responsive spans rx.el.span( "New", - class_name="items-center font-medium px-1.5 h-5 rounded-md text-xs bg-violet-9 text-slate-1 z-[1] inline-flex", + class_name="items-center font-medium px-1.5 h-5 rounded-md text-xs bg-violet-9 text-slate-1 z-[1] max-lg:hidden lg:inline-flex", ), rx.text( rx.el.span( - "Reflex Build On-Prem - A secure builder running in your environment.", + "Reflex Build On-Prem - A secure builder running in your environment. ", + rx.el.span( + "Learn more", + class_name="text-slate-11 font-semibold text-sm underline decoration-slate-11 lg:pl-2", + ), class_name="inline-block text-slate-12 font-semibold text-sm", ), class_name="text-slate-12 font-semibold text-sm z-[1]", ), - rx.el.span( - "Learn more", - class_name="text-slate-12 font-semibold text-sm underline decoration-slate-11", - ), class_name="flex items-center md:gap-3.5 gap-2", ) ), glow(), to=BLOG_LINK, is_external=False, + class_name="flex justify-start md:justify-center md:col-start-2", ), - rx.icon( - "x", + rx.el.button( + rx.icon( + "x", + size=16, + ), + class_name="cursor-pointer hover:!text-slate-11 transition-color !text-slate-9 z-10 size-8 flex items-center justify-center shrink-0 md:col-start-3 justify-self-end ml-auto", on_click=HostingBannerState.hide_banner, - size=16, - class_name="cursor-pointer hover:!text-slate-11 transition-color !text-slate-9 absolute right-6 lg:right-4 z-10", ), - class_name="px-6 lg:px-6 w-screen min-h-[3rem] lg:h-[3.5rem] shadow-[inset_0_-1px_0_0_var(--c-slate-3)] flex items-center justify-between md:justify-center bg-slate-1 flex-row gap-4 overflow-hidden relative lg:py-0 py-3 max-w-full group", + class_name="px-6 lg:px-6 w-screen min-h-[3rem] lg:h-[3.5rem] shadow-[inset_0_-1px_0_0_var(--c-slate-3)] flex md:grid md:grid-cols-[1fr_auto_1fr] items-center bg-slate-1 gap-4 overflow-hidden relative lg:py-0 py-3 max-w-full group", ), ), on_mount=HostingBannerState.show_blog_banner, From 844cd2456c90bcea01ed7fdb45b160ae626b9fbe Mon Sep 17 00:00:00 2001 From: Carlos Date: Fri, 30 Jan 2026 12:53:09 +0100 Subject: [PATCH 2/2] fix other mobile stuff --- assets/tailwind-theme.css | 6 ++++++ pcweb/components/icons/patterns.py | 4 ++-- pcweb/pages/demo/header.py | 2 +- pcweb/pages/hosting/views/hero.py | 2 +- pcweb/pages/pricing/plan_cards.py | 2 +- pcweb/pages/pricing/table.py | 6 ++++-- pcweb/pages/security/views/header.py | 2 +- pcweb/templates/docpage/docpage.py | 19 +++++++++++-------- 8 files changed, 27 insertions(+), 16 deletions(-) diff --git a/assets/tailwind-theme.css b/assets/tailwind-theme.css index 3b6930445..7da33a25d 100644 --- a/assets/tailwind-theme.css +++ b/assets/tailwind-theme.css @@ -1734,6 +1734,12 @@ color: var(--c-slate-12) !important; background-color: transparent !important; } + @media (max-width: 768px) { + .code-block { + padding: 1rem !important; + } + } + .tab-style { color: var(--c-slate-9); diff --git a/pcweb/components/icons/patterns.py b/pcweb/components/icons/patterns.py index 3fd207eb0..43b23f998 100644 --- a/pcweb/components/icons/patterns.py +++ b/pcweb/components/icons/patterns.py @@ -82,7 +82,7 @@ def hosting_patterns() -> rx.Component: alt="Reflex Hosting Patterns", class_name="dark:hidden lg:flex hidden absolute top-0 z-[-1] w-[1028px] h-[478px] pointer-events-none shrink-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2" + rx.cond( - HostingBannerState.show_banner, + HostingBannerState.is_banner_visible, " lg:mt-[24rem] mt-[3.5rem]", " lg:mt-[19rem] mt-[8.5rem]", ), @@ -92,7 +92,7 @@ def hosting_patterns() -> rx.Component: alt="Reflex Hosting Patterns", class_name="hidden dark:flex lg:dark:flex absolute top-0 z-[-1] w-[1028px] h-[478px] pointer-events-none shrink-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2" + rx.cond( - HostingBannerState.show_banner, + HostingBannerState.is_banner_visible, " lg:mt-[24rem] mt-[3.5rem]", " lg:mt-[19rem] mt-[8.5rem]", ), diff --git a/pcweb/pages/demo/header.py b/pcweb/pages/demo/header.py index 618cf5f0c..0063f1ef6 100644 --- a/pcweb/pages/demo/header.py +++ b/pcweb/pages/demo/header.py @@ -48,7 +48,7 @@ def header() -> rx.Component: custom_quote_form(), class_name="flex flex-col gap-2 justify-center items-center max-w-[64.19rem] xl:border-x border-slate-4 w-full -mb-10 pb-16 " + rx.cond( - HostingBannerState.show_banner, + HostingBannerState.is_banner_visible, "pt-[8rem] lg:pt-[11rem]", "pt-[8rem] lg:pt-[12rem]", ), diff --git a/pcweb/pages/hosting/views/hero.py b/pcweb/pages/hosting/views/hero.py index fd234408a..72bfac3c2 100644 --- a/pcweb/pages/hosting/views/hero.py +++ b/pcweb/pages/hosting/views/hero.py @@ -45,7 +45,7 @@ def hero() -> rx.Component: ), class_name="flex flex-col justify-center items-center gap-4 mx-auto w-full max-w-[64.19rem] lg:border-x border-slate-3 pb-4 lg:pb-[7.875rem]" + rx.cond( - HostingBannerState.show_banner, + HostingBannerState.is_banner_visible, " lg:pt-[18.2rem] pt-[11rem]", " lg:pt-[13.2rem] pt-[6rem]", ), diff --git a/pcweb/pages/pricing/plan_cards.py b/pcweb/pages/pricing/plan_cards.py index 901e19164..87237416e 100644 --- a/pcweb/pages/pricing/plan_cards.py +++ b/pcweb/pages/pricing/plan_cards.py @@ -342,7 +342,7 @@ def plan_cards(): class_name=( "flex flex-col w-full justify-center items-center max-w-[85rem] mx-auto", rx.cond( - HostingBannerState.show_banner, + HostingBannerState.is_banner_visible, "pt-[8rem] lg:pt-[7rem]", "pt-[8rem] lg:pt-[4rem]", ), diff --git a/pcweb/pages/pricing/table.py b/pcweb/pages/pricing/table.py index f2dfe3e7f..0515eb356 100644 --- a/pcweb/pages/pricing/table.py +++ b/pcweb/pages/pricing/table.py @@ -320,7 +320,9 @@ def pricing_table( header_row, class_name=( "sticky bg-slate-1 z-10", - rx.cond(HostingBannerState.show_banner, "top-[161px]", "top-[105px]"), + rx.cond( + HostingBannerState.is_banner_visible, "top-[161px]", "top-[105px]" + ), ), ), rx.el.tbody( @@ -410,7 +412,7 @@ def header_item(text: str, button: rx.Component) -> rx.Component: ), class_name=( "sticky z-10 bg-slate-1 border-x border-slate-4 border-y", - rx.cond(HostingBannerState.show_banner, "top-[121px]", "top-[65px]"), + rx.cond(HostingBannerState.is_banner_visible, "top-[121px]", "top-[65px]"), ), ) diff --git a/pcweb/pages/security/views/header.py b/pcweb/pages/security/views/header.py index 5f90e95d0..309ab460e 100644 --- a/pcweb/pages/security/views/header.py +++ b/pcweb/pages/security/views/header.py @@ -22,7 +22,7 @@ def security_title() -> rx.Component: ), class_name="flex flex-col justify-center items-center gap-4 mx-auto w-full max-w-[64.19rem] lg:border-x border-slate-3 pb-4 lg:pb-[7.875rem]" + rx.cond( - HostingBannerState.show_banner, + HostingBannerState.is_banner_visible, " lg:pt-[15.2rem] pt-[8rem]", " lg:pt-[13.2rem] pt-[6rem]", ), diff --git a/pcweb/templates/docpage/docpage.py b/pcweb/templates/docpage/docpage.py index 6e75d2159..38f6b9cf6 100644 --- a/pcweb/templates/docpage/docpage.py +++ b/pcweb/templates/docpage/docpage.py @@ -7,6 +7,7 @@ import flexdown import mistletoe import reflex as rx +import reflex_ui as ui from reflex.components.radix.themes.base import LiteralAccentColor from reflex.utils.format import to_snake_case, to_title_case @@ -426,11 +427,13 @@ 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] lg:hidden flex", ), - 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" - + rx.cond( - HostingBannerState.show_banner, - " lg:mt-[175px]", - " lg:mt-[119px]", + class_name=ui.cn( + "relative z-10 flex flex-row justify-between items-center gap-4 lg:gap-0 border-slate-4 bg-slate-1 mt-[110px] mb-6 lg:mb-8 p-[0.5rem_1rem_0.5rem_1rem] lg:p-0 border-b lg:border-none w-full", + rx.cond( + HostingBannerState.is_banner_visible, + "lg:mt-[175px]", + "lg:mt-[119px] mt-[51px]", + ), ), ) @@ -626,7 +629,7 @@ def wrapper(*args, **kwargs) -> rx.Component: class_name=( "w-full max-w-[300px] h-screen shrink-0 hidden lg:block z-10 " + rx.cond( - HostingBannerState.show_banner, + HostingBannerState.is_banner_visible, " mt-[146px]", " mt-[90px]", ) @@ -638,7 +641,7 @@ def wrapper(*args, **kwargs) -> rx.Component: class_name=( "px-0 xl:px-14 pt-0" + rx.cond( - HostingBannerState.show_banner, + HostingBannerState.is_banner_visible, " mt-[90px]", "", ) @@ -715,7 +718,7 @@ def wrapper(*args, **kwargs) -> rx.Component: class_name=( "w-full h-full" + rx.cond( - HostingBannerState.show_banner, + HostingBannerState.is_banner_visible, " mt-[146px]", " mt-[90px]", )