diff --git a/package.json b/package.json index 072eb07..838124c 100644 --- a/package.json +++ b/package.json @@ -24,9 +24,7 @@ "test": "react-scripts test", "eject": "react-scripts eject", "predeploy": "yarn run build", - "deploy": "gh-pages -d build", - "lint": "eslint src/ --ext .js --fix", - "pretty": "prettier --single-quote --trailing-comma es5 --write \"src/**/*.js\"" + "deploy": "gh-pages -d build" }, "browserslist": { "production": [ @@ -46,9 +44,10 @@ "eslint-plugin-prettier": "^3.1.0", "eslint-plugin-react": "^7.14.2", "husky": "^3.0.5", - "prettier": "1.18.2", + "prettier": "^1.18.2", "pretty-quick": "^1.11.1", "prop-types": "latest", + "stylelint-prettier": "^1.1.1", "typescript": "^3.5.3" }, "husky": { diff --git a/src/App.scss b/src/App.scss index 7bceec8..9356f29 100644 --- a/src/App.scss +++ b/src/App.scss @@ -45,6 +45,26 @@ float: right; } +.header { + .title-desktop { + @media all and (max-width: 820px) { + display: none; + } + } + + .title-mobile { + @media all and (min-width: 820px) { + display: none; + } + } + + .language-toggle-text { + @media all and (max-width: 820px) { + display: none; + } + } +} + @keyframes App-logo-spin { from { transform: rotate(0deg); @@ -53,3 +73,15 @@ transform: rotate(360deg); } } + +@media all and (max-width: 800px) { + .report-problem-container { + font-size: 12px; + padding: 10px; + } + + .report-link { + float: none; + display: block; + } +} diff --git a/src/components/header.js b/src/components/header.js index bee30ff..796395a 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -16,6 +16,7 @@ import { } from '@material-ui/core'; import { useTranslation } from 'react-i18next'; import i18next from 'i18next'; +import '../App.scss'; export default function Header() { const { t, i18n } = useTranslation(); @@ -38,11 +39,12 @@ export default function Header() { const id = open ? 'simple-popper' : undefined; return ( - + - - {t('OpenWrt Firmware Selector Wizard')} + + {t('OpenWrt Firmware Selector')} + {t('OpenWrt Firmware Selector')}
- +
{this.state.selection.device.deviceManifest.map( package_name => ( @@ -640,7 +640,7 @@ class Home extends React.Component { - + {this.props.t('Downloads')}: {this.state.selection.device.images.map(image => (
diff --git a/src/containers/home/home.scss b/src/containers/home/home.scss index 52b296c..4f7309b 100644 --- a/src/containers/home/home.scss +++ b/src/containers/home/home.scss @@ -4,10 +4,19 @@ $bg-color: #f0f0f0; margin-top: 30px; margin-bottom: 100px; + @media all and (max-width: 820px) { + margin-top: 15px; + margin-bottom: 100px; + } + .home-container-paper { padding: 30px; text-align: left; + @media all and (max-width: 820px) { + padding: 15px; + } + .warning-432 { background-color: $bg-color; padding: 10px; @@ -17,7 +26,7 @@ $bg-color: #f0f0f0; .icon { margin: 0 20px 0 10px; - color: #F9A825 + color: #f9a825; } } @@ -29,7 +38,17 @@ $bg-color: #f0f0f0; border: 1px solid #e3e3e3; border-radius: 7px; margin-top: 16px !important; + + @media all and (max-width: 820px) { + width: 100%; + } } + .installed-packages .packages { + overflow: auto; + word-wrap: none; + white-space: nowrap; + } + .installed-packages::before { display: none; } @@ -89,12 +108,17 @@ $bg-color: #f0f0f0; margin-bottom: 15px; } + .downloads { + @media all and (max-width: 820px) { + margin-top: 20px; + } - .download-button { - margin-top: 17px; - - .download-icon { - margin-right: 10px; + .download-button { + margin-top: 17px; + + .download-icon { + margin-right: 10px; + } } } @@ -141,8 +165,9 @@ $bg-color: #f0f0f0; background-color: $bg-color; } - .package:focus, .package:active { - transition: .2s; + .package:focus, + .package:active { + transition: 0.2s; background-color: darken($bg-color, 15%); } } diff --git a/src/index.css b/src/index.css index a7c7787..c4b7766 100644 --- a/src/index.css +++ b/src/index.css @@ -1,14 +1,14 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background-color: #F5F5F5; + background-color: #f5f5f5; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } diff --git a/src/locales/de.json b/src/locales/de.json index 6bb6da7..e65a7cc 100644 --- a/src/locales/de.json +++ b/src/locales/de.json @@ -1,29 +1,29 @@ { - "English": "Englisch", - "German": "Deutsche", - "Submit": "Einreichen", - "Change Language": "Sprache ändern", - "Search your device": "Suchen Sie Ihr Gerät", - "No results": "Keine Ergebnisse", - "Model": "Modell", - "Vendor": "Verkäufer", - "Variant": "Variante", - "Name": "Name", - "Release Version" : "Veröffentlichungsversion", - "Basic": "Basic", - "Advanced": "Fortgeschritten", - "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", - "warning432": "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.", - "OpenWrt Firmware Selector Wizard": "OpenWrt Firmware Selector Wizard", - "Download OpenWrt firmware for your device!": "Laden Sie die OpenWrt-Firmware für Ihr Gerät herunter!", - "Target": "Ziel", - "Dismiss": "Entlassen", - "There is an error with the packages you selected": "Bei den ausgewählten Paketen ist ein Fehler aufgetreten", - "Downloads": "Herunterladen", - "Please use the input below to download firmware for your device!": "Bitte benutzen Sie den unten stehenden Eingang, um die Firmware für Ihr Gerät herunterzuladen!" + "English": "Englisch", + "German": "Deutsche", + "Submit": "Einreichen", + "Change Language": "Sprache ändern", + "Search your device": "Suchen Sie Ihr Gerät", + "No results": "Keine Ergebnisse", + "Model": "Modell", + "Vendor": "Verkäufer", + "Variant": "Variante", + "Name": "Name", + "Release Version": "Veröffentlichungsversion", + "Basic": "Basic", + "Advanced": "Fortgeschritten", + "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", + "warning432": "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.", + "OpenWrt Firmware Selector": "OpenWrt Firmware Selector", + "Download OpenWrt firmware for your device!": "Laden Sie die OpenWrt-Firmware für Ihr Gerät herunter!", + "Target": "Ziel", + "Dismiss": "Entlassen", + "There is an error with the packages you selected": "Bei den ausgewählten Paketen ist ein Fehler aufgetreten", + "Downloads": "Herunterladen", + "Please use the input below to download firmware for your device!": "Bitte benutzen Sie den unten stehenden Eingang, um die Firmware für Ihr Gerät herunterzuladen!" } diff --git a/src/locales/en.json b/src/locales/en.json index c861fc6..1db30ba 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -1,29 +1,29 @@ { - "English": "English", - "German": "German", - "Submit": "Submit", - "Change Language": "Change Language", - "Search your device": "Search your device", - "No results": "No results", - "Model": "Model", - "Vendor": "Vendor", - "Variant": "Variant", - "Name": "Name", - "Release Version" : "Release Version", - "Basic": "Basic", - "Advanced": "Advanced", - "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", - "warning432": "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.", - "OpenWrt Firmware Selector Wizard": "OpenWrt Firmware Selector Wizard", - "Download OpenWrt firmware for your device!": "Download OpenWrt firmware for your device!", - "Target": "Target", - "Dismiss": "Dismiss", - "There is an error with the packages you selected": "There is an error with the packages you selected", - "Downloads": "Downloads", - "Please use the input below to download firmware for your device!": "Please use the input below to download firmware for your device!" + "English": "English", + "German": "German", + "Submit": "Submit", + "Change Language": "Change Language", + "Search your device": "Search your device", + "No results": "No results", + "Model": "Model", + "Vendor": "Vendor", + "Variant": "Variant", + "Name": "Name", + "Release Version": "Release Version", + "Basic": "Basic", + "Advanced": "Advanced", + "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", + "warning432": "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.", + "OpenWrt Firmware Selector": "OpenWrt Firmware Selector", + "Download OpenWrt firmware for your device!": "Download OpenWrt firmware for your device!", + "Target": "Target", + "Dismiss": "Dismiss", + "There is an error with the packages you selected": "There is an error with the packages you selected", + "Downloads": "Downloads", + "Please use the input below to download firmware for your device!": "Please use the input below to download firmware for your device!" } diff --git a/yarn.lock b/yarn.lock index 2d76be1..3fd2b13 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8459,7 +8459,7 @@ prettier-linter-helpers@^1.0.0: dependencies: fast-diff "^1.1.2" -prettier@1.18.2: +prettier@^1.18.2: version "1.18.2" resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea" integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw== @@ -10023,6 +10023,13 @@ stylehacks@^4.0.0: postcss "^7.0.0" postcss-selector-parser "^3.0.0" +stylelint-prettier@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/stylelint-prettier/-/stylelint-prettier-1.1.1.tgz#213873c1d0097cd0985dafc766197dcd955e21c5" + integrity sha512-H7Zjb+9ufF0dTjjJ4qSbN/yeAV14BNUK5rl267lvYfmmW4Swlz4a2rfwqqgiN/YlntHXXzM6Nh/UXHFIvLI8zA== + dependencies: + prettier-linter-helpers "^1.0.0" + supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"