Feat: Offer ride

Added pop up form for user to offer ride to other people See #15
lupyana · May 13, 2019 · a18f337 · a18f337
1 parent 768edd1
commit a18f337
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 2 deletions.
diff --git a/assets/css/form.css b/assets/css/form.css
@@ -0,0 +1,71 @@
+{box-sizing: border-box;}
+
+/* Button used to open the contact form - fixed at the bottom of the page */
+.open-button {
+  z-index: 8;
+  background-color: #555;
+  color: white;
+  padding: 16px 20px;
+  border: none;
+  cursor: pointer;
+  opacity: 0.8;
+  position: fixed;
+  bottom: 23px;
+  right: 28px;
+  width: 280px;
+}
+
+/* The popup form - hidden by default */
+.form-popup {
+  height: auto;
+  display: none;
+  position: fixed;
+  bottom: 0;
+  right: 15px;
+  border: 3px solid #f1f1f1;
+  z-index: 9;
+}
+
+/* Add styles to the form container */
+.form-container {
+  max-width: 300px;
+  padding: 10px;
+  background-color: white;
+}
+
+/* Full-width input fields */
+.form-container input[type=text], .form-container input[type=password] {
+  width: 100%;
+  padding: 15px;
+  margin: 5px 0 22px 0;
+  border: none;
+  background: #f1f1f1;
+}
+
+/* When the inputs get focus, do something */
+.form-container input[type=text]:focus, .form-container input[type=password]:focus {
+  background-color: #ddd;
+  outline: none;
+}
+
+/* Set a style for the submit/login button */
+.form-container .btn {
+  background-color: #4CAF50;
+  color: white;
+  padding: 16px 20px;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  margin-bottom:10px;
+  opacity: 0.8;
+}
+
+/* Add a red background color to the cancel button */
+.form-container .cancel {
+  background-color: red;
+}
+
+/* Add some hover effects to buttons */
+.form-container .btn:hover, .open-button:hover {
+  opacity: 1;
+}
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -8,6 +8,10 @@ header {
   border-bottom:  2px black solid;
   padding: 25px;
 }
+
+main {
+  min-height: 100vh;
+}
 #logo {
   font-size: 15px;
   margin: 20px;

diff --git a/assets/js/form.js b/assets/js/form.js
@@ -0,0 +1,7 @@
+function openForm() {
+  document.getElementById("myForm").style.display = "block";
+}
+
+function closeForm() {
+  document.getElementById("myForm").style.display = "none";
+}
diff --git a/pages/main.html b/pages/main.html
@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <title>Ride My Way</title>
     <link rel="stylesheet" href="../assets/css/index.css">
+    <link rel="stylesheet" href="../assets/css/form.css">
+
   </head>
   <body>
     <header>
@@ -136,9 +138,31 @@
 
         </div>
       </div>
+      <button class="open-button" onclick="openForm()">Give a Ride</button>
+      <div class="form-popup" id="myForm">
+        <form action="/action_page.php" class="form-container">
+          <h1>Wanna offer someone a ride  ?</h1>
+          <p>Just a few details</p>
+
+          <label for="ride_start"><b>Starting point</b></label>
+          <input type="text" placeholder="From" name="ride_start" required>
+
+          <label for="ride_destination"><b>Destination</b></label>
+          <input type="text" placeholder="To" name="ride_destination" required>
+
+          <label for="ride_time"><b>Prefered time</b></label>
+          <input type="text" placeholder="Time" name="ride_time" required>
+
+          <button type="submit" class="btn">Submit</button>
+          <button type="submit" class="btn cancel" onclick="closeForm()">Close</button>
+        </form>
+      </div>
     </main>
-    <!-- <footer class="text-center">
+    <footer class="text-center">
       RideMyWay &copy; 2019
-    </footer> -->
+    </footer>
+    <script type="text/javascript" src="../assets/js/form.js">
+
+    </script>
   </body>
 </html>