Better responsive

Author: PastaLaPate

src/components/Topbar.tsx

@@ -44,21 +44,15 @@ export default function TopBar({ octoprintState }: TopBarProps) {
   useEffect(() => {
     let color = "bg-green-500";
     let message = "";
-    if (
-      !backendStatus.connected &&
-      octoprintState.connectionInfos.connected === false
-    ) {
+    if (!backendStatus.connected && octoprintState.connectionInfos.connected === false) {
       color = "bg-red-600";
       message = "Backend is not connected and printer is disconnected.";
       setGlobalStatus({
         color,
         message,
       });
       return;
-    } else if (
-      !backendStatus.connected ||
-      octoprintState.connectionInfos.connected === false
-    ) {
+    } else if (!backendStatus.connected || octoprintState.connectionInfos.connected === false) {
       color = "bg-orange-400";
     }
     if (!backendStatus.connected) {
@@ -74,7 +68,7 @@ export default function TopBar({ octoprintState }: TopBarProps) {
     });
   }, [backendStatus, octoprintState.connectionInfos]);
   return (
-    <div className="relative flex items-center justify-between bg-slate-800 sm:h-10 md:h-20">
+    <div className="relative flex items-center justify-between bg-slate-800 sm:h-10 md:h-15 lg:h-20">
       <div className="flex flex-row items-center">
         {octoprintState.toolTemp.current !== 0 && (
           <>
@@ -83,9 +77,7 @@ export default function TopBar({ octoprintState }: TopBarProps) {
             </div>
             <p className="text-lg">
               {String(Math.round(octoprintState.toolTemp.current)) +
-                (octoprintState.toolTemp.target !== 0
-                  ? `/${octoprintState.toolTemp.target}`
-                  : "")}
+                (octoprintState.toolTemp.target !== 0 ? `/${octoprintState.toolTemp.target}` : "")}
             </p>
           </>
         )}
@@ -96,9 +88,7 @@ export default function TopBar({ octoprintState }: TopBarProps) {
             </div>
             <p className="text-lg">
               {String(Math.round(octoprintState.bedTemp.current)) +
-                (octoprintState.bedTemp.target !== 0
-                  ? `/${octoprintState.bedTemp.target}`
-                  : "")}
+                (octoprintState.bedTemp.target !== 0 ? `/${octoprintState.bedTemp.target}` : "")}
             </p>
           </>
         )}
@@ -112,7 +102,7 @@ export default function TopBar({ octoprintState }: TopBarProps) {
         <div
           className={cn(
             "flex items-center justify-center rounded-lg bg-slate-700 hover:cursor-pointer md:h-8 md:w-8 md:rounded-md lg:h-12 lg:w-12",
-            loading && "!cursor-not-allowed",
+            loading && "!cursor-not-allowed"
           )}
           onClick={async () => {
             if (loading) return;
@@ -122,8 +112,7 @@ export default function TopBar({ octoprintState }: TopBarProps) {
               message: "Refreshing status and trying to connect to printer...",
             });
             try {
-              const response =
-                await octoprintState.node.local.getBackendStatus();
+              const response = await octoprintState.node.local.getBackendStatus();
               await octoprintState.node.printer.connectPrinter();
               setBackendStatus(response);
             } catch (error) {
@@ -135,12 +124,7 @@ export default function TopBar({ octoprintState }: TopBarProps) {
             }
           }}
         >
-          <RefreshCw
-            className={cn(
-              "md:h-6 md:w-6 lg:h-8 lg:w-8",
-              loading && "animate-spin",
-            )}
-          />
+          <RefreshCw className={cn("md:h-6 md:w-6 lg:h-8 lg:w-8", loading && "animate-spin")} />
         </div>
       </div>
     </div>

src/routes/app/Control.tsx

@@ -111,23 +111,23 @@ function GeneralControlPanel() {
     printer && (
       <div className="flex w-[50vw] flex-row items-center justify-center gap-6">
         <div>
-          <div className="relative flex h-60 w-60 rounded-2xl border-2 border-transparent bg-gradient-to-br from-slate-800 to-slate-900 p-3 shadow-lg">
+          <div className="relative flex rounded-2xl border-2 border-transparent bg-gradient-to-br from-slate-800 to-slate-900 p-3 shadow-lg md:h-30 md:w-60 lg:h-60 lg:w-60">
             <div
-              className="absolute top-4 left-1/2 flex -translate-x-1/2 flex-col items-center justify-center"
+              className="absolute flex flex-col items-center justify-center md:top-1/2 md:left-2 md:-translate-y-1/2 lg:top-4 lg:left-1/2 lg:-translate-x-1/2"
               onClick={() => printer.tool.extrude(-Number(step))}
             >
               <p className="text-base font-bold text-blue-400">Intrude</p>
-              <ChevronUp size={50} />
+              <ChevronUp size={50} className="md:-rotate-90 lg:rotate-0" />
             </div>
             <Nozzle
               className="absolute top-1/2 left-1/2 h-14 w-14 -translate-x-1/2 -translate-y-1/2"
               stroke="var(--color-blue-400)"
             />
             <div
-              className="absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col items-center justify-center"
+              className="absolute flex items-center justify-center md:top-1/2 md:right-2 md:-translate-y-1/2 md:flex-col-reverse lg:bottom-4 lg:left-1/2 lg:flex-col"
               onClick={() => printer.tool.extrude(Number(step))}
             >
-              <ChevronDown size={50} />
+              <ChevronDown size={50} className="md:-rotate-90 lg:rotate-0" />
               <p className="text-base font-bold text-blue-400">Extrude</p>
             </div>
           </div>
@@ -157,13 +157,13 @@ function GeneralControlPanel() {
         </div>
         <div className="flex-col items-center justify-center">
           <TempViewer
-            className={"mb-6 w-60"}
+            className={"mb-6 md:w-30 xl:w-60"}
             inputClassName={"!w-25 !text-2xl"}
             octoprintState={OctoprintState}
             target="tool"
           />
           <TempViewer
-            className={"w-60"}
+            className={"md:w-30 xl:w-60"}
             inputClassName={"!w-25 !text-2xl"}
             octoprintState={OctoprintState}
             target="bed"