Proposals: Table > Flex

src/components/Back.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import { Link } from "react-router-dom";
+
+const Back = () => {
+  return (
+    <Link to={`/`}>
+      <Button variant="secondary" className="p-1 m-1">
+        Back
+      </Button>
+    </Link>
+  );
+};
+
+export default Back;

src/components/Councils/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Button, OverlayTrigger, Tooltip, Table } from "react-bootstrap";
-import { Link } from "react-router-dom";
+import { OverlayTrigger, Tooltip, Table } from "react-bootstrap";
 import { Member, ProposalDetail } from "../../types";
 import LeaderBoard from "./Leaderboard";
+import Back from "../Back";
 
 // TODO fetch from chain
 const announcingPeriod = 28800;
@@ -11,14 +11,6 @@ const revealingPeriod = 14400;
 const termDuration = 144000;
 const cycle = termDuration + announcingPeriod + votingPeriod + revealingPeriod; // 201600
 
-const Back = () => {
-  return (
-    <Button variant="secondary" className="btn btn-secondary p-1 m-0">
-      <Link to={`/tokenomics`}>back</Link>
-    </Button>
-  );
-};
-
 const Rounds = (props: {
   members: Member[];
   councils: number[][];

src/components/Proposals/ProposalTable.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Table } from "react-bootstrap";
+import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
 import Row from "./Row";
 
 import { Member, ProposalDetail, ProposalPost } from "../../types";
@@ -29,7 +29,6 @@ class ProposalTable extends React.Component<IProps, IState> {
   }
 
   setKey(key: string) {
-    console.log(key);
     if (key === this.state.key) this.setState({ asc: !this.state.asc });
     else this.setState({ key });
   }
@@ -77,68 +76,73 @@ class ProposalTable extends React.Component<IProps, IState> {
     this.props.proposals.forEach((p) => authors[p.author]++);
 
     const proposals = this.sortProposals(this.filterProposals());
-
     const approved = proposals.filter((p) => p.result === "Approved").length;
 
     return (
-      <Table>
-        <thead>
-          <tr className="bg-dark text-light font-weight-bold">
-            <td onClick={() => this.setKey("id")}>ID</td>
-            <td onClick={() => this.setKey("author")}>
-              Author
-              <br />
-              <select value={author} onChange={this.selectAuthor}>
-                <option>All</option>
-                {Object.keys(authors).map((author: string) => (
-                  <option key={author}>{author}</option>
-                ))}
-              </select>
-            </td>
-            <td
-              onClick={() => this.setKey("description")}
-              className="text-right"
-            >
-              Description
-            </td>
-            <td onClick={() => this.setKey("type")}>Type</td>
-            <td>
-              Votes
-              <br />
-              {approved}/{proposals.length}
-            </td>
-            <td>
-              Voting Duration
-              <br />
-              Average: {avgDays ? `${avgDays}d` : ""}{" "}
-              {avgHours ? `${avgHours}h` : ""}
-            </td>
-            <td onClick={() => this.setKey("createdAt")} className="text-right">
-              Created
-            </td>
-            <td
-              onClick={() => this.setKey("finalizedAt")}
-              className="text-left"
+      <div className="h-100 overflow-hidden">
+        <div className="">
+          {Object.keys(types).map((type) => (
+            <Button
+              key={type}
+              variant={hidden.includes(type) ? "outline-dark" : "dark"}
+              className="btn-sm m-1"
+              onClick={() => this.toggleHide(type)}
             >
-              Finalized
-            </td>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td colSpan={8}>
-              {Object.keys(types).map((type) => (
-                <Button
-                  key={type}
-                  variant={hidden.includes(type) ? "outline-dark" : "dark"}
-                  className="btn-sm m-1"
-                  onClick={() => this.toggleHide(type)}
-                >
-                  {type}
-                </Button>
+              {type}
+            </Button>
+          ))}
+        </div>
+
+        <div className="d-flex flex-row justify-content-between p-2 bg-dark text-light text-left font-weight-bold">
+          <div onClick={() => this.setKey("id")}>ID</div>
+          <div className="col-2" onClick={() => this.setKey("author")}>
+            Author
+            <br />
+            <select value={author} onChange={this.selectAuthor}>
+              <option>All</option>
+              {Object.keys(authors).map((author: string) => (
+                <option key={author}>{author}</option>
               ))}
-            </td>
-          </tr>
+            </select>
+          </div>
+          <div className="col-3" onClick={() => this.setKey("description")}>
+            Description
+          </div>
+          <div className="col-2" onClick={() => this.setKey("type")}>
+            Type
+          </div>
+          <div className="col-1 text-center">
+            Result
+            <br />
+            <OverlayTrigger
+              placement="bottom"
+              overlay={
+                <Tooltip id={`approved`}>
+                  {approved} of {proposals.length} approved
+                </Tooltip>
+              }
+            >
+              <div>{Math.floor(100 * (approved / proposals.length))}%</div>
+            </OverlayTrigger>
+          </div>
+          <div className="col-2">
+            Voting Duration
+            <br />
+            Average: {avgDays ? `${avgDays}d` : ""}
+            {avgHours ? `${avgHours}h` : ""}
+          </div>
+          <div className="col-1" onClick={() => this.setKey("createdAt")}>
+            Created
+          </div>
+          <div className="col-1" onClick={() => this.setKey("finalizedAt")}>
+            Finalized
+          </div>
+        </div>
+
+        <div
+          className="d-flex flex-column overflow-auto p-2"
+          style={{ height: `75%` }}
+        >
           {proposals.map((p) => (
             <Row
               key={p.id}
@@ -149,8 +153,8 @@ class ProposalTable extends React.Component<IProps, IState> {
               posts={proposalPosts.filter((post) => post.threadId === p.id)}
             />
           ))}
-        </tbody>
-      </Table>
+        </div>
+      </div>
     );
   }
 }

src/components/Proposals/Row.tsx

@@ -76,10 +76,10 @@ const ProposalRow = (props: {
   };
 
   return (
-    <tr key={id}>
-      <td>{id}</td>
-      <td>{author}</td>
-      <td className="text-left">
+    <div className="d-flex flex-row justify-content-between text-left p-2">
+      <div className="text-right">{id}</div>
+      <div className="col-2">{author}</div>
+      <div className="col-3">
         <div className="float-right">
           <Posts posts={props.posts} />
         </div>
@@ -90,8 +90,8 @@ const ProposalRow = (props: {
         >
           <a href={url}>{title}</a>
         </OverlayTrigger>
-      </td>
-      <td>{type}</td>
+      </div>
+      <div className="col-2">{type}</div>
 
       <OverlayTrigger
         placement="left"
@@ -101,22 +101,22 @@ const ProposalRow = (props: {
           </Tooltip>
         }
       >
-        <td className={color}>
+        <div className={`col-1 p-2 ${color}`}>
           <b>{result}</b>
           <br />
           {JSON.stringify(Object.values(votes))}
-        </td>
+        </div>
       </OverlayTrigger>
 
-      <td className="text-left  justify-content-center">
+      <div className="col-2 text-left">
         <Bar id={id} blocks={blocks} period={period} duration={duration} />
-      </td>
+      </div>
 
-      <td className="text-right">{created}</td>
-      <td className="text-left">
+      <div className="col-1">{created}</div>
+      <div className="col-1">
         {finalized ? finalized : <VoteButton show={true} url={url} />}
-      </td>
-    </tr>
+      </div>
+    </div>
   );
 };
 

src/components/Proposals/index.tsx

@@ -45,7 +45,7 @@ const Proposals = (props: {
 
   // - list all proposals
   return (
-    <div className="w-100 h-100 overflow-hidden bg-light text-center">
+    <div className="w-100 h-100 flex-grow-1 overflow-hidden bg-light text-center">
       <Back />
       <h1>Joystream Proposals</h1>
       <ProposalTable