From 2889e388e4ca397b2127c561a9434893b0907db7 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Fri, 26 Apr 2019 13:23:30 +1000
Subject: [PATCH] more menu

---
 client/cryps.css                              | 26 ++++++++--
 .../src/components/instance.create.form.jsx   | 52 +++++++++----------
 client/src/components/menu.component.jsx      |  2 +-
 3 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/client/cryps.css b/client/cryps.css
index e17c3cc9..808faff3 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -289,16 +289,31 @@ header {
 }
 
 .menu-instance-btn {
-    box-sizing: border-box;
     flex: 1 1 100%;
-    font-size: 1.5em;
-    border-width: 2px;
-    padding: 0.5em;
-    margin-right: 0.5em;
+    font-size: 1.2em;
+}
+
+.create-form {
+    flex: 1;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    border: 1px solid whitesmoke;
+    padding: 1em;
+    margin-bottom: 1.5em;
+}
+
+.create-form select, .create-form input, .create-form label {
+    margin: 0;
 }
 
 .create-form button {
+    flex: 0 1 25%;
+    font-size: 1.5em;
     display: block;
+    margin-bottom: 0;
 }
 
 /*
@@ -415,6 +430,7 @@ header {
 table {
     table-layout: fixed;
     width: 100%;
+    margin-bottom: 2em;
 }
 
 table td {
diff --git a/client/src/components/instance.create.form.jsx b/client/src/components/instance.create.form.jsx
index c26b3111..3e9cc9d0 100644
--- a/client/src/components/instance.create.form.jsx
+++ b/client/src/components/instance.create.form.jsx
@@ -51,34 +51,30 @@ class InstanceCreateForm extends Component {
 
     render() {
         return (
-            <div
-                className="">
-                <div className="create-form">
-                    <div>+</div>
-                    <label>instance name</label>
-                    <input
-                        className="login-input"
-                        type="text"
-                        value={this.state.name}
-                        placeholder="name"
-                        onChange={this.nameChange}
-                    />
-                    <label htmlFor="playerSelect">players</label>
-                    <select id="playerSelect"
-                        onChange={this.playersChange}
-                        >
-                        <option value={1}>pve</option>
-                        <option selected value={2}>2</option>
-                        <option value={4}>4</option>
-                        <option value={8}>8</option>
-                        <option value={16}>16</option>
-                    </select>
-                    <button
-                        onClick={this.handleSubmit}
-                        type="submit">
-                        create
-                    </button>
-                </div>
+            <div className="create-form">
+                <label>instance name</label>
+                <input
+                    className="login-input"
+                    type="text"
+                    value={this.state.name}
+                    placeholder="name"
+                    onChange={this.nameChange}
+                />
+                <label htmlFor="playerSelect">players</label>
+                <select id="playerSelect"
+                    onChange={this.playersChange}
+                    >
+                    <option value={1}>pve</option>
+                    <option selected value={2}>2</option>
+                    <option value={4}>4</option>
+                    <option value={8}>8</option>
+                    <option value={16}>16</option>
+                </select>
+                <button
+                    onClick={this.handleSubmit}
+                    type="submit">
+                    +
+                </button>
             </div>
         );
     }
diff --git a/client/src/components/menu.component.jsx b/client/src/components/menu.component.jsx
index 4fbb32e3..6a0d1305 100644
--- a/client/src/components/menu.component.jsx
+++ b/client/src/components/menu.component.jsx
@@ -80,8 +80,8 @@ function Menu(args) {
                         {instancePanels}
                     </tbody>
                 </table>
-                {mmSet}
                 <InstanceCreateForm />
+                {mmSet}
             </section>
         );
     }