From 72821ea07e02ba9b798aaae205c8eff4924cbd60 Mon Sep 17 00:00:00 2001
From: Brandon George <bdngeorge7@gmail.com>
Date: Sun, 5 Dec 2021 15:19:50 -0500
Subject: [PATCH] Upload books UI fixed

---
 account/login.php          |  2 +-
 catalog/uploadBooks.php    | 88 ++++++++++++++++++--------------------
 scripts/form-validation.js |  4 ++
 styles/general.css         |  4 +-
 styles/login.css           |  4 +-
 styles/signup.css          |  5 +--
 styles/upload.css          | 45 +++++++++++++++++++
 7 files changed, 98 insertions(+), 54 deletions(-)
 create mode 100644 styles/upload.css
diff --git a/account/login.php b/account/login.php
index 9413bb3..c1369be 100644
--- a/account/login.php
+++ b/account/login.php
@@ -60,7 +60,7 @@
         <input type="email" id="email" name="email" placeholder="RPI Email:" class="left"><br>
         <input type="password" id="password" name="password" placeholder="Password:" class="left"><br>
         <!-- if i changed value="save" font size changes? -->
-        <input type="submit" id="lsubmit" name="submit" value="submit" class="button">
+        <input type="submit" id="lsubmit" name="submit" value="Submit" class="button">
       </form>
       <button type="button" onclick="window.location.href='signup.php'" class="button">Sign Up</button>
     </section>
diff --git a/catalog/uploadBooks.php b/catalog/uploadBooks.php
index 7c9e9db..a12fc70 100644
--- a/catalog/uploadBooks.php
+++ b/catalog/uploadBooks.php
@@ -69,7 +69,7 @@
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>TextbookBuddy</title>
-    <link rel="stylesheet" href="../styles/signup.css">
+    <link rel="stylesheet" href="../styles/upload.css">
     <link rel="stylesheet" href="../styles/general.css">
     <script 
       src="https://code.jquery.com/jquery-3.6.0.min.js" 
@@ -79,56 +79,52 @@
   </head>
   <body>
     <?php include("../includes/header.php"); ?>
-    <section class="">
+    <section class="center-items center-self body" style="margin-top: 20px;">
       <h2 class="bold"> Sell Book </h2>
 
       <form id="upload" name="login" class="form" 
-      method="post" action="uploadBooks.php"  enctype="multipart/form-data">
-        <label class="field" for="title"> Book Title:</label>
-        <input type="text" id="title" size="200" name="title" ></br>
-
-        <label class="field" for="authors"> Authors</label>
-        <input type="text" id="authors" name="authors"></br>
-
-        <label class="field" for="subj"> Subject</label>
-        <select id="subj" name="subj">
-          <?php
-            if($dbOK) {
-              $query = "select * from subjects";
-              $result = $db->query($query);
-              $numRecord = $result->num_rows;
-              for($i=0; $i < $numRecord; $i++){
-                $record = $result->fetch_assoc();
-                echo '<option value="'.$record['subjectCode'].'">'
-                      .strtoupper($record['subjectCode']). '</option>';
+        method="post" action="uploadBooks.php"  enctype="multipart/form-data" 
+        onsubmit="return validateUpload(this);">
+
+        <input type="text" id="title" size="200" name="title" placeholder="Title:"></br>
+        <input type="text" id="authors" name="authors" placeholder="Authors: (Seperate with commas)"></br>
+
+        <input type="text" id="desc" name="desc" placeholder="Description:"></br>
+        <input type="text" id="isbn" name="isbn" placeholder="ISBN:"></br>
+        <input type="number" min="0" step=".01" id="price" name="price" placeholder="Price:"></br>
+        
+          <label class="field" for="subj" style="margin-top:20px"> <strong>Subject</strong></label>
+          <select id="subj" name="subj" >
+            <?php
+              if($dbOK) {
+                $query = "select * from subjects";
+                $result = $db->query($query);
+                $numRecord = $result->num_rows;
+                for($i=0; $i < $numRecord; $i++){
+                  $record = $result->fetch_assoc();
+                  echo '<option value="'.$record['subjectCode'].'">'
+                        .strtoupper($record['subjectCode']). '</option>';
+                }
               }
-            }
-          ?>
-        </select>
-
-        <label class="field" for="desc"> Description</label>
-        <input type="text" id="desc" name="desc" class="left"></br>
-
-        <label class="field" for="isbn"> ISBN </label>
-        <input type="text" id="isbn" name="isbn" class="right"></br>
-
-        <label class="field" for="cond"> Condition </label>
-        <select id="cond" name="cond">
-          <option value="poor">Poor </option>
-          <option value="fair">Fair </option>
-          <option value="good">Good </option>
-          <option value="very good">Very Good </option>
-          <option value="like new">Like New </option>
-          <option value="new">New </option>
-        </select>
-
-        <label class="field" for="file"> Upload Image </label>
-        <input type="file" id="file" name="file"></br>
-
-        <label class="field" for="price"> Price</label>
-        <input type="number" min="0" step=".01" id="price" name="price" class="right"></br>
+            ?>
+          </select>
         
-        <input type="submit" name="submit" value="submit">
+
+          <label class="field" for="cond" style="margin-top:20px"> <strong>Condition</strong> </label>
+          <select id="cond" name="cond">
+            <option value="poor">Poor</option>
+            <option value="fair">Fair</option>
+            <option value="good">Good</option>
+            <option value="very good">Very Good</option>
+            <option value="like new">Like New</option>
+            <option value="new">New</option>
+          </select>
+        
+          <label class="field" for="file" style="margin-top:20px"> <strong>Upload Image</strong> </label>
+          <input type="file" id="file" name="file" accept="image/*"></br>
+    
+
+        <input type="submit" name="submit" value="Submit" style="margin-top:20px">
       </form>
     </section>
             
diff --git a/scripts/form-validation.js b/scripts/form-validation.js
index c4e80ab..a7dcc52 100644
--- a/scripts/form-validation.js
+++ b/scripts/form-validation.js
@@ -70,3 +70,7 @@ function validateSignUp(formObj) {
   }
   return true;
 }
