Propopsal list

src/components/Proposals/Detail.tsx

@@ -2,53 +2,59 @@ import React from "react";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import { TableFromObject } from "..";
 
-const amount = (amount: number) => (amount / 1000000).toFixed(2);
-const Detail = (props: { detail?: any; type: string }) => {
-  const { detail, type } = props;
-  if (type === "text") return <p>Text</p>;
-  if (!detail) return <p>{type}</p>;
+const mJoy = (mJoy: number) => (mJoy / 1000000).toFixed(2);
+const Detail = (props: { mJoy: number; detail?: any; type: string }) => {
+  const { amount, detail, type } = props;
+  if (type === "text") return <span>Text</span>;
+
+  if (type === "spending") return <span>Spending ({mJoy(amount)} M tJOY)</span>;
+
+  if (!detail) return <span>{type}</span>;
   const data = detail[type];
   if (!data) return console.log(`empty proposal detail`, detail);
 
   if (type === "spending")
     return (
-      <p title={`to ${data[1]}`}>
-        <b>Spending</b>: {amount(data[0])} M tJOY
-      </p>
+      <span title={`to ${data[1]}`}>
+        <b>Spending</b>: {mJoy(mJoy)} M tJOY
+      </span>
     );
 
   if (type === "setWorkingGroupMintCapacity")
     return (
-      <p>
-        Fill {data[1]} working group mint: ({amount(data[0])} M tJOY)
-      </p>
+      <span>
+        Fill {data[1]} working group mint: ({mJoy(data[0])} M tJOY)
+      </span>
     );
 
   if (type === "setWorkingGroupLeaderReward")
     return (
-      <p>
-        Set {data[2]} working group reward ({amount(data[1])} M tJOY,
+      <span>
+        Set {data[2]} working group reward ({mJoy(data[1])} M tJOY,
         {data[0]})
-      </p>
+      </span>
     );
 
   if (type === "setContentWorkingGroupMintCapacity")
-    return <p>SetContentWorkingGroupMintCapacity ({amount(data)} M tJOY)</p>;
+    return (
+      <span>SetContentWorkingGroupMintCapacity ({mJoy(data)} M tJOY)</span>
+    );
 
   if (type === "beginReviewWorkingGroupLeaderApplication")
     return (
-      <p>
+      <span>
         Hire {data[1]} working group leader ({data[0]})
-      </p>
+      </span>
     );
 
-  if (type === "setValidatorCount") return <p>SetValidatorCount ({data})</p>;
+  if (type === "setValidatorCount")
+    return <span>SetValidatorCount ({data})</span>;
 
   if (type === "addWorkingGroupLeaderOpening")
-    return <p>Hire {data.working_group} lead</p>;
+    return <span>Hire {data.working_group} lead</span>;
 
   if (type === "terminateWorkingGroupLeaderRole")
-    return <p>Fire {data.working_group} lead</p>;
+    return <span>Fire {data.working_group} lead</span>;
 
   console.debug(`unhandled detail:`, detail);
 
@@ -61,7 +67,7 @@ const Detail = (props: { detail?: any; type: string }) => {
         </Tooltip>
       }
     >
-      <div>{type}</div>
+      <span>{type}</span>
     </OverlayTrigger>
   );
 };

src/components/Proposals/ProposalTable.tsx

@@ -99,15 +99,8 @@ class ProposalTable extends React.Component<IProps, IState> {
   }
 
   render() {
-    const {
-      hideNav,
-      block,
-      council,
-      councils,
-      members,
-      posts,
-      status,
-    } = this.props;
+    const { hideNav, block, council, councils, members, posts, status } =
+      this.props;
 
     const { page, perPage, author, selectedTypes } = this.state;
 
@@ -142,7 +135,7 @@ class ProposalTable extends React.Component<IProps, IState> {
     const avgHours = Math.floor((avgBlocks - avgDays * 14400) / 600);
 
     return (
-      <div className="h-100 overflow-hidden">
+      <div>
         <NavBar
           show={!hideNav}
           author={author}
@@ -175,10 +168,10 @@ class ProposalTable extends React.Component<IProps, IState> {
           proposals={proposals.length}
         />
 
-        <div className="d-flex flex-column p-2">
+        <div className="d-flex flex-column p-2" style={{ overflowY: "auto" }}>
           {!proposals.length ? (
             <Spinner />
-          ) : (	  
+          ) : (
             proposals
               .slice((page - 1) * perPage, page * perPage)
               .map((p) => (

src/components/Proposals/Row.tsx

@@ -80,6 +80,7 @@ const ProposalRow = (props: {
     proposals,
     proposalPosts,
     votes,
+    amount,
     detail,
     startTime,
     validators,
@@ -108,8 +109,11 @@ const ProposalRow = (props: {
 
   return (
     <div className="box d-flex flex-column">
-      <div className="d-flex flex-row justify-content-left text-left mt-3">
-        <Badge className={`bg-${colors[result]} col-2 d-md-block`}>
+      <div className="d-flex flex-row justify-content-left text-left">
+        <Badge className={`bg-${colors[result]} col-2 d-md-block p-2`}>
+          <h4 className="my-1">
+            <a href={`${domain}/#/proposals/${id}`}>{id}</a>
+          </h4>
           <div className={`-${colors[result]} my-2`}>
             <b>{result}</b>
           </div>
@@ -122,7 +126,18 @@ const ProposalRow = (props: {
           )}
         </Badge>
 
-        <div className="col-5 text-left">
+        <div className="col-9 text-left">
+          <InfoTooltip placement="bottom" key={id} title={description}>
+            <b>
+              <Link className={classes.link} to={`/proposals/${id}`}>
+                {title}
+              </Link>
+              <Posts posts={proposalPosts} />
+            </b>
+          </InfoTooltip>
+
+          <Detail amount={amount} detail={detail} type={type} />
+
           <InfoTooltip
             placement="bottom"
             id={`overlay-${author}`}
@@ -144,19 +159,10 @@ const ProposalRow = (props: {
               </Link>
             </div>
           </InfoTooltip>
-          <InfoTooltip placement="bottom" key={id} title={description}>
-            <b>
-              <Link className={classes.link} to={`/proposals/${id}`}>
-                {title}
-              </Link>
-              <Posts posts={proposalPosts} />
-            </b>
-          </InfoTooltip>
-          <Detail detail={detail} type={type} />
         </div>
       </div>
 
-      <div className="d-flex flex-wrap p-2">
+      <div className="d-none d-lg-flex  p-2">
         <VotesBubbles votes={votes} />
 
         {hasToVote?.map((c) => (