Skip to content
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

feat: add board list responsiveness #1439

Merged
merged 6 commits into from
Apr 28, 2023
Merged

feat: add board list responsiveness #1439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9c9f01d
fix: add mx to counter box-shadow
juniorboos Apr 27, 2023
0a640ca
feat: add responsiveness to board list
juniorboos Apr 27, 2023
a65b67d
fix: header z-index
juniorboos Apr 27, 2023
1c8c96c
feat: add gap between header components
juniorboos Apr 27, 2023
2b664a7
Merge branch 'main' into feat/add-board-list-responsiveness
juniorboos Apr 27, 2023
630615c
Merge branch 'main' into feat/add-board-list-responsiveness
juniorboos Apr 28, 2023
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
27 changes: 8 additions & 19 deletions frontend/src/components/Boards/MyBoards/ListBoards/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const ListBoards = React.memo<ListBoardsProps>(

return (
<ScrollableContent
css={{ height: 'calc(100vh - 225px)', paddingBottom: '$8' }}
css={{ height: 'calc(100vh - 225px)', pb: '$8' }}
direction="column"
justify="start"
onScroll={onScroll}
Expand All @@ -62,15 +62,14 @@ const ListBoards = React.memo<ListBoardsProps>(
direction="column"
css={{
position: 'sticky',
zIndex: '5',
top: '-0.4px',
zIndex: 5,
top: 0,
backgroundColor: '$background',
marginBottom: '-5px',
}}
>
<TeamHeader team={teamFound} userId={userId} users={users} />
</Flex>
<Flex css={{ width: '100%', minHeight: '15px' }} justify="end">
<Flex justify="end">
{(isSuperAdmin ||
isTeamAdmin(boardsOfTeam) ||
!Array.from(dataByTeamAndDate.teams.keys()).includes(teamId)) && (
Expand All @@ -80,7 +79,7 @@ const ListBoards = React.memo<ListBoardsProps>(
query: { team: teamId },
}}
>
<Button css={{ zIndex: '9' }} size="sm" variant="link">
<Button size="sm" variant="link">
<Icon name="plus" />
{!Array.from(dataByTeamAndDate.teams.keys()).includes(teamId)
? 'Add new personal board'
Expand All @@ -89,7 +88,7 @@ const ListBoards = React.memo<ListBoardsProps>(
</Link>
)}
</Flex>
<Flex css={{ zIndex: '1', marginTop: '-10px' }} direction="column" gap="32">
<Flex direction="column" gap="32">
{Array.from(boardsOfTeam).map(([date, boardsOfDay]) => {
const formatedDate = new Date(date).toLocaleDateString('en-US', {
weekday: 'long',
Expand All @@ -98,18 +97,8 @@ const ListBoards = React.memo<ListBoardsProps>(
day: 'numeric',
});
return (
<Flex key={date} direction="column">
<Text
color="primary300"
size="xs"
css={{
position: 'sticky',
zIndex: '5',
top: '-0.2px',
height: '$24',
backgroundColor: '$background',
}}
>
<Flex key={date} direction="column" gap="8">
<Text color="primary300" size="xs">
Last updated -{' '}
{date === currentDate ? `Today, ${formatedDate}` : formatedDate}
</Text>
Expand Down
58 changes: 29 additions & 29 deletions frontend/src/components/Boards/TeamHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,40 +15,40 @@ interface TeamHeaderProps {
const TeamHeader: React.FC<TeamHeaderProps> = ({ team, userId, users }) => {
const hasTeam = !!team;
return (
<Flex align="center" css={{ mb: '$16' }} justify="start">
<Flex align="center">
<Text
heading="5"
css={{
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
maxWidth: '$260',
}}
>
{hasTeam ? team.name : 'My boards'}
</Text>
{hasTeam && (
<Flex align="center" css={{ ml: '$24' }} gap="12">
<Flex align="center" gap="8">
<Text color="primary300" size="sm">
Members
</Text>
<AvatarGroup listUsers={team.users} userId={userId} />
</Flex>
<Separator css={{ backgroundColor: '$primary300' }} orientation="vertical" size="md" />
<Flex align="center" css={{ mb: '$16' }} gap="24" wrap="wrap">
<Text
heading="5"
css={{
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
maxWidth: '$260',
}}
>
{hasTeam ? team.name : 'My boards'}
</Text>
{hasTeam && (
<Flex align="center" gap="12" wrap="wrap">
<Flex align="center" gap="8">
<Text color="primary300" size="sm">
Members
</Text>
<AvatarGroup listUsers={team.users} userId={userId} />
</Flex>
<Separator orientation="vertical" size="md" />
<Flex align="center" gap="8">
<Text color="primary300" size="sm">
Team admin
</Text>
<AvatarGroup stakeholders teamAdmins listUsers={team.users} userId={userId} />
</Flex>
)}
{!hasTeam && users && (
<Flex css={{ ml: '$12' }}>
<AvatarGroup myBoards listUsers={users} userId={userId} />
</Flex>
)}
</Flex>
</Flex>
)}
{!hasTeam && users && (
<Flex>
<AvatarGroup myBoards listUsers={users} userId={userId} />
</Flex>
)}
</Flex>
);
};
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/components/CardBoard/CardBody/CardBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import { Team } from '@/types/team/team';

const InnerContainer = styled(Flex, Box, {
px: '$18',
// mx is used to counter the extra spacing created by the box-shadow
mx: '$4',
backgroundColor: '$white',
borderRadius: '$12',
position: 'relative',
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/layouts/Layout/MainPageHeader/MainPageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export type MainPagerHeaderProps = {
};

const MainPageHeader = ({ title, button }: MainPagerHeaderProps) => (
<Flex data-testid="MainPageHeader" justify="between">
<Flex data-testid="MainPageHeader" gap="8" justify="between">
<Text heading="1">{title}</Text>
{button && (
<Link href={button.link ?? '#'} style={{ height: 'fit-content' }}>
Expand Down