diff --git a/src/components/Layout/Desktop1440.tsx b/src/components/Layout/Desktop1440.tsx new file mode 100644 index 000000000..6aaa5a4d4 --- /dev/null +++ b/src/components/Layout/Desktop1440.tsx @@ -0,0 +1,22 @@ +import { useMediaQuery } from 'react-responsive' + +/** + * Media hook to determine if we're going to be rendering in a desktop environment with big screens. + */ +const useDesktop1440MediaQuery = (): boolean => useMediaQuery({ minWidth: 1440 }) + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +const Desktop1440 = ({ children }) => { + const isDesktop1440 = useDesktop1440MediaQuery() + return isDesktop1440 ? children : null +} + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +const NotDesktop1440 = ({ children }) => { + const isDesktop1440 = useDesktop1440MediaQuery() + return isDesktop1440 ? null : children +} + +export { Desktop1440, NotDesktop1440 } diff --git a/src/components/Proposal/ProposalSidebar.tsx b/src/components/Proposal/ProposalSidebar.tsx index c6837f99b..da1bc2bdd 100644 --- a/src/components/Proposal/ProposalSidebar.tsx +++ b/src/components/Proposal/ProposalSidebar.tsx @@ -12,6 +12,7 @@ import { isProposalStatusWithUpdates } from '../../entities/Updates/utils' import { SelectedVoteChoice, Vote } from '../../entities/Votes/types' import { calculateResult } from '../../entities/Votes/utils' import { ProposalPageState } from '../../pages/proposal' +import { NotDesktop1440 } from '../Layout/Desktop1440' import CalendarAlertModal from '../Modal/CalendarAlertModal' import CalendarAlertButton from './View/CalendarAlertButton' @@ -162,7 +163,11 @@ export default function ProposalSidebar({ disabled={isCalendarButtonDisabled} onClick={() => setIsCalendarModalOpenWithTracking(true)} /> - {proposal && } + {proposal && ( + + + + )} {proposal && } {proposal && ( Time.from(date).format('MMM DD, YYYY HH:mm') -export default function ProposalDetailSection({ proposal }: Props) { +export default function ProposalDetailSection({ proposal, className }: Props) { const t = useFormatMessage() const coAuthors = useCoAuthorsByProposal(proposal) return ( -
+
{t('page.proposal_detail.details_label')}
diff --git a/src/pages/proposal.css b/src/pages/proposal.css index 3363762f8..9764cb7f4 100644 --- a/src/pages/proposal.css +++ b/src/pages/proposal.css @@ -9,6 +9,13 @@ padding-right: 0; } +.ProposalDetail__Left { + display: flex; + width: 284px; + flex-direction: column; + justify-content: flex-end; +} + @media (min-width: 769px) { .ProposalDetailPage { flex-direction: row !important; @@ -25,6 +32,12 @@ } } +@media (min-width: 1440px) { + .ProposalDetailPage__Description { + max-width: calc(100% - 284px - 284px); + } +} + @media (max-width: 767px) { .SignIn.center .ui.primary.button { display: none; diff --git a/src/pages/proposal.tsx b/src/pages/proposal.tsx index 0abb99516..10b601f32 100644 --- a/src/pages/proposal.tsx +++ b/src/pages/proposal.tsx @@ -16,6 +16,7 @@ import { SnapshotApi } from '../clients/SnapshotApi' import ProposalVPChart from '../components/Charts/ProposalVPChart' import WiderContainer from '../components/Common/WiderContainer' import FloatingBar from '../components/FloatingBar/FloatingBar' +import { Desktop1440 } from '../components/Layout/Desktop1440' import MaintenanceLayout from '../components/Layout/MaintenanceLayout' import Navigation, { NavigationTab } from '../components/Layout/Navigation' import BidSubmittedModal from '../components/Modal/BidSubmittedModal' @@ -41,6 +42,7 @@ import BidProposalView from '../components/Proposal/View/Categories/BidProposalV import GrantProposalView from '../components/Proposal/View/Categories/GrantProposalView' import CompetingBiddingAndTendering from '../components/Proposal/View/CompetingBiddingAndTendering' import GovernanceProcess from '../components/Proposal/View/GovernanceProcess' +import ProposalDetailSection from '../components/Proposal/View/ProposalDetailSection' import ProposalImagesPreview from '../components/Proposal/View/ProposalImagesPreview' import ProposalMarkdown from '../components/Proposal/View/ProposalMarkdown' import { VOTES_VP_THRESHOLD } from '../constants' @@ -381,6 +383,11 @@ export default function ProposalPage() { + +
+ {proposal && } +
+
{showProposalBudget && }