932646: Enhancing the UI for a More Attractive Stock Management Appli…

…cation with tailwind3.
SyncfusionExamples · Jan 17, 2025 · e9e20df · e9e20df
1 parent a6c75b9
commit e9e20df
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 13 deletions.
diff --git a/Stock-Market-Application/src/components/ClimbersFallers.tsx b/Stock-Market-Application/src/components/ClimbersFallers.tsx
@@ -55,6 +55,7 @@ export default function ClimbersFallers() {
             allowPaging={true}
             pageSettings={{ pageCount: 4, pageSize: 7 }}
             enableHover={false}
+            height={270}
           >
             <ColumnsDirective>
               <ColumnDirective
@@ -134,6 +135,7 @@ export default function ClimbersFallers() {
             allowPaging={true}
             pageSettings={{ pageCount: 4, pageSize: 7 }}
             enableHover={false}
+            height={270}
           >
             <ColumnsDirective>
               <ColumnDirective

diff --git a/Stock-Market-Application/src/components/News.tsx b/Stock-Market-Application/src/components/News.tsx
@@ -128,6 +128,67 @@ const News = () => {
                 </div>
               </div>
             </div>
+            <div className="row">
+              <div className="row card-layout">
+                <div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
+                  <div className="e-card card7" id="basic_card">
+                    <div className="e-card-header">
+                      <div className="e-card-header-caption">
+                        <div className="e-card-header-title">
+                          Healthcare Innovation Surge
+                        </div>
+                      </div>
+                    </div>
+                    <div className="e-card-content">
+                      Healthcare companies are driving breakthroughs in biotechnology and medical devices, improving patient outcomes. This wave of innovation has translated into strong financial performance and heightened investor interest.
+                    </div>
+                    <div className="e-card-actions">
+                      <a href="https://ej2.syncfusion.com/" target="_blank" rel="noopener noreferrer">
+                        Read More
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
+                  <div className="e-card card8" id="weather_card">
+                    <div className="e-card-header">
+                      <div className="e-card-header-caption">
+                        <div className="e-card-header-title">
+                          Green Energy Expansion
+                        </div>
+                      </div>
+                    </div>
+                    <div className="e-card-content">
+                      Renewable energy companies are rapidly scaling operations to meet global sustainability goals. These efforts have led to impressive stock growth, making the sector a key focus for forward-thinking investors.
+                    </div>
+                    <div className="e-card-actions">
+                      <a href="https://ej2.syncfusion.com/" target="_blank" rel="noopener noreferrer">
+                        Read More
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-xs-4 col-sm-4 col-lg-4 col-md-4">
+                  <div className="e-card card9" id="weather_card">
+                    <div className="e-card-header">
+                      <div className="e-card-header-caption">
+                        <div className="e-card-header-title">
+                          Tech Giants Lead the Charge
+                        </div>
+                      </div>
+                    </div>
+                    <div className="e-card-content">
+                      The tech industry is at the forefront of innovation, with giants leveraging cutting-edge technologies to redefine possibilities. Investing in these companies presents promising growth opportunities as they expand into emerging markets.
+                    </div>
+                    <div className="e-card-actions">
+                      <a href="https://ej2.syncfusion.com/" target="_blank" rel="noopener noreferrer">
+                        Read More
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>

diff --git a/Stock-Market-Application/src/components/Overview.tsx b/Stock-Market-Application/src/components/Overview.tsx
@@ -244,7 +244,7 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
               enableHover={false}
               commandClick={commandClick}
               destroyed={destroyed}
-              height={341}
+              height={250}
             >
               <ColumnsDirective>
                 <ColumnDirective

diff --git a/Stock-Market-Application/src/components/SmartStockPicks.tsx b/Stock-Market-Application/src/components/SmartStockPicks.tsx
@@ -202,7 +202,7 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
                 queryCellInfo={queryCellInfo}
                 commandClick={commandClick}
                 pageSettings={{ pageCount: 4, pageSize: 10 }}
-                height={330}
+                height={200}
               >
                 <ColumnsDirective>
                   <ColumnDirective

diff --git a/Stock-Market-Application/src/components/StockAnalysis.tsx b/Stock-Market-Application/src/components/StockAnalysis.tsx
@@ -61,7 +61,7 @@ export default function StockAnalysis() {
       {chartData.isDataReady && (
         <div className="chart-container">
           <div className='chartHeader'>{chartData.CompanyName}</div>
-          <StockChartComponent ref={chartObj} id='stockchartdefault' primaryXAxis={{ valueType: 'DateTimeCategory', majorGridLines: { width: 0 }, majorTickLines: { color: 'transparent' }, crosshairTooltip: { enable: true } }} primaryYAxis={{ labelFormat: 'n0', lineStyle: { width: 0 }, rangePadding: 'None', majorTickLines: { height: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true }} crosshair={{ enable: true }}>
+          <StockChartComponent ref={chartObj} id='stockchartdefault' primaryXAxis={{ valueType: 'DateTimeCategory', majorGridLines: { width: 0 }, majorTickLines: { color: 'transparent' }, crosshairTooltip: { enable: true } }} primaryYAxis={{ labelFormat: 'n0', lineStyle: { width: 0 }, rangePadding: 'None', majorTickLines: { height: 0 } }} chartArea={{ border: { width: 0 } }} tooltip={{ enable: true, shared: true }} crosshair={{ enable: true }} height='330px'>
                     <Inject services={[DateTime, DateTimeCategory, Tooltip, RangeTooltip, Crosshair, LineSeries, SplineSeries, CandleSeries, HiloOpenCloseSeries, HiloSeries, RangeAreaSeries, Trendlines, EmaIndicator, RsiIndicator, BollingerBands, TmaIndicator, MomentumIndicator, SmaIndicator, AtrIndicator, Export, AccumulationDistributionIndicator, MacdIndicator, StochasticIndicator]}/>
                     <StockChartSeriesCollectionDirective>
                         <StockChartSeriesDirective dataSource={chartData.data} xName='period' type='Candle' animation={{ enable: true }}/>

diff --git a/Stock-Market-Application/src/style.css b/Stock-Market-Application/src/style.css
@@ -16,13 +16,18 @@
   font-size: larger;
 }
 
+body {
+  height: 100vh;
+  margin: 0;
+}
+
 .nav {
   display: flex;
   align-items: center;
   background-color: #151e28;
   padding: 10px 20px;
   border-bottom: 1px solid #2C2C2C;
-  height: 65px;
+  height: 60px;
 }
 
 .nav-link {
@@ -309,10 +314,6 @@
   font-weight: bold;
 }
 
-.chart-container {
-  padding-top: 10px;
-}
-
 text#stockchartdefault_ChartTitle {
   fill: rgba(256, 256, 256, 1);
 }
@@ -358,10 +359,6 @@ text#stockchartdefault_ChartTitle {
   padding: 8px 16px 16px;
 }
 
-.e-card-content {
-  min-height: 120px;
-}
-
 .e-card.card1 {
   background-color: #E0F2FE;
 }
@@ -386,6 +383,16 @@ text#stockchartdefault_ChartTitle {
   background-color: #F0FDFA;
 }
 
+.e-card.card7 {
+  background-color: #FFEDD5;
+}
+.e-card.card8 {
+  background-color: #E7E5E4;
+}
+.e-card.card9 {
+  background-color: #E8EAF6;
+}
+
 .e-card .e-card-actions a,
 .e-card .e-card-actions a:hover {
   background-color: rgb(103, 80, 164);
@@ -396,7 +403,7 @@ text#stockchartdefault_ChartTitle {
 /* Know More */
 
 .control-pane .control-section.db-carousel-section {
-  height: 530px;
+  height: 400px;
   overflow-y: scroll;
 }