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

424 adjust berlin results page UI to match other pages #441

Merged
merged 10 commits into from
May 13, 2024
Merged

424 adjust berlin results page UI to match other pages #441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
55bcfd8
Create results columns
camilovegag May 9, 2024
bf3039b
Add results columns to results page
camilovegag May 9, 2024
e8b60af
Add icons
camilovegag May 9, 2024
8a9a17b
Create tables for results and stats
camilovegag May 9, 2024
af5d158
Fixes
camilovegag May 9, 2024
51ddbc9
Remove unused import
camilovegag May 9, 2024
22fea2a
Update order
camilovegag May 9, 2024
970966e
Comment code for plurality score at cycle
camilovegag May 9, 2024
f73e9ff
Remove unused code
camilovegag May 9, 2024
49bc1ee
Update columns and table dist
camilovegag May 10, 2024
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
1 change: 1 addition & 0 deletions packages/api/src/types/ForumQuestionType.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export type GetForumQuestionStatisticsResponse = {
optionSubTitle: string;
distinctGroups: number;
listOfGroupNames: string[];
quadraticScore: string;
}
>;
};
Expand Down
3 changes: 3 additions & 0 deletions packages/berlin/public/icons/money-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/berlin/public/icons/money-light.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/berlin/public/icons/sqrt-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/berlin/public/icons/sqrt-light.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions packages/berlin/src/components/cycle-columns/CycleColumns.styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const Hearts = styled(FlexRow)`
padding: 1.5rem;
`;

export const Plurality = styled(FlexRow)`
max-width: 5.5rem;
padding: 1.5rem;
`;
// export const Plurality = styled(FlexRow)`
// max-width: 5.5rem;
// padding: 1.5rem;
// `;
6 changes: 3 additions & 3 deletions packages/berlin/src/components/cycle-columns/CycleColumns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import IconButton from '../icon-button';
import { Body } from '../typography/Body.styled';
import { Affiliation, Author, Card, Hearts, Plurality, Proposal } from './CycleColumns.styled';
import { Affiliation, Author, Card, Hearts, Proposal } from './CycleColumns.styled';

type CycleColumnsProps = {
onColumnClick: (column: string) => void;
Expand All @@ -25,13 +25,13 @@ function CycleColumns({ onColumnClick }: CycleColumnsProps) {
icon={{ src: `/icons/heart-full.svg`, alt: 'Full heart' }}
/>
</Hearts>
<Plurality onClick={() => onColumnClick('voteScore')}>
{/* <Plurality onClick={() => onColumnClick('voteScore')}>
<IconButton
$padding={0}
$color="secondary"
icon={{ src: `/icons/plurality-score.svg`, alt: 'Plurality score' }}
/>
</Plurality>
</Plurality> */}
</Card>
);
}
Expand Down
8 changes: 4 additions & 4 deletions packages/berlin/src/components/option-card/OptionCard.styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export const Votes = styled(FlexRow)`
padding: 1.5rem;
`;

export const Plurality = styled(FlexRow)`
max-width: 5.5rem;
padding: 1.5rem;
`;
// export const Plurality = styled(FlexRow)`
// max-width: 5.5rem;
// padding: 1.5rem;
// `;
26 changes: 13 additions & 13 deletions packages/berlin/src/components/option-card/OptionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { useMemo, useState } from 'react';
import { Body } from '../typography/Body.styled';
import { Affiliation, Author, Card, Votes, Plurality, Proposal } from './OptionCard.styled';
import { FlexColumn } from '../containers/FlexColum.styled';
import IconButton from '../icon-button';
import { useAppStore } from '../../store';
import { FlexRow } from '../containers/FlexRow.styled';
import { QuestionOption } from 'api';
import { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useAppStore } from '../../store';
import { FlexColumn } from '../containers/FlexColum.styled';
import { FlexRow } from '../containers/FlexRow.styled';
import IconButton from '../icon-button';
import { Body } from '../typography/Body.styled';
import { Affiliation, Author, Card, Proposal, Votes } from './OptionCard.styled';

