From 980739fcb5a192e4f4f73febc644d52ed1c84aee Mon Sep 17 00:00:00 2001
From: micahlt <micahincorporated@gmail.com>
Date: Wed, 30 Sep 2020 07:09:03 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20Added=20responsive=20orientation?=
 =?UTF-8?q?=20changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config.xml        |  2 +-
 package-lock.json | 12 ++++++++++++
 package.json      |  5 ++++-
 scripts/index.js  | 17 ++++++++++++++---
 styles/index.css  |  2 ++
 5 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/config.xml b/config.xml
index c1faf35..ecfc36d 100644
--- a/config.xml
+++ b/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.
diff --git a/package-lock.json b/package-lock.json
index 8e512da..91cfcdd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3464,6 +3464,12 @@
       "integrity": "sha512-w2LZzdF3R4G/EqVZ9aWch9Pksk76uw6/S5wFP1sgn7zjsSDpJBb/JhazLnioN1NZmZiCUBbROv1S4+9JCkeCgA==",
       "dev": true
     },
+    "cordova-plugin-screen-orientation": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-screen-orientation/-/cordova-plugin-screen-orientation-3.0.2.tgz",
+      "integrity": "sha512-2w6CMC+HGvbhogJetalwGurL2Fx8DQCCPy3wlSZHN1/W7WoQ5n9ujVozcoKrY4VaagK6bxrPFih+ElkO8Uqfzg==",
+      "dev": true
+    },
     "cordova-plugin-theme-detection": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/cordova-plugin-theme-detection/-/cordova-plugin-theme-detection-1.2.1.tgz",
@@ -4300,6 +4306,12 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es6-promise-plugin": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/es6-promise-plugin/-/es6-promise-plugin-4.2.2.tgz",
+      "integrity": "sha512-uoA4aVplXI9oqUYJFBAVRwAqIN9/n9JgrTAUGX3qPbnSZVE5yY1+6/MsoN5f4xsaPO62WjPHOdtts6okMN6tNA==",
+      "dev": true
+    },
     "escalade": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
diff --git a/package.json b/package.json
index 2a75d4d..283d23d 100644
--- a/package.json
+++ b/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",
diff --git a/scripts/index.js b/scripts/index.js
index 9399536..9691df7 100644
--- a/scripts/index.js
+++ b/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)
         }
diff --git a/styles/index.css b/styles/index.css
index 956e2fa..7818e7e 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -93,6 +93,8 @@ body {
   padding-right: 5%;
   padding-bottom: 1em;
   transform: translateX(-2px);
+  display: grid;
+  grid-template-columns: 1;
 }
 
 .project {