Finetuned/test tank width ratios.

victronenergy · Feb 28, 2024 · a0f6544 · a0f6544
1 parent 638c487
commit a0f6544
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git a/src/app/Marine2/components/boxes/Tanks/Tank/Styles.ts b/src/app/Marine2/components/boxes/Tanks/Tank/Styles.ts
@@ -3,44 +3,52 @@ import { BreakpointStylesType } from "../../../../utils/media"
 // styles for compact mode
 export const compactStyles: BreakpointStylesType = {
   default: {
-    tankName: "text-sm ",
+    tankName: "ml-1 text-sm ",
     level: "text-base min-w-[38px]",
     icon: "w-[18px]",
     iconContainer: "w-[10rem]",
     progressBar: "w-[calc(100%-14rem)]",
     percentage: "w-[4rem]",
   },
   "sm-s": {
-    tankName: "text-sm ",
+    tankName: "ml-1 text-sm ",
     level: "text-base min-w-[38px]",
     icon: "w-[24px]",
-    iconContainer: "w-[12rem]",
+    iconContainer: "w-[14rem]",
     progressBar: "hidden",
     percentage: "w-[4rem]",
   },
   "sm-m": {
-    tankName: "text-base min-w-[2rem]",
+    tankName: "ml-1 text-base",
     level: "text-base min-w-[38px]",
     icon: "w-[32px]",
-    iconContainer: "w-[12rem]",
+    iconContainer: "w-[14rem]",
     progressBar: "hidden",
     percentage: "w-[4rem]",
   },
   "md-s": {
-    tankName: "text-base",
+    tankName: "ml-1 text-base",
+    level: "text-lg min-w-[3rem]",
+    icon: "w-[24px]",
+    iconContainer: "w-[12rem]",
+    progressBar: "w-[calc(100%-16rem)]",
+    percentage: "w-[4rem]",
+  },
+  "lg-s": {
+    tankName: "ml-2 text-lg",
     level: "text-lg min-w-[3rem]",
     icon: "w-[32px]",
-    iconContainer: "w-[14rem]",
-    progressBar: "w-[calc(100%-18rem)]",
+    iconContainer: "w-[15rem]",
+    progressBar: "w-[calc(100%-19rem)]",
     percentage: "w-[4rem]",
   },
   "md-l": {
-    tankName: "text-lg",
+    tankName: "ml-2 text-lg",
     level: "text-lg min-w-[3rem]",
     icon: "w-[32px]",
-    iconContainer: "w-[12rem]",
-    progressBar: "w-[calc(100%-16rem)]",
-    percentage: "w-[4rem]",
+    iconContainer: "w-[16rem]",
+    progressBar: "hidden",
+    percentage: "w-[5rem]",
   },
 }
 

diff --git a/src/app/Marine2/components/boxes/Tanks/Tank/Tank.tsx b/src/app/Marine2/components/boxes/Tanks/Tank/Tank.tsx
@@ -41,8 +41,8 @@ const Tank = ({ tankInstanceId, componentMode, orientation = "vertical", parentS
 
   if (componentMode === "compact") {
     return (
-      <div className="flex justify-between items-center gap-2 md:mb-8 mb-4">
-        <div className={classnames("flex items-center gap-1 truncate", compactActiveStyles?.iconContainer)}>
+      <div className="flex justify-between items-center h-12">
+        <div className={classnames("flex items-center truncate", compactActiveStyles?.iconContainer)}>
           <FluidIcon fluid={fluidTypeNum} className={classnames("shrink-0", compactActiveStyles?.icon)} />
           <div className={classnames("truncate", compactActiveStyles?.tankName)}>{tankTitle} </div>
         </div>
@@ -63,22 +63,22 @@ const Tank = ({ tankInstanceId, componentMode, orientation = "vertical", parentS
 
   if (orientation === "vertical") {
     return (
-      <div className="flex justify-between items-center gap-2 md:mb-6 mb-4">
-        <div className="flex items-center gap-1 w-[17rem] sm:w-[10rem] md:w-[12rem] truncate">
+      <div className="flex justify-between items-center h-16">
+        <div className="flex items-center w-[14rem] truncate">
           <FluidIcon fluid={fluidTypeNum} className="shrink-0 w-[32px]" />
-          <div className="flex flex-col truncate">
+          <div className="flex flex-col mx-2 truncate">
             <div className="truncate text-base">{tankTitle}</div>
             <Capacity remaining={remaining} unit={unit} capacity={capacity} className="text-xs" />
           </div>
         </div>
-        <div className="xs:hidden md:w-[calc(100%-22rem)] lg:w-[calc(100%-17rem)]">
+        <div className="xs:hidden md:w-[calc(100%-19rem)]">
           <ProgressBar percentage={percentage} type={fluidTypeNum} size="large" />
         </div>
         <div className="w-[5rem]">
           <ValueWithPercentage
             fluid={fluidTypeNum}
             level={level}
-            className="text-lg md:text-xl min-w-[3.8rem]"
+            className="text-lg md:text-md xl:text-xl min-w-[3.8rem]"
             isAuxillaryTank={isAuxiliaryTank}
           />
         </div>