fixed column responsiveness, added contact logic, added q string fetcher

src/components/MedalPlayer.jsx

@@ -1,60 +0,0 @@
-import React from 'react';
-
-export class MedalPlayer extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            clip: null
-        }
-    }
-
-    componentDidMount() {
-        fetch("https://developers.medal.tv/v1/latest?userId=215577&limit=1", {
-            method: 'get',
-            headers: {
-                'content-type': "application/json",
-                'accept': "application/json",
-                'authorization': 'pub_RwznDA6FJLbPmRMSBH57iJetpujJUu6a'
-            }
-        }).then(async response => {
-            let j = await response.json();
-            await this.setState({
-                clip: j.contentObjects[0]
-            })
-        })
-    }
-
-    playerRenderer() {
-        if (this.state.clip) {
-            return (
-                <div id={"player"}>
-                    <div id={"iframe"}>
-                        <iframe
-                            width={"640"}
-                            height={"360"}
-                            style={{maxWidth: "100vw"}}
-                            title={"MedalPlayer"}
-                            src={this.state.clip.directClipUrl}
-                            frameBorder={"0"}
-                            allow={"autoplay"}
-                            allowFullScreen
-                        >
-                        </iframe>
-                    </div>
-                    <p className={"cliptitle"}>{this.state.clip.contentTitle} -- recorded with <span className={"medaltv"}>Medal.tv</span></p>
-                </div>
-            )
-        } else {
-            return (
-                <div id={"player"}>
-                    <p>wasn't able to get response</p>
-                </div>
-            )
-        }
-    }
-
-    render() {
-        if (this.state.clip !== null) return this.playerRenderer()
-    }
-}

src/components/PageComponents.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
 // components
