better formatting to fit on phone for equative game
This commit is contained in:
parent
4212da62c8
commit
53d2628408
|
@ -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>
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue