Layout improvement

pioneer/packages/joy-proposals/src/Proposal/Body.tsx

@@ -148,7 +148,7 @@ const ProposalParamName = styled.div`
 const ProposalParamValue = styled.div`
   color: black;
   word-wrap: break-word;
-  word-break: break-all;
+  word-break: break-word;
   & .TextProposalContent {
     font-weight: normal;
   }

pioneer/packages/joy-proposals/src/Proposal/Details.tsx

@@ -6,6 +6,44 @@ import styled from 'styled-components';
 
 import ProfilePreview from "@polkadot/joy-utils/MemberProfilePreview";
 
+
+const DetailsContainer = styled(Item.Group)`
+  display: grid;
+  width: auto;
+  grid-template-columns: repeat(5, auto) 1fr;
+  grid-column-gap: 5rem;
+
+  & .item .extra {
+    margin-bottom: 0.5em !important;
+  }
+
+  @media screen and (max-width: 1199px) {
+    grid-template-columns: repeat(3, auto);
+    grid-template-rows: repeat(2, auto);
+
+    & .item:first-child {
+      grid-row: 1/3;
+    }
+
+    & .item {
+      margin: 0.5em 0 !important;
+    }
+  }
+
+  @media screen and (max-width: 767px) {
+    grid-template-columns: repeat(2, auto);
+    grid-template-rows: repeat(3, auto);
+
+    & .item:first-child {
+      grid-column: 1/3;
+    }
+
+    & .item {
+      margin: 0.5em 0 !important;
+    }
+  }
+`;
+
 const BlockInfo = styled.div`
   font-size: 0.9em;
 `;
@@ -36,7 +74,7 @@ export default function Details({ proposal, extendedStatus, proposerLink = false
   const { displayStatus, periodStatus, expiresIn, finalizedAtBlock, executedAtBlock, executionFailReason } = extendedStatus;
   console.log(proposal);
   return (
-    <Item.Group className="details-container">
+    <DetailsContainer>
       <Detail name="Proposed By">
         <ProfilePreview
           avatar_uri={proposer.avatar_uri}
@@ -66,6 +104,6 @@ export default function Details({ proposal, extendedStatus, proposerLink = false
           value={`${expiresIn.toLocaleString("en-US")} blocks`} />
       ) }
       {executionFailReason && <Detail name="Execution error" value={ executionFailReason } /> }
-    </Item.Group>
+    </DetailsContainer>
   );
 }

pioneer/packages/joy-proposals/src/Proposal/Proposal.css

@@ -3,7 +3,7 @@
 
   .description {
     word-wrap: break-word;
-    word-break: break-all;
+    word-break: break-word;
   }
 
   /* Ovverrides Semantic UI for the details page.*/
@@ -11,20 +11,6 @@
     margin: 1em 0;
   }
 
-  .details-container {
-    display: grid;
-    grid-template-columns: repeat(5, auto);
-  }
-
-  .details-container .item .extra {
-    margin-bottom: 0.5em !important;
-  }
-
-  .ui.items > .item .extra.proposed-by {
-    /* This is to ensure Proposed By: is above the name of the creator. The image is 50x50 and has 14pxs of margin right*/
-    padding-left: 64px;
-  }
-
   .center-content {
     justify-content: center;
   }
@@ -40,17 +26,4 @@
   .ui.tabular.list-menu {
     margin-bottom: 2rem;
   }
-
-  @media screen and (max-width: 767px) {
-    .details-container {
-      grid-template-columns: repeat(2, auto);
-      grid-template-rows: repeat(3, auto);
-    }
-    .details-container .item:first-child {
-      grid-column: 1/3;
-    }
-    .details-container .item {
-      margin: 0.5em 0 !important;
-    }
-  }
 }

pioneer/packages/joy-proposals/src/Proposal/ProposalDetails.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { Container } from "semantic-ui-react";
 import Details from "./Details";
 import Body from "./Body";
 import VotingSection from "./VotingSection";
@@ -18,6 +17,35 @@ import { Seat } from "@joystream/types/";
 import { PromiseComponent } from "@polkadot/joy-utils/react/components";
 import ProposalDiscussion from "./discussion/ProposalDiscussion";
 
