fix layout & stop using <form>

waldyrious · Dec 12, 2022 · 1b52690 · 1b52690
1 parent 114ea5a
commit 1b52690
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -7,20 +7,23 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    This is a demo of rendering reStructuredText (rST) to HTML entirely in the browser,
-    using <a href="https://pyodide.org">Pyodide</a>
-    to run <a href="https://docutils.sourceforge.io">docutils</a>.
-    Source code <a href="https://pyodide.org">on GitHub</a>.
-
-    <!-- <form oninput="html_output.value=rst_input.value"> -->
-    <form>
-      <label for="rst-input">reStructuredText input</label>
-      <label for="html-output">HTML output</label>
-      <textarea name="rst_input" id="rst-input"></textarea>
-      <iframe id="html-output"></iframe>
-    </form>
-    <button onclick="rstToHtml()">Run</button>
-
+    <p>
+      This is a demo of rendering reStructuredText (rST) to HTML entirely in the browser,
+      using <a href="https://pyodide.org">Pyodide</a>
+      to run <a href="https://docutils.sourceforge.io">docutils</a>.
+      Source code <a href="https://pyodide.org">on GitHub</a>.
+    </p>
+    <div class="form">
+      <div>
+        <label for="rst-input">reStructuredText input</label>
+        <textarea name="rst_input" id="rst-input"></textarea>
+        <button onclick="rstToHtml()">Run</button>
+      </div>
+      <div>
+        <label for="html-output">HTML output</label>
+        <iframe id="html-output" frameborder="0"></iframe>
+      <div>
+    </div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -1,15 +1,24 @@
-form {
+.form {
   margin: 1em 0.5em;
-  display: grid;
-  grid-template-columns: calc((100% - 1em) / 2) calc((100% - 1em) / 2);
-  column-gap: 1em;
+  display: flex;
+  flex-grow: 1;
+}
+.form div {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
 }
 textarea, iframe {
   border: 1px solid grey;
   border-radius: 3px;
   padding: 0.5em;
   margin: 0;
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
+  flex-grow: 1;
+}
+html, body {
+    height: 100%;
+}
+body {
+    display: flex;
+    flex-direction: column;
 }