midterms: posititoning, make mobile friendly

This commit is contained in:
mantikoros 2022-10-05 17:12:42 -05:00
parent b8911cafe8
commit a3b841423f
2 changed files with 41 additions and 62 deletions

View File

@ -53,8 +53,6 @@ export const USAMap = ({
onClick = (e) => {
console.log(e.currentTarget.dataset.name)
},
width = 959,
height = 593,
title = 'US states map',
defaultFill = '#d3d3d3',
customize,
@ -67,40 +65,40 @@ export const USAMap = ({
const stateClickHandler = (state: string) => customize?.[state]?.clickHandler
return (
<svg
className={className}
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox="0 0 959 593"
>
<title>{title}</title>
<g className="outlines">
{States({
hideStateTitle,
fillStateColor,
stateClickHandler,
})}
<g className="DC state">
<path
className="DC1"
fill={fillStateColor('DC1')}
d="M801.8,253.8 l-1.1-1.6 -1-0.8 1.1-1.6 2.2,1.5z"
/>
<circle
className="DC2"
onClick={onClick}
data-name={'DC'}
fill={fillStateColor('DC2')}
stroke="#FFFFFF"
strokeWidth="1.5"
cx="801.3"
cy="251.8"
r="5"
opacity="1"
/>
<div className="flex w-full">
<svg
className={className}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 959 593"
>
<title>{title}</title>
<g className="outlines">
{States({
hideStateTitle,
fillStateColor,
stateClickHandler,
})}
<g className="DC state">
<path
className="DC1"
fill={fillStateColor('DC1')}
d="M801.8,253.8 l-1.1-1.6 -1-0.8 1.1-1.6 2.2,1.5z"
/>
<circle
className="DC2"
onClick={onClick}
data-name={'DC'}
fill={fillStateColor('DC2')}
stroke="#FFFFFF"
strokeWidth="1.5"
cx="801.3"
cy="251.8"
r="5"
opacity="1"
/>
</g>
</g>
</g>
</svg>
</svg>
</div>
)
}

View File

@ -184,67 +184,48 @@ const App = () => {
<StateElectionMap markets={senateMidterms} />
<iframe
src="https://manifold.markets/TomShlomi/will-the-gop-control-the-us-senate"
title="Will the Democrats control the Senate after the Midterms?"
frameBorder="0"
width={800}
height={400}
className="mt-8"
className="mt-8 flex h-96 w-full"
></iframe>
<Spacer h={8} />
<div className="mt-8 text-2xl">Governors</div>
<StateElectionMap markets={governorMidterms} />
<iframe
src="https://manifold.markets/ManifoldMarkets/democrats-go-down-at-least-one-gove"
title="Democrats go down at least one governor on net in 2022"
frameBorder="0"
width={800}
height={400}
className="mt-8"
className="mt-8 flex h-96 w-full"
></iframe>
<Spacer h={8} />
<div className="mt-8 text-2xl">House</div>
<iframe
src="https://manifold.markets/BoltonBailey/will-democrats-maintain-control-of"
title="Will the Democrats control the House after the Midterms?"
frameBorder="0"
width={800}
height={400}
className="mt-8"
className="mt-8 flex h-96 w-full"
></iframe>
<Spacer h={8} />
<div className="mt-8 text-2xl">Related markets</div>
<iframe
src="https://manifold.markets/BoltonBailey/balance-of-power-in-us-congress-aft"
title="Balance of Power in US Congress after 2022 Midterms"
frameBorder="0"
width={800}
height={400}
className="mt-8"
className="mt-8 flex h-96 w-full"
></iframe>
<iframe
src="https://manifold.markets/SG/will-a-democrat-win-the-2024-us-pre"
title="Will a Democrat win the 2024 US presidential election?"
frameBorder="0"
width={800}
height={400}
className="mt-8"
className="mt-8 flex h-96 w-full"
></iframe>
<iframe
src="https://manifold.markets/Ibozz91/will-the-2022-alaska-house-general"
title="Will the 2022 Alaska House General Nonspecial Election result in a Condorcet failure?"
frameBorder="0"
width={800}
height={400}
className="mt-8"
className="mt-8 flex h-96 w-full"
></iframe>
<iframe
src="https://manifold.markets/NathanpmYoung/how-many-supreme-court-justices-wil-1e597c3853ad"
title="Will the 2022 Alaska House General Nonspecial Election result in a Condorcet failure?"
frameBorder="0"
width={800}
height={400}
className="mt-8"
className="mt-8 flex h-96 w-full"
></iframe>
</Col>
</Page>