diff options
author | Jari Vetoniemi <jari.vetoniemi@indooratlas.com> | 2020-11-05 15:34:22 +0900 |
---|---|---|
committer | Jari Vetoniemi <jari.vetoniemi@indooratlas.com> | 2020-11-05 15:34:22 +0900 |
commit | dc7a7e2bd330611936638eea06638efafda4e2dd (patch) | |
tree | 0b85dfe529ad360914bda0c32e2e78ed96d49b0b /src/App.js | |
parent | c4969b8261fd1d98ab2b3740d52b097dc0fe840c (diff) |
Cleanup junk and fill the correct metadata
Diffstat (limited to 'src/App.js')
-rw-r--r-- | src/App.js | 28 |
1 files changed, 11 insertions, 17 deletions
@@ -40,11 +40,10 @@ import AccountCircleIcon from '@material-ui/icons/AccountCircle'; import StoreIcon from '@material-ui/icons/Store'; import LibraryBooksIcon from '@material-ui/icons/LibraryBooks'; import HelpOutlineIcon from '@material-ui/icons/HelpOutline'; -import Button from '@material-ui/core/Button'; import NavigateNextIcon from '@material-ui/icons/NavigateNext'; import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore'; import Grow from '@material-ui/core/Grow'; -import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext, DotGroup } from 'pure-react-carousel'; +import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel'; import { useWindowDimensions } from './utils.js'; import 'pure-react-carousel/dist/react-carousel.es.css'; import 'fontsource-roboto'; @@ -60,6 +59,7 @@ const StyledBadge = withStyles((theme) => ({ function StoreItemDetails(props) { const { t } = useTranslation(); + const classes = makeStyles((theme) => ({ }))(); @@ -77,6 +77,7 @@ function StoreItemDetails(props) { function StoreItem(props) { const { t } = useTranslation(); + const classes = makeStyles((theme) => ({ media: { height: 180, position: 'relative' }, cat: { position: 'absolute', bottom: 4, left: 4 }, @@ -152,9 +153,11 @@ function StoreItemSkeleton(props) { function StoreSeparator(props) { const { t } = useTranslation(); + const classes = makeStyles((theme) => ({ root: { margin: 4 }, }))(); + return ( <div className={classes.root}> <Typography variant="h6">{t(props.title)}</Typography> @@ -167,6 +170,7 @@ function StoreCarousel(props) { const { height, width } = useWindowDimensions(); const cols = Math.floor(width / 240); const tw = (cols > 1 ? (cols * 240 > width - 18 ? 240 - 20 : 240) : '100%') + const classes = makeStyles((theme) => ({ root: { paddingLeft: cols > 1 ? 18 : 4, paddingRight: cols > 1 ? 18 : 4 }, tile: { width: tw, marginRight: 'auto', marginLeft: 'auto' }, @@ -174,8 +178,10 @@ function StoreCarousel(props) { prev: { position: 'absolute', left: cols > 1 ? -15 : -4, top: '50%', backgroundColor: 'rgba(0, 0, 0, 0.5)', color: 'white' }, next: { position: 'absolute', right: cols > 1 ? -15 : -4, top: '50%', backgroundColor: 'rgba(0, 0, 0, 0.5)', color: 'white' }, }))(); + var skeletons = []; for (var i = 0; props.loading && i < cols; i += 1) skeletons.push({}); + return ( <div className={classes.root}> <StoreSeparator title={props.name}/> @@ -209,14 +215,17 @@ function StoreList(props) { const { height, width } = useWindowDimensions(); const cols = Math.floor(width / 240); const tw = (cols > 1 ? (cols * 240 > width - 18 ? 240 - 20 : 240) : '100%') + const classes = makeStyles((theme) => ({ list: { justifyContent: 'space-evenly', maxWidth: '100%' }, tile: { width: tw, marginRight: 'auto', marginLeft: 'auto' }, }))(); + var extra = []; for (var i = 0; i < cols - (props.data.length % cols); i += 1) extra.push({key: i}); var skeletons = []; for (var i2 = 0; props.loading && i2 < cols * (Math.floor(height / 240)) - cols * 2; i2 += 1) skeletons.push({key: i2}); + return ( <div className={props.className} style={{ paddingLeft: cols > 1 ? 18 : 4, paddingRight: cols > 1 ? 18 : 4 }}> <StoreSeparator title={props.name}/> @@ -414,24 +423,9 @@ export default function Main() { }, }), [prefersDarkMode]); - const GlobalCss = withStyles({ - '@global': { - '#keywords-popup': { - padding: 0, - }, - '.KeywordList li': { - display: 'inline-block', - verticalAlign: 'top', - marginLeft: 4, - marginRight: 4, - }, - } - })(() => null); - return ( <> <CssBaseline/> - <GlobalCss /> <ThemeProvider theme={theme}> <StoreView/> </ThemeProvider> |