stub #/latl route components
This commit is contained in:
parent
4b77f69cd3
commit
b9b30014c7
6 changed files with 59 additions and 6 deletions
|
@ -28,7 +28,7 @@ const PhonoChangeApplier = () => {
|
|||
|
||||
<Route exact path="/latl">
|
||||
<Link to="/">Back to GUI</Link>
|
||||
<div className="PhonoChangeApplier--gui">
|
||||
<div className="PhonoChangeApplier PhonoChangeApplier--latl">
|
||||
<Latl latl={latl} dispatch={dispatch}/>
|
||||
<LatlOutput results={results} options={options} dispatch={dispatch}/>
|
||||
</div>
|
||||
|
@ -36,7 +36,7 @@ const PhonoChangeApplier = () => {
|
|||
|
||||
<Route exact path="/">
|
||||
<Link to="/latl">LATL</Link>
|
||||
<div className="PhonoChangeApplier--gui" data-testid="PhonoChangeApplier">
|
||||
<div className="PhonoChangeApplier PhonoChangeApplier--gui" data-testid="PhonoChangeApplier">
|
||||
<ProtoLang lexicon={lexicon} dispatch={dispatch}/>
|
||||
<Features phones={phones} features={features} dispatch={dispatch}/>
|
||||
<Epochs epochs={epochs} errors={errors} dispatch={dispatch} />
|
||||
|
|
|
@ -41,6 +41,12 @@ div.App {
|
|||
}
|
||||
}
|
||||
|
||||
div.PhonoChangeApplier--latl {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
}
|
||||
|
||||
button.form, input[type="submit"].form, input[type="button"].form {
|
||||
height: 2em;
|
||||
border-radius: 0.25em;
|
||||
|
|
|
@ -1,9 +1,16 @@
|
|||
import React from 'react';
|
||||
import './Latl.scss';
|
||||
|
||||
const Latl = ({latl, dispatch}) => {
|
||||
const { innerWidth, innerHeight } = window;
|
||||
console.log(innerWidth, innerHeight)
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
<div className="Latl">
|
||||
<h3>.LATL</h3>
|
||||
<textarea name="latl" id="latl"
|
||||
cols={'' + Math.floor(innerWidth / 15)} rows={'' + Math.floor(innerHeight / 30)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
3
src/components/Latl.scss
Normal file
3
src/components/Latl.scss
Normal file
|
@ -0,0 +1,3 @@
|
|||
div.Latl {
|
||||
min-width: 80vw;
|
||||
}
|
|
@ -1,9 +1,37 @@
|
|||
import React from 'react';
|
||||
import './LatlOutput.scss';
|
||||
|
||||
const LatlOutput = ({results, options, dispatch}) => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
<div className="LatlOutput">
|
||||
<h3>Output</h3>
|
||||
<form action={() => {}}>
|
||||
<input
|
||||
className="form form--remove"
|
||||
type="submit"
|
||||
onClick={e=>{e.preventDefault()}}
|
||||
value="Clear"
|
||||
/>
|
||||
|
||||
<input
|
||||
id="Parse"
|
||||
name="Parse"
|
||||
className="form form--add"
|
||||
type="submit"
|
||||
onClick={e=>{e.preventDefault()}}
|
||||
value="Parse"
|
||||
/>
|
||||
|
||||
<input
|
||||
id="Run"
|
||||
name="Run"
|
||||
className="form form--add"
|
||||
type="submit"
|
||||
onClick={e=>{e.preventDefault()}}
|
||||
value="Run"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
9
src/components/LatlOutput.scss
Normal file
9
src/components/LatlOutput.scss
Normal file
|
@ -0,0 +1,9 @@
|
|||
div.LatlOutput {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, min-max(10em, 1fr));
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue