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">
|
<Route exact path="/latl">
|
||||||
<Link to="/">Back to GUI</Link>
|
<Link to="/">Back to GUI</Link>
|
||||||
<div className="PhonoChangeApplier--gui">
|
<div className="PhonoChangeApplier PhonoChangeApplier--latl">
|
||||||
<Latl latl={latl} dispatch={dispatch}/>
|
<Latl latl={latl} dispatch={dispatch}/>
|
||||||
<LatlOutput results={results} options={options} dispatch={dispatch}/>
|
<LatlOutput results={results} options={options} dispatch={dispatch}/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -36,7 +36,7 @@ const PhonoChangeApplier = () => {
|
||||||
|
|
||||||
<Route exact path="/">
|
<Route exact path="/">
|
||||||
<Link to="/latl">LATL</Link>
|
<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}/>
|
<ProtoLang lexicon={lexicon} dispatch={dispatch}/>
|
||||||
<Features phones={phones} features={features} dispatch={dispatch}/>
|
<Features phones={phones} features={features} dispatch={dispatch}/>
|
||||||
<Epochs epochs={epochs} errors={errors} 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 {
|
button.form, input[type="submit"].form, input[type="button"].form {
|
||||||
height: 2em;
|
height: 2em;
|
||||||
border-radius: 0.25em;
|
border-radius: 0.25em;
|
||||||
|
|
|
@ -1,9 +1,16 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import './Latl.scss';
|
||||||
|
|
||||||
const Latl = ({latl, dispatch}) => {
|
const Latl = ({latl, dispatch}) => {
|
||||||
|
const { innerWidth, innerHeight } = window;
|
||||||
|
console.log(innerWidth, innerHeight)
|
||||||
return (
|
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 React from 'react';
|
||||||
|
import './LatlOutput.scss';
|
||||||
|
|
||||||
const LatlOutput = ({results, options, dispatch}) => {
|
const LatlOutput = ({results, options, dispatch}) => {
|
||||||
return (
|
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