open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Righbar always starts from the bottom

Browse Source
This commit is contained in:
Austin Chen 2022-05-16 19:07:35 -04:00
parent 8a349315de
commit ed73bef012
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/components/contract/contract-card.tsx
View File

@ -27,7 +27,7 @@ import { getOutcomeProbability, getTopAnswer } from 'common/calculate'
import { AbbrContractDetails } from './contract-details' import { AbbrContractDetails } from './contract-details'
// Return a number from 0 to 1 for this contract // Return a number from 0 to 1 for this contract
// Resolved contracts are set to 1, for coloring purposes // Resolved contracts are set to 1, for coloring purposes (even if NO)
function getProb(contract: Contract) { function getProb(contract: Contract) {
const { outcomeType, resolution } = contract const { outcomeType, resolution } = contract
return resolution return resolution
@ -118,18 +118,18 @@ export function ContractCard(props: {
<div <div
className={clsx( className={clsx(
'absolute right-0 top-0 w-2 rounded-tr-md', 'absolute right-0 top-0 w-2 rounded-tr-md',
showTopBar ? `bg-${color}` : 'bg-gray-200', 'bg-gray-200'
// If we're showing the full bar, also round the bottom
prob === 1 ? 'rounded-br-md' : ''
)} )}
style={{ height: `${100 * prob}%` }} style={{ height: `${100 * (1 - prob)}%` }}
></div> ></div>
<div <div
className={clsx( className={clsx(
'absolute right-0 bottom-0 w-2 rounded-br-md', 'absolute right-0 bottom-0 w-2 rounded-br-md',
!showTopBar ? `bg-${color}` : 'bg-gray-200' `bg-${color}`,
// If we're showing the full bar, also round the top
prob === 1 ? 'rounded-tr-md' : ''
)} )}
style={{ height: `${100 * (1 - prob)}%` }} style={{ height: `${100 * prob}%` }}
></div> ></div>
</Col> </Col>
</div> </div>