mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-04-25 07:32:19 -05:00
can edit vote a bit better for mobile
This commit is contained in:
parent
4928221146
commit
dbde957195
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user