From 32574c9e1c8398239ca3bd32017cfc0f6f518169 Mon Sep 17 00:00:00 2001
From: Connor L Jackson <connor.jackson@uconn.edu>
Date: Sat, 3 Dec 2016 14:27:15 -0500
Subject: [PATCH] Fixed position left sidebar

---
 html/css/stylesheet.css         | 19 +++++++++++++++++++
 html/javascript/listing.js      |  2 +-
 html/webpages/listingPage.html  |  7 +++++--
 html/webpages/returnPage.html   | 12 ------------
 html/webpages/shoppingCart.html | 14 --------------
 5 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/html/css/stylesheet.css b/html/css/stylesheet.css
index d2fe167..02d3699 100644
--- a/html/css/stylesheet.css
+++ b/html/css/stylesheet.css
@@ -8,3 +8,22 @@ a.divlink{
 	color: black;
 }
 
+div.sidebar{
+    display: inline-block; 
+    border-right-style: solid; 
+    height: 100vh;
+    background-color: #E9EAEB;
+    width: 300px;
+    position: fixed;
+}
+
+div.displayDevice{
+    display: inline-block; 
+    position: absolute; 
+    padding-left: 30px;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    left: 300px;
+}
+
diff --git a/html/javascript/listing.js b/html/javascript/listing.js
index 88a7793..1723e54 100644
--- a/html/javascript/listing.js
+++ b/html/javascript/listing.js
@@ -56,7 +56,7 @@ function show(){
 	
 	for(var i = 0; i < devices.length; i++){
 		if(type.localeCompare(devices[i].hardware) == 0 || type.localeCompare(devices[i].software) == 0){
-			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></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></div></div><br><br>'
 		}
 	}
 	
diff --git a/html/webpages/listingPage.html b/html/webpages/listingPage.html
index 1159d64..9a72bf7 100644
--- a/html/webpages/listingPage.html
+++ b/html/webpages/listingPage.html
@@ -18,6 +18,9 @@
         display: inline-block; 
         position: absolute; 
         padding-left: 30px;
+        overflow-y: scroll;
+        width: 100%;
+        height: 100%;
     }
 
     div.deviceContainer{
@@ -25,6 +28,7 @@
       border-width: thin; 
       padding: 15px;
       background-color: #E9EAEB;
+      display: inline-block;
     }
 
     div.imgContainer{
@@ -46,8 +50,7 @@
     div.sidebar{
       display: inline-block; 
       border-right-style: solid; 
-      height: 100%; 
-      width: 200px;
+      height: 100vh; 
       background-color: #E9EAEB;
     }
 
diff --git a/html/webpages/returnPage.html b/html/webpages/returnPage.html
index 058a87b..df616cc 100644
--- a/html/webpages/returnPage.html
+++ b/html/webpages/returnPage.html
@@ -13,11 +13,6 @@
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">
   <style>
-    div.displayDevice{
-      display: inline-block; 
-      position: absolute; 
-      padding-left: 30px;
-    }
 
     div.deviceContainer{
       border: solid; 
@@ -47,13 +42,6 @@
       width: 200px; 
     }
 
-    div.sidebar{
-      display: inline-block; 
-      border-right-style: solid; 
-      height: 100vh;
-      background-color: #E9EAEB;
-    }
-
     ul.nav{
       padding: 0px;
     }
diff --git a/html/webpages/shoppingCart.html b/html/webpages/shoppingCart.html
index 1c895fb..3c337ce 100644
--- a/html/webpages/shoppingCart.html
+++ b/html/webpages/shoppingCart.html
@@ -15,24 +15,10 @@
         <link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">
 
         <style>
-            div.sidebar{
-                display: inline-block; 
-                border-right-style: solid; 
-                height: 100vh;
-                background-color: #E9EAEB;
-            }
-
             ul.nav{
                 padding: 0px;
             }
 
-            div.displayDevice{
-                display: inline-block; 
-                position: absolute; 
-                padding-left: 30px;
-                width: 100%;
-            }
-
             div.ticket{
                 background-image: url('../imgs/ticket.png');
                 display: inline-block;