Add extra mobile support for the list layout

1 files changed, 16 insertions, 0 deletions

diff --git a/assets/js/toggleLayout.js b/assets/js/toggleLayout.js
index 28bd9d6..14f8da2 100644
--- a/assets/js/toggleLayout.js
+++ b/assets/js/toggleLayout.js
@@ -1,10 +1,26 @@
 document.getElementById("btnGrid").addEventListener("click", makeGrid);
 document.getElementById("btnRows").addEventListener("click", makeRows);
+window.addEventListener("resize", adjustListAtMobile);
+
+let listRemoveWidth = window.matchMedia("(max-width: 735px)");
+let listAddWidth = window.matchMedia("(min-width: 735px)");
+let isList = false;
+
+function adjustListAtMobile(){
+    if (listRemoveWidth.matches) {
+        document.getElementById("articlesList").classList.remove("articles-list-container-alt");
+    }
+    else if (listAddWidth.matches && isList === true) {
+        document.getElementById("articlesList").classList.add("articles-list-container-alt");
+    }
+}
 
 function makeGrid(){
     document.getElementById("articlesList").classList.remove("articles-list-container-alt");
+    isList = false;
 }
 
 function makeRows(){
     document.getElementById("articlesList").classList.add("articles-list-container-alt");
+    isList = true;
 }
\ No newline at end of file