📱 Added responsive orientation changes

config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="org.scratchclient4.sc4mobile" version="0.1.7" android-versionCode="9" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="org.scratchclient4.sc4mobile" version="0.1.8" android-versionCode="9" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>Itchy</name>
     <description>
         A Scratch client for Android mobile devices.

package.json

@@ -10,9 +10,11 @@
     "cordova-plugin-compat": "^1.2.0",
     "cordova-plugin-device": "^2.0.3",
     "cordova-plugin-inappbrowser": "^4.0.0",
+    "cordova-plugin-screen-orientation": "^3.0.2",
     "cordova-plugin-theme-detection": "^1.2.1",
     "cordova-plugin-whitelist": "^1.3.4",
     "cssnano": "^4.1.10",
+    "es6-promise-plugin": "^4.2.2",
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-html-externals": "^0.2.0",
     "sass": "^1.26.10",
@@ -36,7 +38,8 @@
       "cordova-plugin-inappbrowser": {},
       "cordova-plugin-device": {},
       "cordova-plugin-browsertab": {},
-      "cordova-plugin-theme-detection": {}
+      "cordova-plugin-theme-detection": {},
+      "cordova-plugin-screen-orientation": {}
     },
     "platforms": [
       "browser",

scripts/index.js

@@ -24,9 +24,6 @@ let setTheme = (toSwap) => {
 }
 
 let renderProject = (id, title, user) => {
-  if (device.platform == "Android") {
-    window.open = cordova.plugins.browsertab.openUrl;
-  }
   let div = document.createElement('div');
   div.classList.add('project');
   div.classList.add('ripple');
@@ -132,6 +129,19 @@ document.getElementById('menuButton').addEventListener('click', (event) => {
 document.addEventListener('deviceready', windowLoaded);
 
 function windowLoaded() {
+  if (device.platform == "Android") {
+    window.open = cordova.plugins.browsertab.openUrl;
+  }
+  screen.orientation.addEventListener('change', function() {
+    console.log('orientation changed');
+    if (screen.orientation.type.includes('landscape')) {
+      document.getElementById('projects').style.gridTemplateColumns = "auto auto";
+      document.getElementById('projects').style.gridColumnGap = "3%";
+    } else if (screen.orientation.type.includes('portrait')) {
+      document.getElementById('projects').style.gridTemplateColumns = "auto";
+      document.getElementById('projects').style.gridColumnGap = "0";
+    }
+  })
   document.getElementsByClassName('spinner')[0].style.display = 'block';
   cordova.plugins.ThemeDetection.isDarkModeEnabled(
     function(success) {
@@ -165,6 +175,7 @@ function windowLoaded() {
           getRecentProjects(0);
         } else if (scrollOptions[i].innerText == 'Messages') {
           window.open('https://scratch.mit.edu/messages');
+          document.getElementsByClassName('spinner')[0].style.display = 'none';
         } else {
           getTaggedProjects(scrollOptions[i].innerText.toLowerCase(), 0)
         }

styles/index.css

@@ -93,6 +93,8 @@ body {
   padding-right: 5%;
   padding-bottom: 1em;
   transform: translateX(-2px);
+  display: grid;
+  grid-template-columns: 1;
 }
 
 .project {