Merge pull request #14 from chaitanya4vedi/responsive_cascade

Responsive cascade
LoginRadius · Oct 7, 2020 · d9098bf · d9098bf
2 parents 3006705 + e6bd74a
commit d9098bf
Show file tree

Hide file tree

Showing 8 changed files with 2,808 additions and 4,247 deletions.
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,6 @@ scripts/*.csv
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# cache
+.idea
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,12 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^4.5.2",
     "moment": "^2.24.0",
     "qs": "^6.9.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-popper": "^2.2.3",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0",
+    "react-scripts": "^3.4.3",
+    "reactstrap": "^8.6.0",
     "semantic-ui-react": "^0.88.2",
     "typescript": "3.7.2"
   },
@@ -37,13 +40,14 @@
     ]
   },
   "devDependencies": {
-    "@types/qs": "^6.9.1",
     "@types/jest": "24.0.23",
     "@types/node": "12.12.7",
+    "@types/qs": "^6.9.1",
     "@types/react": "16.9.11",
     "@types/react-dom": "16.9.4",
     "@types/react-router-dom": "^5.1.2",
+    "@types/reactstrap": "^8.5.1",
     "csvtojson": "^2.0.10",
-    "node-sass": "^4.13.0"
+    "node-sass": "^4.14.1"
   }
 }
diff --git a/src/containers/App/index.tsx b/src/containers/App/index.tsx
@@ -23,7 +23,7 @@ class App extends React.Component<AppProps, AppState> {
             { name: "Open Source", link: "/opensource" }
           ]}
         />
-        <Routes />Î
+        <Routes />
       </React.Fragment>
     );
   }

diff --git a/src/containers/Navigation/index.tsx b/src/containers/Navigation/index.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { RouteComponentProps } from "react-router";
 import { Link, NavLink, withRouter } from "react-router-dom";
 import "./Navigation.scss";
+import {Nav, Navbar, NavItem} from "reactstrap";
 
 import config from "../../utils/config";
 
@@ -17,22 +18,17 @@ export interface NavigationState {}
 class Navigation extends React.Component<NavigationProps, NavigationState> {
   render() {
     return (
-      <div>
-        <div className="header-dark">
-          <nav className="navbar navbar-dark navbar-expand-md navigation-clean-search">
-            <div className="container">
+      <Navbar dark expand="lg" color="secondary">
+        <div className="container">
               <Link className="navbar-brand" to="/">
                 {this.props.title}
               </Link>
-              <button
-                className="navbar-toggler"
-                data-toggle="collapse"
-                data-target="#navcol-1"
-              >
-                <span className="sr-only">Toggle navigation</span>
-                <span className="navbar-toggler-icon"></span>
-              </button>
-              <div className="collapse navbar-collapse" id="navcol-1">
+          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar"
+                  aria-controls="Navbar"
+                  aria-expanded="false" aria-label="Toggle navigation">
+            <span className="navbar-toggler-icon"></span>
+          </button>
+              <div className="collapse navbar-collapse" id="Navbar">
                 <ul className="nav navbar-nav">
                   {this.props.sections.map((section, index) => {
                     return (
@@ -41,6 +37,8 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
                         className="nav-item"
                         role="presentation"
                       >
+                        <Nav pills>
+                        <NavItem className={"btn btn-block"}>
                         <NavLink
                           className={
                             "nav-link" +
@@ -52,20 +50,30 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
                         >
                           {section.name}
                         </NavLink>
+                        </NavItem>
+                        </Nav>
                       </li>
                     );
                   })}
+                  <NavItem className={"btn text-center btn-block-sm"}>
+                    <Link
+                        className={"nav-link"}
+                        to="/logout"
+                    >
+                      {"Logout"}
+                    </Link>
+                  </NavItem>
                 </ul>
               </div>
+
+
               {config.ENABLE_LOGIN && (
                 <Link className={"nav-link ml-auto text-white"} to="/logout">
                   {"Logout"}
                 </Link>
               )}
             </div>
-          </nav>
-        </div>
-      </div>
+      </Navbar>
     );
   }
 }

diff --git a/src/containers/People/index.tsx b/src/containers/People/index.tsx
@@ -104,19 +104,21 @@ class People extends React.Component<PeopleProps, PeopleState> {
 
     return (
       <div className="team-boxed">
-        <div className="container">
+        <div className="container text-center">
+          <div className="row">
           <div className="intro">
-            <h2 className="text-center">People </h2>
-            <p className="text-center">
-              This is our team, who help you bring a delighful user experience!
+            <h2>People </h2>
+            <p>
+              This is our team, who help you bring a delightful user experience!
             </p>
           </div>
 
+            <div className="row text-center">
+              <div className="col-12 col-sm-12">
           {Array.from(peopleCat.keys()).map((category, catIndex) => {
             return (
               <div className="teams mt-5" key={catIndex}>
-                <h1 className="text-left">{category}</h1>
-                <div className="row">
+                    <h1>{category}</h1>
                   {(peopleCat.get(category) || []).map((peep, index) => {
                     return (
                       <UserCard
@@ -130,9 +132,10 @@ class People extends React.Component<PeopleProps, PeopleState> {
                     );
                   })}
                 </div>
-              </div>
             );
           })}
+             </div>
+            </div>
 
           <Modal
             open={selectedProfile !== undefined}
@@ -203,6 +206,7 @@ class People extends React.Component<PeopleProps, PeopleState> {
             </Modal.Content>
           </Modal>
         </div>
+        </div>
       </div>
     );
   }

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import 'bootstrap/dist/css/bootstrap.min.css'
 import "./index.css";
 import App from "./containers/App";
 import * as serviceWorker from "./serviceWorker";

diff --git a/src/utils/config.tsx b/src/utils/config.tsx
@@ -1,4 +1,4 @@
-const APP_URL = "https://dev-home.devhub.lrinternal.com";
+const APP_URL = "https://cya4vd.hub.loginradius.com/auth.aspx";
 
 const ENABLE_LOGIN = false;