docker-multiarch/openwrt-firmware-selector
1
0
Fork 0
mirror of https://git.netzspielplatz.de/docker-multiarch/openwrt-firmware-selector.git synced 2025-11-08 21:59:27 +00:00
Code Issues Projects Releases Wiki Activity

Fix responsive design issues

Browse source 
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
This commit is contained in:
Sudhanshu Gautam 2019-09-05 00:03:52 +05:30
parent 740383d6be
commit db14840f4a
9 changed files with 144 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

7
package.json
View file

@ -24,9 +24,7 @@
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject", "eject": "react-scripts eject",
"predeploy": "yarn run build", "predeploy": "yarn run build",
"deploy": "gh-pages -d build", "deploy": "gh-pages -d build"
"lint": "eslint src/ --ext .js --fix",
"pretty": "prettier --single-quote --trailing-comma es5 --write \"src/**/*.js\""
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
@ -46,9 +44,10 @@
"eslint-plugin-prettier": "^3.1.0", "eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.2", "eslint-plugin-react": "^7.14.2",
"husky": "^3.0.5", "husky": "^3.0.5",
"prettier": "1.18.2", "prettier": "^1.18.2",
"pretty-quick": "^1.11.1", "pretty-quick": "^1.11.1",
"prop-types": "latest", "prop-types": "latest",
"stylelint-prettier": "^1.1.1",
"typescript": "^3.5.3" "typescript": "^3.5.3"
}, },
"husky": { "husky": {

32
src/App.scss
View file

@ -45,6 +45,26 @@
float: right; 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 { @keyframes App-logo-spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
@ -53,3 +73,15 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@media all and (max-width: 800px) {
.report-problem-container {
font-size: 12px;
padding: 10px;
}
.report-link {
float: none;
display: block;
}
}

12
src/components/header.js
View file

@ -16,6 +16,7 @@ import {
} from '@material-ui/core'; } from '@material-ui/core';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import i18next from 'i18next'; import i18next from 'i18next';
import '../App.scss';
export default function Header() { export default function Header() {
const { t, i18n } = useTranslation(); const { t, i18n } = useTranslation();
@ -38,11 +39,12 @@ export default function Header() {
const id = open ? 'simple-popper' : undefined; const id = open ? 'simple-popper' : undefined;
return ( return (
<AppBar position="static"> <AppBar position="static" className="header">
<Toolbar> <Toolbar>
<Typography edge="start" variant="h6"> <Typography edge="start" variant="h6" className="title-desktop">
{t('OpenWrt Firmware Selector Wizard')} {t('OpenWrt Firmware Selector')}
</Typography> </Typography>
<span className="title-mobile">{t('OpenWrt Firmware Selector')}</span>
<div style={{ flexGrow: 1 }} /> <div style={{ flexGrow: 1 }} />
<Button <Button
aria-describedby={id} aria-describedby={id}
@ -51,7 +53,9 @@ export default function Header() {
onClick={openChangeLanguagePopper} onClick={openChangeLanguagePopper}
href="#" href="#"
> >
{t('Change Language')} &nbsp; <span className="language-toggle-text">
{t('Change Language')} &nbsp;
</span>
<LanguageIcon /> <LanguageIcon />
</Button> </Button>
<Popper <Popper

4
src/containers/home/home.js
View file

@ -629,7 +629,7 @@ class Home extends React.Component {
{this.state.selection.device.deviceManifest.length}) {this.state.selection.device.deviceManifest.length})
</Typography> </Typography>
</ExpansionPanelSummary> </ExpansionPanelSummary>
<ExpansionPanelDetails> <ExpansionPanelDetails className="packages">
<div> <div>
{this.state.selection.device.deviceManifest.map( {this.state.selection.device.deviceManifest.map(
package_name => ( package_name => (
@ -640,7 +640,7 @@ class Home extends React.Component {
</ExpansionPanelDetails> </ExpansionPanelDetails>
</ExpansionPanel> </ExpansionPanel>
</Grid> </Grid>
<Grid item xs> <Grid item xs className="downloads">
<b>{this.props.t('Downloads')}: </b> <b>{this.props.t('Downloads')}: </b>
{this.state.selection.device.images.map(image => ( {this.state.selection.device.images.map(image => (
<div key={image.name}> <div key={image.name}>

41
src/containers/home/home.scss
View file

@ -4,10 +4,19 @@ $bg-color: #f0f0f0;
margin-top: 30px; margin-top: 30px;
margin-bottom: 100px; margin-bottom: 100px;
@media all and (max-width: 820px) {
margin-top: 15px;
margin-bottom: 100px;
}
.home-container-paper { .home-container-paper {
padding: 30px; padding: 30px;
text-align: left; text-align: left;
@media all and (max-width: 820px) {
padding: 15px;
}
.warning-432 { .warning-432 {
background-color: $bg-color; background-color: $bg-color;
padding: 10px; padding: 10px;
@ -17,7 +26,7 @@ $bg-color: #f0f0f0;
.icon { .icon {
margin: 0 20px 0 10px; margin: 0 20px 0 10px;
color: #F9A825 color: #f9a825;
} }
} }
@ -29,7 +38,17 @@ $bg-color: #f0f0f0;
border: 1px solid #e3e3e3; border: 1px solid #e3e3e3;
border-radius: 7px; border-radius: 7px;
margin-top: 16px !important; 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 { .installed-packages::before {
display: none; display: none;
} }
@ -89,12 +108,17 @@ $bg-color: #f0f0f0;
margin-bottom: 15px; margin-bottom: 15px;
} }
.downloads {
@media all and (max-width: 820px) {
margin-top: 20px;
}
.download-button { .download-button {
margin-top: 17px; margin-top: 17px;
.download-icon { .download-icon {
margin-right: 10px; margin-right: 10px;
}
} }
} }
@ -141,8 +165,9 @@ $bg-color: #f0f0f0;
background-color: $bg-color; background-color: $bg-color;
} }
.package:focus, .package:active { .package:focus,
transition: .2s; .package:active {
transition: 0.2s;
background-color: darken($bg-color, 15%); background-color: darken($bg-color, 15%);
} }
} }

8
src/index.css
View file

@ -1,14 +1,14 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background-color: #F5F5F5; background-color: #f5f5f5;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }

54
src/locales/de.json
View file

@ -1,29 +1,29 @@
{ {
"English": "Englisch", "English": "Englisch",
"German": "Deutsche", "German": "Deutsche",
"Submit": "Einreichen", "Submit": "Einreichen",
"Change Language": "Sprache ändern", "Change Language": "Sprache ändern",
"Search your device": "Suchen Sie Ihr Gerät", "Search your device": "Suchen Sie Ihr Gerät",
"No results": "Keine Ergebnisse", "No results": "Keine Ergebnisse",
"Model": "Modell", "Model": "Modell",
"Vendor": "Verkäufer", "Vendor": "Verkäufer",
"Variant": "Variante", "Variant": "Variante",
"Name": "Name", "Name": "Name",
"Release Version" : "Veröffentlichungsversion", "Release Version": "Veröffentlichungsversion",
"Basic": "Basic", "Basic": "Basic",
"Advanced": "Fortgeschritten", "Advanced": "Fortgeschritten",
"Build": "Bauen", "Build": "Bauen",
"Cancel": "Abbrechen", "Cancel": "Abbrechen",
"Add package(s)": "Paket (e) hinzufügen", "Add package(s)": "Paket (e) hinzufügen",
"Version": "Ausführung", "Version": "Ausführung",
"Please confirm that you want to perform this action": "Bitte bestätigen Sie, dass Sie diese Aktion ausführen möchten", "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", "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.", "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", "OpenWrt Firmware Selector": "OpenWrt Firmware Selector",
"Download OpenWrt firmware for your device!": "Laden Sie die OpenWrt-Firmware für Ihr Gerät herunter!", "Download OpenWrt firmware for your device!": "Laden Sie die OpenWrt-Firmware für Ihr Gerät herunter!",
"Target": "Ziel", "Target": "Ziel",
"Dismiss": "Entlassen", "Dismiss": "Entlassen",
"There is an error with the packages you selected": "Bei den ausgewählten Paketen ist ein Fehler aufgetreten", "There is an error with the packages you selected": "Bei den ausgewählten Paketen ist ein Fehler aufgetreten",
"Downloads": "Herunterladen", "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!" "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!"
} }

54
src/locales/en.json
View file

@ -1,29 +1,29 @@
{ {
"English": "English", "English": "English",
"German": "German", "German": "German",
"Submit": "Submit", "Submit": "Submit",
"Change Language": "Change Language", "Change Language": "Change Language",
"Search your device": "Search your device", "Search your device": "Search your device",
"No results": "No results", "No results": "No results",
"Model": "Model", "Model": "Model",
"Vendor": "Vendor", "Vendor": "Vendor",
"Variant": "Variant", "Variant": "Variant",
"Name": "Name", "Name": "Name",
"Release Version" : "Release Version", "Release Version": "Release Version",
"Basic": "Basic", "Basic": "Basic",
"Advanced": "Advanced", "Advanced": "Advanced",
"Build": "Build", "Build": "Build",
"Cancel": "Cancel", "Cancel": "Cancel",
"Add package(s)": "Add package(s)", "Add package(s)": "Add package(s)",
"Version": "Version", "Version": "Version",
"Please confirm that you want to perform this action": "Please confirm that you want to perform this action", "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", "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.", "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", "OpenWrt Firmware Selector": "OpenWrt Firmware Selector",
"Download OpenWrt firmware for your device!": "Download OpenWrt firmware for your device!", "Download OpenWrt firmware for your device!": "Download OpenWrt firmware for your device!",
"Target": "Target", "Target": "Target",
"Dismiss": "Dismiss", "Dismiss": "Dismiss",
"There is an error with the packages you selected": "There is an error with the packages you selected", "There is an error with the packages you selected": "There is an error with the packages you selected",
"Downloads": "Downloads", "Downloads": "Downloads",
"Please use the input below to download firmware for your device!": "Please use the input below to download firmware for your device!" "Please use the input below to download firmware for your device!": "Please use the input below to download firmware for your device!"
} }

9
yarn.lock
View file

@ -8459,7 +8459,7 @@ prettier-linter-helpers@^1.0.0:
dependencies: dependencies:
fast-diff "^1.1.2" fast-diff "^1.1.2"
prettier@1.18.2: prettier@^1.18.2:
version "1.18.2" version "1.18.2"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea" resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea"
integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw== integrity sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw==
@ -10023,6 +10023,13 @@ stylehacks@^4.0.0:
postcss "^7.0.0" postcss "^7.0.0"
postcss-selector-parser "^3.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: supports-color@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"