Merge pull request #4 from SyncfusionExamples/EJ2-932646-UI-changes

932646: Enhancing the UI for a More Attractive Stock Management Application with tailwind3.
SyncfusionExamples · Jan 9, 2025 · a1b8ffc · a1b8ffc
2 parents c08d58b + 06ccc82
commit a1b8ffc
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 15 deletions.
diff --git a/Stock-Market-Application/src/components/MyPortfolio.tsx b/Stock-Market-Application/src/components/MyPortfolio.tsx
@@ -236,14 +236,14 @@ export default function MyPortfolio(props: { changeMarquee: Function, myStockDm:
                       title: 'Remove from Wishlist',
                       buttonOption: {
                         iconCss: 'removemywishlist e-icons',
-                        cssClass: 'e-flat',
+                        cssClass: 'e-warning',
                       },
                     },
                     {
                       title: 'Analysis',
                       buttonOption: {
                         iconCss: 'analysis e-icons',
-                        cssClass: 'e-flat',
+                        cssClass: 'e-primary',
                       },
                     },
                   ]}

diff --git a/Stock-Market-Application/src/components/Overview.tsx b/Stock-Market-Application/src/components/Overview.tsx
@@ -175,6 +175,17 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
       let query: Query = new Query().where(Predicate.or(predicates));
       (props.myStockDm as any).persistQuery = query;
       props.myStockDm.setPersistData({} as any, 'myStocks', query);
+      if (myWishList.length) {
+        const myWishlistIcon = args.target.querySelector('.addmywishlist');
+        if (myWishlistIcon) {
+          myWishlistIcon.classList.remove('addmywishlist');
+          myWishlistIcon.classList.add('addedmywishlist');
+        }
+        if (args.target.classList.contains('e-primary')) {
+          args.target.classList.remove('e-primary');
+          args.target.classList.add('e-success');
+        }
+      }
     }
     if (args.target!.querySelector('.analysis')) {
       navigate('/stock_analysis', {
@@ -233,6 +244,7 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
               enableHover={false}
               commandClick={commandClick}
               destroyed={destroyed}
+              height={341}
             >
               <ColumnsDirective>
                 <ColumnDirective
@@ -308,14 +320,14 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
                       title: 'Add to Wishlist',
                       buttonOption: {
                         iconCss: 'addmywishlist e-icons',
-                        cssClass: 'e-flat',
+                        cssClass: 'e-primary' ,
                       },
                     },
                     {
                       title: 'Analysis',
                       buttonOption: {
                         iconCss: 'analysis e-icons',
-                        cssClass: 'e-flat',
+                        cssClass: 'e-primary',
                       },
                     },
                   ]}

diff --git a/Stock-Market-Application/src/components/SmartStockPicks.tsx b/Stock-Market-Application/src/components/SmartStockPicks.tsx
@@ -159,6 +159,17 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
       let query: Query = new Query().where(Predicate.or(predicates));
       (props.myStockDm as any).persistQuery = query;
       props.myStockDm.setPersistData({} as any, 'myStocks', query);
+      if (myWishList.length) {
+        const myWishlistIcon = args.target.querySelector('.addmywishlist');
+        if (myWishlistIcon) {
+          myWishlistIcon.classList.remove('addmywishlist');
+          myWishlistIcon.classList.add('addedmywishlist');
+        }
+        if (args.target.classList.contains('e-primary')) {
+          args.target.classList.remove('e-primary');
+          args.target.classList.add('e-success');
+        }
+      }
     }
     if (args.target!.querySelector('.analysis')) {
       navigate('/stock_analysis', {
@@ -190,7 +201,8 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
                 created={onGridCreated}
                 queryCellInfo={queryCellInfo}
                 commandClick={commandClick}
-                pageSettings={{pageSize: 10}}
+                pageSettings={{ pageCount: 4, pageSize: 10 }}
+                height={341}
               >
                 <ColumnsDirective>
                   <ColumnDirective
@@ -265,14 +277,14 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
                         title: 'Add to Wishlist',
                         buttonOption: {
                           iconCss: 'addmywishlist e-icons',
-                          cssClass: 'e-flat',
+                          cssClass: 'e-primary',
                         },
                       },
                       {
                         title: 'Analysis',
                         buttonOption: {
                           iconCss: 'analysis e-icons',
-                          cssClass: 'e-flat',
+                          cssClass: 'e-primary',
                         },
                       },
                     ]}

diff --git a/Stock-Market-Application/src/style.css b/Stock-Market-Application/src/style.css
@@ -3,6 +3,10 @@
   content: '\e805';
 }
 
+.addedmywishlist.e-icons::before {
+  content: '\e774';
+}
+
 .removemywishlist.e-icons::before {
   content: '\e87f';
 }
@@ -18,6 +22,7 @@
   background-color: #151e28;
   padding: 10px 20px;
   border-bottom: 1px solid #2C2C2C;
+  height: 65px;
 }
 
 .nav-link {
@@ -27,7 +32,6 @@
   padding: 8px 15px;
   margin: 0 5px;
   border-radius: 4px;
-  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .nav-link.active {
@@ -196,7 +200,6 @@
 /* main content */
 
 .main-content {
-  min-height: 600px;
   background-color: #FFFFFF;
   color: #000000;
   padding: 20px;
@@ -206,7 +209,7 @@
 
 .stock-content-area {
   padding-left: 20px;
-  min-height: 450px;
+  min-height: 300px;
   background-color: #FFFFFF;
   border-radius: 4px;
 }
@@ -275,6 +278,7 @@
 .section1,
 .section2 {
   display: inline-block;
+  max-height: calc(100% - 30px);
 }
 
 .section1,
@@ -347,6 +351,7 @@ text#stockchartdefault_ChartTitle {
 .e-card .e-card-content {
   color: #333;
   padding: 0 16px 16px 16px;
+  max-height: 60px;
 }
 
 .e-card .e-card-actions {
@@ -390,12 +395,15 @@ text#stockchartdefault_ChartTitle {
 
 /* Know More */
 
+.control-pane .control-section.db-carousel-section {
+  height: 530px;
+  overflow-y: scroll;
+}
+
 .db-carousel-section .carousel-sample {
   border-radius: 0.5em;
   margin: 0 auto 2em;
   max-width: 1000px;
-  height: 550px;
-  padding-top: 10px;
 }
 
 .db-carousel {
@@ -443,19 +451,22 @@ text#stockchartdefault_ChartTitle {
 
 @media screen and (min-width: 700px) {
   .e-card-content {
-    min-height: 200px;
+    min-height: 160px;
+    max-height: 170px;
   }
 }
 
 @media screen and (min-width: 800px) {
   .e-card-content {
-    min-height: 150px;
+    min-height: 130px;
+    max-height: 140px;
   }
 }
 
 @media screen and (min-width: 900px) {
   .e-card-content {
-    min-height: 130px;
+    min-height: 110px;
+    max-height: 120px;
   }
 }
 
@@ -467,6 +478,13 @@ text#stockchartdefault_ChartTitle {
   }
 }
 
+@media screen and (max-width: 850px) {
+  .nav-link.active,
+  .nav-link:hover {
+    background-color: transparent;
+  }
+}
+
 @media only screen and (max-width: 700px) {
 
   /* Overview */