Polishing

html/css/stylesheet.css

@@ -1,6 +1,7 @@
 body{
 	background-color: #94969A;
 	padding-top: 50px;
+	height: 100vh;
 }
 
 a.divlink{

html/javascript/request.js

@@ -66,7 +66,7 @@ function show(){
 	//iterate through the hardcoded device DB and select all the ones that match the selected option
 	for(var i = 0; i < devices.length; i++){
 		if((type.localeCompare(devices[i].hardware) == 0 || type.localeCompare(devices[i].software) == 0) && !isUnavailable(i)){
-			html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/' + devices[i].hardware + '.png" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><button class = "requestbutton" id = "button' + (i+1) + '" type="button">Order device</button></div></div><br>'
+			html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/' + devices[i].hardware + '.png" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><button class = "requestbutton" id = "button' + (i+1) + '" type="button">Order device</button></div></div><br><br>'
 		}
 	}
 

html/javascript/shoppingCart.js

@@ -75,6 +75,7 @@ function show(){
 	var cart = getCartItems();												//get all the cart items you want to show
 	var html = '';															//html string initially empty
 	if(cart.length !== 0){													//only continue if there are cart items
+		html += '<p>Tickets have been generated below based on your desired selections.</p><br>'
 		for(var i = 0; i < cart.length; i++){								//iterate cart
 			var id = cart[i];												//this gets the id value from the cart
 			for(var j = 0; j < devices.length; j++){						//iterate device list

html/webpages/requestPage.html

@@ -18,13 +18,17 @@
         display: inline-block; 
         position: absolute; 
         padding-left: 30px;
+        overflow-y: scroll;
+        width: 100%;
+        height: 100%;
     }
 
     div.deviceContainer{
       border: solid; 
       border-width: thin; 
       padding: 15px;
       background-color: #E9EAEB;
+      display: inline-block;
     }
 
     div.imgContainer{
@@ -40,7 +44,6 @@
       display: inline-block; 
       width: 200px; 
       text-align: center; 
-      vertical-align: center;
     }
 
     button.requestbutton{
@@ -51,8 +54,7 @@
     div.sidebar{
       display: inline-block; 
       border-right-style: solid; 
-      height: 100%; 
-      width: 200px;
+      height: 100vh; 
       background-color: #E9EAEB;
     }
 
@@ -61,13 +63,14 @@
       top: 50%;
       left: 50%;
       position: fixed;
-      width: 100px;
-      height: 70px;
-      line-height: 70px;
+      width: 155px;
+      height: 85px;
+      line-height: 85px;
       text-align: center;
       background-color: #FBC600;
       border: solid;
       border-color: #3B3C43;
+      border-radius: 5px;
     }
 
     ul.nav{

html/webpages/shoppingCart.html

@@ -18,8 +18,7 @@
             div.sidebar{
                 display: inline-block; 
                 border-right-style: solid; 
-                height: 100%; 
-                width: 200px;
+                height: 100vh;
                 background-color: #E9EAEB;
             }
 
@@ -31,6 +30,7 @@
                 display: inline-block; 
                 position: absolute; 
                 padding-left: 30px;
+                width: 100%;
             }
 
             div.ticket{
@@ -57,9 +57,9 @@
           <ul class="nav nav-sidebar">
             <h4>Shopping Cart Options</h4>
             <li class = "option" id = "os"><a href="#">Order Selected</a></li>
-            <li class = "option" id = "ds"><a href="#">Delete Selected</a></li>
+            <li class = "option" id = "ds"><a href="#">Remove Selected From Cart</a></li>
             <li class = "option" id = "oa"><a href="#">Order All</a></li>
-            <li class = "option" id = "da"><a href="#">Delete All</a></li>
+            <li class = "option" id = "da"><a href="#">Remove All From Cart</a></li>
           </ul>
         </div>