Fixed position left sidebar

arc12012 · Dec 3, 2016 · 32574c9 · 32574c9
1 parent ada2119
commit 32574c9
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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{
@@ -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
@@ -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
@@ -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;