better formatting

This commit is contained in:
lingdocs 2021-10-22 15:37:26 -04:00
parent 45955a997e
commit 9466bc5ff8
2 changed files with 11 additions and 7 deletions

View File

@ -47,10 +47,14 @@ function EquativeExplorer() {
} }
return <> return <>
<TenseSelector state={state} dispatch={dispatch} /> <TenseSelector state={state} dispatch={dispatch} />
<div className="d-flex flex-row justify-content-between align-items-center mt-2"> <div className="row">
<div className="col">
<SubjectSelector state={state} dispatch={dispatch} /> <SubjectSelector state={state} dispatch={dispatch} />
</div>
<div className="col">
<PredicateSelector state={state} dispatch={dispatch} /> <PredicateSelector state={state} dispatch={dispatch} />
</div> </div>
</div>
<EquativeDisplay state={state} dispatch={dispatch} /> <EquativeDisplay state={state} dispatch={dispatch} />
</>; </>;
} }

View File

@ -41,8 +41,8 @@ export function SubjectSelector({ state, dispatch }: {
const subject = state.subjectType === "pronouns" const subject = state.subjectType === "pronouns"
? undefined ? undefined
: state.subjectsSelected[state.subjectType]; : state.subjectsSelected[state.subjectType];
return <div className="form-group mr-2 flex-fill"> return <div className="form-group">
<label htmlFor="predicate-select"><h5>Subject:</h5></label> <label htmlFor="predicate-select"><h5 className="mb-0">Subject:</h5></label>
<div className="form-check"> <div className="form-check">
<input <input
className="form-check-input" className="form-check-input"
@ -160,8 +160,8 @@ export function PredicateSelector({ state, dispatch }: {
label: makeOptionLabel(e), label: makeOptionLabel(e),
})); }));
const predicate = state.predicatesSelected[state.predicateType]; const predicate = state.predicatesSelected[state.predicateType];
return <div className="form-group ml-2 flex-fill" style={{ maxWidth: "50%" }}> return <div>
<label htmlFor="predicate-select"><h5>Predicate:</h5></label> <label htmlFor="predicate-select"><h5 className="mb-0">Predicate:</h5></label>
<div className="form-check"> <div className="form-check">
<input <input
className="form-check-input" className="form-check-input"