fixed scrolling in browse window

tash-had · Jul 1, 2018 · f73d3c8 · f73d3c8
1 parent 9603286
commit f73d3c8
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 17 deletions.
diff --git a/browse.css b/browse.css
@@ -39,6 +39,15 @@ img.hover-shadow {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
-#selectedImageDiv {
-    text-align: center;
+#selectedImageDiv{
+    position: fixed;
+    text-align: center !important;
+    vertical-align: middle;
+    margin-left: 35%; 
+    margin-top: 5%; 
+    /* width: 70%;  */
+}
+
+#folderContentsColDiv{
+    margin-top: 2%; 
 }
diff --git a/browse.html b/browse.html
@@ -9,20 +9,23 @@
     <link rel="stylesheet" href="browse.css">
 </head>
 <body>
-    <nav>
-        <div class="nav-wrapper" style="background-color: #2196fe">
-            <a class="brand-logo center" >CheapTags</a>
-        </div>
-    </nav>
-    <div id="contentDiv" class="row">
-        <div id="folderContentsColDiv" class="column">
-        </div>
-        <div id="selectedImageDiv" class="column">
-                <img id="selectedImg" width="100%" src="" alt="">
-        </div>
+    <div class="navbar-fixed">
+        <nav>
+            <div class="nav-wrapper" style="background-color: #2196fe">
+                <a class="brand-logo center" >CheapTags</a>
+            </div>
+        </nav>
     </div>
 
-    <!-- Modal Structure -->
+<div id="contentDiv" class="row">
+    <div id="folderContentsColDiv" class="column">
+    </div>
+    <div id="selectedImageDiv" class="column">
+        <img id="selectedImg" width="100%" src="" alt="">
+    </div>
+</div>
+
+<!-- Modal Structure -->
   <div id="noPicturesAlert" class="modal">
     <div class="modal-content">
         <h6>No Pictures</h6>

diff --git a/browse.js b/browse.js
@@ -55,7 +55,7 @@ function renderPictures(picPathArr){
         const img = document.createElement("img"); 
         img.className = "folderImage hover-shadow cursor"; 
         img.src = picPath; 
-        img.style = "width:60%"; 
+        img.style = "width:70%"; 
         img.addEventListener("click", function(){
             setSelectedImage(picPath); 
         });
@@ -72,4 +72,5 @@ function sendNoPicsFoundErr(){
 function setSelectedImage(path){
     let selectedImg = document.getElementById("selectedImg"); 
     selectedImg.src = path;
+    selectedImg.style = "width:200%; height:200%;"; 
 }
diff --git a/home.css b/home.css
@@ -1,5 +1,7 @@
 #btnContainer{
     text-align: center;
+    margin-top: 20%;    
+
 }
 
 .btnDiv{
@@ -9,5 +11,4 @@
 .btn{
     background-color: #2196fe !important;
     width: 200px !important;
-
-}
+}