Fix responsiveness of UI on mobile devices. Shows only relevant images.

The UI is now responsive for all devices (almost). The inputs are made
full-width for mobile devices.
Only relevant images are shown as download links. Previously all the
images returned by ASU server were shown which is fixed now.

Signed-off-by: Sudhanshu Gautam <sudhanshu@clever.coffee>

package.json

@@ -27,9 +27,6 @@
     "deploy": "gh-pages -d build",
     "lint": "eslint src/ --ext .js --fix"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

src/components/alert-dialog.js

@@ -38,13 +38,13 @@ function AlertDialog({open, cancelHandler, acceptHandler, text, title, cancelCom
 }
 
 AlertDialog.propTypes = {
-  open: PropTypes.boolean,
+  open: PropTypes.bool,
   cancelHandler: PropTypes.func,
   acceptHandler: PropTypes.func,
   text: PropTypes.string,
   title: PropTypes.string,
   cancelComponent: PropTypes.elementType,
-  acceptComponent: PropTypes.elementType,
+  acceptComponent: PropTypes.object,
 };
 
 export default AlertDialog;

src/components/error-snackbar.js

@@ -60,7 +60,7 @@ function ErrorSnackBar({open, closeHandle, errorMessage}) {
 }
 
 ErrorSnackBar.propTypes = {
-  open: PropTypes.boolean,
+  open: PropTypes.bool,
   closeHandle: PropTypes.func,
   errorMessage: PropTypes.string,
 };

src/containers/home/home.js

@@ -47,7 +47,7 @@ function TabContainer({children, dir}) {
 }
 
 TabContainer.propTypes = {
-  children: PropTypes.elementType,
+  children: PropTypes.any,
   dir: PropTypes.any,
 };
 
@@ -250,13 +250,16 @@ class Home extends React.Component {
   };
 
   displayBuiltImageData = async (buildStatusResponse) => {
-    console.log(buildStatusResponse);
+    let builtImages = [];
+    builtImages.push({
+      url: 'https://chef.libremesh.org' +
+          buildStatusResponse.data.files + buildStatusResponse.data.sysupgrade,
+      type: 'sysupgrade',
+    });
     await this.dataService.getFiles(buildStatusResponse.data.files)
       .then((fileListResponse) => {
-        let builtImages = [];
         fileListResponse.forEach((file) => {
-          const suffix = file.name.substring(file.name.length - 4);
-          if (suffix === '.bin') {
+          if (file.name.includes('factory')) {
             const type = file.name.split('-').reverse()[0].split('.')[0];
             builtImages.push({
               url: 'https://chef.libremesh.org' +
@@ -484,7 +487,7 @@ class Home extends React.Component {
                               >
                                 <CloudDownloadIcon
                                   className="download-icon"/>
-                                {image.type}
+                                {image.name.split('-').reverse()[0].split('.')[0]}
                               </Button>
                             );
                           })

src/containers/home/home.scss

@@ -1,3 +1,5 @@
+$bg-color: #f0f0f0;
+
 .home-container {
   margin-top: 30px;
 
@@ -6,7 +8,7 @@
     text-align: left;
 
     .warning-432 {
-      background-color: #f0f0f0;
+      background-color: $bg-color;
       padding: 10px;
       margin-top: 20px;
       border: 1px solid #e3e3e3;
@@ -33,6 +35,12 @@
         display: block;
         z-index: 10;
       }
+
+      @media all and (max-width: 820px) {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+      }
     }
 
     .search-field {
@@ -54,6 +62,12 @@
         top: 100%;
         z-index: 10;
       }
+
+      @media all and (max-width: 820px) {
+        width: 100%;
+        margin: 20px 0 0;
+        padding: 0;
+      }
     }
 
     .MuiTypography-h4 {
@@ -82,7 +96,7 @@
 
       .advanced-settings {
         border: 1px solid #999;
-        background-color: #f0f0f0;
+        background-color: $bg-color;
         border-radius: 6px;
         margin-top: 20px;
         overflow: hidden;
@@ -109,12 +123,12 @@
       }
 
       .package:hover {
-        background-color: #f0f0f0;
+        background-color: $bg-color;
       }
 
       .package:focus, .package:active {
         transition: .2s;
-        background-color: darken(#f0f0f0, 15%);
+        background-color: darken($bg-color, 15%);
       }
     }
   }

src/locales/de.json

@@ -15,6 +15,7 @@
     "Build": "Bauen",
     "Cancel": "Abbrechen",
     "Add package(s)": "Paket (e) hinzufügen",
+    "Version": "Ausführung",
     "Please confirm that you want to perform this action": "Bitte bestätigen Sie, dass Sie diese Aktion ausführen möchten",
     "Building image requires computation resources, so we would request you to check if this selection is what you want": "Das Erstellen eines Image erfordert Rechenressourcen. Wir bitten Sie daher, zu prüfen, ob diese Auswahl Ihren Wünschen entspricht",
     "Devices with ≤4MB flash and/or ≤32MB ram will work but they will be very limited (usually they can't install or run additional packages) because they have low RAM and flash space. Consider this when choosing a device to buy, or when deciding to flash OpenWrt on your device because it is listed as supported.": "Geräte mit ≤4MB Flash und / oder ≤32MB RAM funktionieren, sind jedoch sehr eingeschränkt (normalerweise können sie keine zusätzlichen Pakete installieren oder ausführen), da sie über wenig RAM und Flash-Speicher verfügen. Berücksichtigen Sie dies, wenn Sie ein Gerät zum Kaufen auswählen oder wenn Sie OpenWrt auf Ihrem Gerät flashen, da es als unterstützt aufgeführt ist Zusätzliche Pakete können nicht installiert oder ausgeführt werden, da sie über wenig RAM und wenig Flash-Speicher verfügen. Berücksichtigen Sie dies, wenn Sie ein Gerät zum Kaufen auswählen oder wenn Sie sich entscheiden, OpenWrt auf Ihrem Gerät zu flashen, da es als unterstützt aufgeführt ist.",

src/locales/en.json

@@ -15,6 +15,7 @@
     "Build": "Build",
     "Cancel": "Cancel",
     "Add package(s)": "Add package(s)",
+    "Version": "Version",
     "Please confirm that you want to perform this action": "Please confirm that you want to perform this action",
     "Building image requires computation resources, so we would request you to check if this selection is what you want": "Building image requires computation resources, so we would request you to check if this selection is what you want",
     "Devices with ≤4MB flash and/or ≤32MB ram will work but they will be very limited (usually they can't install or run additional packages) because they have low RAM and flash space. Consider this when choosing a device to buy, or when deciding to flash OpenWrt on your device because it is listed as supported.": "Devices with ≤4MB flash and/or ≤32MB ram will work but they will be very limited (usually they can't install or run additional packages) because they have low RAM and flash space. Consider this when choosing a device to buy, or when deciding to flash OpenWrt on your device because it is listed as supported.",