Mobile JS working!

ZachMc21 · Nov 28, 2024 · 1db0fee · 1db0fee
1 parent 59b95e4
commit 1db0fee
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 44 deletions.
diff --git a/webpage/partials/_projects.scss b/webpage/partials/_projects.scss
@@ -21,7 +21,7 @@
     padding: 20%;
     text-align: center;
     font-style: italic;
-    font-size: 1.25rem;
+    font-size: 1.5rem;
     color: v.$dark-gray;
 }
 h1.project_title {

diff --git a/webpage/projects.js b/webpage/projects.js
@@ -9,66 +9,77 @@ var numProjectCategories;
 var projectMenuDropdown;
 var mobileView;
 
+var mobileMax = 480;
 
+//Watch for window resizing
+window.addEventListener("resize", checkWindowSize);
 
 window.onload = function() {
     //Initialize global variables
     projectMenu = document.getElementById("project_menu");
     projectMenuLinks = document.getElementsByClassName("project_category");
     projectContentList = document.getElementsByClassName("project_container");
     numProjectCategories = projectMenuLinks.length;
-
-    //Watch for window resizing
-    window.addEventListener('resize', checkWindowSize);
 
     projectMenuDropdown = document.getElementById("project_dropdown");
 
     resetProjectMenu();
+    checkWindowSize();
+}
 
-    if(mobileView) {
-        projectMenuDropdown.style.display = "block";
-        console.log(projectMenuDropdown.style.display);
-
-        //If Projects button is clicked, show list of projects
-            //If list of projects is clicked, show that category
-        projectMenuDropdown.addEventListener("click", function() {
-            //If the dropdown is showing, and the button is clicked, hide the dropdown menu
-            if(projectMenuLinks[0].classList.contains("visible")) {
-                hideDropdownList();
-                resetProjectContent();
-            }
-            else {
-                showDropdownList();
-
-                //Listen for a click on one of the menu items
-                for (let i=0; i<numProjectCategories; i++) {
-                    projectMenuLinks[i].addEventListener("click", function() {
-                        hideDropdownList();
-                        resetProjectContent();
-                        setActiveDropdown(projectMenuLinks[i]);
-                        setActiveContent(projectContentList[i]);
-                    });
-                }
-            }
-        });
+function checkWindowSize() {
+    //console.log("Window size checked");
+    var currentSize = document.getElementsByTagName('body')[0].clientWidth;
+    //console.log(currentSize);
+    if(currentSize <= mobileMax) {
+        loadMobile();
     }
     else {
-        projectMenuDropdown.style.display = "none";
-        //Add an event listener to each item in projectMenuLinks
-        for (let i=0; i<numProjectCategories; i++) {
-            projectMenuLinks[i].addEventListener("click", function() {
-                resetProjectMenu();
-                resetProjectContent();
-                setActiveMenu(projectMenuLinks[i]);
-                setActiveContent(projectContentList[i]);
-            });
-        }
+        loadDesktop();
     }
 }
 
-function checkWindowSize() {
-    var mql = window.matchMedia("(max-width: 480px)");
-    mobileView = mql.matches;
+function loadDesktop() {
+    projectMenuDropdown.style.display = "none";
+    //Add an event listener to each item in projectMenuLinks
+    for (let i=0; i<numProjectCategories; i++) {
+        projectMenuLinks[i].addEventListener("click", function() {
+            resetProjectMenu();
+            resetProjectContent();
+            setActiveMenu(projectMenuLinks[i]);
+            setActiveContent(projectContentList[i]);
+        });
+    }
+    console.log("desktop JS loaded");
+}
+
+function loadMobile() {
+    projectMenuDropdown.style.display = "block";
+    //console.log(projectMenuDropdown.style.display);
+
+    //If Projects button is clicked, show list of projects
+        //If list of projects is clicked, show that category
+    projectMenuDropdown.addEventListener("click", function() {
+        //If the dropdown is showing, and the button is clicked, hide the dropdown menu
+        if(projectMenuLinks[0].classList.contains("visible")) {
+            hideDropdownList();
+            resetProjectContent();
+        }
+        else {
+            showDropdownList();
+
+            //Listen for a click on one of the menu items
+            for (let i=0; i<numProjectCategories; i++) {
+                projectMenuLinks[i].addEventListener("click", function() {
+                    hideDropdownList();
+                    resetProjectContent();
+                    setActiveDropdown(projectMenuLinks[i]);
+                    setActiveContent(projectContentList[i]);
+                });
+            }
+        }
+    });
+    console.log("mobile JS loaded");
 }
 
 function showDropdownList() {
@@ -78,6 +89,7 @@ function showDropdownList() {
             projectMenuLinks[i].classList.add("visible");
         }
     }
+    console.log("Dropdown list shown");
 }
 function hideDropdownList() {
     for (let i=0; i<numProjectCategories; i++) {
@@ -86,6 +98,7 @@ function hideDropdownList() {
             projectMenuLinks[i].classList.add("invisible");
         }
     }
+    console.log("Dropdown list hidden");
 }
 
 //Change the Projects button's text to be that category

diff --git a/webpage/styles/main.css b/webpage/styles/main.css
@@ -208,7 +208,7 @@ div#skills .column ul p {
   padding: 20%;
   text-align: center;
   font-style: italic;
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   color: rgb(79, 79, 79);
 }