fix: Revert to old mobile vote style

This commit is contained in:
Jay Sitter 2023-06-22 14:02:15 -04:00
parent 7c13b8dba1
commit 443c128e05

View file

@ -1,5 +1,6 @@
import { showScores } from "@utils/app"; import { showScores } from "@utils/app";
import { numToSI } from "@utils/helpers"; import { numToSI } from "@utils/helpers";
import classNames from "classnames";
import { Component, linkEvent } from "inferno"; import { Component, linkEvent } from "inferno";
import { CommentAggregates, PostAggregates } from "lemmy-js-client"; import { CommentAggregates, PostAggregates } from "lemmy-js-client";
import { I18NextService } from "../../services"; import { I18NextService } from "../../services";
@ -60,10 +61,9 @@ export class VoteButtonsCompact extends Component<
render() { render() {
return ( return (
<> <div>
<div className="input-group input-group-sm w-auto">
<button <button
className={`btn btn-sm btn-animate btn-outline-primary rounded-start py-0 ${ className={`btn-animate btn py-0 px-1 ${
this.props.my_vote === 1 ? "text-info" : "text-muted" this.props.my_vote === 1 ? "text-info" : "text-muted"
}`} }`}
{...this.tippy} {...this.tippy}
@ -84,12 +84,9 @@ export class VoteButtonsCompact extends Component<
</> </>
)} )}
</button> </button>
<span className="input-group-text small py-0">
{numToSI(this.props.counts.score)}
</span>
{this.props.enableDownvotes && ( {this.props.enableDownvotes && (
<button <button
className={`btn btn-sm btn-animate btn-outline-primary rounded-end py-0 ${ className={`ms-2 btn-animate btn py-0 px-1 ${
this.props.my_vote === -1 ? "text-danger" : "text-muted" this.props.my_vote === -1 ? "text-danger" : "text-muted"
}`} }`}
onClick={linkEvent( onClick={linkEvent(
@ -106,7 +103,11 @@ export class VoteButtonsCompact extends Component<
<> <>
<Icon icon="arrow-down1" classes="icon-inline small" /> <Icon icon="arrow-down1" classes="icon-inline small" />
{showScores() && ( {showScores() && (
<span className="ms-2"> <span
className={classNames("ms-2", {
invisible: this.props.counts.downvotes === 0,
})}
>
{numToSI(this.props.counts.downvotes)} {numToSI(this.props.counts.downvotes)}
</span> </span>
)} )}
@ -115,13 +116,12 @@ export class VoteButtonsCompact extends Component<
</button> </button>
)} )}
</div> </div>
</>
); );
} }
} }
export class VoteButtons extends Component<VotesProps, VotesState> { export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
state: VotesState = { state: VoteButtonsState = {
upvoteLoading: false, upvoteLoading: false,
downvoteLoading: false, downvoteLoading: false,
}; };