more mobile layout improvements

lucasheriques · Jan 11, 2025 · b3282c5 · b3282c5
1 parent 551fc75
commit b3282c5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 24 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -23,9 +23,5 @@ jobs:
       - name: Run tests
         run: pnpm test:ci
 
-      - name: Block Deployment if Tests Fail
-        if: failure()
-        run: |
-          curl -X POST ${{ secrets.DEPLOY_HOOK_URL }} \
-          -H "Content-Type: application/json" \
-          -d '{"target":"preview", "state":"canceled"}'
+      - name: Deploy to Vercel
+        run: curl -X POST ${{ secrets.DEPLOY_HOOK_URL }}
diff --git a/src/app/gerador-de-invoice/components/invoice-history.tsx b/src/app/gerador-de-invoice/components/invoice-history.tsx
@@ -33,18 +33,23 @@ function InvoiceHistoryCard({
         onClick(formInvoice);
         setCurrency(invoice.currency);
       }}
-      className="w-full text-left p-4 rounded-lg border border-slate-800 hover:bg-slate-800/50 transition-colors space-y-2 motion-preset-slide-right "
+      className="min-w-40 lg:w-full text-left p-4 rounded-lg border border-slate-800 hover:bg-slate-800/50 transition-colors space-y-3 motion-preset-slide-right"
     >
-      <div className="flex justify-between items-start">
-        <div>
-          <p className="font-medium">Invoice #{invoice.invoiceNumber}</p>
+      <div className="flex flex-col lg:flex-row justify-between items-start gap-2">
+        <div className="w-full lg:w-auto">
+          <p className="font-medium">
+            {`${invoice.invoiceNumber !== "" ? `#${invoice.invoiceNumber}` : "Invoice"}`}
+          </p>
+          <p className="text-primary font-medium lg:hidden">{invoice.total}</p>
           <p className="text-sm text-slate-400">{formattedDate}</p>
         </div>
-        <p className="text-primary font-medium">{invoice.total}</p>
+        <p className="text-primary font-medium hidden lg:block">
+          {invoice.total}
+        </p>
       </div>
-      <div className="text-sm text-slate-400">
-        <p>From: {invoice.vendorInfo.name}</p>
-        <p>To: {invoice.customerInfo.name}</p>
+      <div className="text-sm text-slate-400 space-y-1">
+        <p className="truncate">From: {invoice.vendorInfo.name}</p>
+        <p className="truncate">To: {invoice.customerInfo.name}</p>
       </div>
     </button>
   );
@@ -82,13 +87,17 @@ export default function InvoiceHistory({
   }, [invoiceHistory, searchTerm]);
 
   const handleClearHistory = () => {
-    if (window.confirm("Are you sure you want to clear all invoice history?")) {
+    if (
+      window.confirm(
+        "Tem certeza que deseja limpar o seu histórico de invoices?"
+      )
+    ) {
       setInvoiceHistory([]);
     }
   };
 
   return (
-    <div className="w-80 shrink-0 space-y-4">
+    <div className="space-y-4">
       <div className="flex justify-between items-center">
         <h2 className="text-lg font-semibold">Histórico de Invoices</h2>
         {invoiceHistory.length > 0 && (
@@ -125,7 +134,7 @@ export default function InvoiceHistory({
         </div>
       )}
 
-      <div className="space-y-2">
+      <div className="flex lg:flex-col gap-2 overflow-auto nice-scrollbar">
         {invoiceHistory.length === 0 ? (
           <p className="text-sm text-slate-400">Nenhuma invoice gerada ainda</p>
         ) : filteredHistory.length === 0 ? (
@@ -134,19 +143,19 @@ export default function InvoiceHistory({
           </p>
         ) : (
           <>
-            {filteredHistory.slice(0, 5).map((invoice) => (
+            {filteredHistory.map((invoice) => (
               <InvoiceHistoryCard
                 key={invoice.id}
                 invoice={invoice}
                 onClick={onSelect}
                 setCurrency={setCurrency}
               />
             ))}
-            {filteredHistory.length > 5 && (
+            {/* {filteredHistory.length > 5 && (
               <p className="text-sm text-center text-slate-400">
                 +{filteredHistory.length - 5} invoices mais antigas
               </p>
-            )}
+            )} */}
           </>
         )}
       </div>

diff --git a/src/app/gerador-de-invoice/invoice-generator.tsx b/src/app/gerador-de-invoice/invoice-generator.tsx
@@ -258,7 +258,7 @@ function formatCurrency(amount: string | number, currency: CurrencyCode) {
 }
 
 const InvoiceHistorySkeleton = () => (
-  <div className="w-80 shrink-0 space-y-4 ">
+  <div className="space-y-4">
     <div className="flex justify-between items-center">
       <h2 className="text-lg font-semibold">Histórico de Invoices</h2>
       <Button
@@ -501,8 +501,8 @@ export default function InvoiceGenerator() {
   };
 
   return (
-    <div className="flex gap-4 lg:gap-8">
-      <div className="hidden lg:block">
+    <div className="grid lg:gap-8 gap-4 lg:grid-cols-12">
+      <div className="nice-scrollbar lg:px-4 lg:-mx-4 lg:col-span-3 overflow-auto">
         <Suspense fallback={<InvoiceHistorySkeleton />}>
           <InvoiceHistory onSelect={setFormData} setCurrency={setCurrency} />
         </Suspense>
@@ -511,7 +511,7 @@ export default function InvoiceGenerator() {
       {/* Invoice Form */}
       <form
         onSubmit={handleSubmit}
-        className="flex-1 space-y-4 lg:space-y-8 bg-slate-900 rounded-xl border border-slate-800 p-4 lg:p-8 max-w-full"
+        className="lg:col-span-9 space-y-4 lg:space-y-8 bg-slate-900 rounded-xl border border-slate-800 p-4 max-w-full"
       >
         {/* Rest of the form remains the same */}
         {/* Header Section */}