From 0ffd6c129a955637b270bc8840fa2f3e1ee9dc3b Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Sun, 2 Oct 2022 11:55:47 -0700
Subject: [PATCH] Make small embeds into cards (#976)

* Fix embed style (adjust input, strikethrough)

* Turn small embeds into contract cards

* Use media query instead of conditional render

* Open embed card clicks in new tab
---
 web/components/amount-input.tsx               |  4 +--
 web/components/contract/contract-card.tsx     |  7 ++++-
 web/components/contract/contract-overview.tsx |  6 +---
 web/pages/embed/[username]/[contractSlug].tsx | 31 +++++++++++++++++--
 4 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx
index e7c4ce2a..45c73c5e 100644
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@@ -38,8 +38,8 @@ export function AmountInput(props: {
   return (
     <>
       <Col className={className}>
-        <label className="font-sm md:font-lg">
-          <span className={clsx('text-greyscale-4 absolute ml-2 mt-[9px]')}>
+        <label className="font-sm md:font-lg relative">
+          <span className="text-greyscale-4 absolute top-1/2 my-auto ml-2 -translate-y-1/2">
             {label}
           </span>
           <input
diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index aa130321..a8caf7bd 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -46,6 +46,7 @@ export function ContractCard(props: {
   hideGroupLink?: boolean
   trackingPostfix?: string
   noLinkAvatar?: boolean
+  newTab?: boolean
 }) {
   const {
     showTime,
@@ -56,6 +57,7 @@ export function ContractCard(props: {
     hideGroupLink,
     trackingPostfix,
     noLinkAvatar,
+    newTab,
   } = props
   const contract = useContractWithPreload(props.contract) ?? props.contract
   const { question, outcomeType } = contract
@@ -189,6 +191,7 @@ export function ContractCard(props: {
               }
             )}
             className="absolute top-0 left-0 right-0 bottom-0"
+            target={newTab ? '_blank' : '_self'}
           />
         </Link>
       )}
@@ -211,7 +214,9 @@ export function BinaryResolutionOrChance(props: {
   const probChanged = before !== after
 
   return (
-    <Col className={clsx(large ? 'text-4xl' : 'text-3xl', className)}>
+    <Col
+      className={clsx('items-end', large ? 'text-4xl' : 'text-3xl', className)}
+    >
       {resolution ? (
         <>
           <div
diff --git a/web/components/contract/contract-overview.tsx b/web/components/contract/contract-overview.tsx
index 3e5f22b2..2a6d5172 100644
--- a/web/components/contract/contract-overview.tsx
+++ b/web/components/contract/contract-overview.tsx
@@ -114,11 +114,7 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
         <ContractDetails contract={contract} />
         <Row className="justify-between gap-4">
           <OverviewQuestion text={contract.question} />
-          <BinaryResolutionOrChance
-            className="flex items-end"
-            contract={contract}
-            large
-          />
+          <BinaryResolutionOrChance contract={contract} large />
         </Row>
       </Col>
       <SizedContractChart
diff --git a/web/pages/embed/[username]/[contractSlug].tsx b/web/pages/embed/[username]/[contractSlug].tsx
index f578631f..03bc4ce9 100644
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/web/pages/embed/[username]/[contractSlug].tsx
@@ -6,6 +6,7 @@ import { BetInline } from 'web/components/bet-inline'
 import { Button } from 'web/components/button'
 import {
   BinaryResolutionOrChance,
+  ContractCard,
   FreeResponseResolutionOrChance,
   NumericResolutionOrExpectation,
   PseudoNumericResolutionOrExpectation,
@@ -64,10 +65,13 @@ export default function ContractEmbedPage(props: {
   return <ContractEmbed contract={contract} bets={bets} />
 }
 
-export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
-  const { contract, bets } = props
-  const { question, outcomeType } = contract
+interface EmbedProps {
+  contract: Contract
+  bets: Bet[]
+}
 
+export function ContractEmbed(props: EmbedProps) {
+  const { contract } = props
   useEffect(() => {
     track('view market embed', {
       slug: contract.slug,
@@ -77,6 +81,27 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
     })
   }, [contract.creatorId, contract.id, contract.slug])
 
+  // return (height < 250px) ? Card : SmolView
+  return (
+    <>
+      <div className="contents [@media(min-height:250px)]:hidden">
+        <ContractCard
+          contract={contract}
+          className="h-screen"
+          noLinkAvatar
+          newTab
+        />
+      </div>
+      <div className="hidden [@media(min-height:250px)]:contents">
+        <ContractSmolView {...props} />
+      </div>
+    </>
+  )
+}
+
+function ContractSmolView({ contract, bets }: EmbedProps) {
+  const { question, outcomeType } = contract
+
   const isBinary = outcomeType === 'BINARY'
   const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'