Fix timetable width

.github/workflows/ci.yml

@@ -69,6 +69,5 @@ jobs:
             cd monitor-im-flur
             echo "Deploying Docker container..."
             docker-compose pull
-            docker-compose stop || true
+            docker-compose down
-            docker-compose rm || true
+            docker-compose up -d
-            docker-compose up -d

src/components/Card/Card.tsx

@@ -1,11 +1,26 @@
+import CardHeader from "@/components/CardHeader/CardHeader";
+
 import style from "./style.module.css";
 
 export default function Card({
-    active,
+    icon,
+    name,
     children,
+    active = false,
+    header = true,
 }: {
+    icon: string;
+    name: string;
     active?: boolean;
+    header?: boolean;
     children: React.ReactNode;
 }) {
-    return <div className={style.card}>{children}</div>;
+    return (
+        <div className={style.card}>
+            {header && (
+                <CardHeader icon={icon} content={name} isActive={active} />
+            )}
+            <div className={style.cardContent}>{children}</div>
+        </div>
+    );
 }

src/components/Card/style.module.css

@@ -1,4 +1,5 @@
 .card {
+    display: flex;
     flex-direction: column;
     justify-content: flex-start;
     background-color: #c0c0c0;
@@ -10,5 +11,6 @@
 }
 
 .cardContent {
-    padding: 1px 100px 30px 100px;
+    display: flex;
+    height: 100%;
 }

src/components/CardContainers/CardContainers.tsx

@@ -0,0 +1,9 @@
+import style from "./style.module.css";
+
+export function CardRow({ children }) {
+    return <div className={style.cardRow}>{children}</div>;
+}
+
+export function CardColumn({ children }) {
+    return <div className={style.cardColumn}>{children}</div>;
+}

src/components/CardContainers/style.module.css

@@ -0,0 +1,17 @@
+.cardColumn {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 30px;
+    margin: 30px;
+}
+
+.cardRow {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 30px;
+}

src/components/CardHeader/CardHeader.tsx

@@ -1,12 +1,17 @@
+import classNames from "classnames/bind";
+
 import style from "./style.module.css";
 
-export default function CardHeader({ icon, content, active = false }) {
+const styles = {
-    let containerClass = style.container;
+    container: style.container,
-    if (active) {
+    active: style.active,
-        containerClass += ` ${style.active}`;
+};
-    }
+
+const cx = classNames.bind(styles);
+
+export default function CardHeader({ icon, content, isActive = false }) {
     return (
-        <div className={containerClass}>
+        <div className={cx("container", { active: isActive })}>
             <div className={style.title}>
                 <div className={style.icon}>{icon}</div>
                 <div className={style.content}>{content}</div>

src/components/Dashboard/Dashboard.tsx

@@ -1,13 +1,17 @@
 import { useEffect, useState } from "react";
 
 import Card from "@/components/Card/Card";
-import CardHeader from "@/components/CardHeader/CardHeader";
+import {
+    CardColumn,
+    CardRow,
+} from "@/components/CardContainers/CardContainers";
 import Datetime from "@/components/Datetime/Datetime";
 import Flatastic from "@/components/Flatastic/Flatastic";
 import Footer from "@/components/Footer/Footer";
 import Terminal from "@/components/Terminal/Terminal";
 import Timetable from "@/components/Timetable/Timetable";
-import Weather from "../Weather/Weather";
+import Weather from "@/components/Weather/Weather";
+
 import style from "./style.module.css";
 
 export default function Dashboard() {
@@ -38,36 +42,31 @@ export default function Dashboard() {
 
     return (
         <div className={`${style.dashboard} ${scheme}`}>
-            <div className={style.cardWrapper}>
+            <CardColumn>
-                <Card>
+                <Card icon="🚊" name="Timetable">
-                    <CardHeader icon="🚊" content="Timetable" />
                     <Timetable />
                 </Card>
-                <div className={style.clockAndWeather}>
+
-                    <div className={style.small}>
+                <CardRow>
-                        <Card>
+                    <Card icon="🕐" name="Clock">
-                            <CardHeader icon="🕐" content="Clock" />
+                        <Datetime />
-                            <Datetime />
+                    </Card>
-                        </Card>
+
-                    </div>
+                    <Card icon="🌤" name="Weather">
-                    <Card>
-                        <CardHeader icon="🌤️" content="Weather" />
                         <Weather />
                     </Card>
-                </div>
+                </CardRow>
-                <Card>
+
-                    <CardHeader icon="🔔" content="Terminal" active={true} />
+                <Card icon="🔔" name="Terminal" active={true}>
                     <Terminal />
                 </Card>
 
-                <Card>
+                <Card icon="🧹" name="Flatastic">
-                    <CardHeader icon="🧹" content="Flatastic" />
                     <Flatastic />
                 </Card>
-            </div>
+            </CardColumn>
-            <div className={style.footer}>
+
-                <Footer />
+            <Footer />
-            </div>
         </div>
     );
 }

src/components/Dashboard/style.module.css

@@ -19,29 +19,3 @@
 .night {
     background-color: #2a3f55;
 }
-
-.clockAndWeather {
-    display: flex;
-    align-items: center;
-}
-
-.cardWrapper {
-    margin: 30px;
-    height: 100%;
-    gap: 30px;
-    flex-direction: column;
-    display: flex;
-    justify-content: flex-start;
-}
-
-.small {
-    width: 45%;
-}
-
-.terminal {
-    margin: 2px;
-}
-
-.footer {
-    background-color: #c0c0c0;
-}

src/components/Footer/Footer.tsx

@@ -1,10 +1,8 @@
 import style from "./style.module.css";
 
-import weedImage from "/img/weed.png"
+import weedImage from "/img/weed.png";
 
 export default function Footer() {
-
-
     return (
         <div className={style.container}>
             <div className={style.taskbar}>
@@ -29,6 +27,9 @@ export default function Footer() {
                     <span className={style.window}>
                         <span className={style.windowIcon}>🧹</span>Flatastic
                     </span>
+                    <span className={style.window}>
+                        <span className={style.windowIcon}>⛅</span>Weather
+                    </span>
                 </div>
             </div>
         </div>

src/components/Footer/style.module.css

@@ -1,11 +1,12 @@
 .container {
+    background-color: #c0c0c0;
     height: 30px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
-    margin: 2px;
+    padding: 2px;
 }
 
 .taskbar {

src/components/Timetable/style.module.css

@@ -1,3 +1,4 @@
 .container {
     padding: 1px 100px 30px 100px;
+    width: 100%;
 }