better formatting to fit on phone for equative game

This commit is contained in:
lingdocs 2022-05-11 13:16:43 -05:00
parent 4212da62c8
commit 53d2628408
2 changed files with 7 additions and 7 deletions

View File

@ -145,7 +145,7 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
<button onClick={handleQuit} className="btn btn-outline-secondary btn-sm mr-2">Quit</button> <button onClick={handleQuit} className="btn btn-outline-secondary btn-sm mr-2">Quit</button>
</div>} </div>}
<Reward ref={rewardRef} config={{ lifetime: 130, spread: 90, elementCount: 150, zIndex: 999999999 }} type="confetti"> <Reward ref={rewardRef} config={{ lifetime: 130, spread: 90, elementCount: 150, zIndex: 999999999 }} type="confetti">
<div className="py-3"> <div>
{finish === undefined && {finish === undefined &&
(current (current
? <div> ? <div>

View File

@ -333,22 +333,22 @@ export default function EquativeGame({ id, link, level }: { id: string, link: st
return <div> return <div>
{(level === "allIdentify" || level === "situations") ? {(level === "allIdentify" || level === "situations") ?
<div className="pt-2 pb-1 mb-2" style={{ maxWidth: "300px", margin: "0 auto" }}> <div className="mb-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
{"situation" in question ? <p className="lead"> {"situation" in question ? <p className="lead">
{question.situation.description} {question.situation.description}
</p> : <Examples opts={opts}> </p> : <Examples opts={opts}>
{randFromArray(question.phrase.ps)} {randFromArray(question.phrase.ps)}
</Examples>} </Examples>}
</div> </div>
: !("situation" in question) && <div className="pt-2 pb-1 mb-2" style={{ maxWidth: "300px", margin: "0 auto" }}> : !("situation" in question) && <div className="mb-2" style={{ maxWidth: "300px", margin: "0 auto" }}>
<Examples opts={opts}> <Examples lineHeight={1} opts={opts}>
{/* @ts-ignore TODO: REMOVE AS P_INFLE */} {/* @ts-ignore TODO: REMOVE AS P_INFLE */}
{modExs(question.phrase.ps, withBa)[0]} {modExs(question.phrase.ps, withBa)[0]}
</Examples> </Examples>
{question.phrase.e && question.phrase.e.map((e, i) => ( {question.phrase.e && question.phrase.e.map((e, i) => (
<div key={e+i} className="text-muted mb-1">{e}</div> <div key={e+i} className="text-muted">{e}</div>
))} ))}
<div className="lead text-muted">{humanReadableTense(question.EPS.equative.tense)} equative</div> <div>{humanReadableTense(question.EPS.equative.tense)} equative</div>
</div> </div>
} }
{level === "allIdentify" || "situation" in question ? <div className="text-center"> {level === "allIdentify" || "situation" in question ? <div className="text-center">
@ -376,7 +376,7 @@ export default function EquativeGame({ id, link, level }: { id: string, link: st
with <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in the <span style={{ color: kidsColor }}>kids' section</span> with <InlinePs opts={opts}>{grammarUnits.baParticle}</InlinePs> in the <span style={{ color: kidsColor }}>kids' section</span>
</label> </label>
</div> </div>
<div className="my-3" style={{ maxWidth: "200px", margin: "0 auto" }}> <div className="my-1" style={{ maxWidth: "200px", margin: "0 auto" }}>
<input <input
type="text" type="text"
className="form-control" className="form-control"