Merge pull request #81 from hisabi-app/fix/card-height-for-arc-browser

fix: cards height for arc browser and small UI tweeks
hisabi-app · Aug 30, 2024 · e9eada0 · e9eada0
2 parents 5919e74 + c357327
commit e9eada0
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 23 deletions.
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=6d6922f70813e7630d36ac6196ced5c1",
-    "/css/app.css": "/css/app.css?id=506f15ca3a2c203c3018aed2631dcf48"
+    "/js/app.js": "/js/app.js?id=81ff0cdd84c446508f81735b114ca8ff",
+    "/css/app.css": "/css/app.css?id=8c7ff6f513f0bb668897c02548d45bc8"
 }
diff --git a/resources/js/Components/Domain/CirclePackMetric.js b/resources/js/Components/Domain/CirclePackMetric.js
@@ -36,7 +36,7 @@ export default function CirclePackMetric({name, graphql_query, ranges}) {
     }
 
     return (
-        <div className={"bg-white shadow rounded-lg"}>
+        <div className={"bg-white shadow rounded-lg w-full overflow-hidden"}>
             <div className="px-6 py-4">
                 <div className="flex justify-between items-center mb-2">
                     <h3 className="mr-3 text-base text-gray-700 font-bold">{ name }</h3>

diff --git a/resources/js/Components/Domain/PartitionMetric.js b/resources/js/Components/Domain/PartitionMetric.js
@@ -92,7 +92,7 @@ export default function PartitionMetric({ name, graphql_query, ranges, relation,
             <div className="px-6 py-4 flex flex-col h-full">
                 <div className="flex justify-between items-center mb-2">
                     <div className="flex items-center">
-                        <h3 className="mr-2 text-base text-gray-700 font-bold">{ name }</h3>
+                        <h3 className="mr-3 text-base text-gray-600">{ name }</h3>
 
                         {relation && relationData && <select className="ml-auto min-w-24 h-8 text-xs border-none appearance-none pl-2 pr-6 active:outline-none active:shadow-outline focus:outline-none focus:shadow-outline"
                             name="relation"
@@ -110,10 +110,6 @@ export default function PartitionMetric({ name, graphql_query, ranges, relation,
                     </select>
                 </div>
 
-                <div className="absolute w-20 h-20" style={{right: '35px', top: '40%'}}>
-                    <canvas id={graphql_query}></canvas>
-                </div>
-
                 <div className='grow overflow-y-auto'>
                     <ul className="list-reset">
                         {data.map((item, index) => <li key={index} className="text-xs text-gray-700 leading-normal">
@@ -126,6 +122,10 @@ export default function PartitionMetric({ name, graphql_query, ranges, relation,
                         No data found
                     </p>}
                 </div>
+
+                <div className="absolute w-20 h-20" style={{right: '35px', top: '40%'}}>
+                    <canvas id={graphql_query}></canvas>
+                </div>
             </div>
         </Card>
     );

diff --git a/resources/js/Components/Domain/TrendMetric.js b/resources/js/Components/Domain/TrendMetric.js
@@ -253,7 +253,7 @@ export default function TrendMetric({ name, graphql_query, ranges, relation, sho
             <div className="px-6 py-4">
                 <div className="flex justify-between items-center mb-2">
                     <div className="flex items-center">
-                        <h3 className="mr-2 text-base text-gray-700 font-bold">{ name }</h3>
+                        <h3 className="mr-2 text-base text-gray-600">{ name }</h3>
 
                         {relation && relationData && <select className="ml-auto min-w-24 h-8 text-xs border-none appearance-none pl-2 pr-6 active:outline-none active:shadow-outline focus:outline-none focus:shadow-outline"
                             name="relation"

diff --git a/resources/js/Components/Domain/ValueMetric.js b/resources/js/Components/Domain/ValueMetric.js
@@ -34,7 +34,7 @@ export default function ValueMetric({name, helpText, graphql_query, ranges}) {
     }
 
     const increaseOrDecrease = () => {
-        if (previous == 0 || previous == null || value == 0)
+        if (previous == 0 || previous == null)
           return 0
 
         return (((value - previous) / previous) * 100).toFixed(2)
@@ -56,9 +56,9 @@ export default function ValueMetric({name, helpText, graphql_query, ranges}) {
 
     return (
         <Card className='relative'>
-            <div className="px-6 py-4">
-                <div className="flex justify-between items-center mb-2">
-                    <h3 className="mr-3 text-base text-gray-700 font-bold">{ name }</h3>
+            <div className="px-6 py-4 flex flex-col h-full gap-y-2">
+                <div className="flex grow-0 justify-between items-center">
+                    <h3 className="mr-3 text-base text-gray-600">{ name }</h3>
 
                     {ranges && <select className="ml-auto min-w-24 h-8 text-xs border-none appearance-none bg-gray-100 pl-2 pr-6 rounded active:outline-none active:shadow-outline focus:outline-none focus:shadow-outline"
                         name="range"
@@ -68,11 +68,11 @@ export default function ValueMetric({name, helpText, graphql_query, ranges}) {
                     </select>}
                 </div>
 
-                <p className="flex items-center text-4xl mb-4">
+                <p className="flex grow-1 items-center text-3xl">
                     { getAppCurrency() } { formatNumber(value) }
                 </p>
 
-                {increaseOrDecrease() !== 0 && <div className="flex">
+                {increaseOrDecrease() !== 0 && <div className="flex grow-0">
                     {increaseOrDecreaseLabel() === 'Increase' && <TrendingUpIcon className={["mr-2 h-5 w-5", increaseColor()].join(' ')} aria-hidden="true" />}
                     {increaseOrDecreaseLabel() === 'Decrease' && <TrendingDownIcon className={["mr-2 h-5 w-5", decreaseColor()].join(' ')} aria-hidden="true" />}
 

diff --git a/resources/js/Components/Global/Card.js b/resources/js/Components/Global/Card.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 const Card = ({children, className = ''}) => {
     return (
-        <div className={`bg-white shadow rounded-lg h-[160px] ${className}`}>
+        <div className={`bg-white shadow rounded-lg min-h-[150px] ${className}`}>
             {children}
         </div>
     )

diff --git a/resources/js/Components/Global/Wrapper.js b/resources/js/Components/Global/Wrapper.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function Wrapper({ children, width='1/3' }) {
   return ( 
-    <div className={`px-3 mb-6 w-full md:w-${width}`}>
+    <div className={`px-3 mb-6 w-full grid md:w-${width}`}>
       {children}
     </div> 
   );

diff --git a/resources/js/Pages/Dashboard.js b/resources/js/Pages/Dashboard.js
@@ -5,7 +5,6 @@ import Wrapper from '@/Components/Global/Wrapper';
 import { renderComponent } from '@/Components';
 import Authenticated from '@/Layouts/Authenticated';
 import NoContent from '@/Components/Global/NoContent';
-import Card from "@/Components/Global/Card";
 
 export default function Dashboard({auth, metrics, budgets, hasData}) {
     return (
@@ -19,8 +18,8 @@ export default function Dashboard({auth, metrics, budgets, hasData}) {
                     <div className={'w-full flex flex-wrap'}>
                         {budgets.length > 0 && budgets.map( (budget, index) => {
                             return <Wrapper key={index} width={'1/3'}>
-                                <Card className={'w-full'}>
-                                    <div className="p-4">
+                                <div className={'bg-white shadow rounded-lg w-full min-h-[170]'}>
+                                    <div className="p-4 h-full">
                                         <h3 className="mr-3 text-base text-gray-700 font-bold">{budget.name}</h3>
                                         <div className="mt-2">
                                             <div className="w-full flex items-center h-6 bg-blue-50 rounded-full relative">
@@ -36,7 +35,7 @@ export default function Dashboard({auth, metrics, budgets, hasData}) {
 
                                         <p className="text-xs text-gray-500 text-center mt-1">You can spend AED {budget.total_margin_per_day} per day for {budget.remaining_days} more days</p>
                                     </div>
-                                </Card>
+                                </div>
                             </Wrapper>
                         })}
                     </div>