+
+function validateUpload(formObj) {
+  
+}
diff --git a/styles/general.css b/styles/general.css
index 4ae0ff7..c26a012 100644
--- a/styles/general.css
+++ b/styles/general.css
@@ -8,11 +8,11 @@ header {
   height: 3.5vw;
   display: flex;
   font-weight: bold;
-  background-color: rgb(241, 239, 239);
   color: black;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid rgba(209, 209, 209, 0.555); 
+  border: 4px solid rgba(241, 239, 239, 0.555); 
+  background-color: rgba(241, 239, 239, 0.555);
 }
 
 header h1 {
diff --git a/styles/login.css b/styles/login.css
index 29c9ef2..dc4cce0 100644
--- a/styles/login.css
+++ b/styles/login.css
@@ -5,8 +5,8 @@ h2 {
 }
 
 .body {
-  background-color: rgb(241, 239, 239);
-  border: 1px solid rgb(179, 177, 177);
+  border: 4px solid rgba(241, 239, 239, 0.555); 
+  background-color: rgba(241, 239, 239, 0.555);
   display: flex;
   flex-direction: column;
   width: 50%;
diff --git a/styles/signup.css b/styles/signup.css
index 020f919..29e7332 100644
--- a/styles/signup.css
+++ b/styles/signup.css
@@ -5,9 +5,8 @@ h2 {
 }
 
 .body {
-  background-color: rgb(241, 239, 239);
-  border: 1px solid rgb(179, 177, 177);
-  display: flex;
+  border: 4px solid rgba(241, 239, 239, 0.555); 
+  background-color: rgba(241, 239, 239, 0.555);
   flex-direction: column;
   width: 50%;
   height: 60%;
diff --git a/styles/upload.css b/styles/upload.css
new file mode 100644
index 0000000..a72a730
--- /dev/null
+++ b/styles/upload.css
@@ -0,0 +1,45 @@
+h2 {
+  padding-bottom: 1vw; 
+	font-variant: small-caps;
+  font-size: 3.5vw;
+}
+
+.body {
+  border: 4px solid rgba(241, 239, 239, 0.555); 
+  background-color: rgba(241, 239, 239, 0.555);
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  height: 83%;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+input{
+  font-size: .8vw;
+  margin-top: 1em;
+  height: 2.5vw;
+  width: 80%;
+}
+input[type=submit] {
+  width: 10vw;
+  height: 2vw;
+  border:0 none;
+}
+#file {
+  margin: auto;
+  text-align: center;
+  width: 80%;
+}
+select {
+  font-size: .8vw;
+  border:0 none;
+  width: 80%;
+  height: 2vw;
+}
+
