✨ Added go back button and styled file input button for demo page

Make-Squad · Nov 5, 2018 · cf54e28 · cf54e28
1 parent 93edf12
commit cf54e28
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 28 deletions.
diff --git a/src/components/styles.css b/src/components/styles.css
@@ -148,4 +148,19 @@ button {
 
 body {
   font-size: 1.2em;
+}
+
+.goBackLink {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}
+[type=file] {
+  position: absolute;
+  filter: alpha(opacity=0);
+  opacity: 0;
+}
+label.button-style {
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
diff --git a/src/pages/demo.js b/src/pages/demo.js
@@ -5,7 +5,6 @@ import Clarifai from 'clarifai'
 
 import '../components/styles.css'
 
-
 const app = new Clarifai.App({
   apiKey: '79c4cf0e37574941b6149ee9539ec9b9',
 })
@@ -36,7 +35,9 @@ class Demo extends Component {
       })
       .join(' ')
   }
-
+  goBack = () => {
+    window.history.back()
+  }
   // https://codepen.io/hartzis/pen/VvNGZP
   _handleSubmit(e) {
     e.preventDefault()
@@ -118,31 +119,41 @@ class Demo extends Component {
     }
 
     return (
-      <div className="form-container">
-        <form className="form" onSubmit={e => this._handleSubmit(e)}>
-          <button className="fileInput imgPreview">{$imagePreview}</button>
-          <input
-            className="fileInput chooseFile"
-            type="file"
-            onChange={e => this._handleImageChange(e)}
-          />
-          <button
-            className="submitButton"
-            type="submit"
-            onClick={e => this._handleSubmit(e)}
-          >
-            Upload Image
-          </button>
-        </form>
-
-        <div className="infoContainer">
-          <h1>{this.state.name}</h1>
-          <p>email: {this.state.email}</p>
-          <p>phone: {this.state.phone}</p>
-          <p>
-            location: {this.state.city} {this.state.state}
-          </p>
-          <p>twitter: {this.state.twitter}</p>
+      <div>
+        <button className="goBackLink button-style" onClick={this.goBack}>
+          Go Back
+        </button>
+        <div className="form-container">
+          <form className="form" onSubmit={e => this._handleSubmit(e)}>
+            <button className="fileInput imgPreview">{$imagePreview}</button>
+            <label
+              htmlFor="fileInput"
+              className="button-style"
+            >Choose image</label>
+            <input
+              className="fileInput chooseFile"
+              id="fileInput"
+              type="file"
+              onChange={e => this._handleImageChange(e)}
+            />
+            <button
+              className="button-style"
+              type="submit"
+              onClick={e => this._handleSubmit(e)}
+            >
+              Upload Image
+            </button>
+          </form>
+
+          <div className="infoContainer">
+            <h1>{this.state.name}</h1>
+            <p>email: {this.state.email}</p>
+            <p>phone: {this.state.phone}</p>
+            <p>
+              location: {this.state.city} {this.state.state}
+            </p>
+            <p>twitter: {this.state.twitter}</p>
+          </div>
         </div>
       </div>
     )

diff --git a/src/pages/video.js b/src/pages/video.js
@@ -100,6 +100,10 @@ class Video extends Component {
     this.webcam = webcam
   }
 
+  goBack = () => {
+    window.history.back()
+  }
+
   toggleHidden () {
     this.setState({
       isHidden: !this.state.isHidden
@@ -141,7 +145,11 @@ class Video extends Component {
       )
     }
 
-    return (
+    return (<div>
+      <button className="goBackLink button-style" onClick={this.goBack}>
+              Go Back
+            </button>
+      {/* <a className='goBackLink' onClick={this.goBack}>Go Back</a> */}
       <div className="video-container">
       <div className="center">
 
@@ -187,6 +195,8 @@ class Video extends Component {
           </div>
         </div>
       </div>
+
+      </div>
     )
   }
 }