fix layout

cekk · Mar 22, 2020 · a422d75 · a422d75
1 parent ea6e13f
commit a422d75
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 34 deletions.
diff --git a/static/src/BlindItem.js b/static/src/BlindItem.js
@@ -5,10 +5,12 @@ import {
   Text,
   Badge,
   IconButton,
+  Icon,
   Slider,
   SliderTrack,
   SliderFilledTrack,
-  SliderThumb
+  SliderThumb,
+  Grid
 } from "@chakra-ui/core";
 
 import {
@@ -27,12 +29,10 @@ function PositionSelector({ position, id }) {
     return "";
   }
   return (
-    <Slider defaultValue={position} onChange={doAction}>
+    <Slider defaultValue={position} onChange={doAction} size="md">
       <SliderTrack bg="red.100" />
       <SliderFilledTrack bg="tomato" />
-      <SliderThumb size={6}>
-        <Box color="tomato" as={FaArrowAltCircleDown} />
-      </SliderThumb>
+      <SliderThumb size={6}></SliderThumb>
     </Slider>
   );
 }
@@ -44,28 +44,37 @@ function BlindItem(data) {
     axios.get(`/roller/${id}/${action}`);
   };
   return (
-    <Box height="200px" bg="gray.200" textAlign="center">
-      <Heading>{name}</Heading>
-      <Box>
-        <Badge variantColor={online ? "green" : "red"}>
-          {online ? "online" : "offline"}
-        </Badge>
-      </Box>
-
-      <Box>
+    <Box height="200px" textAlign="center" bg="white" m={5}>
+      <Grid templateColumns="80% 15%" columnGap={5}>
+        <Box textAlign="left" pl={3}>
+          <Heading>{name}</Heading>
+        </Box>
+        <Box pt="6px">
+          <Icon
+            name={online ? "check-circle" : "warning"}
+            size="20px"
+            color={online ? "green.400" : "red.500"}
+          />
+        </Box>
+      </Grid>
+      <Box textAlign="left" pl={3}>
         <Text fontSize="sm" fontWeight="bold">
-          Current action: {action}
+          Current action: <Badge variant="outline">{action}</Badge>
         </Text>
       </Box>
-      <Box>
-        <Text fontSize="sm" fontWeight="bold">
-          Current position: {position ? `${position}%` : "..."}
-        </Text>
-        <PositionSelector id={id} position={position} />
+      <Box mt={5}>
+        <Grid templateColumns="80% 15%" columnGap={5} pl={10} pr={10}>
+          <Box>
+            <PositionSelector id={id} position={position} />
+          </Box>
+          <Box>
+            <Badge variant="outline">{position ? `${position}%` : "..."}</Badge>
+          </Box>
+        </Grid>
       </Box>
       <IconButton
         variant="outline"
-        variantColor="teal"
+        variantColor="black"
         aria-label="Open"
         fontSize="20px"
         disabled={action === "open" || !online}
@@ -77,7 +86,7 @@ function BlindItem(data) {
       />
       <IconButton
         variant="outline"
-        variantColor="teal"
+        variantColor="black"
         aria-label="Stop"
         fontSize="20px"
         icon={FaPauseCircle}
@@ -89,7 +98,7 @@ function BlindItem(data) {
       />
       <IconButton
         variant="outline"
-        variantColor="teal"
+        variantColor="black"
         aria-label="Close"
         fontSize="20px"
         icon={FaArrowAltCircleDown}

diff --git a/static/src/BlindsList.js b/static/src/BlindsList.js
@@ -1,23 +1,25 @@
 import React from "react";
-import { SimpleGrid } from "@chakra-ui/core";
+import { SimpleGrid, Box } from "@chakra-ui/core";
 import BlindItem from "./BlindItem";
 
 function BlindsList({ blinds }) {
   return (
-    <React.Fragment>
-      <SimpleGrid columns={3} spacing={10} m="1em">
+    <Box bg="gray.100">
+      <SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} m="1em">
         {blinds.map(blind => (
           <BlindItem key={blind.id} {...blind}></BlindItem>
         ))}
       </SimpleGrid>
-      <BlindItem
-        key="all"
-        id="all"
-        name="All"
-        online={true}
-        m="10px"
-      ></BlindItem>
-    </React.Fragment>
+      <Box m={4} pb={4}>
+        <BlindItem
+          key="all"
+          id="all"
+          name="All"
+          online={true}
+          m="10px"
+        ></BlindItem>
+      </Box>
+    </Box>
   );
 }