fix: fix display on small devices

DCsunset · DCsunset · commit ac61b5710894 · 2021-04-07T10:27:18.000+08:00
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Task.json WebUI</title>
+    <title>Task.json Web</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,7 +12,8 @@ import {
   fade,
   CssBaseline,
   createMuiTheme,
-  ThemeProvider
+  ThemeProvider,
+  useMediaQuery
 } from '@material-ui/core';
 import {
   ToggleButton,
@@ -76,6 +77,8 @@ function App() {
   const [taskType, setTaskType] = useState<TaskType>("todo");
   const [currentTask, setCurrentTask] = useState<Task | null>(null);
 
+  const isSmallDevice = useMediaQuery(theme.breakpoints.down("xs"));
+
   const handleTaskType = (_event: React.MouseEvent<HTMLElement>, newType: TaskType | null) => {
     if (newType)
       setTaskType(newType);
@@ -109,15 +112,15 @@ function App() {
           >
             <ToggleButton value="todo" className={classes.toggleButton}>
               <ScheduleIcon className={classes.icon} />
-              todo
+              { isSmallDevice || "todo" }
             </ToggleButton>
             <ToggleButton value="done" className={classes.toggleButton}>
               <CheckIcon className={classes.icon} />
-              done
+              { isSmallDevice || "done" }
             </ToggleButton>
             <ToggleButton value="removed" className={classes.toggleButton}>
               <DeleteIcon className={classes.icon} />
-              removed
+              { isSmallDevice || "removed" }
             </ToggleButton>
           </ToggleButtonGroup>
 
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -76,7 +76,7 @@ function Layout(props: Props) {
 				<Toolbar>
 					<StickerCheckOutlineIcon className={classes.icon} />
 					<Typography variant="h6" noWrap className={classes.title}>
-						Task.json WebUI
+						Task.json Web
 					</Typography>
 
 					<IconButton
