can edit vote a bit better for mobile

This commit is contained in:
Kalle (Sendou) 2021-03-20 16:28:33 +02:00
parent 4928221146
commit dbde957195
3 changed files with 16 additions and 12 deletions

View File

@ -1,4 +1,5 @@
import { Button, IconButton } from "@chakra-ui/button";
import { Flex } from "@chakra-ui/layout";
import { useState } from "react";
import { FiEdit } from "react-icons/fi";
import { PlusVotingButton } from "./PlusVotingButton";
@ -30,11 +31,14 @@ export function ChangeVoteButtons({
return (
<>
<PlusVotingButton
number={currentScore}
onClick={() => setCurrentScore(getNextScore())}
disabled={!editing}
/>
<Flex align="center">
<PlusVotingButton
number={currentScore}
onClick={() => setCurrentScore(getNextScore())}
disabled={!editing}
isSmall
/>
</Flex>
{editing ? (
<Button
size="sm"
@ -51,9 +55,6 @@ export function ChangeVoteButtons({
<IconButton
aria-label="Edit vote"
icon={<FiEdit />}
borderRadius="50%"
width={8}
height={8}
colorScheme="gray"
variant="ghost"
onClick={() => setEditing(!editing)}

View File

@ -4,16 +4,18 @@ export function PlusVotingButton({
number,
onClick,
disabled,
isSmall,
}: {
number: number;
onClick: () => void;
disabled?: boolean;
isSmall?: boolean;
}) {
return (
<Button
borderRadius="50%"
height={12}
width={12}
height={isSmall ? 10 : 12}
width={isSmall ? 10 : 12}
variant="outline"
colorScheme={number < 0 ? "red" : "theme"}
onClick={onClick}

View File

@ -49,8 +49,9 @@ export default function PlusVotingPage() {
<Grid
mt={6}
justify="center"
templateColumns="2fr 1fr 1fr 1fr"
gridRowGap="0.75rem"
templateColumns={["1fr 1fr", "2fr 0.75fr 1fr 1fr"]}
gridRowGap={5}
gridColumnGap="0.5rem"
mx="auto"
maxW="500px"
>