Merge pull request #71 from aidan-yip/preview

Added arrow text and adjusted arrow

index.html

@@ -129,6 +129,7 @@
     </div>
     <div id="background">
       <img src="./public/icons/icons8-collapse-arrow-100.png" id="arrow_up" />
+      <h2 id="arrow_text">Scroll up for more apps</h2>
       <div id="home_bar">
         <div
           class="app_icon"

script.js

@@ -15,8 +15,9 @@ function check_mobile() {
   }
 }
 
-//Arrow
+//Arrow and arrow text
 const arrow_up = document.getElementById("arrow_up");
+const arrow_text = document.getElementById("arrow_text");
 
 let isMobile =
   /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
@@ -28,6 +29,7 @@ if (isMobile) {
     alert("Please rotate to Landscape!");
   }
   arrow_up.style.display = "none";
+  arrow_text.style.display = "none";
   console.log("Mobile device detected");
 }
 
@@ -359,13 +361,25 @@ home_bar.onmouseleave = () => {
   console.log("Reset Homebar");
 };
 
-//Link onclick events
+//Link onclick and mouse events
 
 //arrow
 arrow_up.onmouseover = () => {
   arrow_up.style.cursor = "pointer";
 }
 
+arrow_up.onclick = () => {
+  scroll_container.scrollIntoView();
+}
+
+arrow_text.onmouseover = () => {
+  arrow_text.style.cursor = "pointer";
+}
+
+arrow_text.onclick = () => {
+  scroll_container.scrollIntoView();
+}
+
 //folder
 app_folder.onclick = () => {
   folder_back.style.pointerEvents = "all";

styles.css

@@ -140,14 +140,27 @@ body {
 }
 
 #arrow_up {
+  position: relative;
+  z-index: 3;
   width: 3%;
   height: 35px;
-  z-index: 4;
+  margin-left: auto;
+  margin-right: auto;
+  top: 33.5%;
+  opacity: 70%;
+}
+
+#arrow_text {
   position: relative;
+  z-index: 3;
+  color: #ffffff;
   margin-left: auto;
   margin-right: auto;
-  margin-top: 36%;
+  font-size: 90%;
+  top: 33%;
+  margin-bottom: 10px;
   opacity: 70%;
+  text-shadow: 0px 0px 45px #000000;
 }
 
 #color_input {