-import { MedalPlayer } from "./MedalPlayer";
+import { Href, QueryStringObject } from "./Utils";
-import { Href } from "./Utils";
 
 export class ShowcaseBar extends React.Component {
     render() {
@@ -26,8 +25,7 @@ export class ShowcaseBar extends React.Component {
 export class ShowcaseColumns extends React.Component {
     render() {
         return (
-            <div style={{ paddingLeft: "19vw" }}>
+                <div style={{ maxHeight:"93vh", height:"40%" }} id={"bar-column"} className={"row"}>
-                <div style={{ height:"100vh", paddingRight:"0 50vw" }} id={"bar-column"} className={"row"}>
                     <div className={"column"}>
                         <p className={"column-header"}>
                             {this.props.column1.title}
@@ -53,7 +51,6 @@ export class ShowcaseColumns extends React.Component {
                         </p>
                     </div>
                 </div>
-            </div>
         )
     }
 }
@@ -76,24 +73,88 @@ export class Footer extends React.Component {
 }
 
 export class ContactForm extends React.Component {
-    sendResponse() {
+    sendResponse(obj) {
-        // todo: logic to send message via api endpoint
+        console.log(obj)
+        if (!obj.name || !obj.message || !obj.email) {
+            document.getElementById("notification").innerText = "ensure all fields are filled out"
+            setTimeout(() => {
+                document.getElementById("notification").innerText = "";
+            }, 5000)
+        } else {
+            fetch("https://api.zephmakes.tech/v2/tools/contact", {
+                method: 'post',
+                headers: {
+                    'content-type': 'application/json'
+                },
+                body: JSON.stringify({
+                    email: obj.email,
+                    subject: obj.name,
+                    message: obj.message
+                })
+            })
+                .then(response => {
+                    if (response.ok) window.location.href = "/?ref=contact"
+                    else {
+                        document.getElementById("notification").innerText = "something went wrong, server returned status code " + response.status
+                        setTimeout(() => {
+                            document.getElementById("notification").innerText = "";
+                        }, 5000)
+                    }
+                })
+                .catch(err => {
+                    document.getElementById("notification").innerText = "something went wrong!"
+                    setTimeout(() => {
+                        document.getElementById("notification").innerText = "";
+                    }, 5000)
+                })
+        }
     }
 
     render() {
         return (
             <div className={"form"}>
                 <span className={"field-item"}>
-                    <input type={"text"} className={"fields"} name={"name"} placeholder={"Name.."} />
+                    <input type={"text"} className={"fields"} id="name" name={"name"} placeholder={"Name.."} />
                 </span>
                 <span className={"field-item"}>
-                    <input type={"email"} className={"fields"} name={"email"} placeholder={"Email.."} />
+                    <input type={"email"} className={"fields"} id={"email"} name={"email"} placeholder={"Email.."} />
                 </span>
                 <br />
                 <br />
                 <span>
-                    <textarea name={"message"} style={{ textAlign: "center", }} className={"fields message"} placeholder={"Message.."}></textarea>
+                    <textarea id={"message"} name={"message"} style={{ textAlign: "center" }} className={"fields message"} placeholder={"Message.."}></textarea>
                 </span>
+
+                <button
+                    type={"button"}
+                    id={"submit-button"}
+                    onClick={() => this.sendResponse({
+                        "email": document.getElementById("email").value,
+                        "name": document.getElementById("name").value,
+                        "message": document.getElementById("message").value
+                    })}
+                >Submit</button>
+                <p id={"notification"}></p>
+            </div>
+        )
+    }
+}
+
+export class NotiModal extends React.Component {
+    componentDidMount() {
+        let div = document.getElementById("modal_container");
+        setTimeout(() => {
+            div.style.display = "none";
+        },10000)
+    }
+
+    render() {
+        return (
+            <div id={"modal_container"}>
+                <div id={"modal"}>
+                    <p className={"modal_header"}>{this.props.headline}</p>
+                    <p className={"modal_subheading"}>{this.props.subheading}</p>
+                </div>
             </div>
         )
     }
@@ -110,7 +171,7 @@ export class NotFound extends React.Component {
             }
             if (e.key.toLowerCase() === "backspace") {
                 keys.pop();
-            } else if (keys.join('') === "thisisnotadrill") {
+            } else if (keys.join('') === "capybara") {
                 if (count >= 5) {
                     window.location.href = "/capy";
                 } else {
@@ -124,7 +185,7 @@ export class NotFound extends React.Component {
                         count++;
 
                         console.log("count: " + count)
-                    }, 4000)
+                    }, 3000)
                 }
             }
         })
@@ -132,7 +193,7 @@ export class NotFound extends React.Component {
 
     render() {
         return (
-            <div style={{ backgroundColor: "black", height:"100vh", textAlign: "center", color:"white" }} id={"404"}>
+            <div style={{ backgroundColor: "black", height:"90vh", textAlign: "center", color:"white" }} id={"404"}>
                 <img width={"350"} alt={"jeremi"} src={"https://im3.ezgif.com/tmp/ezgif-3-b699b91275.gif"}/>
                 <span style={{ fontSize: "20px" }}>
                     <h3>well that's not good.</h3>
@@ -146,4 +207,63 @@ export class NotFound extends React.Component {
             </div>
         )
     }
+}
+
+export class MedalPlayer extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            clip: null
+        }
+    }
+
+    componentDidMount() {
+        fetch("https://developers.medal.tv/v1/latest?userId=215577&limit=1", {
+            method: 'get',
+            headers: {
+                'content-type': "application/json",
+                'accept': "application/json",
+                'authorization': 'pub_RwznDA6FJLbPmRMSBH57iJetpujJUu6a'
+            }
+        }).then(async response => {
+            let j = await response.json();
+            await this.setState({
+                clip: j.contentObjects[0]
+            })
+        })
+    }
+
+    playerRenderer() {
+        if (this.state.clip) {
+            return (
+                <div id={"player"} className={"center"}>
+                    <div id={"iframe"}>
+                        <iframe
+                            width={"640"}
+                            height={"360"}
+                            style={{maxWidth: "100vw"}}
+                            title={"MedalPlayer"}
+                            src={this.state.clip.directClipUrl}
+                            frameBorder={"0"}
+                            allow={"autoplay"}
+                            allowFullScreen
+                        >
+                        </iframe>
+                    </div>
+                    <p className={"cliptitle"}>{this.state.clip.contentTitle} -- recorded with <span className={"medaltv"}>Medal.tv</span></p>
+                </div>
+            )
+        } else {
+            return (
+                <div id={"player"}>
+                    <p>wasn't able to get response</p>
+                </div>
+            )
+        }
+    }
+
+    render() {
+        if (this.state.clip !== null) return this.playerRenderer()
+    }
 }

src/components/Pages/Home.jsx

