From 6556828afe63476fc03546ae51e3ba5104162ee8 Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.com>
Date: Wed, 30 Aug 2023 14:32:42 +0530
Subject: changed clients list

---
 css/manage/_client.scss | 71 ++++++++++++++++++++++++++-----------------------
 css/styles.scss         |  2 ++
 2 files changed, 40 insertions(+), 33 deletions(-)

(limited to 'css')

diff --git a/css/manage/_client.scss b/css/manage/_client.scss
index 36ff66a..4466a6a 100644
--- a/css/manage/_client.scss
+++ b/css/manage/_client.scss
@@ -4,44 +4,49 @@
     width: 100%;
 
     .clients-list-wrapper {
-        .clients-list {
-            .clients-list-item {
-                border-bottom: 1px solid var(--link-fg);
-                display: flex;
-                flex-direction: column;
-                gap: 1rem;
+        $header-height: 3rem;
+        $list-item-height: 2.5rem;
+        $pd: 0.7em;
+        position: relative;
 
-                .header {
-                    display: flex;
-                    align-items: center;
-                    gap: 0.5em;
-                    font-size: 1.4em;
-
-                    .client-name {
-                        font-weight: bold;
-                    }
+        .clients-list-header, .clients-list-item {
+            display: grid;
+            grid-template-columns: 5rem 2fr 1fr 1fr;
+            padding: 0 $pd;
+            align-items: center;
+        }
 
-                    .client-gstin {
-                        font-size: 0.8em;
-                        color: var(--body-fg-alt);
-                    }
-                }
+        .clients-list-header {
+            $br: $pd;
+            background-color: var(--body-bg-alt);
+            width: 100%;
+            height: $header-height;
+            position: absolute;
+            top: 0;
+            left: 0;
+            border-bottom: 1px solid var(--link-fg);
+            font-weight: bold;
+            font-size: 1.2em;
+            border-radius: $br $br 0 0;
+        }
 
-                .details {
-                    margin: auto;
-                    width: 98%;
-                    display: grid;
-                    grid-template-columns: 1fr 1fr 2fr;
+        .clients-list {
+            border: 1px solid var(--body-bg-alt);
+            min-height: 40rem;
+            max-height: 75vh;
+            overflow: scroll;
+            width: 100%;
+            position: absolute;
+            top: $header-height;
+            left: 0;
 
-                    .contact-info, .client-address {
-                        display: flex;
-                        flex-direction: column;
+            .clients-list-item {
+                grid-template-rows: $list-item-height;
+                font-size: 1.2em;
+            }
 
-                        .title {
-                            font-weight: bold;
-                        }
-                    }
-                }
+            .clients-list-item:nth-child(even) {
+                background-color: var(--body-bg-alt);
             }
         }
     }
diff --git a/css/styles.scss b/css/styles.scss
index b2f09ba..4bdf9a7 100644
--- a/css/styles.scss
+++ b/css/styles.scss
@@ -9,6 +9,8 @@
 :root {
     --body-bg: #282a36;
     --body-fg: #f8f8f8;
+    //--body-bg-alt: #161720;
+    --body-bg-alt: #21232f;
     --body-fg-alt: lightgray;
 
     --nav-bg: #383a59;
-- 
cgit v1.2.3