Skip to content

Update banner in mobile #1745

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Kastier1 merged 2 commits into from
Jan 30, 2026
Merged

Update banner in mobile #1745

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
396ea52
Update banner in mobile
carlosabadia Jan 30, 2026
844cd24
fix other mobile stuff
carlosabadia Jan 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions assets/tailwind-theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
27 changes: 15 additions & 12 deletions pcweb/components/hosting_banner.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions pcweb/components/icons/patterns.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]",
),
Expand All @@ -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]",
),
Expand Down
2 changes: 1 addition & 1 deletion pcweb/pages/demo/header.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]",
),
Expand Down
2 changes: 1 addition & 1 deletion pcweb/pages/hosting/views/hero.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]",
),
Expand Down
2 changes: 1 addition & 1 deletion pcweb/pages/pricing/plan_cards.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]",
),
Expand Down
6 changes: 4 additions & 2 deletions pcweb/pages/pricing/table.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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]"),
),
)

Expand Down
2 changes: 1 addition & 1 deletion pcweb/pages/security/views/header.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]",
),
Expand Down
19 changes: 11 additions & 8 deletions pcweb/templates/docpage/docpage.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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]",
),
),
)

Expand Down Expand Up @@ -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]",
)
Expand All @@ -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]",
"",
)
Expand Down Expand Up @@ -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]",
)
Expand Down