add image to poll & updated quiz style (FreeTubeApp#4318)

kommunarr · Nov 17, 2023 · c57daa8 · c57daa8
1 parent 582df95
commit c57daa8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 11 deletions.
diff --git 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
@@ -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
@@ -13,13 +13,13 @@
       <div
         v-if="data.type === 'quiz'"
         class="option quiz-option"
+        :class="revealAnswer && choice.isCorrect ? 'correct-option' : ''"
       >
         <span class="empty-circle">
           <span :class="revealAnswer && choice.isCorrect ? 'filled-circle' : ''" />
         </span>
         <div
           class="option-text"
-          :class="revealAnswer && choice.isCorrect ? 'correct-option' : ''"
         >
           {{ choice.text }}
         </div>
@@ -29,6 +29,11 @@
         class="option poll-option"
       >
         <span class="empty-circle" />
+        <img
+          v-if="choice.image"
+          :src="findSmallestPollImage(choice.image)"
+          alt=""
+        >
         <div class="option-text">
           {{ choice.text }}
         </div>