web: fix pv icon + realign summary in mobile screen

hoang-rio · Dec 9, 2024 · f293176 · f293176
1 parent 36cfccb
commit f293176
Show file tree

Hide file tree

Showing 14 changed files with 37 additions and 22 deletions.
diff --git a/web_viewer/fe_src/src/components/DisplayYield.tsx b/web_viewer/fe_src/src/components/DisplayYield.tsx
@@ -8,9 +8,9 @@ interface IProps {
 }
 function DisplayYield({ total, ePVDay }: IProps) {
   return (
-    <div className="row justify-space-between">
-      <img src="/assets/icon_consumption.png" />
-      <div className="yield-texts text-right">
+    <div className="row justify-space-between align-center">
+      <img src="/assets/icon_solor_yielding.png" />
+      <div className="yield-texts summary-item-content-texts ">
         <GeneralValue value={ePVDay} unit=" kWh" />
         <div className="description">Yield today</div>
         {total && (

diff --git a/web_viewer/fe_src/src/components/Summary.css b/web_viewer/fe_src/src/components/Summary.css
@@ -43,6 +43,10 @@
     height: 102px;
 }
 
+.summary-item-content>.row>.summary-item-content-texts {
+    text-align: right;
+}
+
 @media (prefers-color-scheme: light) {
     .summary-item {
         background-color: #fff;
@@ -65,11 +69,19 @@
     }
 
     .summary-item-content img {
-        width: 40px;
-        height: 40px;
+        width: 50px;
+        height: 50px;
     }
 
     .summary-item-content .description {
         font-size: 14px;
     }
+
+    .summary-item-content>.row {
+        flex-direction: row-reverse;
+    }
+
+    .summary-item-content>.row>.summary-item-content-texts {
+        text-align: left;
+    }
 }
diff --git a/web_viewer/fe_src/src/components/Summary.tsx b/web_viewer/fe_src/src/components/Summary.tsx
@@ -69,7 +69,10 @@ function Summary({ invertData }: IProps) {
 
   return (
     <div className="summary row">
-      <div className="yield summary-item flex-1 col" onClick={switchYieldDisplay}>
+      <div
+        className="yield summary-item flex-1 col"
+        onClick={switchYieldDisplay}
+      >
         <div className="summary-item-title">Solar Yield</div>
         <div className="summary-item-content col flex-1">
           {yieldDisplay === YieldDisplay.YEILD && (
@@ -101,9 +104,9 @@ function Summary({ invertData }: IProps) {
           {isShowCharged ? "Battery Charged" : "Battery Discharge"}
         </div>
         <div className="summary-item-content">
-          <div className="row justify-space-between">
+          <div className="row justify-space-between align-center">
             <img src="/assets/icon_battery_discharging.png" />
-            <div className="text-right">
+            <div className="summary-item-content-texts">
               <GeneralValue
                 value={
                   isShowCharged ? invertData.e_chg_day : invertData.e_dischg_day
@@ -139,15 +142,15 @@ function Summary({ invertData }: IProps) {
           {isShowFeed ? "Feed-in Energy" : "Import"}
         </div>
         <div className="summary-item-content">
-          <div className="row justify-space-between">
+          <div className="row justify-space-between align-center">
             <img
               src={
                 isShowFeed
                   ? "/assets/icon_feed_in_energy.png"
                   : "/assets/icon_import.png"
               }
             />
-            <div className="feed-texts text-right">
+            <div className="feed-texts summary-item-content-texts">
               <div className="col">
                 <GeneralValue
                   value={
@@ -182,9 +185,9 @@ function Summary({ invertData }: IProps) {
       <div className="comsumption summary-item flex-1">
         <div className="summary-item-title ">Comsumption</div>
         <div className="summary-item-content">
-          <div className="row justify-space-between">
+          <div className="row justify-space-between align-center">
             <img src="/assets/icon_consumption.png" />
-            <div className="feed-texts text-right">
+            <div className="feed-texts summary-item-content-texts">
               <GeneralValue
                 value={(
                   invertData.e_inv_day +

diff --git a/...ewer/public/assets/DailyChart-cpmY1Yj3.js → ...ewer/public/assets/DailyChart-e2Y04239.js b/...ewer/public/assets/DailyChart-cpmY1Yj3.js → ...ewer/public/assets/DailyChart-e2Y04239.js
diff --git a/...er/public/assets/GeneralValue-B-lBKyns.js → ...er/public/assets/GeneralValue-C0OgA8_8.js b/...er/public/assets/GeneralValue-B-lBKyns.js → ...er/public/assets/GeneralValue-C0OgA8_8.js
@@ -1 +1 @@
-import{j as e}from"./index-CqVdXGey.js";function l({value:r,unit:s,className:n}){return e.jsxs("div",{className:`${n||""} general-value`,children:[e.jsx("strong",{children:r}),s]})}export{l as G};
+import{j as e}from"./index-CgOgt2wm.js";function l({value:r,unit:s,className:n}){return e.jsxs("div",{className:`${n||""} general-value`,children:[e.jsx("strong",{children:r}),s]})}export{l as G};
diff --git a/...wer/public/assets/HourlyChart-BAsX8E_2.js → ...wer/public/assets/HourlyChart-D4E1vXIr.js b/...wer/public/assets/HourlyChart-BAsX8E_2.js → ...wer/public/assets/HourlyChart-D4E1vXIr.js
diff --git a/web_viewer/public/assets/Summary-BZAtnCk6.js b/web_viewer/public/assets/Summary-BZAtnCk6.js
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		import{j as e}from"./index-CqVdXGey.js";function l({value:r,unit:s,className:n}){return e.jsxs("div",{className:`${n\|\|""} general-value`,children:[e.jsx("strong",{children:r}),s]})}export{l as G};
		import{j as e}from"./index-CgOgt2wm.js";function l({value:r,unit:s,className:n}){return e.jsxs("div",{className:`${n\|\|""} general-value`,children:[e.jsx("strong",{children:r}),s]})}export{l as G};