diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css index 5c8dc43d0cdde..c35738a1bff99 100644 --- a/src/renderer/components/ft-community-poll/ft-community-poll.css +++ b/src/renderer/components/ft-community-poll/ft-community-poll.css @@ -11,9 +11,7 @@ display: block; float: var(--float-left-ltr-rtl-value); block-size: 10px; - inset-inline-start: 5px; position: relative; - inset-block-start: 8px; inline-size: 10px; } @@ -29,30 +27,45 @@ } .option-text { + margin-inline-start: 10px; +} + +.option { + display: flex; + align-items: center; + padding-block-end: 10px; border-radius: 5px; border-style: solid; - border-width: 2px; + border-width: 1px; padding-block: 5px; - padding-inline: 25px; + padding-inline-start: 10px; + margin-block-end: 10px; } -.option { - padding-block-end: 10px; +.option > img { + margin-inline-start: 10px; + block-size: 125px; } .correct-option { + border-color: #78da71; + border-width: 2px; +} + +.correct-option .filled-circle { background-color: #78da71; } .incorrect-option { - background-color: #dd4e4e; + border-color: #dd4e4e; + border-width: 2px; } -.reveal-answer { - text-align: center; +.reveal-answer { + justify-content: center; cursor: pointer; } -.reveal-answer:hover > .option-text, .reveal-answer:focus > .option-text { +.reveal-answer:hover, .reveal-answer:focus { background-color: var(--side-nav-hover-color) } diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.js b/src/renderer/components/ft-community-poll/ft-community-poll.js index 866bc3bad9355..fb44894cd9eb5 100644 --- a/src/renderer/components/ft-community-poll/ft-community-poll.js +++ b/src/renderer/components/ft-community-poll/ft-community-poll.js @@ -18,5 +18,11 @@ export default defineComponent({ formattedVotes: function () { return formatNumber(this.data.totalVotes) }, + }, + methods: { + // Use smallest as it's resized to 125px anyways and they're usually all larger than that + findSmallestPollImage: function (images) { + return images.reduce((prev, img) => (img.height < prev.height) ? img : prev, images[0]).url + } } }) diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.vue b/src/renderer/components/ft-community-poll/ft-community-poll.vue index fc7f90470d777..0f3151a8fa56c 100644 --- a/src/renderer/components/ft-community-poll/ft-community-poll.vue +++ b/src/renderer/components/ft-community-poll/ft-community-poll.vue @@ -13,13 +13,13 @@
{{ choice.text }}
@@ -29,6 +29,11 @@ class="option poll-option" > +
{{ choice.text }}