type OptionCardProps = {
option: QuestionOption;
Expand All @@ -18,10 +18,10 @@ function OptionCard({ option, numOfVotes, onVote, onUnvote }: OptionCardProps) {
const { eventId, cycleId } = useParams();
const theme = useAppStore((state) => state.theme);
const navigate = useNavigate();
const formattedPluralityScore = useMemo(() => {
const score = parseFloat(String(option.voteScore));
return score % 1 === 0 ? score.toFixed(0) : score.toFixed(1);
}, [option.voteScore]);
// const formattedPluralityScore = useMemo(() => {
// const score = parseFloat(String(option.voteScore));
// return score % 1 === 0 ? score.toFixed(0) : score.toFixed(1);
// }, [option.voteScore]);

const [expanded, setExpanded] = useState(false);

Expand Down Expand Up @@ -75,9 +75,9 @@ function OptionCard({ option, numOfVotes, onVote, onUnvote }: OptionCardProps) {
</FlexColumn>
<Body>{numOfVotes}</Body>
</Votes>
<Plurality>
{/* <Plurality>
<Body>{formattedPluralityScore}</Body>
</Plurality>
</Plurality> */}
</FlexRow>
<FlexColumn className="description" $gap="1.5rem">
{option.optionSubTitle && <Body>{option.optionSubTitle}</Body>}
Expand Down
33 changes: 7 additions & 26 deletions packages/berlin/src/components/result-card/ResultCard.styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,18 @@
import styled from 'styled-components';
import { Grid } from '../containers/Grid.styled';

export const Card = styled.article<{ $expanded: boolean }>`
border-radius: 1rem;
border: 1px solid var(--color-black);
color: var(--color-white);
export const Card = styled(Grid)<{ $expanded: boolean }>`
cursor: pointer;
border-bottom: 1px solid var(--color-black);
grid-template-columns: auto repeat(3, 48px) 80px;
overflow: hidden;
padding: 2rem;
padding: 1.5rem;
position: relative;
transition: height 0.3s ease-in-out;
width: 100%;

.statistics {
.description {
display: ${(props) => (props.$expanded ? 'flex' : 'none')};
}
`;
export const Badge = styled.div<{ $type: 'gold' | 'silver' | 'bronze' }>`
align-items: center;
background-image: ${(props) => props.$type && `url('/icons/badge-${props.$type}.svg')`};
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
display: flex;
height: 2rem;
width: 2rem;
`;

export const List = styled.ul`
list-style: none;
`;
export const ListItem = styled.li`
padding-left: 1rem;
&::before {
content: '• ';
grid-column: 1/6;
}
`;
114 changes: 35 additions & 79 deletions packages/berlin/src/components/result-card/ResultCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// React and third-party libraries
import { useMemo, useState } from 'react';
import { useMemo } from 'react';

// Store
import { useAppStore } from '../../store';
Expand All @@ -9,16 +9,13 @@ import { Body } from '../typography/Body.styled';
import { Bold } from '../typography/Bold.styled';
import { FlexColumn } from '../containers/FlexColum.styled';
import { FlexRow } from '../containers/FlexRow.styled';
import { Subtitle } from '../typography/Subtitle.styled';
import IconButton from '../icon-button';

// Styled Components
import { Badge, Card, List, ListItem } from './ResultCard.styled';
import { Separator } from '../separator';
import { Card } from './ResultCard.styled';

type ResultCardProps = {
$expanded: boolean;
index: number;
option: {
optionTitle: string;
pluralityScore: string;
Expand All @@ -27,92 +24,51 @@ type ResultCardProps = {
optionSubTitle: string;
distinctGroups: number;
listOfGroupNames: string[];
quadraticScore: string;
id: string;
};
onClick: () => void;
};

function ResultCard({ $expanded, option, index, onClick }: ResultCardProps) {
const [groupsExpanded, setGroupsExpanded] = useState(false);
function ResultCard({ $expanded, option, onClick }: ResultCardProps) {
const theme = useAppStore((state) => state.theme);

const formattedQuadraticScore = useMemo(() => {
const score = parseFloat(option.quadraticScore);
return score % 1 === 0 ? score.toFixed(0) : score.toFixed(3);
}, [option.quadraticScore]);

const formattedPluralityScore = useMemo(() => {
const score = parseFloat(option.pluralityScore);
return score % 1 === 0 ? score.toFixed(0) : score.toFixed(3);
}, [option.pluralityScore]);

const handleGroupsClick = (
e:
| React.MouseEvent<HTMLButtonElement, MouseEvent>
| React.MouseEvent<HTMLDivElement, MouseEvent>,
) => {
e.stopPropagation();
setGroupsExpanded(!groupsExpanded);
};

return (
<Card $expanded={$expanded} onClick={onClick}>
<FlexColumn $gap="1rem">
{index === 0 && <Badge $type="gold" />}
{index === 1 && <Badge $type="silver" />}
{index === 2 && <Badge $type="bronze" />}
<FlexRow $justify="space-between">
<FlexRow $gap="0.5rem">
<Subtitle>{option.optionTitle}</Subtitle>
</FlexRow>
<IconButton
$padding={0}
$color="secondary"
icon={{ src: `/icons/arrow-down-${theme}.svg`, alt: '' }}
$flipVertical={$expanded}
/>
</FlexRow>
<FlexRow>
<Body>
<Bold>Plurality score:</Bold> {formattedPluralityScore}
</Body>
</FlexRow>
<FlexColumn className="statistics">
<FlexRow>
<Body>
<Bold>Distinct voters:</Bold> {option.distinctUsers}
</Body>
</FlexRow>
<FlexRow>
<Body>
<Bold>Allocated hearts:</Bold> {option.allocatedHearts}
</Body>
</FlexRow>
<FlexRow>
<Body>
<Bold>Distinct groups:</Bold> {option.distinctGroups}
</Body>
</FlexRow>
<FlexColumn onClick={(e) => handleGroupsClick(e)} $gap="0.5rem">
<FlexRow $gap="0.15rem">
<Body>
<Bold>Group names:</Bold>
</Body>
<IconButton
$padding={4}
$color="secondary"
onClick={(e) => handleGroupsClick(e)}
icon={{ src: `/icons/arrow-down-${theme}.svg`, alt: '' }}
$flipVertical={groupsExpanded}
/>
</FlexRow>
{groupsExpanded && (
<Body>
<List>
{option.listOfGroupNames.sort().map((name) => (
<ListItem key={name}>{name}</ListItem>
))}
</List>
</Body>
)}
</FlexColumn>
</FlexColumn>
<Separator />
{option.optionSubTitle && <Body>{option.optionSubTitle}</Body>}
<Card $expanded={$expanded} onClick={onClick} $rowgap="2rem">
<FlexRow>
<IconButton
$padding={0}
$color="secondary"
icon={{ src: `/icons/arrow-down-${theme}.svg`, alt: '' }}
$flipVertical={$expanded}
/>
<Body>{option.optionTitle}</Body>
</FlexRow>
<Body>{option.allocatedHearts}</Body>
<Body>{formattedQuadraticScore}</Body>
<Body>{formattedPluralityScore}</Body>
<Body>$ 10.000</Body>
<FlexColumn className="description">
<Body>{option.optionSubTitle}</Body>
<Body>
<Bold>Distinct voters:</Bold> {option.distinctUsers}
</Body>
<Body>
<Bold>Distinct groups:</Bold> {option.distinctGroups}
</Body>
<Body>
<Bold>Group names:</Bold> {option.listOfGroupNames.join(', ')}
</Body>
</FlexColumn>
</Card>
);
Expand Down
8 changes: 8 additions & 0 deletions packages/berlin/src/components/results-columns/ResultsColumns.styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import styled from 'styled-components';
import { Grid } from '../containers/Grid.styled';

export const Card = styled(Grid)`
border-bottom: 2px solid var(--color-black);
padding: 1.5rem;
grid-template-columns: auto repeat(3, 48px) 80px;
`;
35 changes: 35 additions & 0 deletions packages/berlin/src/components/results-columns/ResultsColumns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { useAppStore } from '../../store';
import IconButton from '../icon-button';
import { Bold } from '../typography/Bold.styled';
import { Card } from './ResultsColumns.styled';

function ResultsColumns() {
const theme = useAppStore((state) => state.theme);
return (
<Card>
<Bold>Title</Bold>
<IconButton
$padding={0}
$color="secondary"
icon={{ src: `/icons/heart-full.svg`, alt: 'Hearts' }}
/>
<IconButton
$padding={0}
$color="secondary"
icon={{ src: `/icons/sqrt-${theme}.svg`, alt: 'Quadratic score' }}
/>
<IconButton
$padding={0}
$color="secondary"
icon={{ src: `/icons/plurality-score.svg`, alt: 'Plurality score' }}
/>
<IconButton
$padding={0}
$color="secondary"
icon={{ src: `/logos/arbitrum-${theme}.svg`, alt: 'Arbitrum' }}
/>
</Card>
);
}

export default ResultsColumns;
1 change: 1 addition & 0 deletions packages/berlin/src/components/results-columns/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './ResultsColumns';
11 changes: 0 additions & 11 deletions packages/berlin/src/components/stat-card/StatCard.styled.tsx
View file
Open in desktop

This file was deleted.

22 changes: 0 additions & 22 deletions packages/berlin/src/components/stat-card/StatCard.tsx
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/berlin/src/components/stat-card/index.ts
View file
Open in desktop

This file was deleted.

Loading
Loading