Reconfigure page layout, reposition buttons and app name

ontoneio · Nov 22, 2017 · fee429e · fee429e
1 parent 3c3eae8
commit fee429e
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 25 deletions.
diff --git a/public/poetion.js b/public/poetion.js
diff --git a/public/style.css b/public/style.css
@@ -20,6 +20,9 @@ body {
 
 .app-name {
   z-index: 3;
+  grid-area: name;
+  justify-self: center;
+  align-self: center;
 }
 
 .poem-canvas {
@@ -49,12 +52,16 @@ body {
 }
 
 .button-bar {
+  grid-area: btn-bar;
+  justify-self: center;
+  align-self: center;
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  left: 62.5px;
+  flex-grow: 3;
+  /* left: 62.5px; */
 }
 
 .edit-btns {
@@ -98,12 +105,15 @@ body {
   left: 0px;
   right: 0px;
   min-width: 100%;
-  height: 150px;
-  display: flex;
+  height: 100px;
+  z-index: 2;
+  /* display: flex;
   flex-direction: row;
   justify-content: space-evenly;
-  align-items: center;
-  z-index: 2;
+  align-items: center; */
+  display: grid;
+  grid-template-columns: 1.5fr 6fr 1.5fr;
+  grid-template-areas: "name btn-bar close-btn"
 }
 
 /* .form-wrap {
@@ -113,19 +123,35 @@ body {
 } */
 
 .sliding-form {
+  position: sticky;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  position: fixed;
+  justify-content: space-between;
   z-index: 1;
+  width: 650px;
+  max-height: 475px;
 }
 
 .close-btn {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
+  /* flex-grow: 1; */
+  grid-area: close-btn;
+  justify-self: center;
+  align-self: center;
   visibility: hidden;
-  margin-left: 20%
 }
 
+.form-field {
+  margin: 5px 0px;
+  height: 50px;
+}
+.poem-field {
+  margin: 5px 0px;
+  line-height: 20px;
+}
+* {
+  border: .25px solid red;
+}
diff --git a/src/client/components/Btm-Util-Bar/index.js b/src/client/components/Btm-Util-Bar/index.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Name from '../Name';
 
 class BottomUtilityBar extends Component {
   constructor(props) {
@@ -30,8 +31,8 @@ class BottomUtilityBar extends Component {
     event.preventDefault();
     const artist = new window.Konva.TextPath({ text: this.state.artist });
     const poem = new window.Konva.TextPath({ text: this.state.poem });
-    const artistForm = document.querySelector('.artist-field');
-    const poemForm = document.querySelector('.poem-field');
+    const artistForm = document.querySelector('#artist-field');
+    const poemForm = document.querySelector('#poem-field');
     artistForm.value = '';
     poemForm.value = '';
   }
@@ -73,7 +74,10 @@ class BottomUtilityBar extends Component {
 
         <div className="bottom-bar">
 
-          <div className=""></div>
+          <div className="app-name">
+            <Name />
+          </div>
+
 
           <div className="button-bar">
             <div className="edit-btns" onClick={this.handleNewPoemClick}>
@@ -89,26 +93,25 @@ class BottomUtilityBar extends Component {
             </div>
           </div>
 
-          <div className="">
-            <div className="close-btn" onClick={this.handleCloseClick}>
-              <div className="edit-btns">                        
-                    <img src="https://res.cloudinary.com/ontoneio/image/upload/c_scale,w_75/v1511343902/Poet-ion/close.png" alt="Close Poem Create/Edit View"/>          
-              </div>
+          <div className="close-btn" onClick={this.handleCloseClick}>
+            <div className="edit-btns">                        
+                  <img src="https://res.cloudinary.com/ontoneio/image/upload/c_scale,w_75/v1511343902/Poet-ion/close.png" alt="Close Poem Create/Edit View"/>          
             </div>
           </div>
+
 
         </div>
 
 
-          <form className="sliding-form" onSubmit={this.handleSubmit}>
+          <div className="sliding-form" onSubmit={this.handleSubmit}>
 
-            <input className="artist-field" placeholder="Artist Name" name="artistName" onChange={this.handleInputChange} />
+            <input id="artist-field" className="form-field" placeholder="Artist Name" name="artistName" onChange={this.handleInputChange} />
 
 
-            <textarea className="poem-field" name="poemForm" placeholder="Roses Are Red and Violets are Blue" onChange={this.handleTextAreaChange} />
+            <textarea id="poem-field" className="poem-field" placeholder="Roses Are Red and Violets are Blue" name="poemForm" onChange={this.handleTextAreaChange} />
 
             <input type="submit" value="Submit" />
-          </form>
+          </div>
 
      </div>
 

diff --git a/src/client/components/Name/index.js b/src/client/components/Name/index.js
@@ -3,7 +3,7 @@ import React, {Component} from 'react';
 class Name extends Component {
   render() {
     return (
-      <div className="app-name">
+      <div className="">
         <h1> Poetion </h1>
       </div>
     )

diff --git a/src/client/components/starter/index.js b/src/client/components/starter/index.js
@@ -11,7 +11,7 @@ export default class Starter extends Component {
     return (
 
     <div className="react-root">
-      <Name />
+      {/* <Name /> */}
       <Credits />
 
       <Stage className="poem-canvas">