+import styled from 'styled-components';
+
+const ProposalDetailsMain = styled.div`
+  display: flex;
+  @media screen and (max-width: 1199px) {
+    flex-direction: column;
+  }
+`;
+
+const ProposalDetailsVoting = styled.div`
+  min-width: 30%;
+  margin-left: 3%;
+  @media screen and (max-width: 1399px) {
+    min-width: 40%;
+  }
+  @media screen and (max-width: 1199px) {
+    margin-left: 0;
+  }
+`;
+
+const ProposalDetailsDiscussion = styled.div`
+  margin-top: 1rem;
+  max-width: 67%;
+  @media screen and (max-width: 1399px) {
+    max-width: none;
+  }
+`;
+
+// TODO: That should probably be moved to joy-utils/functions/proposals (or transport)
 type BasicProposalStatus = 'Active' | 'Finalized';
 type ProposalPeriodStatus = 'Voting period' | 'Grace period';
 type ProposalDisplayStatus = BasicProposalStatus | ProposalDecisionStatuses | ApprovedProposalStatuses;
@@ -109,35 +137,41 @@ function ProposalDetails({
   const extendedStatus = getExtendedStatus(proposal, bestNumber);
   const isVotingPeriod = extendedStatus.periodStatus === 'Voting period';
   return (
-    <Container className="Proposal">
+    <div className="Proposal">
       <Details proposal={proposal} extendedStatus={extendedStatus} proposerLink={ true }/>
-      <Body
-        type={ proposal.type }
-        title={ proposal.title }
-        description={ proposal.description }
-        params={ proposal.details }
-        iAmProposer={ iAmProposer }
-        proposalId={ proposalId }
-        proposerId={ proposal.proposerId }
-        isCancellable={ isVotingPeriod }
-        cancellationFee={ proposal.cancellationFee }
-        />
-      { iAmCouncilMember && (
-        <VotingSection
+      <ProposalDetailsMain>
+        <Body
+          type={ proposal.type }
+          title={ proposal.title }
+          description={ proposal.description }
+          params={ proposal.details }
+          iAmProposer={ iAmProposer }
+          proposalId={ proposalId }
+          proposerId={ proposal.proposerId }
+          isCancellable={ isVotingPeriod }
+          cancellationFee={ proposal.cancellationFee }
+          />
+        <ProposalDetailsVoting>
+          { iAmCouncilMember && (
+            <VotingSection
+              proposalId={proposalId}
+              memberId={ myMemberId as MemberId }
+              isVotingPeriod={ isVotingPeriod }/>
+          ) }
+          <PromiseComponent
+            error={votesListState.error}
+            loading={votesListState.loading}
+            message="Fetching the votes...">
+            <Votes votes={votesListState.data} />
+          </PromiseComponent>
+        </ProposalDetailsVoting>
+      </ProposalDetailsMain>
+      <ProposalDetailsDiscussion>
+        <ProposalDiscussion
           proposalId={proposalId}
-          memberId={ myMemberId as MemberId }
-          isVotingPeriod={ isVotingPeriod }/>
-      ) }
-      <PromiseComponent
-        error={votesListState.error}
-        loading={votesListState.loading}
-        message="Fetching the votes...">
-        <Votes votes={votesListState.data} />
-      </PromiseComponent>
-      <ProposalDiscussion
-        proposalId={proposalId}
-        memberId={ iAmMember ? myMemberId : undefined }/>
-    </Container>
+          memberId={ iAmMember ? myMemberId : undefined }/>
+      </ProposalDetailsDiscussion>
+    </div>
   );
 }
 

pioneer/packages/joy-proposals/src/Proposal/VotingSection.tsx

@@ -8,6 +8,22 @@ import { ProposalId } from "@joystream/types/proposals";
 import { useTransport, usePromise } from "@polkadot/joy-utils/react/hooks";
 import { VoteKind } from '@joystream/types/proposals';
 import { VoteKinds } from "@joystream/types/proposals";
+import styled from 'styled-components';
+
+const VoteButtons = styled.div`
+  display: grid;
+  grid-gap: 0.5rem;
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  @media screen and (max-width: 1199px) {
+    grid-template-rows: auto;
+    grid-template-columns: repeat(4, 1fr);
+  }
+  @media screen and (max-width: 767px) {
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
+  }
+`;
 
 export type VoteKindStr = typeof VoteKinds[number];
 
@@ -86,14 +102,16 @@ export default function VotingSection({
     <>
       <Header as="h3">Sumbit your vote</Header>
       <Divider />
-      { VoteKinds.map((voteKind) =>
-        <VoteButton
-          voteKind={voteKind}
-          memberId={memberId}
-          proposalId={proposalId}
-          key={voteKind}
-          onSuccess={ () => setVoted(voteKind) }/>
-      ) }
+      <VoteButtons>
+        { VoteKinds.map((voteKind) =>
+          <VoteButton
+            voteKind={voteKind}
+            memberId={memberId}
+            proposalId={proposalId}
+            key={voteKind}
+            onSuccess={ () => setVoted(voteKind) }/>
+        ) }
+      </VoteButtons>
     </>
   );
 }