From a422d755014c552e712613db0608970e51019292 Mon Sep 17 00:00:00 2001
From: cekk <andrea.cecchi85@gmail.com>
Date: Sun, 22 Mar 2020 16:03:02 +0100
Subject: [PATCH] fix layout

---
 static/src/BlindItem.js  | 55 +++++++++++++++++++++++-----------------
 static/src/BlindsList.js | 24 ++++++++++--------
 2 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/static/src/BlindItem.js b/static/src/BlindItem.js
index c74e41f..b0a9778 100644
--- 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
index 708a3a6..be5c6ec 100644
--- 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>
   );
 }