update flex layout for tablet, update dependencies

firsttris · Jan 17, 2025 · ac9f67d · ac9f67d
1 parent 45af1fc
commit ac9f67d
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 63 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en" style="overflow-y: scroll;">
   <head>
     <meta charset="utf-8" />
-    <title>ccu-addon-mui</title>
+    <title>CCU3 Add-on: Modern Web UI</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,9 +15,9 @@
   },
   "private": true,
   "dependencies": {
-    "@emotion/react": "11.11.4",
-    "@emotion/styled": "11.11.0",
-    "@fontsource/roboto": "^5.0.8",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.0",
+    "@fontsource/roboto": "^5.1.1",
     "@swc/helpers": "0.5.15",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@emotion/babel-plugin": "11.11.0",
-    "@iconify/react": "^4.1.1",
+    "@iconify/react": "^5.2.0",
     "@nx/eslint": "20.3.1",
     "@nx/eslint-plugin": "20.3.1",
     "@nx/js": "20.3.1",
@@ -53,10 +53,10 @@
     "eslint-plugin-react-hooks": "5.0.0",
     "jsdom": "~22.1.0",
     "nx": "20.3.1",
-    "prettier": "^2.6.2",
+    "prettier": "^3.4.2",
     "typescript": "5.6.3",
     "vite": "^5.0.0",
-    "vite-plugin-pwa": "^0.17.4",
+    "vite-plugin-pwa": "^0.21.1",
     "vitest": "1.3.1"
   }
 }
diff --git a/src/components/ChannelGroup.tsx b/src/components/ChannelGroup.tsx
@@ -31,9 +31,14 @@ const ChannelContainer = styled.div({
   display: 'flex',
   flexWrap: 'wrap',
   gap: '10px',
-  justifyContent: 'space-around',
+  '@media (max-width: 800px)': {
+    marginLeft: '90px',
+    marginRight: '90px',
+  },
   '@media (max-width: 600px)': {
     justifyContent: 'center',
+    marginLeft: '0px',
+    marginRight: '0px',
   },
 });
 

diff --git a/src/controls/BlindsControl.tsx b/src/controls/BlindsControl.tsx
@@ -14,7 +14,7 @@ export const BlindsControl = ({ channel }: ControlProps) => {
   const { datapoints, name, address, interfaceName } = channel;
   const blindValue = Number(datapoints.LEVEL) * 100;
   return (
-    <div>
+    <div style={{ width: '250px', padding: '10px' }}>
       <ChannelHeader
         icon={
           blindValue === 0

diff --git a/src/controls/SwitchControl.tsx b/src/controls/SwitchControl.tsx
@@ -27,7 +27,7 @@ export const SwitchControl = ({ channel }: ControlProps) => {
 
   return (
     <CardHeader onClick={onHandleChange}>
-      <div style={{ height: "65px"}}>{name}</div>
+      <div style={{ height: "40px" }}>{name}</div>
       <Icon
         icon={checked ? 'mdi:light-switch' : 'mdi:light-switch-off'}
         color={checked ? 'orange' : 'unset'}

diff --git a/src/controls/ThermostatControl.tsx b/src/controls/ThermostatControl.tsx
@@ -14,7 +14,7 @@ const Container = styled.div`
 position: relative;
   width: 250px;
   height: 100%;
-  padding: 20px;
+  padding: 10px;
 `;
 
 const getColor = (temperature: number) => {

diff --git a/src/main.tsx b/src/main.tsx
@@ -23,7 +23,6 @@ const root = ReactDOM.createRoot(
 
 root.render(
   <>
-
     <Global
       styles={css`
         body {
@@ -38,6 +37,5 @@ root.render(
     <WebSocketProvider>
       <Router />
     </WebSocketProvider>
-
   </>
 );