Merge pull request #3 from SyncfusionExamples/EJ2-932509-ui-change

932509: Need to change the attractive ui for employee management application

Author: jmfarook7

Employee_Managment_App/public/index.html

@@ -7,7 +7,7 @@
       rel="stylesheet"
     />
     <link
-      href="https://cdn.syncfusion.com/ej2/25.1.35/material3.css"
+      href="https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css"
       rel="stylesheet"
     />
     <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>

Employee_Managment_App/src/App.tsx

@@ -12,9 +12,6 @@ function App() {
 
   return (
     <div className="xyz-management">
-      <div className="xyz-management-header">
-        <div className="header-content">XYZ Software PVT LTD</div>
-      </div>
       <Router>
         <div className="xyz-management-content" style={{ width: '100%' }}>
           <div className="row">

Employee_Managment_App/src/components/Achievements.tsx

@@ -3,9 +3,6 @@ import * as React from 'react';
 const Achievements = () => {
   return (
     <div className="achievementspage">
-      <div className="achievements-header">
-        <div>Achievements</div>
-      </div>
       <div className="achievements-content">
         <div className="col-lg-12 control-section card-control-section horizontal_card_layout">
           <div className="e-card-resize-container">

Employee_Managment_App/src/components/Announcement.tsx

@@ -3,9 +3,6 @@ import * as React from 'react';
 const Announcement = () => {
   return (
     <div className="announcementpage">
-      <div className="announcement-header">
-        <div>Announcement</div>
-      </div>
       <div className="announcement-content">
         <div className="col-lg-12 card-control-section basic_card_layout">
           <div className="e-card-resize-container">

Employee_Managment_App/src/components/EmployeeInfo.tsx

@@ -237,10 +237,6 @@ const EmployeeInfo = (props: { employeeData?: EmployeeDetails; userInfo?: Employ
     };
     return (
         <div className="employeeinfopage">
-            <div className="employeeinfo-header">
-                {employeeData.Name === userInfo.Name ? 'My' : employeeData.Name + "'s"}{' '}
-                Profile
-            </div>
             <div className="employeeinfo-content">
                 <TabComponent heightAdjustMode="Auto">
                     <TabItemsDirective>

Employee_Managment_App/src/components/Organization.tsx

@@ -31,9 +31,6 @@ const Organization = () => {
   };
   return (
     <div className="employeespage">
-      <div className="employees-header">
-        <div>Organization</div>
-      </div>
       <div className="employees-content">
         <TabComponent heightAdjustMode="Auto">
           <TabItemsDirective>

Employee_Managment_App/src/components/Policies.tsx

@@ -3,9 +3,6 @@ import * as React from 'react';
 const Policies = () => {
   return (
     <div className="policiespage">
-      <div className="policies-header">
-        <div>Policies</div>
-      </div>
       <div className="policies-content">
         <div className="col-lg-12 card-control-section basic_card_layout">
           <div className="e-card-resize-container">

Employee_Managment_App/src/index.css

@@ -19,17 +19,18 @@
 
 .xyz-management-content {
   position: absolute;
-  top: 75px;
   height: 650px;
 }
 
 .xyz-management-content .col-md-2.sidebar {
-  height: 650px;
-  border-right: 1px solid rgb(0, 0, 0, 0.2);
-  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.04);
-  background-color: #ecf2f9;
-  padding-right: 0px;
+  width: 240px;
+  background-color: #ffffff;
+  color: #3a3b3c;
   position: fixed;
+  height: 100%;
+  padding-top: 20px;
+  border-right: 1px solid #e0e0e0;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
 }
 
 .xyz-management-content .col-md-10.main-content {
@@ -39,7 +40,20 @@
   left: 170px;
 }
 
-@media (min-width: 400px) {
+@media (max-width: 426px) {
+  .xyz-management-content .col-md-2.sidebar {
+    width: 155px;
+    float: left;
+  }
+  .xyz-management-content .col-md-10.main-content {
+    width: calc(100% - 170px);
+    float: left;
+    position: sticky;
+    left: 200px;
+  }
+}
+
+@media (min-width: 426px) and (max-width: 768px) {
   .xyz-management-content .col-md-2.sidebar {
     width: 185px;
     float: left;
@@ -49,11 +63,44 @@
     float: left;
   }
 }
+@media (min-width:1024px) {
+  .xyz-management-content .col-md-2.sidebar {
+    width: 185px;
+    float: left;
+  }
+  .xyz-management-content .col-md-10.main-content {
+    width: calc(100% - 170px);
+    float: left;
+  }
+}
+
+@media (max-width:600px) {
+  .detail .information {
+      display: block;
+      padding-left: 0px;
+  }
+  .detail .sub-heading {
+    width: 130px;
+    padding-right: 10px;
+  }
+}
+
+.nav > li {
+  align-items: center;
+/* padding: 15px 20px; */
+color: #3a3b3c;
+text-decoration: none;
+transition: background-color 0.3s ease, color 0.3s ease;
+font-weight: 500;
+margin-left: 10px;
+}
+
 .nav > li > a:focus,
 .nav > li > a.active,
 .nav > li > a:hover {
   text-decoration: none;
-  background-color: #eaddff;
+  background-color: #f0f2f5;
+  color: #007bff;
 }
 .policiespage a:focus,
 .policiespage a.active,
@@ -106,21 +153,21 @@ a.employee-popover:hover {
 
 /* Tooltip */
 
-.e-tooltip-template-css.e-tooltip-wrap.e-popup {
+.e-tooltip-wrap.e-popup {
   background-color: #eaddff;
   border: 1px solid #e0e0e0;
 }
-.e-tooltip-template-css.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
+.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
   border-top: 8px solid #e0e0e0;
 }
-.e-tooltip-template-css.e-tooltip-wrap .e-tip-content {
+.e-tooltip-wrap .e-tip-content {
   color: rgba(0, 0, 0, 0.87);
 }
-.e-tooltip-template-css.e-tooltip-wrap {
+.e-tooltip-wrap {
   opacity: 1;
 }
-.e-tooltip-template-css.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom,
-.e-tooltip-template-css.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
+.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom,
+.e-tooltip-wrap .e-arrow-tip-inner.e-tip-top {
   color: #eaddff;
 }
 
@@ -321,6 +368,22 @@ td.cardcell.separateline {
   }
 }
 
+@media (max-width: 600px) {
+  .card-control-section.basic_card_layout .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
+    width: 100%;
+  }
+
+  .achievements-content
+    .card-control-section.basic_card_layout
+    .col-xs-6.col-sm-6.col-lg-6.col-md-6 {
+    width: 100%;
+  }
+
+  .card-control-section.basic_card_layout .card-layout {
+    max-width: 600px;
+  }
+}
+
 /* Horizontal Card Layout Customization */
 
 .card-control-section.horizontal_card_layout