feat: implement prototype of how results are shown

js/src/forum/components/Poll.tsx

@@ -6,6 +6,7 @@ import PollDescription from './Poll/PollDescription';
 import PollOptions from './Poll/PollOptions';
 import PollSubmitButton from './Poll/PollSubmitButton';
 import PollImage from './Poll/PollImage';
+
 export default class IndexPolls extends Component {
   view(): Mithril.Children {
     return (
@@ -14,11 +15,13 @@ export default class IndexPolls extends Component {
           <PollImage />
         </div>
         <div className="Poll-wrapper">
-          <PollTitle text="Poll Title" />
-          <PollDescription text="Poll Description" />
+          <PollTitle text="Welche Art von zukünftigen Entscheidungen der SBB würden Sie gerne mehr einbezogen sehen?" />
+          <PollDescription text="Ihre Meinung ist uns wichtig! Welche SBB-Entscheidungen möchten Sie mehr einbezogen sehen? Teilen Sie uns mit, welche Themen für Sie besonders relevant sind. Vielen Dank für Ihre Teilnahme!" />
+
           <form>
             <fieldset>
               <legend className="sr-only">Privacy setting</legend>
+
               <PollOptions />
               <PollSubmitButton />
             </fieldset>

js/src/forum/components/Poll/PollDescription.tsx

@@ -7,6 +7,6 @@ interface PollDescriptionAttrs extends ComponentAttrs {
 
 export default class PollDescription extends Component<PollDescriptionAttrs> {
   view(): Mithril.Children {
-    return <p className="PollOption-description">{this.attrs.text}</p>;
+    return <p className="Poll-description">{this.attrs.text}</p>;
   }
 }

js/src/forum/components/Poll/PollOptions.tsx

@@ -1,22 +1,23 @@
 import * as Mithril from 'mithril';
 import Component from 'flarum/common/Component';
 import PollOption from './PollOption';
+import PollResult from './PollResult';
 import listItems from 'flarum/common/helpers/listItems';
 import ItemList from 'flarum/common/utils/ItemList';
 
 export default class PollOptions extends Component {
   view(): Mithril.Children {
-    return <div className="Poll-options grid-layout">{this.pollOptions().toArray()}</div>;
+    return <div className="Poll-options list-layout">{this.pollOptions().toArray()}</div>;
   }
 
   pollOptions(): ItemList<Mithril.Children> {
     const items = new ItemList<Mithril.Children>();
 
     items.add('test1', <PollOption />);
+    items.add('test5', <PollResult />);
     items.add('test2', <PollOption />);
     items.add('test3', <PollOption />);
     items.add('test4', <PollOption />);
-    items.add('test5', <PollOption />);
 
     return items;
   }

js/src/forum/components/Poll/PollResult.tsx

@@ -0,0 +1,29 @@
+import * as Mithril from 'mithril';
+import Component from 'flarum/common/Component';
+import PollOptionLabel from './PollOptionLabel';
+
+export default class PollResults extends Component {
+  view(): Mithril.Children {
+    return (
+      <label className="PollResult">
+        <input
+          type="radio"
+          name="privacy-setting"
+          value="Private to Project Members"
+          className="PollOption-input"
+          style="opacity: 0;"
+          aria-labelledby="privacy-setting-1-label"
+          aria-describedby="privacy-setting-1-description"
+        />
+        <span className="PollResult-information">
+          <div className="PollResults-row">
+            <PollOptionLabel text="Poll Option Label" />
+            <span className="PollResult-number">76 %</span>
+          </div>
+
+          <input type="range" min="0" max="100" value="76" step="1" className="PollResult-input" />
+        </span>
+      </label>
+    );
+  }
+}

js/src/forum/components/Poll/PollTitle.tsx

@@ -7,6 +7,6 @@ interface PollTitleAttrs extends ComponentAttrs {
 
 export default class PollTitle extends Component<PollTitleAttrs> {
   view(): Mithril.Children {
-    return <p>{this.attrs.text}</p>;
+    return <p className="Poll-title">{this.attrs.text}</p>;
   }
 }

resources/less/forum.less

@@ -1,5 +1,6 @@
 :root {
   --poll-option-color: var(--muted-color);
+  --poll-option-accent-color: var(--primary-color);
   --poll-option-active-color: var(--secondary-color);
 }
 
@@ -406,7 +407,10 @@
 .Poll-options {
   display: grid;
   gap: 10px;
+  padding: 10px;
   margin-bottom: 10px;
+  background: var(--control-bg);
+  border-radius: var(--border-radius);
 
   &.grid-layout {
     grid-template-columns: 1fr 1fr;
@@ -421,9 +425,10 @@
   display: flex;
   position: relative;
   padding: 10px;
-  border-color: var(--poll-option-color);
-  border-width: 1px;
-  border-style: solid;
+  // border-color: var(--poll-option-color);
+  // border-width: 1px;
+  // border-style: solid;
+  background: var(--body-bg);
   border-radius: 4px;
   cursor: pointer;
 
@@ -432,12 +437,46 @@
   }
 }
 
+.PollResult {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  padding: 10px;
+  // border-color: var(--poll-option-color);
+  // border-width: 1px;
+  // border-style: solid;
+  border-radius: 4px;
+}
+
+.PollResult-input,
+.PollOption-input {
+  accent-color: var(--poll-option-accent-color);
+}
+
 .PollOption-information {
   display: flex;
   margin-left: 10px;
   flex-direction: column;
 }
 
+.PollResults-row {
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-between;
+}
+.PollResult-information {
+  display: flex;
+  margin-left: 10px;
+  justify-content: space-between;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.Poll-title,
+.PollResult-number {
+  font-weight: 600;
+}
+
 .PollOption-label {
   display: block;
   font-weight: 600;