diff --git a/config.xml b/config.xml index c1faf35..ecfc36d 100644 --- a/config.xml +++ b/config.xml @@ -1,5 +1,5 @@ - + Itchy 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 {