From b9b30014c75b3f6084b80aa1b6a35cfb2edc4c77 Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Fri, 28 Feb 2020 18:41:42 -0800
Subject: [PATCH] stub #/latl route components

---
 src/PhonoChangeApplier.js      |  4 ++--
 src/PhonoChangeApplier.scss    |  6 ++++++
 src/components/Latl.js         | 11 +++++++++--
 src/components/Latl.scss       |  3 +++
 src/components/LatlOutput.js   | 32 ++++++++++++++++++++++++++++++--
 src/components/LatlOutput.scss |  9 +++++++++
 6 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Latl.scss
 create mode 100644 src/components/LatlOutput.scss

diff --git a/src/PhonoChangeApplier.js b/src/PhonoChangeApplier.js
index 1bae2dc..283addf 100644
--- a/src/PhonoChangeApplier.js
+++ b/src/PhonoChangeApplier.js
@@ -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} />
diff --git a/src/PhonoChangeApplier.scss b/src/PhonoChangeApplier.scss
index 214e1e6..7a05414 100644
--- a/src/PhonoChangeApplier.scss
+++ b/src/PhonoChangeApplier.scss
@@ -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;
diff --git a/src/components/Latl.js b/src/components/Latl.js
index b2762f8..89f6962 100644
--- a/src/components/Latl.js
+++ b/src/components/Latl.js
@@ -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>
   );
 }
 
diff --git a/src/components/Latl.scss b/src/components/Latl.scss
new file mode 100644
index 0000000..92c724f
--- /dev/null
+++ b/src/components/Latl.scss
@@ -0,0 +1,3 @@
+div.Latl {
+  min-width: 80vw;
+}
\ No newline at end of file
diff --git a/src/components/LatlOutput.js b/src/components/LatlOutput.js
index 9ccb8f3..ac56b20 100644
--- a/src/components/LatlOutput.js
+++ b/src/components/LatlOutput.js
@@ -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>
   );
 }
 
diff --git a/src/components/LatlOutput.scss b/src/components/LatlOutput.scss
new file mode 100644
index 0000000..5dc291c
--- /dev/null
+++ b/src/components/LatlOutput.scss
@@ -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));
+  }
+}
\ No newline at end of file