mirror of
https://git.netzspielplatz.de/docker-multiarch/openwrt-firmware-selector.git
synced 2025-11-08 20:39:25 +00:00
Fix responsive design issues
Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
This commit is contained in:
Sudhanshu Gautam
parent
740383d6be
commit
db14840f4a
9 changed files with 144 additions and 77 deletions
|
|
@ -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": {
|
||||
|
|
|
|||
32
src/App.scss
32
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<AppBar position="static">
|
||||
<AppBar position="static" className="header">
|
||||
<Toolbar>
|
||||
<Typography edge="start" variant="h6">
|
||||
{t('OpenWrt Firmware Selector Wizard')}
|
||||
<Typography edge="start" variant="h6" className="title-desktop">
|
||||
{t('OpenWrt Firmware Selector')}
|
||||
</Typography>
|
||||
<span className="title-mobile">{t('OpenWrt Firmware Selector')}</span>
|
||||
<div style={{ flexGrow: 1 }} />
|
||||
<Button
|
||||
aria-describedby={id}
|
||||
|
|
@ -51,7 +53,9 @@ export default function Header() {
|
|||
onClick={openChangeLanguagePopper}
|
||||
href="#"
|
||||
>
|
||||
<span className="language-toggle-text">
|
||||
{t('Change Language')}
|
||||
</span>
|
||||
<LanguageIcon />
|
||||
</Button>
|
||||
<Popper
|
||||
|
|
|
|||
|
|
@ -629,7 +629,7 @@ class Home extends React.Component {
|
|||
{this.state.selection.device.deviceManifest.length})
|
||||
</Typography>
|
||||
</ExpansionPanelSummary>
|
||||
<ExpansionPanelDetails>
|
||||
<ExpansionPanelDetails className="packages">
|
||||
<div>
|
||||
{this.state.selection.device.deviceManifest.map(
|
||||
package_name => (
|
||||
|
|
@ -640,7 +640,7 @@ class Home extends React.Component {
|
|||
</ExpansionPanelDetails>
|
||||
</ExpansionPanel>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<Grid item xs className="downloads">
|
||||
<b>{this.props.t('Downloads')}: </b>
|
||||
{this.state.selection.device.images.map(image => (
|
||||
<div key={image.name}>
|
||||
|
|
|
|||
|
|
@ -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,6 +108,10 @@ $bg-color: #f0f0f0;
|
|||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.downloads {
|
||||
@media all and (max-width: 820px) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
margin-top: 17px;
|
||||
|
|
@ -97,6 +120,7 @@ $bg-color: #f0f0f0;
|
|||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.interface-switch-bar {
|
||||
border: 1px solid #e3e3e3;
|
||||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"Vendor": "Verkäufer",
|
||||
"Variant": "Variante",
|
||||
"Name": "Name",
|
||||
"Release Version" : "Veröffentlichungsversion",
|
||||
"Release Version": "Veröffentlichungsversion",
|
||||
"Basic": "Basic",
|
||||
"Advanced": "Fortgeschritten",
|
||||
"Build": "Bauen",
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
"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",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"Vendor": "Vendor",
|
||||
"Variant": "Variant",
|
||||
"Name": "Name",
|
||||
"Release Version" : "Release Version",
|
||||
"Release Version": "Release Version",
|
||||
"Basic": "Basic",
|
||||
"Advanced": "Advanced",
|
||||
"Build": "Build",
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
"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",
|
||||
"OpenWrt Firmware Selector": "OpenWrt Firmware Selector",
|
||||
"Download OpenWrt firmware for your device!": "Download OpenWrt firmware for your device!",
|
||||
"Target": "Target",
|
||||
"Dismiss": "Dismiss",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue