Skip to content
This repository has been archived by the owner on Feb 10, 2025. It is now read-only.

Commit

Permalink
fix: tabs breaking mobile layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@joonatank
joonatank committed Apr 25, 2024
1 parent 428132b commit 1350ed3
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 58 deletions.
19 changes: 5 additions & 14 deletions apps/admin-ui/src/spa/recurring-reservations/application-rounds/[id]/allocation/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,16 @@ import {
type ApplicationRoundNode,
type ReservationUnitNode,
} from "common/types/gql-types";
import { breakpoints } from "common";
import { base64encode, filterNonNullable } from "common/src/helpers";
import { SearchTags } from "@/component/SearchTags";
import Loader from "@/component/Loader";
import BreadcrumbWrapper from "@/component/BreadcrumbWrapper";
import { useOptions } from "@/component/my-units/hooks";
import { Container as BaseContainer, autoGridCss } from "@/styles/layout";
import {
Container as BaseContainer,
TabWrapper,
autoGridCss,
} from "@/styles/layout";
import { useNotification } from "@/context/NotificationContext";
import {
ALLOCATION_POLL_INTERVAL,
Expand Down Expand Up @@ -119,18 +122,6 @@ const MoreWrapper = styled(ShowAllContainer)`
}
`;

// Tab causes horizontal overflow without this
// because it's inside a grid so an element with fixed width and no max-width breaks the grid
const TabWrapper = styled.div`
max-width: 95vw;
@media (width > ${breakpoints.m}) {
max-width: min(
calc(95vw - var(--main-menu-width) - 2 * var(--spacing-layout-m)),
var(--container-width-xl)
);
}
`;

type PriorityFilterOptions = { label: string; value: 200 | 300 };
type PkFilterOptions = { label: string; value: number };

Expand Down
90 changes: 46 additions & 44 deletions apps/admin-ui/src/spa/recurring-reservations/application-rounds/[id]/review/Review.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
type UnitNode,
} from "common/types/gql-types";
import { ButtonLikeLink } from "@/component/ButtonLikeLink";
import { Container } from "@/styles/layout";
import { Container, TabWrapper } from "@/styles/layout";
import { ApplicationRoundStatusTag } from "../../ApplicationRoundStatusTag";
import TimeframeStatus from "../../TimeframeStatus";
import { ApplicationDataLoader } from "./ApplicationDataLoader";
Expand Down Expand Up @@ -132,49 +132,51 @@ export function Review({ applicationRound }: ReviewProps): JSX.Element | null {
)}
</AlignEndContainer>
</Header>
<Tabs initiallyActiveTab={activeTabIndex}>
<Tabs.TabList>
<Tabs.Tab onClick={() => handleTabChange("applications")}>
{t("ApplicationRound.applications")}
</Tabs.Tab>
<Tabs.Tab onClick={() => handleTabChange("events")}>
{t("ApplicationRound.appliedReservations")}
</Tabs.Tab>
<Tabs.Tab onClick={() => handleTabChange("allocated")}>
{t("ApplicationRound.allocatedReservations")}
</Tabs.Tab>
</Tabs.TabList>
<Tabs.TabPanel>
<TabContent>
<Filters units={unitPks} />
<ApplicationDataLoader
applicationRoundPk={applicationRound.pk ?? 0}
/>
</TabContent>
</Tabs.TabPanel>
<Tabs.TabPanel>
<TabContent>
<Filters units={unitPks} statusOption="event" />
<ApplicationEventDataLoader
applicationRoundPk={applicationRound.pk ?? 0}
/>
</TabContent>
</Tabs.TabPanel>
<Tabs.TabPanel>
<TabContent>
<Filters
units={unitPks}
reservationUnits={reseevationUnitOptions}
enableWeekday
enableReservationUnit
statusOption="eventShort"
/>
<AllocatedEventDataLoader
applicationRoundPk={applicationRound.pk ?? 0}
/>
</TabContent>
</Tabs.TabPanel>
</Tabs>
<TabWrapper>
<Tabs initiallyActiveTab={activeTabIndex}>
<Tabs.TabList>
<Tabs.Tab onClick={() => handleTabChange("applications")}>
{t("ApplicationRound.applications")}
</Tabs.Tab>
<Tabs.Tab onClick={() => handleTabChange("events")}>
{t("ApplicationRound.appliedReservations")}
</Tabs.Tab>
<Tabs.Tab onClick={() => handleTabChange("allocated")}>
{t("ApplicationRound.allocatedReservations")}
</Tabs.Tab>
</Tabs.TabList>
<Tabs.TabPanel>
<TabContent>
<Filters units={unitPks} />
<ApplicationDataLoader
applicationRoundPk={applicationRound.pk ?? 0}
/>
</TabContent>
</Tabs.TabPanel>
<Tabs.TabPanel>
<TabContent>
<Filters units={unitPks} statusOption="event" />
<ApplicationEventDataLoader
applicationRoundPk={applicationRound.pk ?? 0}
/>
</TabContent>
</Tabs.TabPanel>
<Tabs.TabPanel>
<TabContent>
<Filters
units={unitPks}
reservationUnits={reseevationUnitOptions}
enableWeekday
enableReservationUnit
statusOption="eventShort"
/>
<AllocatedEventDataLoader
applicationRoundPk={applicationRound.pk ?? 0}
/>
</TabContent>
</Tabs.TabPanel>
</Tabs>
</TabWrapper>
</Container>
);
}
13 changes: 13 additions & 0 deletions apps/admin-ui/src/styles/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,3 +229,16 @@ export const Span6 = styled.div`
export const Span12 = styled.div`
grid-column: span 12;
`;

// Tab causes horizontal overflow without this
// we use grids primarily and components inside grid without max-width overflow.
// Because of side navigation we have to some silly calculations here.
export const TabWrapper = styled.div`
max-width: 95vw;
@media (width > ${breakpoints.m}) {
max-width: min(
calc(95vw - var(--main-menu-width) - 2 * var(--spacing-layout-m)),
var(--container-width-xl)
);
}
`;

0 comments on commit 1350ed3

Please sign in to comment.