From 6472f59cd16a338c2215c6287fedfd7992fa3dde Mon Sep 17 00:00:00 2001 From: hole-thu Date: Sun, 16 Oct 2022 13:18:52 +0800 Subject: [PATCH] update up and down vote UI --- src/Common.css | 14 ++++++ src/Flows.js | 96 ++++++++++++++++++------------------- src/images/up_and_down.png | Bin 0 -> 7782 bytes 3 files changed, 62 insertions(+), 48 deletions(-) create mode 100644 src/images/up_and_down.png diff --git a/src/Common.css b/src/Common.css index 626e432..8b37e6d 100644 --- a/src/Common.css +++ b/src/Common.css @@ -82,3 +82,17 @@ blockquote { padding-left: 5px; border-left: 3px solid #cbcbcb; } + +.icon-up-and-down:before { + content:""; + background-image: url('images/up_and_down.png'); + background-size: 18px 18px; + width: 18px; + height: 18px; + display: inline-block; +} + +.icon-up-and-down { + height: 18px; + display: inline-block; +} diff --git a/src/Flows.js b/src/Flows.js index 16340eb..0150e4d 100644 --- a/src/Flows.js +++ b/src/Flows.js @@ -268,6 +268,14 @@ class FlowItem extends PureComponent { )} + {!do_react && ( + + + + {info.up_votes - info.down_votes} + + + )} {!!parseInt(info.likenum, 10) && ( {info.likenum}  @@ -350,57 +358,49 @@ class FlowItem extends PureComponent { search_param={search_param} /> -
- - do_react && do_react(info.reaction_status === 1 ? 0 : 1) - } - > - + do_react(info.reaction_status === 1 ? 0 : 1)} > - - - - {do_react ? ( - <> -
{info.up_votes}
-
-
{info.down_votes}
- - ) : ( -
- {info.up_votes - info.down_votes} -
- )} - - do_react && do_react(info.reaction_status === -1 ? 0 : -1) - } - > - + + + +
{info.up_votes}
+
+
{info.down_votes}
+ + do_react && do_react(info.reaction_status === -1 ? 0 : -1) } - width="28" - height="28" - viewBox="0 0 36 36" > - - - -
+ + + +
+ + )} {info.poll && (
diff --git a/src/images/up_and_down.png b/src/images/up_and_down.png new file mode 100644 index 0000000000000000000000000000000000000000..7bba072f2dd69b8c346ac82e573d66a84e2ae664 GIT binary patch literal 7782 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