makes mobile friendly

dimitropoulos · Oct 17, 2020 · 1ddd977 · 1ddd977
1 parent 79fd665
commit 1ddd977
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 25 deletions.
diff --git a/website/App.tsx b/website/App.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useEffect } from 'react';
-import { ThemeProvider, Container } from '@material-ui/core';
+import { ThemeProvider, Container as MuiContainer, withStyles } from '@material-ui/core';
 
 import { Components } from './Components';
 import { FrameworkStatistics } from './FrameworkStatistics';
@@ -8,6 +8,17 @@ import { Header } from './Header';
 import { theme } from './theme';
 import { scrollIntoView } from './utils';
 
+const Container = withStyles(theme => ({
+  [theme.breakpoints.down('sm')]: {
+    root: {
+      marginLeft: 0,
+      marginRight: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+    },
+  },
+}))(MuiContainer);
+
 export const App: FC = () => {
   useEffect(() => {
     scrollIntoView(window.location.hash.replace('#', ''))();

diff --git a/website/Components.tsx b/website/Components.tsx
@@ -22,7 +22,6 @@ import {
 } from '../utils';
 import { frameworks, frameworksById } from '../frameworks';
 import {
-  Card as MuiCard,
   TableContainer,
   TableHead,
   TableRow,
@@ -37,15 +36,9 @@ import {
 } from '@material-ui/core';
 import { UnwrapedComponent, Component as ComponentType, Framework } from '../entities';
 import { componentInfoById } from '../components';
-import { GroupTitle } from './utils';
+import { GroupTitle, Card } from './utils';
 import { Criteria } from './Criteria';
 
-const Card = withStyles({
-  root: {
-    margin: '2em',
-  },
-})(MuiCard);
-
 const Wrapper = withStyles({
   root: {
     backgroundColor: '#fafafa',

diff --git a/website/FrameworkFeatures.tsx b/website/FrameworkFeatures.tsx
@@ -3,15 +3,10 @@ import { frameworks, frameworkInfo, frameworkInfoById } from '../frameworks';
 import { map } from 'ramda';
 import { Framework } from '../entities';
 import { toStablePairs } from '../utils';
-import { Card as MuiCard, TableContainer, TableBody, TableHead, Table, TableRow, TableCell, withStyles } from '@material-ui/core';
-import { GroupTitle } from './utils';
+import { TableContainer, TableBody, TableHead, Table, TableRow, TableCell } from '@material-ui/core';
+import { GroupTitle, Card } from './utils';
 import { Criteria } from './Criteria';
 
-const Card = withStyles({
-  root: {
-    margin: '2em',
-  },
-})(MuiCard);
 
 const Feature: FC<Framework> = ({ frameworkFeaturesById, frameworkId, frameworkName }) => (
   <TableRow hover key={frameworkId}>

diff --git a/website/FrameworkStatistics.tsx b/website/FrameworkStatistics.tsx
@@ -3,14 +3,8 @@ import { frameworks } from '../frameworks';
 import { map, forEach } from 'ramda';
 import { Framework as FrameworkType, RepoInfo } from '../entities';
 import { getRepoInfo, removeProtocol, noValue } from '../utils';
-import { Card as MuiCard, TableContainer, TableBody, TableHead, Table, TableRow, TableCell, Link, Button, withStyles } from '@material-ui/core';
-import { GroupTitle } from './utils';
-
-const Card = withStyles({
-  root: {
-    margin: '2em',
-  },
-})(MuiCard);
+import { TableContainer, TableBody, TableHead, Table, TableRow, TableCell, Link, Button } from '@material-ui/core';
+import { GroupTitle, Card } from './utils';
 
 const Framework: FC<FrameworkType> = ({
   frameworkName: name,

diff --git a/website/index.html b/website/index.html
@@ -1,4 +1,7 @@
 <html>
+<head>
+  <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+</head>
 
 <body>
   <style>

diff --git a/website/utils.tsx b/website/utils.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode, FC, useState, Fragment, ElementType } from 'react';
-import { withStyles, Box, Link, Typography, Toolbar } from '@material-ui/core';
+import { withStyles, Box, Link, Typography, Toolbar as MuiToolbar, Card as MuiCard } from '@material-ui/core';
 import { HelpOutline, Check as MuiCheck, Close as MuiClose, LinkSharp } from '@material-ui/icons';
 import { pipe, sortBy, prop, map } from 'ramda';
 import { DesignKit, FrameworkFeaturesById, SuperString } from '../entities';
@@ -60,6 +60,12 @@ export const Title = withStyles({
   },
 })(Typography);
 
+export const Toolbar = withStyles({
+  root: {
+    paddingLeft: 24,
+  },
+})(MuiToolbar);
+
 interface GroupTitleProps {
   title: string;
   scrollId: string;
@@ -141,3 +147,19 @@ export const designKits = (designKits: FrameworkFeaturesById['designKits']) => (
 export const themer = (themer: FrameworkFeaturesById['themer']) => (themer === false ? checkmark(themer) : (
   <Link href={themer as unknown as string}>Link</Link>
 ));
+
+export const Card = withStyles(theme => ({
+  root: {
+    margin: '2em',
+  },
+  [theme.breakpoints.down('sm')]: {
+    root: {
+      marginBottom: theme.spacing(2),
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1),
+      marginTop: theme.spacing(1),
+      paddingLeft: 0,
+      paddingRight: 0,
+    },
+  },
+}))(MuiCard);
-Original file line number
+Diff line change
@@ -1,4 +1,7 @@
     <html>
+    <head>
+      <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+    </head>
     <body>
       <style>
@@ Expand Down @@