public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: style change for filters in mobile

pull/12134/head
amitabhsahu 2023-10-29 18:54:23 +05:30
parent 650b14f9e0
commit 3c0c29b034
2 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/pages/bookings/[status].tsx
View File

@ -141,13 +141,11 @@ export default function Bookings() {
return ( return (
<ShellMain hideHeadingOnMobile heading={t("bookings")} subtitle={t("bookings_description")}> <ShellMain hideHeadingOnMobile heading={t("bookings")} subtitle={t("bookings_description")}>
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-col flex-wrap lg:flex-row"> <div className="flex flex-row flex-wrap items-center justify-between">
<HorizontalTabs tabs={tabs} /> <HorizontalTabs tabs={tabs} />
<div className="max-w-full overflow-x-auto xl:ml-auto"> <FilterToggleCta />
<FilterToggleCta /> <FiltersContainer />
</div>
</div> </div>
<FiltersContainer />
<main className="w-full"> <main className="w-full">
<div className="flex w-full flex-col" ref={animationParentRef}> <div className="flex w-full flex-col" ref={animationParentRef}>
{query.status === "error" && ( {query.status === "error" && (

4
packages/features/bookings/components/FiltersContainer.tsx
View File

@ -85,7 +85,7 @@ export function FiltersContainer() {
const isFiltersVisible = useBookingMultiFilterStore((state) => state.isFiltersVisible, shallow); const isFiltersVisible = useBookingMultiFilterStore((state) => state.isFiltersVisible, shallow);
return isFiltersVisible ? ( return isFiltersVisible ? (
<div className="flex w-full space-x-2 rtl:space-x-reverse"> <div className="no-scrollbar flex w-full space-x-2 overflow-x-scroll rtl:space-x-reverse">
<PeopleFilter /> <PeopleFilter />
<EventTypeFilter /> <EventTypeFilter />
<TeamsFilter /> <TeamsFilter />
@ -106,7 +106,7 @@ export function FilterToggleCta() {
return ( return (
<button <button
onClick={toggleFiltersVisibility} onClick={toggleFiltersVisibility}
className="hover:border-emphasis border-default text-default hover:text-emphasis flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm hover:cursor-pointer focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1"> className="hover:border-emphasis border-default text-default hover:text-emphasis mb-4 flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm hover:cursor-pointer focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1">
<Filter className="h-4 w-4" /> <Filter className="h-4 w-4" />
<Tooltip content={t("filters")}> <Tooltip content={t("filters")}>
<div className="mx-2">{t("filters")}</div> <div className="mx-2">{t("filters")}</div>