@@ -1,9 +1,14 @@
 import React from 'react';
 
 // components
-import { ShowcaseBar,ShowcaseColumns } from '../PageComponents';
+import { ShowcaseBar,ShowcaseColumns,NotiModal,MedalPlayer } from '../PageComponents';
+import { QueryStringObject } from "../Utils";
 
 export class Home extends React.Component {
+    componentDidMount() {
+        console.log(QueryStringObject("ref"))
+    }
+
     render() {
         return (
             <div id={"home_page"}>
@@ -13,7 +18,7 @@ export class Home extends React.Component {
                     column1={
                         {
                             title: "wow cool stuff i've been workin on extra long too",
-                            description: "look at me go"
+                            description: "look at me go, super fast. anyway so i was like and then but he and she and they and lololoolollolol"
                         }
                     }
                     column2={
@@ -24,11 +29,20 @@ export class Home extends React.Component {
                     }
                     column3={
                         {
-                            title: "columns! pog pog pog pog pog pog pog pog pog pog pog pogpo ogpogpogpggpogogp'oi",
+                            title: "columns! pretty cool, right? like i said before?",
-                            description: "The Tsunami wave crashed against the raised houses and broke the pilings as if they were toothpicks."
+                            description: "The Tsunami wave crashed against the raised houses and broke the pilings as if they were toothpicks. wowowowowoo wowowwowoow wowowowowo"
                         }
                     }
                     />
+
+                {/*<MedalPlayer/>*/}
+
+                { QueryStringObject("ref") === "contact"
+                ? <React.Fragment>
+                        <NotiModal headline={"contact success!"} subheading={"i sent your message :)"} />
+                    </React.Fragment>
+                : ""
+                }
             </div>
         )
     }

src/components/Utils.jsx

@@ -10,4 +10,11 @@ export class Href extends React.Component {
             >{this.props.content}</a>
         )
     }
+}
+
+export function QueryStringObject(string) {
+    let params = new URLSearchParams(window.location.search);
+
+    if (params.get(string)) return params.get(string);
+    else return false;
 }

src/styling/main.css

@@ -3,7 +3,12 @@ html, body {
     padding:0;
     background-color:#3E3E3E;
     font-family: 'IBM Plex Sans', sans-serif;
-    overflow-x:hidden;
+    -ms-overflow-style:none;
+    scrollbar-width:none;
+}
+
+body::-webkit-scrollbar {
+    display:none;
 }
 
 /* nav styling */
@@ -71,36 +76,55 @@ html, body {
     margin:0;
 }
 
+@media screen and (min-width: 992px) {
+    .column {
+        width: 50%;
+        float:none;
+    }
+}
+
+@media screen and (min-width: 600px) {
+    .row {
+        padding-left:19%;
+    }
+
+    .column {
+        width: 75%;
+        float:none;
+    }
+}
+
+@media screen and (min-width:1100px) {
+    .column {
+        width: 25%;
+        float: left;
+    }
+}
+
 .column {
-    width:25%;
+    height:510px;
-    height:55vh;
     background-color:gray;
     border:3px black solid;
-    float:left;
 }
 
 .column-header {
     float:left;
-    width:90%;
+    width:95%;
     font-size:25px;
     padding:0 1vw;
+    position:relative;
 }
 
 .column-subheader {
     padding: 0 1vw;
 }
 
-@media screen and (min-width:900px) {
+#player {
-    #clip {
-        padding:10vh 15vw;
-    }
-}
-
-#iframe {
     position:relative;
+    padding-top:10px;
+    padding-bottom:10vh;
 }
 
-
 .cliptitle {
     color:white;
 }
@@ -146,9 +170,31 @@ a:hover {
     padding:0 10px;
 }
 
+#modal {
+    position:fixed;
+    z-index:10;
+    bottom:0;
+    left:0;
+    height:25%;
+    background-color:black;
+    color:white;
+    padding:2vh 2vw;
+    border-top-right-radius:30%;
+}
+
+.modal_header {
+    padding-left:10px;
+}
+
+.center {
+    margin-left: auto;
+    margin-right:auto;
+    text-align:center;
+}
+
 @keyframes goRight {
     from {
-        transform: translate(0,0);
+        transform: translate(-250px,0);
     }
 
     to {