Skip to content

Commit

Permalink
Merge pull request #324 from IntersectMBO/fix/votes-table-row-responsive
Browse files Browse the repository at this point in the history 
fix: vote table row responsiveness
  • Loading branch information
@Vojimirovich
Vojimirovich authored Sep 4, 2024
2 parents ae4f9f5 + 6e1477e commit 931c47c
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 149 deletions.
12 changes: 6 additions & 6 deletions frontend/src/components/atoms/OutlinedLightButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
"use client";

import React from "react";
import { Button, SxProps, Theme } from "@mui/material";
import { customPalette } from "@consts";
import { Button, SxProps, Theme } from "@mui/material";
import { ButtonProps } from "@mui/material/Button";

interface Props extends ButtonProps {
Expand All @@ -23,10 +22,11 @@ export const OutlinedLightButton = ({
color: customPalette.textBlack,
fontWeight: 400,
fontSize: 12,
whiteSpace: "nowrap",
lineHeight: "18px",
whiteSpace: "normal;",
"&": {
pointerEvents: nonInteractive ? "none" : "all",
},
pointerEvents: nonInteractive ? "none" : "all"
}
};

return (
Expand All @@ -36,7 +36,7 @@ export const OutlinedLightButton = ({
onClick={nonInteractive ? undefined : onClick}
sx={{
...defaultSxProps,
...sx,
...sx
}}
{...props}
>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/molecules/TableDivider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { customPalette } from "@/constants";
import { Divider as MUIDivider, DividerProps, SxProps } from "@mui/material";
import { DividerProps, Divider as MUIDivider, SxProps } from "@mui/material";

interface Props extends DividerProps {
sx?: SxProps;
Expand All @@ -16,10 +16,10 @@ export const TableDivider = ({
orientation={orientation}
flexItem={flexItem}
sx={{
display: { xxs: "none", lg: "flex" },
display: { xxs: "none", md: "flex" },
height: 38,
alignSelf: "center",
...sx,
...sx
}}
{...props}
/>
Expand Down
288 changes: 148 additions & 140 deletions frontend/src/components/organisms/VotesTable/VotesTableRow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,15 @@
"use client";
import React from "react";

import { Card, TableDivider } from "@molecules";
import { Box, Grid } from "@mui/material";
import { UserAvatar, UserBasicInfo } from "@molecules";
import { VotesTableI } from "@/lib/requests";
import { Button, OutlinedLightButton, Typography, VotePill } from "@atoms";
import { GovActionModalState } from "../types";
import { customPalette, ICONS } from "@consts";
import { useModal } from "@context";
import { Card, TableDivider, UserAvatar, UserBasicInfo } from "@molecules";
import { Box, Grid } from "@mui/material";
import { getProposalTypeLabel, truncateText } from "@utils";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { truncateText } from "@utils";
import { getProposalTypeLabel } from "@utils";
import { useModal } from "@context";
import { VotesTableI } from "@/lib/requests";
import { GovActionModalState } from "../types";

interface Props {
votes: VotesTableI;
Expand All @@ -25,7 +22,7 @@ export const VotesTableRow = ({
votes,
disabled,
actionTitle,
onActionClick,
onActionClick
}: Props) => {
const t = useTranslations("LatestUpdates");
const { openModal } = useModal<GovActionModalState>();
Expand All @@ -37,14 +34,14 @@ export const VotesTableRow = ({
reasoning_comment,
gov_action_proposal_id,
gov_action_proposal_title,
gov_action_proposal_type,
gov_action_proposal_type
} = votes;
const openGAModal = () => {
openModal({
type: "govActionModal",
state: {
id: gov_action_proposal_id,
},
id: gov_action_proposal_id
}
});
};

Expand All @@ -53,152 +50,163 @@ export const VotesTableRow = ({
item
mb={3}
sx={{
opacity: disabled && 0.5,
opacity: disabled && 0.5
}}
>
<Card variant="default">
<Grid
container
flexDirection={{ xxs: "column", xl: "row" }}
justifyContent="space-between"
flexWrap="nowrap"
gap={{ xxs: 0, xl: 3 }}
>
<Grid item xxs={12} xl={11}>
<Grid container>
<Grid
item
xxs={12}
display="flex"
rowGap={2}
flexDirection={{
xxs: "column",
md: "row",
lg: "row",
xl: "row"
}}
>
<Grid
container
flexDirection={{ xxs: "column", lg: "row" }}
flexWrap={{ xxs: "wrap", lg: "nowrap" }}
item
xxs="auto"
md={6}
lg={3}
xl={3}
m={{ md: "auto", lg: "auto" }}
>
<Grid item xxs="auto" lg={3} xl={2} mb={{ xxs: 2, lg: 0 }}>
<Grid container flexWrap="nowrap">
<Grid item>
<UserAvatar src={user_photo_url} />
</Grid>
<Grid item>
<UserBasicInfo
name={user_name}
hotAddress={user_address}
maxWidth={200}
/>
</Grid>
<Grid container flexWrap="nowrap">
<Grid item>
<UserAvatar src={user_photo_url} />
</Grid>
<Grid item>
<UserBasicInfo
name={user_name}
hotAddress={user_address}
maxWidth={200}
/>
</Grid>
</Grid>
<TableDivider />
<Grid
item
xxs="auto"
lg={3}
px={{ xxs: 0, lg: 1, xl: 3 }}
py={{ xxs: 1.5, lg: 0 }}
>
<Typography
color={customPalette.neutralGray}
sx={{ marginBottom: 0.5 }}
variant="caption"
fontWeight={500}
</Grid>

<Grid
container
flexDirection={{ xxs: "column", md: "row", lg: "row" }}
flexWrap={{ xxs: "wrap", md: "wrap", lg: "wrap", xl: "nowrap" }}
rowSpacing={2}
>
<Grid item display="flex" md={12} lg={5} xl={3}>
<TableDivider />
<Grid
item
xxs="auto"
px={{ xxs: 0, md: 3, lg: 3, xl: 3 }}
py={{ xxs: 1.5, md: 0 }}
>
{t("govAction")}
</Typography>
<Typography
color={customPalette.neutralGray}
sx={{ marginBottom: 0.5 }}
variant="caption"
fontWeight={500}
>
{t("govAction")}
</Typography>

<OutlinedLightButton
onClick={openGAModal}
disabled={!gov_action_proposal_title}
startIcon={
<Image
alt="GA title"
width={12}
height={12}
src={ICONS.informationCircle}
style={{ opacity: gov_action_proposal_title ? 1 : 0.5 }}
/>
}
<OutlinedLightButton
onClick={openGAModal}
disabled={!gov_action_proposal_title}
startIcon={
<Image
alt="GA title"
width={12}
height={12}
src={ICONS.informationCircle}
style={{ opacity: gov_action_proposal_title ? 1 : 0.5 }}
/>
}
>
{gov_action_proposal_title
? truncateText(gov_action_proposal_title, 40)
: t("notAvailable")}
</OutlinedLightButton>
</Grid>
</Grid>
<Grid item display="flex" xxs="auto" md={12} lg={5} xl={3}>
<TableDivider />
<Grid
item
px={{ xxs: 0, md: 3, lg: 3, xl: 3 }}
py={{ xxs: 1.5, md: 0 }}
>
{gov_action_proposal_title
? truncateText(gov_action_proposal_title, 40)
: t("notAvailable")}
</OutlinedLightButton>
<Typography
color={customPalette.neutralGray}
sx={{ marginBottom: 0.5 }}
variant="caption"
fontWeight={500}
>
{t("govActionCategoryShort")}
</Typography>
<OutlinedLightButton nonInteractive>
{getProposalTypeLabel(gov_action_proposal_type)}
</OutlinedLightButton>
</Grid>
</Grid>
<TableDivider />
<Grid
item
xxs="auto"
lg={2}
px={{ xxs: 0, lg: 1, xl: 3 }}
py={{ xxs: 1.5, lg: 0 }}
>
<Typography
color={customPalette.neutralGray}
sx={{ marginBottom: 0.5 }}
variant="caption"
fontWeight={500}
<Grid item display="flex" md={12} lg={5} xl={3}>
<TableDivider />
<Grid
item
px={{ xxs: 0, md: 3, lg: 3, xl: 3 }}
py={{ xxs: 1.5, md: 0 }}
>
{t("govActionCategoryShort")}
</Typography>
<OutlinedLightButton nonInteractive>
{getProposalTypeLabel(gov_action_proposal_type)}
</OutlinedLightButton>
<Typography
color={customPalette.neutralGray}
sx={{ marginBottom: 0.5 }}
variant="caption"
fontWeight={500}
>
{t("voted")}
</Typography>
<Box width={85}>
<VotePill vote={value} />
</Box>
</Grid>
</Grid>
<TableDivider />
<Grid
item
lg={2}
xl={2}
px={{ xxs: 0, lg: 1, xl: 3 }}
py={{ xxs: 1.5, lg: 0 }}
>
<Typography
color={customPalette.neutralGray}
sx={{ marginBottom: 0.5 }}
variant="caption"
fontWeight={500}

<Grid item display="flex" md={12} lg={5} xl={3}>
<TableDivider />

<Grid
item
px={{ xxs: 0, md: 3, lg: 3, xl: 3 }}
py={{ xxs: 1.5, md: 0 }}
>
{t("voted")}
</Typography>
<Box width={85}>
<VotePill vote={value} />
</Box>
<Typography
color={customPalette.neutralGray}
sx={{ marginBottom: 0.5 }}
variant="caption"
fontWeight={500}
>
{t("rationale")}
</Typography>
<Typography variant="caption">
{reasoning_comment
? truncateText(reasoning_comment, 100)
: t("notAvailable")}
</Typography>
</Grid>
</Grid>
<TableDivider />
<Grid
item
lg={3}
xl={3}
px={{ xxs: 0, lg: 1, xl: 3 }}
py={{ xxs: 1.5, lg: 0 }}
>
<Typography
color={customPalette.neutralGray}
sx={{ marginBottom: 0.5 }}
variant="caption"
fontWeight={500}
<Grid item m={{ xxs: "auto" }} lg={2} xl={2}>
<Button
disabled={disabled}
sx={{ whiteSpace: "nowrap" }}
onClick={() => onActionClick(votes)}
variant="outlined"
>
{t("rationale")}
</Typography>
<Typography variant="caption">
{reasoning_comment
? truncateText(reasoning_comment, 100)
: t("notAvailable")}
</Typography>
{actionTitle}
</Button>
</Grid>
</Grid>
</Grid>
<Grid
item
xxs={12}
xl={1}
textAlign={{ xxs: "right", xl: "center" }}
mt={{ xxs: 2, xl: 0 }}
>
<Button
disabled={disabled}
sx={{ whiteSpace: "nowrap" }}
onClick={() => onActionClick(votes)}
variant="outlined"
>
{actionTitle}
</Button>
</Grid>
</Grid>
</Card>
</Grid>
Expand Down

0 comments on commit 931c47c

Please sign in to comment.