From 6b9ac1bc5ef1884ce48f8a1243fc6c841c6ad55f Mon Sep 17 00:00:00 2001
From: SakthivelG <sakthivel.govindan@tarento.com>
Date: Mon, 28 Mar 2022 14:59:04 +0530
Subject: [PATCH] refactor: update responsiveness classes
---
src/components/charts/GenericCharts.js | 109 ++++++------
src/components/common/Header.tsx | 224 ++++++++++++++++---------
2 files changed, 200 insertions(+), 133 deletions(-)
diff --git a/src/components/charts/GenericCharts.js b/src/components/charts/GenericCharts.js
index 6f2d361..9c48961 100644
--- a/src/components/charts/GenericCharts.js
+++ b/src/components/charts/GenericCharts.js
@@ -107,62 +107,69 @@ class GenericCharts extends React.Component {
className="chart-wrapper h-100 chart_card_one chart-wrapper-padding-2"
id={d.name}
>
- <div className="clearfix mb-3">
- <div className="float-start">
- <h5 className="pt-1 chart_title_one mb-0">{d.name}</h5>
- {d.description && (
- <label className="chart_card_description_one">
- {d.description}
- </label>
- )}
- </div>
- <div className="float-end">
- <div className="d-flex">
- <div
- id="fullScreenBtn"
- className="material-icons custom_cursor mt-2 black-60"
- onClick={() => {
- this.getModalData(
- d.name,
- d.description,
- d.charts,
- chartData.name,
- d.dimensions
- );
- }}
- >
- fullscreen
+ <div className="mb-3">
+ <div className="">
+ <div className="row">
+ <div className="col-10 col-md-8 col-lg-10">
+ <h5 className="pt-1 chart_title_one mb-0">{d.name}</h5>
</div>
- <div className="dropdown">
- <div
- className="material-icons custom_cursor mt-2 ms-2 black-60"
- id="dropdownMenuButton"
- data-bs-toggle="dropdown"
- aria-expanded="false"
- >
- more_vert
- </div>
- <div
- className="dropdown-menu dropdown-menu-custom p-0 m-0"
- aria-labelledby="dropdownMenuButton"
- >
- <p
- className="dropdown-item custom_cursor dropdown_text mt-3"
- onClick={() =>
- setTimeout(() => {
- domtoimage
- .toBlob(document.getElementById(d.name), {
- filter: this.filterImage,
- })
- .then((blob) => window.saveAs(blob, d.name));
- }, 250)
- }
+ <div className="col-2 col-md-4 col-lg-2">
+ <div className="d-flex">
+ <div
+ id="fullScreenBtn"
+ className="material-icons custom_cursor mt-2 black-60"
+ onClick={() => {
+ this.getModalData(
+ d.name,
+ d.description,
+ d.charts,
+ chartData.name,
+ d.dimensions
+ );
+ }}
>
- Download as PNG
- </p>
+ fullscreen
+ </div>
+ <div className="dropdown">
+ <div
+ className="material-icons custom_cursor mt-2 ms-2 black-60"
+ id="dropdownMenuButton"
+ data-bs-toggle="dropdown"
+ aria-expanded="false"
+ >
+ more_vert
+ </div>
+ <div
+ className="dropdown-menu dropdown-menu-custom p-0 m-0"
+ aria-labelledby="dropdownMenuButton"
+ >
+ <p
+ className="dropdown-item custom_cursor dropdown_text mt-3"
+ onClick={() =>
+ setTimeout(() => {
+ domtoimage
+ .toBlob(document.getElementById(d.name), {
+ filter: this.filterImage,
+ })
+ .then((blob) =>
+ window.saveAs(blob, d.name)
+ );
+ }, 250)
+ }
+ >
+ Download as PNG
+ </p>
+ </div>
+ </div>
</div>
</div>
</div>
+
+ {d.description && (
+ <label className="chart_card_description_one">
+ {d.description}
+ </label>
+ )}
</div>
</div>
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index eafe618..9901d19 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -11,18 +11,18 @@ import { Breadcrumbs } from "./Breadcrumbs";
* Header component
*/
interface LoginProps {
- history: any
- breadCrumb?: any
+ history: any;
+ breadCrumb?: any;
}
interface LoginState {
- userName: any
+ userName: any;
}
class Header extends Component<LoginProps, LoginState> {
constructor(props: any) {
super(props);
this.state = {
- userName: Auth.get('username'),
+ userName: Auth.get("username"),
};
this.logout = this.logout.bind(this);
}
@@ -30,47 +30,54 @@ class Header extends Component<LoginProps, LoginState> {
getUserInitials(userName: string) {
// console.log('userName: ', userName)
if (userName) {
- const userNameArr = userName.split('.').slice(0, 2)
- return userNameArr.map((u) => u[0]).join('').toUpperCase()
+ const userNameArr = userName.split(".").slice(0, 2);
+ return userNameArr
+ .map((u) => u[0])
+ .join("")
+ .toUpperCase();
} else {
- return ''
+ return "";
}
}
logout() {
UserService.logout();
this.props.history.push("/login");
- };
+ }
render() {
return (
<Fragment>
<div className="container-fluid white-bg">
-
<div className="container top-header">
- <div
- className="row"
- >
+ <div className="row">
<div className="col-6 pt-3">
- <img src="./../../img/smf-header-logo.svg" className="img-fluid" alt="SMF logo" />
+ <img
+ src="./../../img/smf-header-logo.svg"
+ className="img-fluid"
+ alt="SMF logo"
+ />
</div>
<div className="col-6 pt-3">
<div className="dropdown">
- <div className="float-right user-name-avatar"
+ <div
+ className="float-right user-name-avatar"
role="button"
id="dropdownMenuLinkThree"
data-toggle="dropdown"
aria-haspopup="true"
- aria-expanded="false">
+ aria-expanded="false"
+ >
<span>
- {this.getUserInitials(this.state.userName && this.state.userName || 'G')}
+ {this.getUserInitials(
+ (this.state.userName && this.state.userName) || "G"
+ )}
</span>
</div>
<div
className="dropdown-menu profileDropdown mr-5 cursorStyleOne"
aria-labelledby="dropdownMenuLinkThree"
>
-
<p
className="dropdown-item dateFilterTextColor"
onClick={this.logout}
@@ -86,77 +93,130 @@ class Header extends Component<LoginProps, LoginState> {
<div className="row divider custom-divider"></div>
</div>
<div className="container top-header">
- <div
- className="row h100"
- >
- {
- (this.props.history.location.pathname.match("/dashboard") ||
+ <div className="row h100">
+ {(this.props.history.location.pathname.match("/dashboard") ||
!this.props.breadCrumb ||
- !this.props.breadCrumb.length) &&
+ !this.props.breadCrumb.length) && (
<ul className="smf-menu mt-3">
- <li className="mr-5 active">
- <Link to={"/dashboard"} className={`${this.props.history.location.pathname.match("/dashboard")
- ? "active"
- : ""
- }`}>HOME</Link>
- </li>
- {Helper.getUserRole() === APP.ROLE.INSTITUTION && (
- <li className="mr-5">
- <Link to={"/applications"} className={`${this.props.history.location.pathname.match("/applications")
- ? "active"
- : ""
- }`}>MY APPLICATIONS</Link>
- </li>
- )}
- {Helper.getUserRole() === APP.ROLE.INSTITUTION && (
- <li className="mr-5">
- <Link to={"/available-forms"} className={`${this.props.history.location.pathname.match("/available-forms")
- ? "active"
- : ""
- }`}>AVAILABLE FORMS</Link>
+ <li className="mr-3 mr-sm-2 mr-md-5 mr-lg-5 active">
+ <Link
+ to={"/dashboard"}
+ className={`${
+ this.props.history.location.pathname.match("/dashboard")
+ ? "active"
+ : ""
+ }`}
+ >
+ HOME
+ </Link>
</li>
- )}
- {Helper.getUserRole() === APP.ROLE.REGULATOR && (
- <>
- <li className="mr-5">
- <Link to={"/reviewer/all-applications"} className={`${this.props.history.location.pathname.match("/all-applications")
- ? "active"
- : ""
- }`}>ALL APPLICATIONS</Link>
+ {Helper.getUserRole() === APP.ROLE.INSTITUTION && (
+ <li className="mr-3 mr-sm-2 mr-md-5 mr-lg-5">
+ <Link
+ to={"/applications"}
+ className={`${
+ this.props.history.location.pathname.match(
+ "/applications"
+ )
+ ? "active"
+ : ""
+ }`}
+ >
+ MY APPLICATIONS
+ </Link>
</li>
- <li className="mr-5">
- <Link to={"/manage"} className={
- `${this.props.history.location.pathname.match("/manage") ||
- this.props.history.location.pathname.match("/forms")
- ? "active"
- : ""
- }`}>MANAGE</Link>
+ )}
+ {Helper.getUserRole() === APP.ROLE.INSTITUTION && (
+ <li className="mr-3 mr-sm-2 mr-md-5 mr-lg-5">
+ <Link
+ to={"/available-forms"}
+ className={`${
+ this.props.history.location.pathname.match(
+ "/available-forms"
+ )
+ ? "active"
+ : ""
+ }`}
+ >
+ AVAILABLE FORMS
+ </Link>
</li>
- </>
- )}
- {Helper.getUserRole() === APP.ROLE.INSPECTOR && (
- <li className="mr-5">
- <Link to={"/all-applications"} className={`${this.props.history.location.pathname.match("/all-applications")
- ? "active"
- : ""
- }`}>ALL APPLICATIONS</Link>
- </li>
- )}
- {Helper.getUserRole() === APP.ROLE.REGULATOR && (
- <li className="mr-5">
- <Link to={"/analytics"} className={`${this.props.history.location.pathname.match("/analytics")
- ? "active"
- : ""
- }`}>DASHBOARD</Link>
- </li>
+ )}
+ {Helper.getUserRole() === APP.ROLE.REGULATOR && (
+ <>
+ <li className="mr-3 mr-sm-2 mr-md-5 mr-lg-5">
+ <Link
+ to={"/reviewer/all-applications"}
+ className={`${
+ this.props.history.location.pathname.match(
+ "/all-applications"
+ )
+ ? "active"
+ : ""
+ }`}
+ >
+ ALL APPLICATIONS
+ </Link>
+ </li>
+ <li className="mr-3 mr-sm-2 mr-md-5 mr-lg-5">
+ <Link
+ to={"/manage"}
+ className={`${
+ this.props.history.location.pathname.match(
+ "/manage"
+ ) ||
+ this.props.history.location.pathname.match("/forms")
+ ? "active"
+ : ""
+ }`}
+ >
+ MANAGE
+ </Link>
+ </li>
+ </>
+ )}
+ {Helper.getUserRole() === APP.ROLE.INSPECTOR && (
+ <li className="mr-3 mr-sm-2 mr-md-5 mr-lg-5">
+ <Link
+ to={"/all-applications"}
+ className={`${
+ this.props.history.location.pathname.match(
+ "/all-applications"
+ )
+ ? "active"
+ : ""
+ }`}
+ >
+ ALL APPLICATIONS
+ </Link>
+ </li>
+ )}
+ {Helper.getUserRole() === APP.ROLE.REGULATOR && (
+ <li className="">
+ <Link
+ to={"/analytics"}
+ className={`${
+ this.props.history.location.pathname.match(
+ "/analytics"
+ )
+ ? "active"
+ : ""
+ }`}
+ >
+ DASHBOARD
+ </Link>
+ </li>
+ )}
+ </ul>
+ )}
+ {!this.props.history.location.pathname.match("/dashboard") &&
+ this.props.breadCrumb &&
+ this.props.breadCrumb.length > 0 && (
+ <Breadcrumbs
+ data={this.props.breadCrumb}
+ historyData={this.props.history}
+ />
)}
- </ul>
- }
- {
- !this.props.history.location.pathname.match("/dashboard") && this.props.breadCrumb && (this.props.breadCrumb.length > 0) &&
- <Breadcrumbs data={this.props.breadCrumb} historyData={this.props.history}/>
- }
-
</div>
</div>
</div>
--
GitLab